{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-card",
  "type": "registry:ui",
  "title": "Glass Card",
  "description": "Glass-themed container with backdrop blur, glow effects, and hover animations.\n * Provides a foundational card component for glassmorphism UIs.\n *\n * ## Features",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "use-hover",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/glass-card.tsx",
      "type": "registry:component",
      "content": "/**\n * GlassCard Component\n *\n * Glass-themed container with backdrop blur, glow effects, and hover animations.\n * Provides a foundational card component for glassmorphism UIs.\n *\n * ## Features\n * - Theme-aware styling (glass/light/aurora) via CSS variables\n * - Configurable blur intensity (subtle 8px, medium 16px, strong 24px)\n * - Optional glow effects (blue, violet, cyan)\n * - Hover animations with scale and glow effects\n * - Polymorphic rendering via `asChild` (Radix UI Slot pattern)\n * - Padding variants (none, compact, default, featured)\n * - Touch-friendly interactions (minimum 44x44px for interactive use)\n *\n * ## CSS Variables\n * Customize styling via theme CSS variables:\n * - `--card-subtle-bg`, `--card-medium-bg`, `--card-strong-bg` - Background colors\n * - `--card-subtle-border`, `--card-medium-border`, `--card-strong-border` - Border colors\n * - `--card-hover-bg`, `--card-hover-border`, `--card-hover-glow` - Hover states\n * - `--glow-blue`, `--glow-violet`, `--glow-cyan`, `--glow-neutral` - Glow effects\n * - `--blur-sm` (8px), `--blur-md` (16px), `--blur-lg` (24px) - Backdrop blur\n *\n * @example Basic card with medium intensity\n * ```tsx\n * import { GlassCard } from 'shadcn-glass-ui'\n *\n * function MyCard() {\n *   return (\n *     <GlassCard intensity=\"medium\" className=\"p-6\">\n *       <h3>Card Title</h3>\n *       <p>Card content goes here</p>\n *     </GlassCard>\n *   )\n * }\n * ```\n *\n * @example With glow effects\n * ```tsx\n * <GlassCard glow=\"blue\" intensity=\"strong\">\n *   <h3>Highlighted Card</h3>\n *   <p>This card has a blue glow effect</p>\n * </GlassCard>\n *\n * <GlassCard glow=\"violet\" hover={true}>\n *   <h3>Interactive Card</h3>\n *   <p>Hover over this card for effects</p>\n * </GlassCard>\n * ```\n *\n * @example As clickable link (asChild pattern)\n * ```tsx\n * <GlassCard asChild intensity=\"medium\" hover={true}>\n *   <a href=\"/product/123\" aria-label=\"View product details\">\n *     <img src=\"/product.jpg\" alt=\"Product\" />\n *     <h3>Product Name</h3>\n *     <p>$99.99</p>\n *   </a>\n * </GlassCard>\n *\n * // With Next.js Link\n * <GlassCard asChild>\n *   <Link href=\"/dashboard\">\n *     <Dashboard className=\"w-6 h-6\" />\n *     <span>Go to Dashboard</span>\n *   </Link>\n * </GlassCard>\n * ```\n *\n * @example Different intensity levels\n * ```tsx\n * <div className=\"grid grid-cols-3 gap-4\">\n *   <GlassCard intensity=\"subtle\">\n *     Subtle blur (8px)\n *   </GlassCard>\n *   <GlassCard intensity=\"medium\">\n *     Medium blur (16px)\n *   </GlassCard>\n *   <GlassCard intensity=\"strong\">\n *     Strong blur (24px)\n *   </GlassCard>\n * </div>\n * ```\n *\n * @accessibility\n * - **Keyboard Navigation:** When used with `asChild` as a link/button, inherits native keyboard support (Enter/Space activation)\n * - **Focus Management:** Focus ring applied to child element when using `asChild` pattern with interactive elements\n * - **Screen Readers:** Semantic HTML preserved via `asChild` - use appropriate elements (`<a>`, `<button>`, `<article>`)\n * - **Hover State:** Hover effects are purely visual and do not affect functionality (progressive enhancement)\n * - **Touch Targets:** When interactive, ensure child element meets minimum 44x44px touch target (WCAG 2.5.5)\n * - **Color Contrast:** Card border and background meet WCAG AA contrast requirements, content contrast is consumer's responsibility\n * - **Motion:** Hover scale animation respects `prefers-reduced-motion` settings via CSS transitions\n *\n * @since v1.0.0\n */\n\nimport { forwardRef, type ReactNode, type CSSProperties } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { useHover } from '@/lib/hooks/use-hover';\nimport { cardIntensity } from '@/lib/variants/glass-card-variants';\nimport '@/glass-theme.css';\n\nimport type { GlowType, IntensityType, PaddingType } from '@/lib/variants/glass-card-variants';\n\n// ========================================\n// BLUR MAP\n// ========================================\n// Per UI_DESIGN.md design tokens:\n// - subtle: 8px (--glass-blur-sm) - light glass effect\n// - medium: 16px (--glass-blur-md) - standard cards (was 12px - breaking change)\n// - strong: 24px (--glass-blur-lg) - featured cards (was 16px - breaking change)\n\nconst blurMap: Record<IntensityType, string> = {\n  subtle: 'var(--blur-sm)', // 8px\n  medium: 'var(--blur-md)', // 16px (BREAKING: was 12px)\n  strong: 'var(--blur-lg)', // 24px (BREAKING: was 16px)\n};\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for the GlassCard component\n *\n * A glass-themed container with configurable blur, glow effects, and hover animations.\n * Features polymorphic rendering via `asChild` for semantic HTML flexibility.\n *\n * @example Basic usage\n * ```tsx\n * const props: GlassCardProps = {\n *   intensity: 'medium',\n *   glow: 'blue',\n *   hover: true,\n *   padding: 'default',\n *   children: <p>Content</p>,\n * };\n * ```\n */\nexport interface GlassCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof cardIntensity> {\n  /**\n   * Render as child element instead of div (polymorphic rendering).\n   * Useful for making cards clickable links or custom interactive elements.\n   *\n   * @default false\n   * @example\n   * ```tsx\n   * <GlassCard asChild>\n   *   <a href=\"/article\">Article Content</a>\n   * </GlassCard>\n   * ```\n   */\n  readonly asChild?: boolean;\n\n  /**\n   * Card content to display.\n   */\n  readonly children: ReactNode;\n\n  /**\n   * Glow effect color applied to card shadow.\n   *\n   * @default null (neutral glow)\n   */\n  readonly glow?: GlowType;\n\n  /**\n   * Padding size variant.\n   *\n   * @default \"default\"\n   */\n  readonly padding?: PaddingType;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n// CSS variable maps for intensity\nconst bgVarMap: Record<IntensityType, string> = {\n  subtle: 'var(--card-subtle-bg)',\n  medium: 'var(--card-medium-bg)',\n  strong: 'var(--card-strong-bg)',\n};\n\nconst borderVarMap: Record<IntensityType, string> = {\n  subtle: 'var(--card-subtle-border)',\n  medium: 'var(--card-medium-border)',\n  strong: 'var(--card-strong-border)',\n};\n\nconst glowVarMap: Record<string, string> = {\n  blue: 'var(--glow-blue)',\n  violet: 'var(--glow-violet)',\n  purple: 'var(--glow-violet)',\n  cyan: 'var(--glow-cyan)',\n};\n\nexport const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(\n  (\n    {\n      asChild = false,\n      children,\n      className,\n      intensity = 'medium',\n      glow = null,\n      hover = true,\n      padding = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    const { isHovered, hoverProps } = useHover();\n    const intensityVal = intensity ?? 'medium';\n\n    const cardStyles: CSSProperties = {\n      background: isHovered && hover ? 'var(--card-hover-bg)' : bgVarMap[intensityVal],\n      borderColor: isHovered && hover ? 'var(--card-hover-border)' : borderVarMap[intensityVal],\n      backdropFilter: `blur(${blurMap[intensityVal]})`,\n      WebkitBackdropFilter: `blur(${blurMap[intensityVal]})`,\n      boxShadow: glow\n        ? glowVarMap[glow]\n        : isHovered && hover\n          ? 'var(--card-hover-glow)'\n          : 'var(--glow-neutral)',\n    };\n\n    // Polymorphic component - render as Slot when asChild is true\n    const Comp = asChild ? Slot : 'div';\n\n    return (\n      <Comp\n        ref={ref}\n        data-slot=\"card\"\n        className={cn(cardIntensity({ intensity, hover, padding }), className)}\n        style={cardStyles}\n        onMouseEnter={hoverProps.onMouseEnter}\n        onMouseLeave={hoverProps.onMouseLeave}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n\nGlassCard.displayName = 'GlassCard';\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"
    }
  }
}