{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "volume-indicator",
  "title": "Volume Indicator",
  "description": "Visual feedback for mute and volume changes.",
  "dependencies": [
    "@videojs/react@10.0.0-beta.32",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_resolve-class-name",
    "@videojs/_style-theme"
  ],
  "files": [
    {
      "path": "ui/files/volume-indicator/volume-indicator.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../styles/theme.css';\nimport { VolumeIndicator as VolumeIndicatorPrimitive } from '@videojs/react';\nimport {\n  VolumeHighIcon as VolumeHighIconPrimitive,\n  VolumeLowIcon as VolumeLowIconPrimitive,\n  VolumeOffIcon as VolumeOffIconPrimitive,\n} from '@videojs/react/icons';\n\nimport { cn, resolveClassName } from '@/components/videojs/lib/resolve-class-name';\n\nexport type VolumeIndicatorProps = Omit<VolumeIndicatorPrimitive.RootProps, 'children'>;\n\nexport function VolumeIndicator({ className, ...props }: VolumeIndicatorProps = {}) {\n  return (\n    <VolumeIndicatorPrimitive.Root\n      className={(state) =>\n        cn(\n          'pointer-events-none absolute origin-top',\n          'duration-media-fast ease-out',\n          'media-transitioning:opacity-0 media-transitioning:duration-media-indicator media-transitioning:ease-in',\n          'top-3 rounded-media-control font-medium',\n          'bg-media-backdrop/25 text-media-popover-foreground surface-media after:surface-media-inset',\n          'media-opaque:bg-media-background',\n          'pointer-coarse:motion-media-[scale,translate,opacity]',\n          'pointer-fine:motion-media-[scale,translate,filter,opacity]',\n          'pointer-fine:media-transitioning:scale-media-hidden-indicator pointer-fine:media-transitioning:blur-media-hidden',\n          'data-ending-style:translate-y-media-hidden-indicator-offset',\n          'group/volume-status',\n          'w-[min(80%,12rem)] [transform:translateX(0)]',\n          'motion-safe:[&:is([data-min],[data-max]):not([data-starting-style],[data-ending-style])]:nudge-media',\n          resolveClassName(className, state)\n        )\n      }\n      {...props}\n    >\n      <VolumeIndicatorPrimitive.Fill\n        className={cn(\n          'items-center justify-between gap-2 px-2.5 py-1',\n          'rounded-[inherit]',\n          'flex w-full bg-left bg-no-repeat',\n          '[background-image:linear-gradient(currentColor,currentColor)]',\n          '[background-size:var(--media-volume-fill,0%)_100%] transition-[background-size] duration-media-slow ease-linear'\n        )}\n      >\n        <VolumeHighIconPrimitive\n          className={'hidden shrink-0 group-data-[level=high]/volume-status:block mix-blend-difference'}\n        />\n        <VolumeLowIconPrimitive\n          className={'hidden shrink-0 group-data-[level=low]/volume-status:block mix-blend-difference'}\n        />\n        <VolumeOffIconPrimitive\n          className={'hidden shrink-0 group-data-[level=off]/volume-status:block mix-blend-difference'}\n        />\n        <VolumeIndicatorPrimitive.Value className={'ml-auto mix-blend-difference'} />\n      </VolumeIndicatorPrimitive.Fill>\n    </VolumeIndicatorPrimitive.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/volume-indicator.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "Installs `@/components/videojs/ui/volume-indicator.tsx` for use inside a compatible Video.js Player or Skin.\n\n```tsx\nimport { VolumeIndicator } from '@/components/videojs/ui/volume-indicator';\n\nexport function Controls() {\n  return <VolumeIndicator />;\n}\n```",
  "categories": [
    "media",
    "feedback"
  ],
  "type": "registry:ui"
}