{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-glass",
  "type": "registry:ui",
  "title": "Tooltip Glass",
  "description": "Glass-themed tooltip with:",
  "dependencies": [
    "@radix-ui/react-tooltip",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/ui/tooltip-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * TooltipGlass Component\n *\n * Glass-themed tooltip with:\n * - Unified dark design (consistent UX across themes)\n * - Position variants (top/bottom/left/right)\n * - Smooth animation\n * - Built on Radix UI primitives\n *\n * @example Compound API (recommended)\n * ```tsx\n * <TooltipGlassProvider>\n *   <TooltipGlass>\n *     <TooltipGlassTrigger asChild>\n *       <Button>Hover</Button>\n *     </TooltipGlassTrigger>\n *     <TooltipGlassContent>\n *       <p>Add to library</p>\n *     </TooltipGlassContent>\n *   </TooltipGlass>\n * </TooltipGlassProvider>\n * ```\n *\n * @example Simple wrapper\n * ```tsx\n * <TooltipGlassProvider>\n *   <TooltipGlassSimple content=\"Click to edit\">\n *     <button>Edit</button>\n *   </TooltipGlassSimple>\n * </TooltipGlassProvider>\n * ```\n */\n\n'use client';\n\nimport * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// COMPOUND COMPONENT: PROVIDER\n// ========================================\n\ntype TooltipGlassProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/**\n * TooltipGlassProvider - Context provider for all tooltips\n * Must wrap TooltipGlass components at the app level.\n */\nconst TooltipGlassProvider: React.FC<TooltipGlassProviderProps> = ({\n  delayDuration = 0,\n  ...props\n}) => {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n};\n\nTooltipGlassProvider.displayName = 'TooltipGlassProvider';\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\n/**\n * TooltipGlassRoot - Individual tooltip instance\n * Wraps Radix TooltipPrimitive.Root with auto-included Provider (shadcn/ui pattern)\n */\nfunction TooltipGlassRoot({\n  ...props\n}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipGlassProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipGlassProvider>\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\n/**\n * TooltipGlassTrigger - Element that triggers the tooltip\n * Supports asChild pattern for custom trigger elements.\n */\nconst TooltipGlassTrigger = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>\n>(({ ...props }, ref) => (\n  <TooltipPrimitive.Trigger ref={ref} data-slot=\"tooltip-trigger\" {...props} />\n));\n\nTooltipGlassTrigger.displayName = 'TooltipGlassTrigger';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\ntype TooltipGlassContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\n/**\n * TooltipGlassContent - Tooltip content with glass styling\n * Rendered in a portal for proper z-index handling.\n */\nconst TooltipGlassContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipGlassContentProps\n>(({ className, sideOffset = 0, children, ...props }, ref) => {\n  const tooltipStyles: React.CSSProperties = {\n    background: 'var(--tooltip-bg)',\n    color: 'var(--tooltip-text)',\n    border: '1px solid var(--tooltip-border)',\n    boxShadow: 'var(--tooltip-shadow)',\n    backdropFilter: 'blur(var(--blur-xl))',\n    WebkitBackdropFilter: 'blur(var(--blur-xl))',\n  };\n\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        data-slot=\"tooltip-content\"\n        className={cn(\n          'z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          'animate-in fade-in-0 zoom-in-95',\n          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n          'data-[side=bottom]:slide-in-from-top-2',\n          'data-[side=left]:slide-in-from-right-2',\n          'data-[side=right]:slide-in-from-left-2',\n          'data-[side=top]:slide-in-from-bottom-2',\n          className\n        )}\n        style={tooltipStyles}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow\n          className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\"\n          style={{\n            fill: 'var(--tooltip-bg)',\n            background: 'var(--tooltip-bg)',\n          }}\n        />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n});\n\nTooltipGlassContent.displayName = 'TooltipGlassContent';\n\n// ========================================\n// SIMPLE WRAPPER (convenience)\n// ========================================\n\ninterface TooltipGlassSimpleProps {\n  content: string;\n  children: React.ReactNode;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  className?: string;\n}\n\nconst TooltipGlassSimple: React.FC<TooltipGlassSimpleProps> = ({\n  content,\n  children,\n  side = 'top',\n  className,\n}) => {\n  return (\n    <TooltipGlassRoot>\n      <TooltipGlassTrigger asChild>{children}</TooltipGlassTrigger>\n      <TooltipGlassContent side={side} className={className}>\n        {content}\n      </TooltipGlassContent>\n    </TooltipGlassRoot>\n  );\n};\n\n// ========================================\n// EXPORTS\n// ========================================\n\n// Compound API (shadcn/ui pattern)\nexport const TooltipGlass = TooltipGlassRoot;\nexport { TooltipGlassProvider, TooltipGlassTrigger, TooltipGlassContent, TooltipGlassSimple };\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * Tooltip - shadcn/ui compatible alias for TooltipGlass\n *\n * @example Drop-in replacement for shadcn/ui Tooltip\n * ```tsx\n * import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'shadcn-glass-ui'\n *\n * <TooltipProvider>\n *   <Tooltip>\n *     <TooltipTrigger>Hover</TooltipTrigger>\n *     <TooltipContent>Tooltip text</TooltipContent>\n *   </Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport const Tooltip = TooltipGlassRoot;\n\n/** TooltipTrigger - shadcn/ui compatible alias for TooltipGlassTrigger */\nexport const TooltipTrigger = TooltipGlassTrigger;\n\n/** TooltipContent - shadcn/ui compatible alias for TooltipGlassContent */\nexport const TooltipContent = TooltipGlassContent;\n\n/** TooltipProvider - shadcn/ui compatible alias for TooltipGlassProvider */\nexport const TooltipProvider = TooltipGlassProvider;\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}