{
  "$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-popups",
    "@videojs/_style-theme",
    "@videojs/mute-button",
    "@videojs/volume-slider"
  ],
  "files": [
    {
      "path": "ui/files/volume-popover/volume-popover.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../styles/popups.css';\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          'media-popup',\n          'media-popup-safe-area',\n          'media-popup-transition',\n          'media-popup-surface',\n          'media-volume-popover'\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": "css",
    "role": "component",
    "styling": "css",
    "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"
}