Card Glass

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * CardGlass Compound Component
4 *
5 * A glass-themed card with compound sub-components matching shadcn/ui Card API.
6 * Provides structure (Header, Content, Footer) with glass visual effects.
7 *
8 * @example
9 * ```tsx
10 * // Object pattern (recommended)
11 * <CardGlass.Root intensity="medium" glow="blue">
12 *   <CardGlass.Header>
13 *     <CardGlass.Title>Card Title</CardGlass.Title>
14 *     <CardGlass.Description>Card description</CardGlass.Description>
15 *     <CardGlass.Action>
16 *       <ButtonGlass size="sm">Action</ButtonGlass>
17 *     </CardGlass.Action>
18 *   </CardGlass.Header>
19 *   <CardGlass.Content>
20 *     <p>Main content goes here</p>
21 *   </CardGlass.Content>
22 *   <CardGlass.Footer>
23 *     <ButtonGlass variant="ghost">Cancel</ButtonGlass>
24 *     <ButtonGlass>Save</ButtonGlass>
25 *   </CardGlass.Footer>
26 * </CardGlass.Root>
27 *
28 * // Named exports (shadcn/ui compatible)
29 * import { CardGlassRoot, CardGlassHeader, CardGlassTitle } from '@/components/glass/ui';
30 * ```
31 *
32 * @see GlassCard - Simple glass container without structure
33 * @see Card (shadcn/ui) - Reference implementation
34 */
35 
36import * as React from 'react';
37import { type CSSProperties } from 'react';
38import { cn } from '@/lib/utils';
39import type { GlowType, IntensityType } from '@/lib/variants/glass-card-variants';
40import '@/glass-theme.css';
41 
42// ========================================
43// TYPES
44// ========================================
45 
46export interface CardGlassRootProps extends React.ComponentProps<'div'> {
47  /**
48   * Glass blur intensity
49   * @default 'medium'
50   */
51  intensity?: IntensityType;
52  /**
53   * Glow effect color
54   * @default null
55   */
56  glow?: GlowType;
57  /**
58   * Enable hover effects
59   * @default false
60   */
61  hover?: boolean;
62}
63 
64// ========================================
65// STYLE MAPS (CSS Variables)
66// ========================================
67 
68const blurMap: Record<IntensityType, string> = {
69  subtle: 'var(--blur-sm)', // 8px
70  medium: 'var(--blur-md)', // 16px
71  strong: 'var(--blur-lg)', // 24px
72};
73 
74const bgVarMap: Record<IntensityType, string> = {
75  subtle: 'var(--card-subtle-bg)',
76  medium: 'var(--card-medium-bg)',
77  strong: 'var(--card-strong-bg)',
78};
79 
80const borderVarMap: Record<IntensityType, string> = {
81  subtle: 'var(--card-subtle-border)',
82  medium: 'var(--card-medium-border)',
83  strong: 'var(--card-strong-border)',
84};
85 
86const glowVarMap: Record<string, string> = {
87  blue: 'var(--glow-blue)',
88// … truncated