{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-menu",
  "title": "Settings Menu",
  "description": "A settings button and popup for composing playback option submenus.",
  "dependencies": [
    "@videojs/core@10.0.0-beta.32",
    "@videojs/react@10.0.0-beta.32",
    "cn",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_button-tooltip",
    "@videojs/_resolve-class-name",
    "@videojs/_style-theme",
    "@videojs/button"
  ],
  "files": [
    {
      "path": "ui/files/settings-menu/settings-menu.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../styles/theme.css';\nimport { settingsText } from '@videojs/core/i18n/text/menu';\nimport { Menu } from '@videojs/react';\nimport { Text as TextPrimitive } from '@videojs/react';\nimport { GearIcon as GearIconPrimitive } from '@videojs/react/icons';\nimport type { ClassValue } from 'cn';\n\nimport { cn, resolveClassName } from '@/components/videojs/lib/resolve-class-name';\nimport { Button } from '@/components/videojs/ui/button';\nimport { ButtonTooltip } from '@/components/videojs/ui/button-tooltip';\n\nexport interface SettingsMenuProps extends Menu.RootProps {\n  className?: ClassValue;\n}\n\nexport function SettingsMenu({ children, className, ...props }: SettingsMenuProps) {\n  return (\n    <Menu.Root side=\"top\" align=\"center\" {...props}>\n      <ButtonTooltip label={<TextPrimitive token={settingsText.key}>{settingsText.text}</TextPrimitive>} side=\"top\">\n        <Menu.Trigger\n          render={<Button />}\n          className={(state) => cn('group/settings', resolveClassName(className, state))}\n        >\n          <GearIconPrimitive\n            className={cn(\n              'col-start-1 row-start-1 size-media-icon drop-shadow-media-icon',\n              'transition-[opacity,scale] duration-media-base ease-out',\n              'transition-transform duration-media-base ease-in-out motion-reduce:transition-none!',\n              'group-aria-expanded/settings:rotate-90'\n            )}\n          />\n          <TextPrimitive className={'sr-only'} token={settingsText.key}>\n            {settingsText.text}\n          </TextPrimitive>\n        </Menu.Trigger>\n      </ButtonTooltip>\n      <Menu.Popup\n        keepMounted\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          'transition-media-menu-resize'\n        )}\n      >\n        <Menu.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          {children}\n        </Menu.Content>\n      </Menu.Popup>\n    </Menu.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/settings-menu.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "Installs `@/components/videojs/ui/settings-menu.tsx` for use inside a compatible Video.js Player or Skin.\n\n```tsx\nimport { SettingsMenu } from '@/components/videojs/ui/settings-menu';\n\nexport function Controls() {\n  return <SettingsMenu />;\n}\n```",
  "categories": [
    "media",
    "menus"
  ],
  "type": "registry:ui"
}