{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "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.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/mute-button",
    "@videojs/volume-slider"
  ],
  "files": [
    {
      "path": "ui/files/volume-popover/volume-popover.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../styles/theme.css';\nimport type { VolumeSliderProps as CoreVolumeSliderProps } from '@videojs/core';\nimport { VolumePopover as VolumePopoverPrimitive } from '@videojs/react';\nimport type { ClassValue } from 'cn';\n\nimport { cn } from '@/components/videojs/lib/resolve-class-name';\nimport { ButtonTooltip } from '@/components/videojs/ui/button-tooltip';\nimport { MuteButton } from '@/components/videojs/ui/mute-button';\nimport { VolumeSlider } from '@/components/videojs/ui/volume-slider';\n\nexport interface VolumePopoverProps extends Omit<VolumePopoverPrimitive.RootProps, 'children'> {\n  className?: ClassValue;\n  orientation?: CoreVolumeSliderProps['orientation'];\n  showTooltip?: boolean;\n}\n\nexport function VolumePopover({\n  className,\n  showTooltip = false,\n  side = 'top',\n  orientation = 'vertical',\n  ...props\n}: VolumePopoverProps = {}) {\n  return (\n    <VolumePopoverPrimitive.Root openOnHover delay={200} closeDelay={100} side={side} {...props}>\n      <ButtonTooltip delay={0} disabled={!showTooltip} sticky side=\"top\">\n        <VolumePopoverPrimitive.Trigger render={<MuteButton className={cn(className)} />} />\n      </ButtonTooltip>\n      <VolumePopoverPrimitive.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          'before:pointer-events-auto before:absolute',\n          'data-[side=top]:before:inset-x-0 data-[side=top]:before:top-full',\n          'data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:bottom-full',\n          'data-[side=left]:before:inset-y-0 data-[side=left]:before:left-full',\n          'data-[side=right]:before:inset-y-0 data-[side=right]:before:right-full',\n          'data-[side=top]:before:h-(--media-popup-side-offset) data-[side=bottom]:before:h-(--media-popup-side-offset)',\n          'data-[side=left]:before:w-(--media-popup-side-offset) data-[side=right]:before:w-(--media-popup-side-offset)',\n          'transition-media-popup data-ending-style:duration-media-instant',\n          'bg-media-popover text-media-popover-foreground surface-media after:surface-media-inset',\n          'rounded-media-control px-0 py-3 [--media-popup-side-offset:var(--media-popover-side-offset)]',\n          'data-[side=right]:rounded-none data-[side=right]:p-0 data-[side=right]:px-3 data-[side=right]:surface-media-none! data-[side=right]:after:hidden',\n          'data-[side=right]:[--media-popover-side-offset:0rem]'\n        )}\n      >\n        <VolumeSlider orientation={orientation} />\n      </VolumePopoverPrimitive.Popup>\n    </VolumePopoverPrimitive.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/volume-popover.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "Installs `@/components/videojs/ui/volume-popover.tsx` for use inside a compatible Video.js Player or Skin.\n\n```tsx\nimport { VolumePopover } from '@/components/videojs/ui/volume-popover';\n\nexport function Controls() {\n  return <VolumePopover />;\n}\n```",
  "categories": [
    "media",
    "controls"
  ],
  "type": "registry:ui"
}