{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-slider",
  "title": "Time Slider",
  "description": "A playback timeline for seeking, with current and buffered progress plus time and thumbnail previews.",
  "dependencies": [
    "@videojs/core@10.0.0-beta.32",
    "@videojs/react@10.0.0-beta.32",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_resolve-class-name",
    "@videojs/_style-theme",
    "@videojs/slider"
  ],
  "files": [
    {
      "path": "ui/files/time-slider/time-slider.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../styles/theme.css';\nimport type { SliderPreviewOverflow } from '@videojs/core';\nimport { TimeSlider as TimeSliderPrimitive } from '@videojs/react';\nimport { Slider } from '@videojs/react';\nimport { SpinnerIcon as SpinnerIconPrimitive } from '@videojs/react/icons';\n\nimport { cn, resolveClassName } from '@/components/videojs/lib/resolve-class-name';\nimport { SliderBuffer, SliderFill, SliderThumb, SliderTrack } from '@/components/videojs/ui/slider';\n\nexport interface TimeSliderProps extends Omit<TimeSliderPrimitive.RootProps, 'children'> {\n  previewOverflow?: SliderPreviewOverflow | undefined;\n}\n\nexport function TimeSlider({ className, previewOverflow = 'visible', ...props }: TimeSliderProps = {}) {\n  return (\n    <TimeSliderPrimitive.Root\n      className={(state) =>\n        cn(\n          'group/slider relative flex flex-1 cursor-pointer items-center justify-center outline-hidden',\n          'rounded-media-pill',\n          'data-[orientation=horizontal]:[height:var(--media-slider-height,--spacing(8))] data-[orientation=horizontal]:min-w-20',\n          'data-[orientation=vertical]:h-20 data-[orientation=vertical]:w-8 data-[orientation=vertical]:min-w-0',\n          'media-time-slider',\n          resolveClassName(className, state)\n        )\n      }\n      {...props}\n    >\n      <TimeSliderPrimitive.Chapters\n        className={'relative flex size-full min-h-0 min-w-0 flex-1 items-center rounded-[inherit]'}\n        renderChapter={(props) => (\n          <div\n            className={\n              'group/chapter absolute inset-0 flex min-h-0 min-w-0 items-center justify-center [--media-chapter-inset-start:0.5] [--media-chapter-inset-end:0.5] first:[--media-chapter-inset-start:0] last:[--media-chapter-inset-end:0] data-[orientation=horizontal]:clip-media-chapter-x data-[orientation=vertical]:clip-media-chapter-y'\n            }\n            {...props}\n          >\n            <TimeSliderPrimitive.Track\n              render={<SliderTrack />}\n              className={\n                'transition-[height,width] duration-media-slow ease-out data-[orientation=horizontal]:clip-media-chapter-track-x data-[orientation=vertical]:clip-media-chapter-track-y group-data-highlighted/chapter:data-[orientation=horizontal]:h-1.75 group-data-highlighted/chapter:data-[orientation=vertical]:w-1.75'\n              }\n            >\n              <TimeSliderPrimitive.Buffer render={<SliderBuffer />} />\n              <TimeSliderPrimitive.Fill render={<SliderFill />} />\n            </TimeSliderPrimitive.Track>\n          </div>\n        )}\n      ></TimeSliderPrimitive.Chapters>\n      <TimeSliderPrimitive.Thumb\n        render={<SliderThumb />}\n        className={\n          'opacity-0 data-interactive:opacity-100 focus-visible:opacity-100 pointer-fine:group-hover/slider:scale-100 pointer-fine:group-hover/slider:opacity-100 scale-80'\n        }\n      />\n      <TimeSliderPrimitive.Preview\n        className={\n          'group/preview relative h-1 [--media-slider-preview-max-height:var(--media-slider-preview-max-width)] media-wide:[--media-slider-preview-max-width:min(--spacing(48),100cqi)] before:pointer-events-none before:absolute before:z-1 before:-translate-1/2 before:scale-50 before:opacity-0 before:transition-[opacity,scale] before:duration-media-slow before:ease-out data-pointing:not-data-dragging:before:scale-100 data-pointing:not-data-dragging:before:opacity-100 min-w-(--media-slider-preview-max-width) [--media-slider-preview-max-width:min(--spacing(36),100cqi)] before:top-1/2 before:left-1/2 before:size-1 before:rounded-media-control before:bg-current'\n        }\n        overflow={previewOverflow}\n      >\n        <div\n          className={cn(\n            'absolute max-w-(--media-slider-preview-max-width) -translate-x-1/2 translate-y-media-hidden-preview-offset scale-media-hidden-preview opacity-0',\n            'origin-bottom blur-media-hidden',\n            'transition-[filter,opacity,scale] duration-media-base ease-out',\n            'group-data-pointing/preview:scale-100 group-data-pointing/preview:opacity-100 group-data-pointing/preview:filter-none',\n            'group-has-focus-visible/slider:scale-100 group-has-focus-visible/slider:opacity-100 group-has-focus-visible/slider:filter-none',\n            'bg-media-popover text-media-popover-foreground surface-media after:surface-media-inset',\n            'group/thumbnail pointer-events-none overflow-hidden rounded-media-popup bg-media-backdrop/90',\n            'bottom-[calc(100%+var(--media-slider-preview-offset))]',\n            'has-[[data-loading]]:aspect-video has-[[data-loading]]:w-(--media-slider-preview-max-width)',\n            'left-1/2'\n          )}\n        >\n          <Slider.Thumbnail\n            className={\n              'relative block max-h-(--media-slider-preview-max-height) max-w-(--media-slider-preview-max-width) overflow-clip rounded-[inherit] transition-opacity duration-media-base ease-out data-loading:opacity-0 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-(image:--media-thumbnail-gradient)'\n            }\n          />\n          <SpinnerIconPrimitive\n            className={\n              'absolute top-1/2 left-1/2 size-media-icon -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-media-base ease-out group-not-has-[[role=img][data-loading]]/thumbnail:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/thumbnail:opacity-100 drop-shadow-media-icon'\n            }\n          />\n        </div>\n        <div\n          className={cn(\n            'absolute max-w-(--media-slider-preview-max-width) -translate-x-1/2 translate-y-media-hidden-preview-offset scale-media-hidden-preview opacity-0',\n            'origin-bottom blur-media-hidden',\n            'transition-[filter,opacity,scale] duration-media-base ease-out',\n            'group-data-pointing/preview:scale-100 group-data-pointing/preview:opacity-100 group-data-pointing/preview:filter-none',\n            'group-has-focus-visible/slider:scale-100 group-has-focus-visible/slider:opacity-100 group-has-focus-visible/slider:filter-none',\n            'flex bottom-[calc(100%+var(--media-slider-preview-label-offset))] tabular-nums',\n            'left-1/2 flex-col items-center'\n          )}\n        >\n          <TimeSliderPrimitive.ChapterTitle\n            className={'max-w-(--media-slider-preview-max-width) min-w-0 truncate empty:hidden px-6'}\n          />\n          <TimeSliderPrimitive.Value className={'tabular-nums'} type=\"pointer\" />\n        </div>\n      </TimeSliderPrimitive.Preview>\n    </TimeSliderPrimitive.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/time-slider.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "Installs `@/components/videojs/ui/time-slider.tsx` for use inside a compatible Video.js Player or Skin.\n\n```tsx\nimport { TimeSlider } from '@/components/videojs/ui/time-slider';\n\nexport function Controls() {\n  return <TimeSlider />;\n}\n```",
  "categories": [
    "media",
    "sliders"
  ],
  "type": "registry:ui"
}