{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-tooltip",
  "title": "Button Tooltip",
  "description": "A tooltip that wraps a control button and shows its label and keyboard shortcut.",
  "dependencies": [
    "@videojs/react@10.4.0",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_resolve-class-name",
    "@videojs/_style-audio",
    "@videojs/_style-theme",
    "@videojs/_style-video"
  ],
  "files": [
    {
      "path": "ui/files/button-tooltip/button-tooltip.tsx",
      "content": "/** @jsxImportSource react */\n\n'use client';\n\nimport '../styles/base.css';\nimport '../styles/audio/theme.css';\nimport '../styles/video/captions.css';\nimport '../styles/video/theme.css';\nimport { Tooltip } from '@videojs/react';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { cn } from '@/lib/resolve-class-name';\n\nexport interface ButtonTooltipProps extends Omit<Tooltip.RootProps, 'children'> {\n  children: ReactElement;\n  label?: ReactNode;\n}\n\nexport function ButtonTooltip({ children, label, ...props }: ButtonTooltipProps) {\n  return (\n    <Tooltip.Root {...props}>\n      <Tooltip.Trigger render={children} />\n      <Tooltip.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          'whitespace-nowrap rounded-media-control py-1 text-media [--media-popup-side-offset:var(--media-tooltip-side-offset)]',\n          'data-open:flex data-open:items-center data-open:gap-1',\n          'px-2.5'\n        )}\n      >\n        {label ?? <Tooltip.Label />}\n        {!label && (\n          <Tooltip.Shortcut\n            className={\n              'min-w-[1.5em] rounded-[--spacing(1)] bg-media-muted p-[0.1em] text-center text-media-sm [font-family:inherit] font-semibold leading-tight'\n            }\n          />\n        )}\n      </Tooltip.Popup>\n    </Tooltip.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/button-tooltip.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "theme": "default",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "See [Customize skins](https://videojs.org/docs/framework/react/how-to/customize-skins/).",
  "categories": [
    "media",
    "buttons"
  ],
  "type": "registry:ui"
}