{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "captions-menu",
  "title": "Captions Menu",
  "description": "A captions button and popup for selecting a text track.",
  "dependencies": [
    "@videojs/react@10.0.0-beta.32",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_button-tooltip",
    "@videojs/_resolve-class-name",
    "@videojs/_style-theme",
    "@videojs/captions-button",
    "@videojs/radio-item"
  ],
  "files": [
    {
      "path": "ui/files/captions-menu/captions-menu.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../styles/theme.css';\nimport { Menu as MenuPrimitive } from '@videojs/react';\nimport { CaptionsRadioGroup } from '@videojs/react/ui/captions-radio-group';\n\nimport { cn } from '@/components/videojs/lib/resolve-class-name';\nimport { ButtonTooltip } from '@/components/videojs/ui/button-tooltip';\nimport { CaptionsButton } from '@/components/videojs/ui/captions-button';\nimport { RadioItem } from '@/components/videojs/ui/radio-item';\n\nexport interface CaptionsMenuProps extends Omit<MenuPrimitive.RootProps, 'children'> {\n  className?: MenuPrimitive.TriggerProps['className'];\n}\n\nexport function CaptionsMenu({ className, ...props }: CaptionsMenuProps = {}) {\n  return (\n    <MenuPrimitive.Root side=\"top\" align=\"center\" boundary=\"viewport\" {...props}>\n      <CaptionsRadioGroup.Root>\n        <ButtonTooltip side=\"top\">\n          <MenuPrimitive.Trigger render={<CaptionsButton />} className={className} />\n        </ButtonTooltip>\n        <MenuPrimitive.Popup\n          className={cn(\n            'm-0 overflow-visible border-0 text-inherit',\n            'media-transitioning:opacity-0 media-transitioning:blur-media-hidden-popup media-transitioning:scale-media-hidden-popup',\n            'data-starting-style:[transform:translate(var(--media-popup-translate-x-distance,0),var(--media-popup-translate-y-distance,0))]',\n            'data-ending-style:transform-none',\n            'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left',\n            'data-[side=top]:[--media-popup-translate-y-distance:var(--media-popup-translate-distance)]',\n            'data-[side=bottom]:[--media-popup-translate-y-distance:calc(var(--media-popup-translate-distance)*-1)]',\n            'data-[side=left]:[--media-popup-translate-x-distance:var(--media-popup-translate-distance)]',\n            'data-[side=right]:[--media-popup-translate-x-distance:calc(var(--media-popup-translate-distance)*-1)]',\n            'bg-media-popover text-media-popover-foreground surface-media after:surface-media-inset',\n            'm-0 min-w-44 max-w-(--media-menu-available-width) overflow-hidden! rounded-media-popup border-0 p-1 [--media-popup-side-offset:var(--media-popover-side-offset)]',\n            'max-h-[min(var(--media-menu-available-height,--spacing(56)),--spacing(56))] overscroll-none',\n            'h-(--media-menu-height) w-(--media-menu-width)',\n            'transition-media-popup media-transitioning:transition-media-popup'\n          )}\n        >\n          <MenuPrimitive.Content\n            className={\n              '[anchor-scope:--media-menu-item-highlight-anchor] media-anchored:before:anchor-media-highlight media-anchored:has-data-[highlighted=]:before:duration-0 absolute max-h-[inherit] overflow-auto overscroll-none outline-hidden not-data-submenu:flex not-data-submenu:flex-col not-data-submenu:gap-0.5 transition-[translate,filter] duration-media-menu ease-out not-data-submenu:inset-x-1 not-data-submenu:top-1 not-data-submenu:data-[child-open]:-translate-x-full not-data-submenu:data-[child-open]:[&:dir(rtl)]:translate-x-full not-data-submenu:data-[child-open]:blur-media-hidden not-data-submenu:data-[child-open]:before:hidden data-submenu:inset-x-0 data-submenu:top-0 data-submenu:z-10 data-submenu:[max-height:inherit] data-submenu:p-1 data-submenu:media-transitioning:pointer-events-none data-submenu:media-transitioning:overflow-hidden data-submenu:media-transitioning:translate-x-full data-submenu:media-transitioning:[&:dir(rtl)]:-translate-x-full data-submenu:media-transitioning:blur-media-hidden'\n            }\n          >\n            <CaptionsRadioGroup.Options\n              className={\n                'flex [max-height:inherit] flex-col gap-0.5 [anchor-scope:--media-menu-item-highlight-anchor] media-anchored:before:anchor-media-highlight media-anchored:has-data-[highlighted=]:before:duration-0'\n              }\n              renderItem={(props, item) => (\n                <RadioItem {...props}>\n                  <span>{item.label}</span>\n                </RadioItem>\n              )}\n            ></CaptionsRadioGroup.Options>\n          </MenuPrimitive.Content>\n        </MenuPrimitive.Popup>\n      </CaptionsRadioGroup.Root>\n    </MenuPrimitive.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/captions-menu.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "Installs `@/components/videojs/ui/captions-menu.tsx` for use inside a compatible Video.js Player or Skin.\n\n```tsx\nimport { CaptionsMenu } from '@/components/videojs/ui/captions-menu';\n\nexport function Controls() {\n  return <CaptionsMenu />;\n}\n```",
  "categories": [
    "media",
    "menus"
  ],
  "type": "registry:ui"
}