{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "videojs",
  "homepage": "https://videojs.org",
  "items": [
    {
      "name": "audio",
      "title": "Default Audio Skin",
      "description": "A complete on-demand audio skin with playback, seeking, volume, speed, and feedback controls.",
      "dependencies": [
        "@videojs/core@10.3.0",
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/buffering-indicator",
        "@videojs/button",
        "@videojs/button-tooltip",
        "@videojs/container",
        "@videojs/play-button",
        "@videojs/playback-rate-button",
        "@videojs/radio-item",
        "@videojs/seek-button",
        "@videojs/slider",
        "@videojs/status-announcer",
        "@videojs/volume-popover"
      ],
      "files": [
        {
          "path": "skins/files/audio/audio/behaviors/playback-hotkeys.tsx",
          "type": "registry:component",
          "target": "@components/videojs/audio/behaviors/playback-hotkeys.tsx"
        },
        {
          "path": "skins/files/audio/audio/buttons/play-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/audio/buttons/play-button.tsx"
        },
        {
          "path": "skins/files/audio/audio/dialogs/error-dialog.tsx",
          "type": "registry:component",
          "target": "@components/videojs/audio/dialogs/error-dialog.tsx"
        },
        {
          "path": "skins/files/audio/audio/layout/controls.tsx",
          "type": "registry:component",
          "target": "@components/videojs/audio/layout/controls.tsx"
        },
        {
          "path": "skins/files/audio/audio/menus/settings-menu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/audio/menus/settings-menu.tsx"
        },
        {
          "path": "skins/files/audio/audio/skin.tsx",
          "type": "registry:component",
          "target": "@components/videojs/audio/skin.tsx"
        },
        {
          "path": "skins/files/audio/audio/sliders/time-slider.tsx",
          "type": "registry:component",
          "target": "@components/videojs/audio/sliders/time-slider.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "skin",
        "styling": "tailwind",
        "preset": "audio",
        "media": "audio",
        "public": true
      },
      "docs": "Requires `@videojs/react@10.3.0`, which is installed with this item. The native media element below handles browser-supported sources; [install a playback adapter](https://videojs.org/docs/framework/react/concepts/media-sources/) for HLS, DASH, embeds, or another engine.\n\n```tsx\nimport { Audio, AudioPlayer } from '@videojs/react/audio';\n\nimport { AudioSkin } from '@/components/videojs/audio/skin';\n\nexport function Player({ src }: { src: string }) {\n  return (\n    <AudioPlayer>\n      <AudioSkin className=\"aspect-video w-full\">\n        <Audio src={src} />\n      </AudioSkin>\n    </AudioPlayer>\n  );\n}\n```",
      "categories": [
        "media",
        "skins",
        "audio"
      ],
      "type": "registry:block"
    },
    {
      "name": "live-audio",
      "title": "Default Live Audio Skin",
      "description": "A complete live audio skin with play, live-edge, volume, error, and keyboard feedback controls.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/buffering-indicator",
        "@videojs/button",
        "@videojs/button-tooltip",
        "@videojs/container",
        "@videojs/live-button",
        "@videojs/play-button",
        "@videojs/status-announcer",
        "@videojs/volume-popover"
      ],
      "files": [
        {
          "path": "skins/files/live-audio/live-audio/behaviors/live-playback-hotkeys.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-audio/behaviors/live-playback-hotkeys.tsx"
        },
        {
          "path": "skins/files/live-audio/live-audio/buttons/play-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-audio/buttons/play-button.tsx"
        },
        {
          "path": "skins/files/live-audio/live-audio/dialogs/error-dialog.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-audio/dialogs/error-dialog.tsx"
        },
        {
          "path": "skins/files/live-audio/live-audio/layout/controls.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-audio/layout/controls.tsx"
        },
        {
          "path": "skins/files/live-audio/live-audio/skin.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-audio/skin.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "skin",
        "styling": "tailwind",
        "preset": "live-audio",
        "media": "audio",
        "public": true
      },
      "docs": "Requires `@videojs/react@10.3.0`, which is installed with this item. The native media element below handles browser-supported sources; [install a playback adapter](https://videojs.org/docs/framework/react/concepts/media-sources/) for HLS, DASH, embeds, or another engine.\n\n```tsx\nimport { Audio, LiveAudioPlayer } from '@videojs/react/live-audio';\n\nimport { LiveAudioSkin } from '@/components/videojs/live-audio/skin';\n\nexport function Player({ src }: { src: string }) {\n  return (\n    <LiveAudioPlayer>\n      <LiveAudioSkin className=\"aspect-video w-full\">\n        <Audio src={src} />\n      </LiveAudioSkin>\n    </LiveAudioPlayer>\n  );\n}\n```",
      "categories": [
        "media",
        "skins",
        "live-audio"
      ],
      "type": "registry:block"
    },
    {
      "name": "live-video",
      "title": "Default Live Video Skin",
      "description": "A complete live video skin with live-edge, captions, remote playback, feedback, and input controls.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-video",
        "@videojs/airplay-button",
        "@videojs/buffering-indicator",
        "@videojs/button-tooltip",
        "@videojs/captions-menu",
        "@videojs/cast-button",
        "@videojs/container",
        "@videojs/error-dialog",
        "@videojs/fullscreen-button",
        "@videojs/live-button",
        "@videojs/pip-button",
        "@videojs/play-button",
        "@videojs/poster",
        "@videojs/status-announcer",
        "@videojs/status-indicator",
        "@videojs/title",
        "@videojs/volume-indicator",
        "@videojs/volume-popover"
      ],
      "files": [
        {
          "path": "skins/files/live-video/live-video/behaviors/gestures.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-video/behaviors/gestures.tsx"
        },
        {
          "path": "skins/files/live-video/live-video/behaviors/hotkeys.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-video/behaviors/hotkeys.tsx"
        },
        {
          "path": "skins/files/live-video/live-video/behaviors/live-playback-hotkeys.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-video/behaviors/live-playback-hotkeys.tsx"
        },
        {
          "path": "skins/files/live-video/live-video/display/status-indicators.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-video/display/status-indicators.tsx"
        },
        {
          "path": "skins/files/live-video/live-video/layout/controls.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-video/layout/controls.tsx"
        },
        {
          "path": "skins/files/live-video/live-video/skin.tsx",
          "type": "registry:component",
          "target": "@components/videojs/live-video/skin.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "skin",
        "styling": "tailwind",
        "preset": "live-video",
        "media": "video",
        "public": true
      },
      "docs": "Requires `@videojs/react@10.3.0`, which is installed with this item. The native media element below handles browser-supported sources; [install a playback adapter](https://videojs.org/docs/framework/react/concepts/media-sources/) for HLS, DASH, embeds, or another engine.\n\n```tsx\nimport { Video, LiveVideoPlayer } from '@videojs/react/live-video';\n\nimport { LiveVideoSkin } from '@/components/videojs/live-video/skin';\n\nexport function Player({ src }: { src: string }) {\n  return (\n    <LiveVideoPlayer>\n      <LiveVideoSkin className=\"aspect-video w-full\">\n        <Video src={src} />\n      </LiveVideoSkin>\n    </LiveVideoPlayer>\n  );\n}\n```",
      "categories": [
        "media",
        "skins",
        "live-video"
      ],
      "type": "registry:block"
    },
    {
      "name": "video",
      "title": "Default Video Skin",
      "description": "A complete on-demand video skin with responsive controls, settings, feedback, and input controls.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-video",
        "@videojs/airplay-button",
        "@videojs/audio-track-menu",
        "@videojs/buffering-indicator",
        "@videojs/button-tooltip",
        "@videojs/captions-button",
        "@videojs/captions-submenu",
        "@videojs/cast-button",
        "@videojs/container",
        "@videojs/error-dialog",
        "@videojs/fullscreen-button",
        "@videojs/pip-button",
        "@videojs/play-button",
        "@videojs/playback-rate-submenu",
        "@videojs/poster",
        "@videojs/quality-menu",
        "@videojs/seek-indicator",
        "@videojs/settings-menu",
        "@videojs/status-announcer",
        "@videojs/status-indicator",
        "@videojs/time-slider",
        "@videojs/title",
        "@videojs/volume-indicator",
        "@videojs/volume-popover"
      ],
      "files": [
        {
          "path": "skins/files/video/video/behaviors/gestures.tsx",
          "type": "registry:component",
          "target": "@components/videojs/video/behaviors/gestures.tsx"
        },
        {
          "path": "skins/files/video/video/behaviors/hotkeys.tsx",
          "type": "registry:component",
          "target": "@components/videojs/video/behaviors/hotkeys.tsx"
        },
        {
          "path": "skins/files/video/video/behaviors/playback-hotkeys.tsx",
          "type": "registry:component",
          "target": "@components/videojs/video/behaviors/playback-hotkeys.tsx"
        },
        {
          "path": "skins/files/video/video/display/status-indicators.tsx",
          "type": "registry:component",
          "target": "@components/videojs/video/display/status-indicators.tsx"
        },
        {
          "path": "skins/files/video/video/layout/controls.tsx",
          "type": "registry:component",
          "target": "@components/videojs/video/layout/controls.tsx"
        },
        {
          "path": "skins/files/video/video/menus/settings-menu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/video/menus/settings-menu.tsx"
        },
        {
          "path": "skins/files/video/video/skin.tsx",
          "type": "registry:component",
          "target": "@components/videojs/video/skin.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "skin",
        "styling": "tailwind",
        "preset": "video",
        "media": "video",
        "public": true
      },
      "docs": "Requires `@videojs/react@10.3.0`, which is installed with this item. The native media element below handles browser-supported sources; [install a playback adapter](https://videojs.org/docs/framework/react/concepts/media-sources/) for HLS, DASH, embeds, or another engine.\n\n```tsx\nimport { Video, VideoPlayer } from '@videojs/react/video';\n\nimport { VideoSkin } from '@/components/videojs/video/skin';\n\nexport function Player({ src }: { src: string }) {\n  return (\n    <VideoPlayer>\n      <VideoSkin className=\"aspect-video w-full\">\n        <Video src={src} />\n      </VideoSkin>\n    </VideoPlayer>\n  );\n}\n```",
      "categories": [
        "media",
        "skins",
        "video"
      ],
      "type": "registry:block"
    },
    {
      "name": "_menu-chevron",
      "title": "Video.js Menu Chevron",
      "description": "Private menu direction indicator shared by editable Video.js menu components.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "cn",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name"
      ],
      "files": [
        {
          "path": "support/files/_menu-chevron/menu-chevron.tsx",
          "type": "registry:lib",
          "target": "@components/videojs/ui/menu-chevron.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "support",
        "styling": "tailwind",
        "public": false
      },
      "docs": "Installed automatically by the Video.js menu components that use it.",
      "type": "registry:lib"
    },
    {
      "name": "_resolve-class-name",
      "title": "Video.js Utilities",
      "description": "Merges and resolves state-aware class names used by editable Video.js React components.",
      "dependencies": [
        "cn"
      ],
      "files": [
        {
          "path": "support/files/_resolve-class-name/resolve-class-name.ts",
          "type": "registry:lib",
          "target": "@lib/resolve-class-name.ts"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "support",
        "styling": "tailwind",
        "public": false
      },
      "docs": "Installed automatically with React components. Its `cn` merges Video.js Tailwind theme keys such as `text-media`.",
      "type": "registry:lib"
    },
    {
      "name": "_style-audio",
      "title": "Video.js audio styles",
      "description": "Editable resets and token overrides used only by audio skins.",
      "registryDependencies": [
        "@videojs/_style-theme"
      ],
      "files": [
        {
          "path": "support/files/_style-audio/styles/audio/base.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/audio/base.css"
        },
        {
          "path": "support/files/_style-audio/styles/audio/theme.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/audio/theme.css"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "support",
        "styling": "tailwind",
        "public": false
      },
      "type": "registry:style"
    },
    {
      "name": "_style-theme",
      "title": "Video.js media theme",
      "description": "Editable shared media tokens, resets, preferences, and Tailwind compiler integration.",
      "files": [
        {
          "path": "support/files/_style-theme/styles/base.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/base.css"
        },
        {
          "path": "support/files/_style-theme/styles/themes/preferences.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/themes/preferences.css"
        },
        {
          "path": "support/files/_style-theme/styles/themes/theme.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/themes/theme.css"
        }
      ],
      "cssVars": {
        "theme": {
          "color-media-accent": "var(--media-accent)",
          "color-media-background": "var(--media-background)",
          "color-media-border": "var(--media-border)",
          "color-media-controls": "var(--media-controls)",
          "color-media-controls-foreground": "var(--media-controls-foreground)",
          "color-media-foreground": "var(--media-foreground)",
          "color-media-live": "var(--media-live-color)",
          "color-media-muted": "var(--media-muted)",
          "color-media-muted-foreground": "var(--media-muted-foreground)",
          "color-media-popover": "var(--media-popover)",
          "color-media-popover-foreground": "var(--media-popover-foreground)",
          "color-media-primary": "var(--media-primary)",
          "color-media-primary-foreground": "var(--media-primary-foreground)",
          "color-media-ring": "var(--media-ring)",
          "color-media-backdrop": "var(--media-backdrop)",
          "container-media-280": "17.5rem",
          "container-media-xs": "20rem",
          "container-media-360": "22.5rem",
          "container-media-sm": "24rem",
          "container-media-md": "28rem",
          "container-media-lg": "32rem",
          "container-media-xl": "36rem",
          "container-media-2xl": "42rem",
          "container-media-dialog": "var(--media-dialog-max-width)",
          "text-media-xs": ".7em",
          "text-media-sm": "calc(var(--media-spacing) * 2.75)",
          "text-media": "calc(var(--media-spacing) * 3.25)",
          "text-media-lg": "calc(var(--media-spacing) * 3.75)",
          "text-media-xl": "calc(var(--media-spacing) * 4.25)",
          "spacing-media-icon-sm": "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 7 / 9)",
          "spacing-media-icon": "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
          "spacing-media-icon-lg": "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5)",
          "spacing-media-icon-xl": "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 2)",
          "spacing-media-control": "var(--media-control-size)",
          "spacing-media-dialog-width": "var(--media-dialog-width)",
          "radius-media-control": "var(--media-control-radius)",
          "radius-media-controls": "var(--media-controls-radius)",
          "radius-media-dialog": "var(--media-dialog-radius)",
          "radius-media-menu-item": "var(--media-menu-item-radius)",
          "radius-media-pill": "9999px",
          "radius-media-player": "var(--media-video-border-radius)",
          "radius-media-popup": "var(--media-popup-radius)",
          "drop-shadow-media-icon": "0 1px 0 var(--media-shadow-current-color)",
          "shadow-media-hairline": "0 0 0 1px var(--media-border)",
          "shadow-media-separator": "var(--media-shadow-separator)",
          "shadow-media-thumb": "var(--media-shadow-thumb)",
          "shadow-media-tooltip": "var(--media-shadow-tooltip)",
          "text-shadow-media": "0 1px 0 var(--media-shadow-current-color)",
          "text-shadow-media-dialog": "var(--media-text-shadow-dialog)",
          "backdrop-filter-media-indicator": "var(--media-backdrop-filter-indicator)",
          "backdrop-filter-media-dialog": "var(--media-backdrop-filter-dialog)",
          "filter-media-feedback": "var(--media-filter-feedback)",
          "duration-media-instant": "var(--media-duration-instant)",
          "duration-media-fast": "var(--media-duration-fast)",
          "duration-media-base": "var(--media-duration)",
          "duration-media-slow": "var(--media-duration-slow)",
          "duration-media-slower": "var(--media-duration-slower)",
          "duration-media-controls": "var(--media-duration-controls)",
          "duration-media-controls-enter": "calc(var(--media-duration-controls) / 2)",
          "duration-media-menu": "var(--media-duration-menu)",
          "duration-media-dialog": "var(--media-duration-dialog)",
          "duration-media-indicator": "var(--media-duration-indicator)",
          "duration-media-slider": "var(--media-duration-slider)",
          "delay-media-dialog": "var(--media-delay-dialog)",
          "scale-media-hidden": "var(--media-hidden-scale)",
          "scale-media-hidden-indicator": "var(--media-hidden-indicator-scale)",
          "scale-media-hidden-playback": "var(--media-hidden-playback-scale)",
          "scale-media-hidden-icon": "var(--media-hidden-icon-scale)",
          "scale-media-hidden-popup": "var(--media-hidden-popup-scale)",
          "scale-media-hidden-preview": "var(--media-hidden-preview-scale)",
          "blur-media-hidden": "var(--media-hidden-blur)",
          "blur-media-hidden-popup": "var(--media-hidden-popup-blur)",
          "spacing-media-hidden-offset": "var(--media-hidden-offset)",
          "spacing-media-hidden-indicator-offset": "var(--media-hidden-indicator-offset)",
          "spacing-media-hidden-preview-offset": "var(--media-hidden-preview-offset)",
          "spacing-media-hidden-seek-offset": "var(--media-hidden-seek-offset)"
        }
      },
      "css": {
        "@utility duration-media-*": {
          "transition-duration": "--value(--duration-media-*)"
        },
        "@utility delay-media-*": {
          "transition-delay": "--value(--delay-media-*)"
        },
        "@utility filter-media-*": {
          "filter": "--value(--filter-media-*)"
        },
        "@utility backdrop-filter-media-*": {
          "backdrop-filter": "--value(--backdrop-filter-media-*)"
        },
        "@utility font-media": {
          "font-family": "var(--media-font-family, \"Inter Variable\", Inter, ui-sans-serif, system-ui, sans-serif)"
        },
        "@custom-variant media-high-contrast": {
          "@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)": {
            "@slot": {}
          }
        },
        "@custom-variant media-280": {
          "@container media-root (width > theme(--container-media-280))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-280": {
          "@container media-root (width <= theme(--container-media-280))": {
            "@slot": {}
          }
        },
        "@custom-variant media-xs": {
          "@container media-root (width >= theme(--container-media-xs))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-xs": {
          "@container media-root (width < theme(--container-media-xs))": {
            "@slot": {}
          }
        },
        "@custom-variant media-360": {
          "@container media-root (width >= theme(--container-media-360))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-360": {
          "@container media-root (width < theme(--container-media-360))": {
            "@slot": {}
          }
        },
        "@custom-variant media-sm": {
          "@container media-root (width >= theme(--container-media-sm))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-sm": {
          "@container media-root (width < theme(--container-media-sm))": {
            "@slot": {}
          }
        },
        "@custom-variant media-md": {
          "@container media-root (width >= theme(--container-media-md))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-md": {
          "@container media-root (width < theme(--container-media-md))": {
            "@slot": {}
          }
        },
        "@custom-variant media-lg": {
          "@container media-root (width >= theme(--container-media-lg))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-lg": {
          "@container media-root (width < theme(--container-media-lg))": {
            "@slot": {}
          }
        },
        "@custom-variant media-xl": {
          "@container media-root (width >= theme(--container-media-xl))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-xl": {
          "@container media-root (width < theme(--container-media-xl))": {
            "@slot": {}
          }
        },
        "@custom-variant media-2xl": {
          "@container media-root (width >= theme(--container-media-2xl))": {
            "@slot": {}
          }
        },
        "@custom-variant media-max-2xl": {
          "@container media-root (width < theme(--container-media-2xl))": {
            "@slot": {}
          }
        },
        "@custom-variant media-highlighted": {
          "&:where(:focus-visible, [aria-expanded=\"true\"], [data-highlighted]):where(:not([aria-disabled=\"true\"]))": {
            "@slot": {}
          }
        },
        "@custom-variant media-transitioning": {
          "&:is([data-starting-style], [data-ending-style])": {
            "@slot": {}
          }
        },
        "@custom-variant media-anchored": {
          "@supports (top: anchor(top))": {
            "@slot": {}
          }
        },
        "@utility highlight-media": {
          "background-color": "var(--media-accent)",
          "color": "var(--media-accent-foreground)"
        },
        "@utility surface-media": {
          "box-shadow": "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
          "backdrop-filter": "var(--media-backdrop-filter-surface)"
        },
        "@utility surface-media-inset": {
          "position": "absolute",
          "inset": "0",
          "z-index": "10",
          "pointer-events": "none",
          "border-radius": "inherit",
          "box-shadow": "var(--media-shadow-surface-inset)"
        },
        "@utility surface-media-none": {
          "background-color": "transparent",
          "box-shadow": "none",
          "backdrop-filter": "none"
        },
        "@utility focus-ring-media": {
          "outline": "2px solid transparent",
          "outline-offset": "-2px"
        },
        "@utility mask-media-volume": {
          "mask-repeat": "no-repeat",
          "mask-position": "100% 0",
          "transition": "mask-position var(--media-duration-instant) ease-out"
        },
        "@utility mask-media-volume-open": {
          "mask-image": "linear-gradient(to right, transparent 10%, black 25%, black 100%)",
          "mask-position": "0 0"
        },
        "@utility nudge-media": {
          "transform": "translateX(0.25px)",
          "transition": "transform 300ms linear(0, -24 20%, 16 40%, -8 60%, 4 80%, 1)"
        },
        "@utility layer-media": {
          "position": "absolute",
          "inset": "0",
          "width": "100%",
          "height": "100%",
          "border-radius": "inherit"
        },
        "@utility object-media": {
          "object-fit": "var(--media-object-fit, contain)",
          "object-position": "var(--media-object-position, center)"
        },
        "@utility transition-media-popup": {
          "transition-property": "opacity, filter, transform, scale",
          "transition-duration": "var(--media-duration-fast)",
          "transition-timing-function": "cubic-bezier(0, 0, 0.2, 1)"
        },
        "@utility transition-media-menu-resize": {
          "transition-property": "opacity, filter, transform, scale, width, height",
          "transition-duration": "var(--media-duration-fast), var(--media-duration-fast), var(--media-duration-fast), var(--media-duration-fast), var(--media-duration-menu), var(--media-duration-menu)"
        },
        "@utility motion-media-*": {
          "transition-property": "--value([*])",
          "will-change": "--value([*])"
        },
        "@utility anchor-media-highlight": {
          "position": "absolute",
          "position-anchor": "--media-menu-item-highlight-anchor",
          "inset": "anchor(inside)",
          "overflow-anchor": "none",
          "pointer-events": "none",
          "border-radius": "var(--media-menu-item-radius)",
          "background-color": "var(--media-accent)",
          "transition": "inset var(--media-duration-fast) ease-in-out"
        },
        "@utility clip-media-x-*": {
          "left": "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
          "right": "max( calc(100% - var(--value([*]), 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
          "clip-path": "inset(-1px 0)"
        },
        "@utility clip-media-y-*": {
          "bottom": "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
          "top": "max( calc(100% - var(--value([*]), 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
          "clip-path": "inset(0 -1px)"
        },
        "@utility clip-media-chapter-x": {
          "clip-path": "inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start))"
        },
        "@utility clip-media-chapter-y": {
          "clip-path": "inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0)"
        },
        "@utility clip-media-chapter-track-x": {
          "left": "calc(var(--media-slider-chapter-start) + var(--media-spacing) * var(--media-chapter-inset-start))",
          "right": "calc(100% - var(--media-slider-chapter-end) + var(--media-spacing) * var(--media-chapter-inset-end))",
          "clip-path": "inset(-1px)"
        },
        "@utility clip-media-chapter-track-y": {
          "top": "calc(100% - var(--media-slider-chapter-end) + var(--media-spacing) * var(--media-chapter-inset-end))",
          "bottom": "calc(var(--media-slider-chapter-start) + var(--media-spacing) * var(--media-chapter-inset-start))",
          "clip-path": "inset(-1px)"
        }
      },
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "support",
        "styling": "tailwind",
        "public": false
      },
      "docs": "Installed automatically with Video.js skins and UI components. Use UI components inside an installed skin, or set `data-theme=\"default\"` and `data-preset` on a custom `Container`. See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/) for theme customization.",
      "type": "registry:style"
    },
    {
      "name": "_style-video",
      "title": "Video.js video styles",
      "description": "Editable resets and token overrides used only by video skins.",
      "registryDependencies": [
        "@videojs/_style-theme"
      ],
      "files": [
        {
          "path": "support/files/_style-video/styles/video/base.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/video/base.css"
        },
        {
          "path": "support/files/_style-video/styles/video/captions.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/video/captions.css"
        },
        {
          "path": "support/files/_style-video/styles/video/theme.css",
          "type": "registry:style",
          "target": "@components/videojs/styles/video/theme.css"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "support",
        "styling": "tailwind",
        "public": false
      },
      "type": "registry:style"
    },
    {
      "name": "airplay-button",
      "title": "AirPlay Button",
      "description": "A state-aware button that starts and stops AirPlay playback.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/airplay-button/airplay-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/airplay-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`AirPlayButton` reference](https://videojs.org/docs/framework/react/reference/airplay-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "audio-track-menu",
      "title": "Audio Track Menu",
      "description": "A submenu for selecting an available audio track.",
      "dependencies": [
        "@videojs/core@10.3.0",
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_menu-chevron",
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/radio-item"
      ],
      "files": [
        {
          "path": "ui/files/audio-track-menu/audio-track-menu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/audio-track-menu.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "buffering-indicator",
      "title": "Buffering Indicator",
      "description": "A delayed spinner displayed while media is waiting for data.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/buffering-indicator/buffering-indicator.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/buffering-indicator.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`BufferingIndicator` reference](https://videojs.org/docs/framework/react/reference/buffering-indicator/).",
      "categories": [
        "media",
        "display"
      ],
      "type": "registry:ui"
    },
    {
      "name": "button",
      "title": "Button",
      "description": "The shared styled button used by media controls.",
      "dependencies": [
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/button/button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "button-tooltip",
      "title": "Button Tooltip",
      "description": "A tooltip that wraps a control button and shows its label and keyboard shortcut.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/button-tooltip/button-tooltip.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/button-tooltip.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "captions-button",
      "title": "Captions Button",
      "description": "A state-aware button that toggles captions and subtitles.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/captions-button/captions-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/captions-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`CaptionsButton` reference](https://videojs.org/docs/framework/react/reference/captions-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "captions-menu",
      "title": "Captions Menu",
      "description": "A captions button and popup for selecting a text track.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button-tooltip",
        "@videojs/captions-button",
        "@videojs/radio-item"
      ],
      "files": [
        {
          "path": "ui/files/captions-menu/captions-menu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/captions-menu.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "captions-submenu",
      "title": "Captions Submenu",
      "description": "A submenu for selecting captions or turning them off.",
      "dependencies": [
        "@videojs/core@10.3.0",
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_menu-chevron",
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/radio-item"
      ],
      "files": [
        {
          "path": "ui/files/captions-submenu/captions-submenu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/captions-submenu.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "cast-button",
      "title": "Cast Button",
      "description": "A state-aware button that starts and stops Google Cast playback.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/cast-button/cast-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/cast-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`CastButton` reference](https://videojs.org/docs/framework/react/reference/cast-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "container",
      "title": "Container",
      "description": "The player layout container shared by Skin compositions.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/container/container.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/container.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`Container` reference](https://videojs.org/docs/framework/react/reference/player-container/).",
      "categories": [
        "media",
        "layout"
      ],
      "type": "registry:ui"
    },
    {
      "name": "error-dialog",
      "title": "Error Dialog",
      "description": "An alert dialog that presents and dismisses playback errors.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/error-dialog/error-dialog.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/error-dialog.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`ErrorDialog` reference](https://videojs.org/docs/framework/react/reference/error-dialog/).",
      "categories": [
        "media",
        "dialogs"
      ],
      "type": "registry:ui"
    },
    {
      "name": "fullscreen-button",
      "title": "Fullscreen Button",
      "description": "A button that enters and exits fullscreen with state-aware icons.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/fullscreen-button/fullscreen-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/fullscreen-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`FullscreenButton` reference](https://videojs.org/docs/framework/react/reference/fullscreen-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "live-button",
      "title": "Live Button",
      "description": "Shows live-edge status and seeks playback back to the live point when activated.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/live-button/live-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/live-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`LiveButton` reference](https://videojs.org/docs/framework/react/reference/live-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "mute-button",
      "title": "Mute Button",
      "description": "A state-aware mute button used by the volume control.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/mute-button/mute-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/mute-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`MuteButton` reference](https://videojs.org/docs/framework/react/reference/mute-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "pip-button",
      "title": "Picture-in-Picture Button",
      "description": "A state-aware button that enters and exits picture-in-picture.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/pip-button/pip-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/pip-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`PiPButton` reference](https://videojs.org/docs/framework/react/reference/pip-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "play-button",
      "title": "Play Button",
      "description": "A three-state button that plays, pauses, or restarts media with matching icons.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/play-button/play-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/play-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`PlayButton` reference](https://videojs.org/docs/framework/react/reference/play-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "playback-rate-button",
      "title": "Playback Rate Button",
      "description": "Shows the current speed and cycles through available playback rates.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/playback-rate-button/playback-rate-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/playback-rate-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`PlaybackRateButton` reference](https://videojs.org/docs/framework/react/reference/playback-rate-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "playback-rate-submenu",
      "title": "Playback Rate Submenu",
      "description": "A submenu for selecting the playback speed.",
      "dependencies": [
        "@videojs/core@10.3.0",
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_menu-chevron",
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/radio-item"
      ],
      "files": [
        {
          "path": "ui/files/playback-rate-submenu/playback-rate-submenu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/playback-rate-submenu.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "poster",
      "title": "Poster",
      "description": "The video poster and its presentation styling shared by Skin compositions.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/poster/poster.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/poster.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`Poster` reference](https://videojs.org/docs/framework/react/reference/poster/).",
      "categories": [
        "media",
        "display"
      ],
      "type": "registry:ui"
    },
    {
      "name": "quality-menu",
      "title": "Quality Menu",
      "description": "A submenu for selecting the playback quality.",
      "dependencies": [
        "@videojs/core@10.3.0",
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_menu-chevron",
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/radio-item"
      ],
      "files": [
        {
          "path": "ui/files/quality-menu/quality-menu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/quality-menu.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "radio-item",
      "title": "Radio Item",
      "description": "A selectable menu item with an active-state indicator.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/radio-item/radio-item.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/radio-item.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "seek-button",
      "title": "Seek Button",
      "description": "A button that skips playback forward or backward with a direction-aware icon and value.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button"
      ],
      "files": [
        {
          "path": "ui/files/seek-button/seek-button.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/seek-button.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`SeekButton` reference](https://videojs.org/docs/framework/react/reference/seek-button/).",
      "categories": [
        "media",
        "buttons"
      ],
      "type": "registry:ui"
    },
    {
      "name": "seek-indicator",
      "title": "Seek Indicator",
      "description": "Visual feedback for forward and backward seek actions.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/seek-indicator/seek-indicator.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/seek-indicator.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`SeekIndicator` reference](https://videojs.org/docs/framework/react/reference/seek-indicator/).",
      "categories": [
        "media",
        "display"
      ],
      "type": "registry:ui"
    },
    {
      "name": "settings-menu",
      "title": "Settings Menu",
      "description": "A settings button and popup for composing playback option submenus.",
      "dependencies": [
        "@videojs/core@10.3.0",
        "@videojs/react@10.3.0",
        "cn",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button",
        "@videojs/button-tooltip"
      ],
      "files": [
        {
          "path": "ui/files/settings-menu/settings-menu.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/settings-menu.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "slider",
      "title": "Slider Parts",
      "description": "Shared styled parts for slider tracks, progress layers, and thumbs.",
      "dependencies": [
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/slider/slider.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/slider.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`SliderTrack` reference](https://videojs.org/docs/framework/react/reference/slider/).",
      "categories": [
        "media",
        "sliders"
      ],
      "type": "registry:ui"
    },
    {
      "name": "status-announcer",
      "title": "Status Announcer",
      "description": "A polite live region that announces media state changes.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/status-announcer/status-announcer.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/status-announcer.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`StatusAnnouncer` reference](https://videojs.org/docs/framework/react/reference/status-announcer/).",
      "categories": [
        "media",
        "behaviors"
      ],
      "type": "registry:ui"
    },
    {
      "name": "status-indicator",
      "title": "Status Indicator",
      "description": "Visual feedback for captions, fullscreen, picture-in-picture, and playback actions.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/status-indicator/status-indicator.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/status-indicator.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`StatusIndicator` reference](https://videojs.org/docs/framework/react/reference/status-indicator/).",
      "categories": [
        "media",
        "display"
      ],
      "type": "registry:ui"
    },
    {
      "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.3.0",
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/slider"
      ],
      "files": [
        {
          "path": "ui/files/time-slider/time-slider.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/time-slider.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`TimeSlider` reference](https://videojs.org/docs/framework/react/reference/time-slider/).",
      "categories": [
        "media",
        "sliders"
      ],
      "type": "registry:ui"
    },
    {
      "name": "title",
      "title": "Title",
      "description": "The media title, displayed above the video while controls are visible.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/title/title.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/title.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`Title` reference](https://videojs.org/docs/framework/react/reference/title/).",
      "categories": [
        "media",
        "display"
      ],
      "type": "registry:ui"
    },
    {
      "name": "volume-indicator",
      "title": "Volume Indicator",
      "description": "Visual feedback for mute and volume changes.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video"
      ],
      "files": [
        {
          "path": "ui/files/volume-indicator/volume-indicator.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/volume-indicator.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`VolumeIndicator` reference](https://videojs.org/docs/framework/react/reference/volume-indicator/).",
      "categories": [
        "media",
        "display"
      ],
      "type": "registry:ui"
    },
    {
      "name": "volume-popover",
      "title": "Volume Control",
      "description": "A mute toggle with a vertical slider for adjusting playback volume in a popover.",
      "dependencies": [
        "@videojs/core@10.3.0",
        "@videojs/react@10.3.0",
        "cn",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/button-tooltip",
        "@videojs/mute-button",
        "@videojs/volume-slider"
      ],
      "files": [
        {
          "path": "ui/files/volume-popover/volume-popover.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/volume-popover.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`VolumePopover` reference](https://videojs.org/docs/framework/react/reference/volume-popover/).",
      "categories": [
        "media",
        "menus"
      ],
      "type": "registry:ui"
    },
    {
      "name": "volume-slider",
      "title": "Volume Slider",
      "description": "A horizontal or vertical slider for adjusting playback volume by dragging, using the keyboard, or scrolling.",
      "dependencies": [
        "@videojs/react@10.3.0",
        "react"
      ],
      "registryDependencies": [
        "@videojs/_resolve-class-name",
        "@videojs/_style-audio",
        "@videojs/_style-theme",
        "@videojs/_style-video",
        "@videojs/slider"
      ],
      "files": [
        {
          "path": "ui/files/volume-slider/volume-slider.tsx",
          "type": "registry:component",
          "target": "@components/videojs/ui/volume-slider.tsx"
        }
      ],
      "meta": {
        "framework": "react",
        "style": "tailwind",
        "theme": "default",
        "role": "component",
        "styling": "tailwind",
        "public": true
      },
      "docs": "[`VolumeSlider` reference](https://videojs.org/docs/framework/react/reference/volume-slider/).",
      "categories": [
        "media",
        "sliders"
      ],
      "type": "registry:ui"
    }
  ]
}