{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-glass",
  "type": "registry:ui",
  "title": "Card Glass",
  "description": "CardGlass Compound Component",
  "dependencies": [
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/card-glass.tsx",
      "type": "registry:component",
      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * CardGlass Compound Component\n *\n * A glass-themed card with compound sub-components matching shadcn/ui Card API.\n * Provides structure (Header, Content, Footer) with glass visual effects.\n *\n * @example\n * ```tsx\n * // Object pattern (recommended)\n * <CardGlass.Root intensity=\"medium\" glow=\"blue\">\n *   <CardGlass.Header>\n *     <CardGlass.Title>Card Title</CardGlass.Title>\n *     <CardGlass.Description>Card description</CardGlass.Description>\n *     <CardGlass.Action>\n *       <ButtonGlass size=\"sm\">Action</ButtonGlass>\n *     </CardGlass.Action>\n *   </CardGlass.Header>\n *   <CardGlass.Content>\n *     <p>Main content goes here</p>\n *   </CardGlass.Content>\n *   <CardGlass.Footer>\n *     <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n *     <ButtonGlass>Save</ButtonGlass>\n *   </CardGlass.Footer>\n * </CardGlass.Root>\n *\n * // Named exports (shadcn/ui compatible)\n * import { CardGlassRoot, CardGlassHeader, CardGlassTitle } from '@/components/glass/ui';\n * ```\n *\n * @see GlassCard - Simple glass container without structure\n * @see Card (shadcn/ui) - Reference implementation\n */\n\nimport * as React from 'react';\nimport { type CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport type { GlowType, IntensityType } from '@/lib/variants/glass-card-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport interface CardGlassRootProps extends React.ComponentProps<'div'> {\n  /**\n   * Glass blur intensity\n   * @default 'medium'\n   */\n  intensity?: IntensityType;\n  /**\n   * Glow effect color\n   * @default null\n   */\n  glow?: GlowType;\n  /**\n   * Enable hover effects\n   * @default false\n   */\n  hover?: boolean;\n}\n\n// ========================================\n// STYLE MAPS (CSS Variables)\n// ========================================\n\nconst blurMap: Record<IntensityType, string> = {\n  subtle: 'var(--blur-sm)', // 8px\n  medium: 'var(--blur-md)', // 16px\n  strong: 'var(--blur-lg)', // 24px\n};\n\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  cyan: 'var(--glow-cyan)',\n};\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\n/**\n * CardGlass Root - Glass-themed card container\n *\n * @accessibility\n * - Uses semantic div element\n * - Color contrast meets WCAG AA\n * - Hover effects are decorative only\n */\nfunction CardGlassRoot({\n  className,\n  intensity = 'medium',\n  glow = null,\n  hover = false,\n  style,\n  ...props\n}: CardGlassRootProps) {\n  const cardStyles: CSSProperties = {\n    background: bgVarMap[intensity],\n    borderColor: borderVarMap[intensity],\n    backdropFilter: `blur(${blurMap[intensity]})`,\n    WebkitBackdropFilter: `blur(${blurMap[intensity]})`,\n    boxShadow: glow ? glowVarMap[glow] : 'var(--glow-neutral)',\n    ...style,\n  };\n\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        'flex flex-col gap-6 rounded-xl border py-6 transition-all duration-300',\n        'text-[var(--text-primary)]',\n        hover && 'hover:shadow-lg hover:border-[var(--card-hover-border)] cursor-pointer',\n        className\n      )}\n      style={cardStyles}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: HEADER\n// ========================================\n\n/**\n * CardGlass Header - Container for title, description, and action\n *\n * Uses CSS Grid for layout with automatic action positioning.\n */\nfunction CardGlassHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6',\n        'has-data-[slot=card-action]:grid-cols-[1fr_auto]',\n        '[.border-b]:pb-6',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TITLE\n// ========================================\n\n/**\n * CardGlass Title - Card title text\n */\nfunction CardGlassTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('leading-none font-semibold text-[var(--text-primary)]', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: DESCRIPTION\n// ========================================\n\n/**\n * CardGlass Description - Card description/subtitle text\n */\nfunction CardGlassDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn('text-sm text-[var(--text-muted)]', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: ACTION\n// ========================================\n\n/**\n * CardGlass Action - Positioned action slot in header\n *\n * Automatically positioned to the right of title/description.\n */\nfunction CardGlassAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\n/**\n * CardGlass Content - Main content area\n */\nfunction CardGlassContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-content\" className={cn('px-6', className)} {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: FOOTER\n// ========================================\n\n/**\n * CardGlass Footer - Footer area with flex layout\n */\nfunction CardGlassFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center gap-2 px-6 [.border-t]:pt-6', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// EXPORTS: OBJECT PATTERN\n// ========================================\n\n/**\n * CardGlass - Compound Component API\n *\n * @example\n * ```tsx\n * <CardGlass.Root intensity=\"medium\">\n *   <CardGlass.Header>\n *     <CardGlass.Title>Title</CardGlass.Title>\n *     <CardGlass.Description>Description</CardGlass.Description>\n *   </CardGlass.Header>\n *   <CardGlass.Content>Content</CardGlass.Content>\n *   <CardGlass.Footer>Footer</CardGlass.Footer>\n * </CardGlass.Root>\n * ```\n */\nexport const CardGlass = {\n  Root: CardGlassRoot,\n  Header: CardGlassHeader,\n  Title: CardGlassTitle,\n  Description: CardGlassDescription,\n  Action: CardGlassAction,\n  Content: CardGlassContent,\n  Footer: CardGlassFooter,\n};\n\n// ========================================\n// EXPORTS: NAMED (shadcn/ui compatible)\n// ========================================\n\nexport {\n  CardGlassRoot,\n  CardGlassHeader,\n  CardGlassTitle,\n  CardGlassDescription,\n  CardGlassAction,\n  CardGlassContent,\n  CardGlassFooter,\n};\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * Card - shadcn/ui compatible alias for CardGlass\n *\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'shadcn-glass-ui'\n *\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title</CardTitle>\n *     <CardDescription>Card description</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content</CardContent>\n *   <CardFooter>Footer</CardFooter>\n * </Card>\n * ```\n *\n * @since v2.6.0\n */\nexport const Card = CardGlassRoot;\nexport const CardHeader = CardGlassHeader;\nexport const CardTitle = CardGlassTitle;\nexport const CardDescription = CardGlassDescription;\nexport const CardContent = CardGlassContent;\nexport const CardFooter = CardGlassFooter;\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"
    }
  }
}