{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-glass",
  "type": "registry:ui",
  "title": "Popover Glass",
  "description": "Floating glass-themed container for tooltips, dropdowns, and contextual overlays.\n * Provides compound and legacy APIs for maximum flexibility.\n *\n * ## Features",
  "dependencies": [
    "@radix-ui/react-popover",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/ui/popover-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * PopoverGlass Component\n *\n * Floating glass-themed container for tooltips, dropdowns, and contextual overlays.\n * Provides compound and legacy APIs for maximum flexibility.\n *\n * ## Features\n * - Theme-aware glassmorphism styling (glass/light/aurora)\n * - Compound component API (PopoverGlass.Root, Trigger, Content, Anchor, Close)\n * - Legacy API for backward compatibility\n * - Arrow pointer with glass styling (optional)\n * - 12 positioning options (4 sides × 3 alignments)\n * - Smooth animations with fade-in effect\n * - ESC key and click-outside to close\n * - Focus trap for accessibility\n * - Customizable width and padding via className\n * - Portal rendering for z-index isolation\n *\n * ## Sub-Components\n * - **PopoverGlass.Root** (or `PopoverGlass`) - Context provider with open/close state\n * - **PopoverGlassTrigger** - Trigger element (supports asChild pattern)\n * - **PopoverGlassAnchor** - Optional anchor for positioning\n * - **PopoverGlassContent** - Content container with glass styling\n * - **PopoverGlassLegacy** - Legacy wrapper API (backward compatible)\n *\n * ## CSS Variables\n * Customize appearance via theme CSS variables:\n * - `--popover-bg` - Background color (glass theme: `rgba(255,255,255,0.08)`)\n * - `--popover-border` - Border color (glass theme: `rgba(255,255,255,0.15)`)\n * - `--popover-shadow` - Box shadow with glow effect\n * - `--popover-arrow-bg` - Arrow pointer background color\n * - `--blur-md` - Backdrop blur amount (default: `16px`)\n *\n * @example Compound API (recommended)\n * ```tsx\n * import { PopoverGlass, PopoverGlassTrigger, PopoverGlassContent } from 'shadcn-glass-ui'\n *\n * <PopoverGlass>\n *   <PopoverGlassTrigger asChild>\n *     <ButtonGlass>Open Popover</ButtonGlass>\n *   </PopoverGlassTrigger>\n *   <PopoverGlassContent side=\"top\">\n *     <div className=\"p-4\">\n *       <h3 style={{ color: 'var(--text-primary)' }}>Title</h3>\n *       <p style={{ color: 'var(--text-secondary)' }}>Content</p>\n *     </div>\n *   </PopoverGlassContent>\n * </PopoverGlass>\n * ```\n *\n * @example Legacy API (backward compatible)\n * ```tsx\n * import { PopoverGlassLegacy } from 'shadcn-glass-ui'\n *\n * <PopoverGlassLegacy\n *   trigger={<ButtonGlass>Open</ButtonGlass>}\n *   side=\"top\"\n * >\n *   <div className=\"p-4\">Content</div>\n * </PopoverGlassLegacy>\n * ```\n *\n * @example Controlled state\n * ```tsx\n * const [open, setOpen] = useState(false)\n *\n * <PopoverGlass open={open} onOpenChange={setOpen}>\n *   <PopoverGlassTrigger>Open</PopoverGlassTrigger>\n *   <PopoverGlassContent>\n *     <ButtonGlass onClick={() => setOpen(false)}>Close</ButtonGlass>\n *   </PopoverGlassContent>\n * </PopoverGlass>\n * ```\n *\n * @example Without arrow\n * ```tsx\n * <PopoverGlassContent showArrow={false}>\n *   Content without arrow pointer\n * </PopoverGlassContent>\n * ```\n *\n * @accessibility\n * - **Keyboard Navigation:** ESC key closes popover (WCAG 2.1.1)\n * - **Focus Management:** Focus trapped within popover when open (WCAG 2.4.3)\n * - **Click Outside:** Clicking outside closes popover (WCAG 2.1.1)\n * - **Screen Readers:** Uses `role=\"dialog\"` for content (WCAG 4.1.3)\n * - **ARIA Attributes:** Proper labeling for trigger and content relationship\n * - **Portal Rendering:** Content rendered outside DOM hierarchy to avoid z-index issues\n * - **Animations:** Smooth transitions that don't interfere with screen readers\n *\n * @since v1.0.0\n */\n\n'use client';\n\nimport * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\n// Note: PopoverPrimitive.Root is a context provider and doesn't render DOM,\n// so data-slot is applied to Content instead. This matches shadcn/ui pattern.\nconst PopoverGlassRoot = (props: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => (\n  <PopoverPrimitive.Root {...props} />\n);\nPopoverGlassRoot.displayName = 'PopoverGlass';\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\nconst PopoverGlassTrigger = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>\n>((props, ref) => <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" ref={ref} {...props} />);\nPopoverGlassTrigger.displayName = 'PopoverGlassTrigger';\n\n// ========================================\n// COMPOUND COMPONENT: ANCHOR\n// ========================================\n\nconst PopoverGlassAnchor = React.forwardRef<\n  React.ComponentRef<typeof PopoverPrimitive.Anchor>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>\n>((props, ref) => <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" ref={ref} {...props} />);\nPopoverGlassAnchor.displayName = 'PopoverGlassAnchor';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\n/**\n * Props for PopoverGlassContent component.\n *\n * @example\n * ```tsx\n * const props: PopoverGlassContentProps = {\n *   side: 'top',\n *   align: 'center',\n *   sideOffset: 8,\n *   showArrow: true,\n *   className: 'w-96 p-6',\n * };\n * ```\n */\ninterface PopoverGlassContentProps extends React.ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Content\n> {\n  /**\n   * Whether to show the arrow pointer.\n   *\n   * @default true\n   */\n  showArrow?: boolean;\n}\n\n/**\n * PopoverGlassContent - Content container for PopoverGlass\n *\n * Defaults (matches shadcn/ui):\n * - `p-4` (16px padding)\n * - `w-72` (288px width)\n * - Both can be overridden via className prop\n *\n * @example\n * <PopoverGlassContent className=\"w-96 p-6\"> // Custom size\n *   <p>Content</p>\n * </PopoverGlassContent>\n *\n * @example\n * <PopoverGlassContent className=\"p-0\"> // Remove padding\n *   <div className=\"custom-padding\">Content</div>\n * </PopoverGlassContent>\n */\nconst PopoverGlassContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverGlassContentProps\n>(({ className, align = 'center', sideOffset = 8, showArrow = true, children, ...props }, ref) => {\n  // Popover content styles with CSS variables\n  const popoverStyles: React.CSSProperties = {\n    background: 'var(--popover-bg)',\n    border: '1px solid var(--popover-border)',\n    boxShadow: 'var(--popover-shadow)',\n    backdropFilter: 'blur(var(--blur-md))',\n    WebkitBackdropFilter: 'blur(var(--blur-md))',\n  };\n\n  // Arrow styles\n  const arrowStyles: React.CSSProperties = {\n    fill: 'var(--popover-arrow-bg)',\n  };\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-50003 w-72 rounded-2xl p-4',\n          'animate-in fade-in-0 zoom-in-95 duration-200',\n          'data-[side=bottom]:slide-in-from-top-2',\n          'data-[side=top]:slide-in-from-bottom-2',\n          'data-[side=right]:slide-in-from-left-2',\n          'data-[side=left]:slide-in-from-right-2',\n          'outline-none',\n          className\n        )}\n        style={popoverStyles}\n        {...props}\n      >\n        {children}\n\n        {showArrow && (\n          <PopoverPrimitive.Arrow\n            className=\"fill-current\"\n            style={arrowStyles}\n            width={16}\n            height={8}\n          />\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n});\n\nPopoverGlassContent.displayName = 'PopoverGlassContent';\n\n// ========================================\n// LEGACY API (backward compatible)\n// ========================================\n\n/**\n * Props for PopoverGlassLegacy component (backward compatible API).\n *\n * @example\n * ```tsx\n * const props: PopoverGlassLegacyProps = {\n *   trigger: <ButtonGlass>Open</ButtonGlass>,\n *   children: <div>Content</div>,\n *   side: 'top',\n *   align: 'center',\n *   sideOffset: 8,\n *   showArrow: true,\n * };\n * ```\n */\nexport interface PopoverGlassLegacyProps {\n  /** The trigger element that opens the popover */\n  readonly trigger: React.ReactNode;\n  /** The content to display inside the popover */\n  readonly children: React.ReactNode;\n  /**\n   * The preferred side of the trigger to render against.\n   *\n   * @default \"bottom\"\n   */\n  readonly side?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * The preferred alignment against the trigger.\n   *\n   * @default \"center\"\n   */\n  readonly align?: 'start' | 'center' | 'end';\n  /**\n   * The distance in pixels from the trigger.\n   *\n   * @default 8\n   */\n  readonly sideOffset?: number;\n  /** Controlled open state */\n  readonly open?: boolean;\n  /** Callback when open state changes */\n  readonly onOpenChange?: (open: boolean) => void;\n  /**\n   * Whether to show the arrow pointer.\n   *\n   * @default true\n   */\n  readonly showArrow?: boolean;\n  /** Additional class name for the content wrapper */\n  readonly className?: string;\n}\n\nconst PopoverGlassLegacy = React.forwardRef<HTMLDivElement, PopoverGlassLegacyProps>(\n  (\n    {\n      trigger,\n      children,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 8,\n      open,\n      onOpenChange,\n      showArrow = true,\n      className,\n    },\n    ref\n  ) => {\n    return (\n      <PopoverGlassRoot open={open} onOpenChange={onOpenChange}>\n        <PopoverGlassTrigger asChild>{trigger}</PopoverGlassTrigger>\n        <PopoverGlassContent\n          ref={ref}\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          showArrow={showArrow}\n          className={className}\n        >\n          {children}\n        </PopoverGlassContent>\n      </PopoverGlassRoot>\n    );\n  }\n);\n\nPopoverGlassLegacy.displayName = 'PopoverGlassLegacy';\n\n// ========================================\n// EXPORTS\n// ========================================\n\n// Compound API (shadcn/ui pattern)\nexport const PopoverGlass = PopoverGlassRoot;\nexport { PopoverGlassTrigger, PopoverGlassContent, PopoverGlassAnchor };\n\n// Legacy API (backward compatible)\nexport { PopoverGlassLegacy };\n\n// For backward compatibility, also export as default\nexport { PopoverGlassLegacy as default };\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"
    }
  }
}