shadcn-glass-ui 2.2.0 → 2.2.1

package/dist/{use-focus--Hw2nevi.cjs → use-focus-CdoUzFQ8.cjs}

@@ -1,4 +1,4 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-CTsEVRD3.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-DTS1RdIt.cjs");
 let react = require("react");
 function useHover(options = {}) {
 	const { enterDelay = 0, leaveDelay = 0, includeFocus = false, onHoverChange } = options;
@@ -127,4 +127,4 @@ Object.defineProperty(exports, "useHover", {
 	}
 });
 
-//# sourceMappingURL=use-focus--Hw2nevi.cjs.map
+//# sourceMappingURL=use-focus-CdoUzFQ8.cjs.map

package/dist/{use-focus--Hw2nevi.cjs.map → use-focus-CdoUzFQ8.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"use-focus--Hw2nevi.cjs","names":["hoverProps: UseHoverReturn['hoverProps']","focusProps: UseFocusReturn['focusProps']"],"sources":["../src/lib/hooks/use-hover.ts","../src/lib/hooks/use-focus.ts"],"sourcesContent":["/**\n * useHover Hook\n *\n * Replaces the repeated hover state pattern found in 13+ components:\n *\n * ```tsx\n * // BEFORE (duplicated in every component)\n * const [isHovered, setIsHovered] = useState(false);\n * <div\n *   onMouseEnter={() => setIsHovered(true)}\n *   onMouseLeave={() => setIsHovered(false)}\n * />\n *\n * // AFTER\n * const { isHovered, hoverProps } = useHover();\n * <div {...hoverProps} />\n * ```\n */\n\nimport { useState, useCallback, type MouseEvent, type FocusEvent } from 'react';\n\nexport interface UseHoverOptions {\n  /** Delay before hover state becomes true (ms) */\n  enterDelay?: number;\n  /** Delay before hover state becomes false (ms) */\n  leaveDelay?: number;\n  /** Include focus events for accessibility */\n  includeFocus?: boolean;\n  /** Callback when hover state changes */\n  onHoverChange?: (isHovered: boolean) => void;\n}\n\nexport interface UseHoverReturn {\n  /** Current hover state */\n  isHovered: boolean;\n  /** Props to spread on the target element */\n  hoverProps: {\n    onMouseEnter: (e: MouseEvent) => void;\n    onMouseLeave: (e: MouseEvent) => void;\n    onFocus?: (e: FocusEvent) => void;\n    onBlur?: (e: FocusEvent) => void;\n  };\n  /** Manually set hover state */\n  setIsHovered: (value: boolean) => void;\n}\n\n/**\n * Hook for managing hover state with optional delays and focus support.\n *\n * @example\n * ```tsx\n * const { isHovered, hoverProps } = useHover();\n *\n * return (\n *   <div\n *     {...hoverProps}\n *     style={{ opacity: isHovered ? 1 : 0.8 }}\n *   >\n *     Hover me\n *   </div>\n * );\n * ```\n *\n * @example With options\n * ```tsx\n * const { isHovered, hoverProps } = useHover({\n *   enterDelay: 100,\n *   leaveDelay: 200,\n *   includeFocus: true,\n *   onHoverChange: (hover) => console.log('Hovered:', hover),\n * });\n * ```\n */\nexport function useHover(options: UseHoverOptions = {}): UseHoverReturn {\n  const {\n    enterDelay = 0,\n    leaveDelay = 0,\n    includeFocus = false,\n    onHoverChange,\n  } = options;\n\n  const [isHovered, setIsHoveredState] = useState(false);\n  const [enterTimeout, setEnterTimeout] = useState<ReturnType<typeof setTimeout> | null>(null);\n  const [leaveTimeout, setLeaveTimeout] = useState<ReturnType<typeof setTimeout> | null>(null);\n\n  const setIsHovered = useCallback(\n    (value: boolean) => {\n      setIsHoveredState(value);\n      onHoverChange?.(value);\n    },\n    [onHoverChange]\n  );\n\n  const handleMouseEnter = useCallback(\n    () => {\n      // Clear any pending leave timeout\n      if (leaveTimeout) {\n        clearTimeout(leaveTimeout);\n        setLeaveTimeout(null);\n      }\n\n      if (enterDelay > 0) {\n        const timeout = setTimeout(() => {\n          setIsHovered(true);\n        }, enterDelay);\n        setEnterTimeout(timeout);\n      } else {\n        setIsHovered(true);\n      }\n    },\n    [enterDelay, leaveTimeout, setIsHovered]\n  );\n\n  const handleMouseLeave = useCallback(\n    () => {\n      // Clear any pending enter timeout\n      if (enterTimeout) {\n        clearTimeout(enterTimeout);\n        setEnterTimeout(null);\n      }\n\n      if (leaveDelay > 0) {\n        const timeout = setTimeout(() => {\n          setIsHovered(false);\n        }, leaveDelay);\n        setLeaveTimeout(timeout);\n      } else {\n        setIsHovered(false);\n      }\n    },\n    [leaveDelay, enterTimeout, setIsHovered]\n  );\n\n  const handleFocus = useCallback(\n    () => {\n      if (includeFocus) {\n        setIsHovered(true);\n      }\n    },\n    [includeFocus, setIsHovered]\n  );\n\n  const handleBlur = useCallback(\n    () => {\n      if (includeFocus) {\n        setIsHovered(false);\n      }\n    },\n    [includeFocus, setIsHovered]\n  );\n\n  const hoverProps: UseHoverReturn['hoverProps'] = {\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n    ...(includeFocus && {\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }),\n  };\n\n  return {\n    isHovered,\n    hoverProps,\n    setIsHovered,\n  };\n}\n\nexport default useHover;\n","/**\n * useFocus Hook\n *\n * Manages focus state for form elements with keyboard navigation support.\n * Similar to useHover but for focus events.\n *\n * Implements proper :focus-visible behavior by tracking keyboard vs mouse interaction\n * at the document level, ensuring focus rings only appear for keyboard navigation.\n */\n\nimport {\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type FocusEvent,\n  type KeyboardEvent,\n} from 'react';\n\n// Global state to track whether the last user interaction was via keyboard\nlet hadKeyboardEvent = false;\nlet isInitialized = false;\n\n/**\n * Initialize global keyboard/mouse tracking for focus-visible behavior.\n * This ensures focus rings only appear when navigating via keyboard (Tab key),\n * not when clicking with a mouse.\n */\nfunction initializeKeyboardTracking() {\n  if (isInitialized || typeof window === 'undefined') return;\n\n  isInitialized = true;\n\n  // Track keyboard events (Tab, Shift, Arrow keys, etc.)\n  const handleKeyDown = (e: globalThis.KeyboardEvent) => {\n    // Only consider keyboard navigation keys\n    if (e.key === 'Tab' || e.key.startsWith('Arrow') || e.key === 'Enter' || e.key === ' ') {\n      hadKeyboardEvent = true;\n    }\n  };\n\n  // Track mouse/pointer events - clear keyboard flag\n  const handlePointerDown = () => {\n    hadKeyboardEvent = false;\n  };\n\n  // Use capture phase to detect events before they reach components\n  document.addEventListener('keydown', handleKeyDown, true);\n  document.addEventListener('mousedown', handlePointerDown, true);\n  document.addEventListener('pointerdown', handlePointerDown, true);\n  document.addEventListener('touchstart', handlePointerDown, true);\n\n  // Cleanup not needed - these are global listeners that persist for the app lifecycle\n}\n\nexport interface UseFocusOptions {\n  /** Callback when focus state changes */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Include focus-visible behavior (keyboard focus only) */\n  focusVisible?: boolean;\n  /** Callback for keyboard events while focused */\n  onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport interface UseFocusReturn {\n  /** Current focus state */\n  isFocused: boolean;\n  /** True only when focused via keyboard (if focusVisible enabled) */\n  isFocusVisible: boolean;\n  /** Props to spread on the target element */\n  focusProps: {\n    onFocus: (e: FocusEvent) => void;\n    onBlur: (e: FocusEvent) => void;\n    onKeyDown?: (e: KeyboardEvent) => void;\n  };\n  /** Manually set focus state */\n  setIsFocused: (value: boolean) => void;\n  /** Reference to track if last focus was from keyboard */\n  focusRef: React.RefObject<boolean>;\n}\n\n/**\n * Hook for managing focus state with optional focus-visible support.\n *\n * @example Basic usage\n * ```tsx\n * const { isFocused, focusProps } = useFocus();\n *\n * return (\n *   <input\n *     {...focusProps}\n *     style={{\n *       borderColor: isFocused ? 'violet' : 'gray',\n *     }}\n *   />\n * );\n * ```\n *\n * @example Focus-visible for keyboard navigation\n * ```tsx\n * const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });\n *\n * return (\n *   <button\n *     {...focusProps}\n *     style={{\n *       outline: isFocusVisible ? '2px solid violet' : 'none',\n *     }}\n *   >\n *     Click or Tab to me\n *   </button>\n * );\n * ```\n */\nexport function useFocus(options: UseFocusOptions = {}): UseFocusReturn {\n  const { onFocusChange, focusVisible = false, onKeyDown } = options;\n\n  const [isFocused, setIsFocusedState] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const hadKeyboardEventRef = useRef(false);\n  const focusRef = useRef(false);\n\n  // Initialize global keyboard tracking on mount (runs once per app)\n  useEffect(() => {\n    if (focusVisible) {\n      initializeKeyboardTracking();\n    }\n  }, [focusVisible]);\n\n  const setIsFocused = useCallback(\n    (value: boolean) => {\n      setIsFocusedState(value);\n      focusRef.current = value;\n      onFocusChange?.(value);\n    },\n    [onFocusChange]\n  );\n\n  const handleFocus = useCallback(\n    () => {\n      setIsFocused(true);\n\n      if (focusVisible) {\n        // Use global keyboard tracking state for accurate focus-visible detection\n        const isKeyboardFocus = hadKeyboardEvent;\n        setIsFocusVisible(isKeyboardFocus);\n        hadKeyboardEventRef.current = isKeyboardFocus;\n      }\n    },\n    [setIsFocused, focusVisible]\n  );\n\n  const handleBlur = useCallback(\n    () => {\n      setIsFocused(false);\n      setIsFocusVisible(false);\n    },\n    [setIsFocused]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      hadKeyboardEventRef.current = true;\n      onKeyDown?.(e);\n    },\n    [onKeyDown]\n  );\n\n  const focusProps: UseFocusReturn['focusProps'] = {\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    ...(onKeyDown && { onKeyDown: handleKeyDown }),\n  };\n\n  return {\n    isFocused,\n    isFocusVisible,\n    focusProps,\n    setIsFocused,\n    focusRef,\n  };\n}\n\nexport default useFocus;\n"],"mappings":"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"}
+{"version":3,"file":"use-focus-CdoUzFQ8.cjs","names":["hoverProps: UseHoverReturn['hoverProps']","focusProps: UseFocusReturn['focusProps']"],"sources":["../src/lib/hooks/use-hover.ts","../src/lib/hooks/use-focus.ts"],"sourcesContent":["/**\n * useHover Hook\n *\n * Replaces the repeated hover state pattern found in 13+ components:\n *\n * ```tsx\n * // BEFORE (duplicated in every component)\n * const [isHovered, setIsHovered] = useState(false);\n * <div\n *   onMouseEnter={() => setIsHovered(true)}\n *   onMouseLeave={() => setIsHovered(false)}\n * />\n *\n * // AFTER\n * const { isHovered, hoverProps } = useHover();\n * <div {...hoverProps} />\n * ```\n */\n\nimport { useState, useCallback, type MouseEvent, type FocusEvent } from 'react';\n\nexport interface UseHoverOptions {\n  /** Delay before hover state becomes true (ms) */\n  enterDelay?: number;\n  /** Delay before hover state becomes false (ms) */\n  leaveDelay?: number;\n  /** Include focus events for accessibility */\n  includeFocus?: boolean;\n  /** Callback when hover state changes */\n  onHoverChange?: (isHovered: boolean) => void;\n}\n\nexport interface UseHoverReturn {\n  /** Current hover state */\n  isHovered: boolean;\n  /** Props to spread on the target element */\n  hoverProps: {\n    onMouseEnter: (e: MouseEvent) => void;\n    onMouseLeave: (e: MouseEvent) => void;\n    onFocus?: (e: FocusEvent) => void;\n    onBlur?: (e: FocusEvent) => void;\n  };\n  /** Manually set hover state */\n  setIsHovered: (value: boolean) => void;\n}\n\n/**\n * Hook for managing hover state with optional delays and focus support.\n *\n * @example\n * ```tsx\n * const { isHovered, hoverProps } = useHover();\n *\n * return (\n *   <div\n *     {...hoverProps}\n *     style={{ opacity: isHovered ? 1 : 0.8 }}\n *   >\n *     Hover me\n *   </div>\n * );\n * ```\n *\n * @example With options\n * ```tsx\n * const { isHovered, hoverProps } = useHover({\n *   enterDelay: 100,\n *   leaveDelay: 200,\n *   includeFocus: true,\n *   onHoverChange: (hover) => console.log('Hovered:', hover),\n * });\n * ```\n */\nexport function useHover(options: UseHoverOptions = {}): UseHoverReturn {\n  const {\n    enterDelay = 0,\n    leaveDelay = 0,\n    includeFocus = false,\n    onHoverChange,\n  } = options;\n\n  const [isHovered, setIsHoveredState] = useState(false);\n  const [enterTimeout, setEnterTimeout] = useState<ReturnType<typeof setTimeout> | null>(null);\n  const [leaveTimeout, setLeaveTimeout] = useState<ReturnType<typeof setTimeout> | null>(null);\n\n  const setIsHovered = useCallback(\n    (value: boolean) => {\n      setIsHoveredState(value);\n      onHoverChange?.(value);\n    },\n    [onHoverChange]\n  );\n\n  const handleMouseEnter = useCallback(\n    () => {\n      // Clear any pending leave timeout\n      if (leaveTimeout) {\n        clearTimeout(leaveTimeout);\n        setLeaveTimeout(null);\n      }\n\n      if (enterDelay > 0) {\n        const timeout = setTimeout(() => {\n          setIsHovered(true);\n        }, enterDelay);\n        setEnterTimeout(timeout);\n      } else {\n        setIsHovered(true);\n      }\n    },\n    [enterDelay, leaveTimeout, setIsHovered]\n  );\n\n  const handleMouseLeave = useCallback(\n    () => {\n      // Clear any pending enter timeout\n      if (enterTimeout) {\n        clearTimeout(enterTimeout);\n        setEnterTimeout(null);\n      }\n\n      if (leaveDelay > 0) {\n        const timeout = setTimeout(() => {\n          setIsHovered(false);\n        }, leaveDelay);\n        setLeaveTimeout(timeout);\n      } else {\n        setIsHovered(false);\n      }\n    },\n    [leaveDelay, enterTimeout, setIsHovered]\n  );\n\n  const handleFocus = useCallback(\n    () => {\n      if (includeFocus) {\n        setIsHovered(true);\n      }\n    },\n    [includeFocus, setIsHovered]\n  );\n\n  const handleBlur = useCallback(\n    () => {\n      if (includeFocus) {\n        setIsHovered(false);\n      }\n    },\n    [includeFocus, setIsHovered]\n  );\n\n  const hoverProps: UseHoverReturn['hoverProps'] = {\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n    ...(includeFocus && {\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }),\n  };\n\n  return {\n    isHovered,\n    hoverProps,\n    setIsHovered,\n  };\n}\n\nexport default useHover;\n","/**\n * useFocus Hook\n *\n * Manages focus state for form elements with keyboard navigation support.\n * Similar to useHover but for focus events.\n *\n * Implements proper :focus-visible behavior by tracking keyboard vs mouse interaction\n * at the document level, ensuring focus rings only appear for keyboard navigation.\n */\n\nimport {\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type FocusEvent,\n  type KeyboardEvent,\n} from 'react';\n\n// Global state to track whether the last user interaction was via keyboard\nlet hadKeyboardEvent = false;\nlet isInitialized = false;\n\n/**\n * Initialize global keyboard/mouse tracking for focus-visible behavior.\n * This ensures focus rings only appear when navigating via keyboard (Tab key),\n * not when clicking with a mouse.\n */\nfunction initializeKeyboardTracking() {\n  if (isInitialized || typeof window === 'undefined') return;\n\n  isInitialized = true;\n\n  // Track keyboard events (Tab, Shift, Arrow keys, etc.)\n  const handleKeyDown = (e: globalThis.KeyboardEvent) => {\n    // Only consider keyboard navigation keys\n    if (e.key === 'Tab' || e.key.startsWith('Arrow') || e.key === 'Enter' || e.key === ' ') {\n      hadKeyboardEvent = true;\n    }\n  };\n\n  // Track mouse/pointer events - clear keyboard flag\n  const handlePointerDown = () => {\n    hadKeyboardEvent = false;\n  };\n\n  // Use capture phase to detect events before they reach components\n  document.addEventListener('keydown', handleKeyDown, true);\n  document.addEventListener('mousedown', handlePointerDown, true);\n  document.addEventListener('pointerdown', handlePointerDown, true);\n  document.addEventListener('touchstart', handlePointerDown, true);\n\n  // Cleanup not needed - these are global listeners that persist for the app lifecycle\n}\n\nexport interface UseFocusOptions {\n  /** Callback when focus state changes */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Include focus-visible behavior (keyboard focus only) */\n  focusVisible?: boolean;\n  /** Callback for keyboard events while focused */\n  onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport interface UseFocusReturn {\n  /** Current focus state */\n  isFocused: boolean;\n  /** True only when focused via keyboard (if focusVisible enabled) */\n  isFocusVisible: boolean;\n  /** Props to spread on the target element */\n  focusProps: {\n    onFocus: (e: FocusEvent) => void;\n    onBlur: (e: FocusEvent) => void;\n    onKeyDown?: (e: KeyboardEvent) => void;\n  };\n  /** Manually set focus state */\n  setIsFocused: (value: boolean) => void;\n  /** Reference to track if last focus was from keyboard */\n  focusRef: React.RefObject<boolean>;\n}\n\n/**\n * Hook for managing focus state with optional focus-visible support.\n *\n * @example Basic usage\n * ```tsx\n * const { isFocused, focusProps } = useFocus();\n *\n * return (\n *   <input\n *     {...focusProps}\n *     style={{\n *       borderColor: isFocused ? 'violet' : 'gray',\n *     }}\n *   />\n * );\n * ```\n *\n * @example Focus-visible for keyboard navigation\n * ```tsx\n * const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });\n *\n * return (\n *   <button\n *     {...focusProps}\n *     style={{\n *       outline: isFocusVisible ? '2px solid violet' : 'none',\n *     }}\n *   >\n *     Click or Tab to me\n *   </button>\n * );\n * ```\n */\nexport function useFocus(options: UseFocusOptions = {}): UseFocusReturn {\n  const { onFocusChange, focusVisible = false, onKeyDown } = options;\n\n  const [isFocused, setIsFocusedState] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const hadKeyboardEventRef = useRef(false);\n  const focusRef = useRef(false);\n\n  // Initialize global keyboard tracking on mount (runs once per app)\n  useEffect(() => {\n    if (focusVisible) {\n      initializeKeyboardTracking();\n    }\n  }, [focusVisible]);\n\n  const setIsFocused = useCallback(\n    (value: boolean) => {\n      setIsFocusedState(value);\n      focusRef.current = value;\n      onFocusChange?.(value);\n    },\n    [onFocusChange]\n  );\n\n  const handleFocus = useCallback(\n    () => {\n      setIsFocused(true);\n\n      if (focusVisible) {\n        // Use global keyboard tracking state for accurate focus-visible detection\n        const isKeyboardFocus = hadKeyboardEvent;\n        setIsFocusVisible(isKeyboardFocus);\n        hadKeyboardEventRef.current = isKeyboardFocus;\n      }\n    },\n    [setIsFocused, focusVisible]\n  );\n\n  const handleBlur = useCallback(\n    () => {\n      setIsFocused(false);\n      setIsFocusVisible(false);\n    },\n    [setIsFocused]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      hadKeyboardEventRef.current = true;\n      onKeyDown?.(e);\n    },\n    [onKeyDown]\n  );\n\n  const focusProps: UseFocusReturn['focusProps'] = {\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    ...(onKeyDown && { onKeyDown: handleKeyDown }),\n  };\n\n  return {\n    isFocused,\n    isFocusVisible,\n    focusProps,\n    setIsFocused,\n    focusRef,\n  };\n}\n\nexport default useFocus;\n"],"mappings":"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"}

package/dist/{use-wallpaper-tint-B4oMQsXQ.cjs → use-wallpaper-tint-Rq5UgY9L.cjs}

@@ -1,4 +1,4 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-CTsEVRD3.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-DTS1RdIt.cjs");
 let react = require("react");
 var BREAKPOINTS = {
 	xs: 0,
@@ -159,4 +159,4 @@ Object.defineProperty(exports, "useWallpaperTint", {
 	}
 });
 
-//# sourceMappingURL=use-wallpaper-tint-B4oMQsXQ.cjs.map
+//# sourceMappingURL=use-wallpaper-tint-Rq5UgY9L.cjs.map

package/dist/{use-wallpaper-tint-B4oMQsXQ.cjs.map → use-wallpaper-tint-Rq5UgY9L.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"use-wallpaper-tint-B4oMQsXQ.cjs","names":["colors: { r: number; g: number; b: number }[]"],"sources":["../src/lib/hooks/use-responsive.ts","../src/lib/hooks/use-wallpaper-tint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n/**\n * Tailwind CSS breakpoints\n * @see https://tailwindcss.com/docs/responsive-design\n */\nconst BREAKPOINTS = {\n  xs: 0,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\nexport interface UseResponsiveReturn {\n  /** Window width is less than 768px (mobile) */\n  isMobile: boolean;\n  /** Window width is >= 768px and < 1024px (tablet) */\n  isTablet: boolean;\n  /** Window width is >= 1024px (desktop) */\n  isDesktop: boolean;\n  /** Current active breakpoint */\n  currentBreakpoint: Breakpoint;\n  /** Current window width in pixels */\n  width: number;\n}\n\n/**\n * Hook to detect current responsive breakpoint\n *\n * @returns Responsive state with current breakpoint and device type flags\n *\n * @example\n * ```tsx\n * const { isMobile, isTablet, isDesktop, currentBreakpoint } = useResponsive();\n *\n * return (\n *   <div className={isMobile ? 'flex-col' : 'flex-row'}>\n *     {currentBreakpoint === 'lg' && <Sidebar />}\n *   </div>\n * );\n * ```\n */\nexport function useResponsive(): UseResponsiveReturn {\n  const [width, setWidth] = useState<number>(\n    typeof window !== 'undefined' ? window.innerWidth : BREAKPOINTS.lg\n  );\n\n  useEffect(() => {\n    // Server-side rendering guard\n    if (typeof window === 'undefined') return;\n\n    const handleResize = () => {\n      setWidth(window.innerWidth);\n    };\n\n    // Set initial value\n    handleResize();\n\n    // Add event listener\n    window.addEventListener('resize', handleResize);\n\n    // Cleanup\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  // Calculate current breakpoint\n  const getCurrentBreakpoint = (): Breakpoint => {\n    if (width >= BREAKPOINTS['2xl']) return '2xl';\n    if (width >= BREAKPOINTS.xl) return 'xl';\n    if (width >= BREAKPOINTS.lg) return 'lg';\n    if (width >= BREAKPOINTS.md) return 'md';\n    if (width >= BREAKPOINTS.sm) return 'sm';\n    return 'xs';\n  };\n\n  const currentBreakpoint = getCurrentBreakpoint();\n\n  return {\n    isMobile: width < BREAKPOINTS.md,\n    isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,\n    isDesktop: width >= BREAKPOINTS.lg,\n    currentBreakpoint,\n    width,\n  };\n}\n","// ========================================\n// WALLPAPER TINT HOOK\n// Extract dominant color from background image\n// ========================================\n\nimport { useState, useEffect, useCallback } from \"react\";\n\nexport interface WallpaperTintOptions {\n  /**\n   * The image URL to sample for tint color\n   */\n  imageUrl?: string;\n\n  /**\n   * Debounce delay in milliseconds\n   * @default 300\n   */\n  debounceMs?: number;\n\n  /**\n   * Number of sample points to take from the image\n   * @default 10\n   */\n  sampleSize?: number;\n\n  /**\n   * Whether to enable the tint extraction\n   * @default true\n   */\n  enabled?: boolean;\n}\n\nexport interface WallpaperTintResult {\n  /**\n   * The extracted tint color in RGB format\n   * Example: \"120, 80, 200\"\n   */\n  tintColor: string | null;\n\n  /**\n   * Whether the tint extraction is in progress\n   */\n  isLoading: boolean;\n\n  /**\n   * Error message if extraction failed\n   */\n  error: string | null;\n\n  /**\n   * Re-extract the tint color from the current image\n   */\n  refresh: () => void;\n}\n\n/**\n * Converts RGB values to a luminance value (0-255)\n */\nconst getLuminance = (r: number, g: number, b: number): number => {\n  // Use standard luminance formula\n  return 0.299 * r + 0.587 * g + 0.114 * b;\n};\n\n/**\n * Extracts the dominant color from an image using canvas sampling\n */\nconst extractDominantColor = async (\n  imageUrl: string,\n  sampleSize: number = 10\n): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image();\n    img.crossOrigin = \"Anonymous\"; // Enable CORS\n\n    img.onload = () => {\n      try {\n        // Create canvas for sampling\n        const canvas = document.createElement(\"canvas\");\n        const ctx = canvas.getContext(\"2d\");\n\n        if (!ctx) {\n          reject(new Error(\"Failed to get canvas context\"));\n          return;\n        }\n\n        // Set canvas size to image size\n        canvas.width = img.width;\n        canvas.height = img.height;\n\n        // Draw image to canvas\n        ctx.drawImage(img, 0, 0);\n\n        // Sample colors from grid\n        const colors: { r: number; g: number; b: number }[] = [];\n        const stepX = Math.floor(img.width / sampleSize);\n        const stepY = Math.floor(img.height / sampleSize);\n\n        for (let y = stepY / 2; y < img.height; y += stepY) {\n          for (let x = stepX / 2; x < img.width; x += stepX) {\n            const pixel = ctx.getImageData(x, y, 1, 1).data;\n            colors.push({\n              r: pixel[0],\n              g: pixel[1],\n              b: pixel[2],\n            });\n          }\n        }\n\n        // Calculate average color (simple approach)\n        const avgColor = colors.reduce(\n          (acc, color) => ({\n            r: acc.r + color.r,\n            g: acc.g + color.g,\n            b: acc.b + color.b,\n          }),\n          { r: 0, g: 0, b: 0 }\n        );\n\n        const count = colors.length;\n        avgColor.r = Math.round(avgColor.r / count);\n        avgColor.g = Math.round(avgColor.g / count);\n        avgColor.b = Math.round(avgColor.b / count);\n\n        // Adjust color based on luminance for better glass effect\n        const luminance = getLuminance(avgColor.r, avgColor.g, avgColor.b);\n\n        // If too dark, lighten it\n        if (luminance < 80) {\n          const factor = 1.5;\n          avgColor.r = Math.min(255, Math.round(avgColor.r * factor));\n          avgColor.g = Math.min(255, Math.round(avgColor.g * factor));\n          avgColor.b = Math.min(255, Math.round(avgColor.b * factor));\n        }\n\n        // If too bright, darken it slightly\n        if (luminance > 200) {\n          const factor = 0.7;\n          avgColor.r = Math.round(avgColor.r * factor);\n          avgColor.g = Math.round(avgColor.g * factor);\n          avgColor.b = Math.round(avgColor.b * factor);\n        }\n\n        resolve(`${avgColor.r}, ${avgColor.g}, ${avgColor.b}`);\n      } catch (error) {\n        reject(error);\n      }\n    };\n\n    img.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n    };\n\n    img.src = imageUrl;\n  });\n};\n\n/**\n * Hook to extract and use wallpaper tint color\n *\n * @example\n * ```tsx\n * const { tintColor, isLoading } = useWallpaperTint({\n *   imageUrl: '/path/to/background.jpg',\n * });\n *\n * // Use tintColor in CSS variables\n * <div style={{ '--wallpaper-tint': tintColor }}>\n *   <GlassCard />\n * </div>\n * ```\n */\nexport const useWallpaperTint = (\n  options: WallpaperTintOptions = {}\n): WallpaperTintResult => {\n  const {\n    imageUrl,\n    debounceMs = 300,\n    sampleSize = 10,\n    enabled = true,\n  } = options;\n\n  const [tintColor, setTintColor] = useState<string | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const extractTint = useCallback(async () => {\n    if (!imageUrl || !enabled) {\n      setTintColor(null);\n      setError(null);\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const color = await extractDominantColor(imageUrl, sampleSize);\n      setTintColor(color);\n    } catch (err) {\n      const errorMessage =\n        err instanceof Error ? err.message : \"Failed to extract tint color\";\n      setError(errorMessage);\n      setTintColor(null);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [imageUrl, sampleSize, enabled]);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const timeoutId = setTimeout(() => {\n      extractTint();\n    }, debounceMs);\n\n    return () => clearTimeout(timeoutId);\n  }, [extractTint, debounceMs, enabled]);\n\n  return {\n    tintColor,\n    isLoading,\n    error,\n    refresh: extractTint,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"use-wallpaper-tint-Rq5UgY9L.cjs","names":["colors: { r: number; g: number; b: number }[]"],"sources":["../src/lib/hooks/use-responsive.ts","../src/lib/hooks/use-wallpaper-tint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n/**\n * Tailwind CSS breakpoints\n * @see https://tailwindcss.com/docs/responsive-design\n */\nconst BREAKPOINTS = {\n  xs: 0,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\nexport interface UseResponsiveReturn {\n  /** Window width is less than 768px (mobile) */\n  isMobile: boolean;\n  /** Window width is >= 768px and < 1024px (tablet) */\n  isTablet: boolean;\n  /** Window width is >= 1024px (desktop) */\n  isDesktop: boolean;\n  /** Current active breakpoint */\n  currentBreakpoint: Breakpoint;\n  /** Current window width in pixels */\n  width: number;\n}\n\n/**\n * Hook to detect current responsive breakpoint\n *\n * @returns Responsive state with current breakpoint and device type flags\n *\n * @example\n * ```tsx\n * const { isMobile, isTablet, isDesktop, currentBreakpoint } = useResponsive();\n *\n * return (\n *   <div className={isMobile ? 'flex-col' : 'flex-row'}>\n *     {currentBreakpoint === 'lg' && <Sidebar />}\n *   </div>\n * );\n * ```\n */\nexport function useResponsive(): UseResponsiveReturn {\n  const [width, setWidth] = useState<number>(\n    typeof window !== 'undefined' ? window.innerWidth : BREAKPOINTS.lg\n  );\n\n  useEffect(() => {\n    // Server-side rendering guard\n    if (typeof window === 'undefined') return;\n\n    const handleResize = () => {\n      setWidth(window.innerWidth);\n    };\n\n    // Set initial value\n    handleResize();\n\n    // Add event listener\n    window.addEventListener('resize', handleResize);\n\n    // Cleanup\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  // Calculate current breakpoint\n  const getCurrentBreakpoint = (): Breakpoint => {\n    if (width >= BREAKPOINTS['2xl']) return '2xl';\n    if (width >= BREAKPOINTS.xl) return 'xl';\n    if (width >= BREAKPOINTS.lg) return 'lg';\n    if (width >= BREAKPOINTS.md) return 'md';\n    if (width >= BREAKPOINTS.sm) return 'sm';\n    return 'xs';\n  };\n\n  const currentBreakpoint = getCurrentBreakpoint();\n\n  return {\n    isMobile: width < BREAKPOINTS.md,\n    isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,\n    isDesktop: width >= BREAKPOINTS.lg,\n    currentBreakpoint,\n    width,\n  };\n}\n","// ========================================\n// WALLPAPER TINT HOOK\n// Extract dominant color from background image\n// ========================================\n\nimport { useState, useEffect, useCallback } from \"react\";\n\nexport interface WallpaperTintOptions {\n  /**\n   * The image URL to sample for tint color\n   */\n  imageUrl?: string;\n\n  /**\n   * Debounce delay in milliseconds\n   * @default 300\n   */\n  debounceMs?: number;\n\n  /**\n   * Number of sample points to take from the image\n   * @default 10\n   */\n  sampleSize?: number;\n\n  /**\n   * Whether to enable the tint extraction\n   * @default true\n   */\n  enabled?: boolean;\n}\n\nexport interface WallpaperTintResult {\n  /**\n   * The extracted tint color in RGB format\n   * Example: \"120, 80, 200\"\n   */\n  tintColor: string | null;\n\n  /**\n   * Whether the tint extraction is in progress\n   */\n  isLoading: boolean;\n\n  /**\n   * Error message if extraction failed\n   */\n  error: string | null;\n\n  /**\n   * Re-extract the tint color from the current image\n   */\n  refresh: () => void;\n}\n\n/**\n * Converts RGB values to a luminance value (0-255)\n */\nconst getLuminance = (r: number, g: number, b: number): number => {\n  // Use standard luminance formula\n  return 0.299 * r + 0.587 * g + 0.114 * b;\n};\n\n/**\n * Extracts the dominant color from an image using canvas sampling\n */\nconst extractDominantColor = async (\n  imageUrl: string,\n  sampleSize: number = 10\n): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image();\n    img.crossOrigin = \"Anonymous\"; // Enable CORS\n\n    img.onload = () => {\n      try {\n        // Create canvas for sampling\n        const canvas = document.createElement(\"canvas\");\n        const ctx = canvas.getContext(\"2d\");\n\n        if (!ctx) {\n          reject(new Error(\"Failed to get canvas context\"));\n          return;\n        }\n\n        // Set canvas size to image size\n        canvas.width = img.width;\n        canvas.height = img.height;\n\n        // Draw image to canvas\n        ctx.drawImage(img, 0, 0);\n\n        // Sample colors from grid\n        const colors: { r: number; g: number; b: number }[] = [];\n        const stepX = Math.floor(img.width / sampleSize);\n        const stepY = Math.floor(img.height / sampleSize);\n\n        for (let y = stepY / 2; y < img.height; y += stepY) {\n          for (let x = stepX / 2; x < img.width; x += stepX) {\n            const pixel = ctx.getImageData(x, y, 1, 1).data;\n            colors.push({\n              r: pixel[0],\n              g: pixel[1],\n              b: pixel[2],\n            });\n          }\n        }\n\n        // Calculate average color (simple approach)\n        const avgColor = colors.reduce(\n          (acc, color) => ({\n            r: acc.r + color.r,\n            g: acc.g + color.g,\n            b: acc.b + color.b,\n          }),\n          { r: 0, g: 0, b: 0 }\n        );\n\n        const count = colors.length;\n        avgColor.r = Math.round(avgColor.r / count);\n        avgColor.g = Math.round(avgColor.g / count);\n        avgColor.b = Math.round(avgColor.b / count);\n\n        // Adjust color based on luminance for better glass effect\n        const luminance = getLuminance(avgColor.r, avgColor.g, avgColor.b);\n\n        // If too dark, lighten it\n        if (luminance < 80) {\n          const factor = 1.5;\n          avgColor.r = Math.min(255, Math.round(avgColor.r * factor));\n          avgColor.g = Math.min(255, Math.round(avgColor.g * factor));\n          avgColor.b = Math.min(255, Math.round(avgColor.b * factor));\n        }\n\n        // If too bright, darken it slightly\n        if (luminance > 200) {\n          const factor = 0.7;\n          avgColor.r = Math.round(avgColor.r * factor);\n          avgColor.g = Math.round(avgColor.g * factor);\n          avgColor.b = Math.round(avgColor.b * factor);\n        }\n\n        resolve(`${avgColor.r}, ${avgColor.g}, ${avgColor.b}`);\n      } catch (error) {\n        reject(error);\n      }\n    };\n\n    img.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n    };\n\n    img.src = imageUrl;\n  });\n};\n\n/**\n * Hook to extract and use wallpaper tint color\n *\n * @example\n * ```tsx\n * const { tintColor, isLoading } = useWallpaperTint({\n *   imageUrl: '/path/to/background.jpg',\n * });\n *\n * // Use tintColor in CSS variables\n * <div style={{ '--wallpaper-tint': tintColor }}>\n *   <GlassCard />\n * </div>\n * ```\n */\nexport const useWallpaperTint = (\n  options: WallpaperTintOptions = {}\n): WallpaperTintResult => {\n  const {\n    imageUrl,\n    debounceMs = 300,\n    sampleSize = 10,\n    enabled = true,\n  } = options;\n\n  const [tintColor, setTintColor] = useState<string | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const extractTint = useCallback(async () => {\n    if (!imageUrl || !enabled) {\n      setTintColor(null);\n      setError(null);\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const color = await extractDominantColor(imageUrl, sampleSize);\n      setTintColor(color);\n    } catch (err) {\n      const errorMessage =\n        err instanceof Error ? err.message : \"Failed to extract tint color\";\n      setError(errorMessage);\n      setTintColor(null);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [imageUrl, sampleSize, enabled]);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const timeoutId = setTimeout(() => {\n      extractTint();\n    }, debounceMs);\n\n    return () => clearTimeout(timeoutId);\n  }, [extractTint, debounceMs, enabled]);\n\n  return {\n    tintColor,\n    isLoading,\n    error,\n    refresh: extractTint,\n  };\n};\n"],"mappings":"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"}

package/dist/{utils-BqeJ4aco.cjs → utils-NLnOCttr.cjs}

@@ -1,4 +1,4 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-CTsEVRD3.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-DTS1RdIt.cjs");
 let clsx = require("clsx");
 let tailwind_merge = require("tailwind-merge");
 const cn = (...inputs) => {
@@ -11,4 +11,4 @@ Object.defineProperty(exports, "cn", {
 	}
 });
 
-//# sourceMappingURL=utils-BqeJ4aco.cjs.map
+//# sourceMappingURL=utils-NLnOCttr.cjs.map

package/dist/{utils-BqeJ4aco.cjs.map → utils-NLnOCttr.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-BqeJ4aco.cjs","names":[],"sources":["../src/lib/utils.ts"],"sourcesContent":["// ========================================\n// GLASS THEME UTILITIES\n// ========================================\n\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Combine class names with Tailwind merge support (shadcn standard)\n * @param inputs - Array of class values\n * @returns Merged class string\n */\nexport const cn = (...inputs: ClassValue[]): string => {\n  return twMerge(clsx(inputs));\n};\n"],"mappings":";;;AAYA,MAAa,MAAM,GAAG,WAAiC;AACrD,SAAA,GAAA,eAAA,UAAA,GAAA,KAAA,MAAoB,OAAO,CAAC"}
+{"version":3,"file":"utils-NLnOCttr.cjs","names":[],"sources":["../src/lib/utils.ts"],"sourcesContent":["// ========================================\n// GLASS THEME UTILITIES\n// ========================================\n\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Combine class names with Tailwind merge support (shadcn standard)\n * @param inputs - Array of class values\n * @returns Merged class string\n */\nexport const cn = (...inputs: ClassValue[]): string => {\n  return twMerge(clsx(inputs));\n};\n"],"mappings":";;;AAYA,MAAa,MAAM,GAAG,WAAiC;AACrD,SAAA,GAAA,eAAA,UAAA,GAAA,KAAA,MAAoB,OAAO,CAAC"}

package/dist/utils.cjs

@@ -1,2 +1,2 @@
-const require_utils = require("./utils-BqeJ4aco.cjs");
+const require_utils = require("./utils-NLnOCttr.cjs");
 exports.cn = require_utils.cn;

package/docs/ADVANCED_PATTERNS.md

@@ -31,14 +31,19 @@ handles a specific concern.
 **Sub-components:**
 
 - `ModalGlass.Root` - Context provider with open/close state
-- `ModalGlass.Overlay` - Backdrop with blur effect
-- `ModalGlass.Content` - Main modal container
+- `ModalGlass.Trigger` - Opens modal when clicked (supports asChild)
+- `ModalGlass.Content` - Main modal container (**includes Portal + Overlay automatically**)
 - `ModalGlass.Header` - Header layout
 - `ModalGlass.Body` - Content area
 - `ModalGlass.Footer` - Footer with actions
 - `ModalGlass.Title` - Accessible title (ARIA)
 - `ModalGlass.Description` - Accessible description (ARIA)
 - `ModalGlass.Close` - Close button
+- `ModalGlass.Portal` - Portal for rendering (optional, Content includes it)
+- `ModalGlass.Overlay` - Backdrop with blur effect (optional, Content includes it)
+
+> **Important:** `ModalGlass.Content` automatically includes the overlay backdrop. You don't need to
+> add `<ModalGlass.Overlay />` separately.
 
 #### Basic Usage
 
@@ -53,7 +58,6 @@ function MyModal() {
       <ButtonGlass onClick={() => setOpen(true)}>Open Modal</ButtonGlass>
 
       <ModalGlass.Root open={open} onOpenChange={setOpen}>
-        <ModalGlass.Overlay />
         <ModalGlass.Content>
           <ModalGlass.Header>
             <ModalGlass.Title>Confirm Action</ModalGlass.Title>
@@ -81,7 +85,6 @@ function MyModal() {
 
 ```tsx
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content size="lg">
     <ModalGlass.Header>
       <ModalGlass.Title>Create Account</ModalGlass.Title>
@@ -490,7 +493,6 @@ function SettingsModal({ open, onOpenChange }) {
 
   return (
     <ModalGlass.Root open={open} onOpenChange={onOpenChange}>
-      <ModalGlass.Overlay />
       <ModalGlass.Content size="lg">
         <ModalGlass.Header>
           <ModalGlass.Title>Settings</ModalGlass.Title>

package/docs/AI_USAGE.md

@@ -415,7 +415,6 @@ v2.0.0 achieves **complete API compatibility with shadcn/ui**.
 
 ```tsx
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content>
     <ModalGlass.Header>
       <ModalGlass.Title>My Modal</ModalGlass.Title>

package/docs/BEST_PRACTICES.md

@@ -348,7 +348,6 @@ import { ModalGlass, ButtonGlass } from 'shadcn-glass-ui';
 function ConfirmDialog({ open, onConfirm, onCancel, title, message }: ConfirmDialogProps) {
   return (
     <ModalGlass.Root open={open} onOpenChange={onCancel}>
-      <ModalGlass.Overlay />
       <ModalGlass.Content size="sm">
         <ModalGlass.Header>
           <ModalGlass.Title>{title}</ModalGlass.Title>
@@ -389,7 +388,6 @@ function CreateProjectModal({ open, onClose, onSubmit }) {
 
   return (
     <ModalGlass.Root open={open} onOpenChange={onClose}>
-      <ModalGlass.Overlay />
       <ModalGlass.Content>
         <ModalGlass.Header>
           <ModalGlass.Title>Create Project</ModalGlass.Title>

package/docs/BREAKING_CHANGES.md

@@ -111,7 +111,6 @@ ModalGlass and TabsGlass require compound component API:
 
 ```tsx
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content>
     <ModalGlass.Header>
       <ModalGlass.Title>Title</ModalGlass.Title>

package/docs/COMPONENTS_CATALOG.md

@@ -1,6 +1,6 @@
 # Component Catalog
 
-Searchable index of all **57 components** in shadcn-glass-ui.
+Searchable index of all **59 components** in shadcn-glass-ui.
 
 **v2.0.0 Update:** All components now use the 3-layer token system with semantic CSS variables. Zero
 hardcoded OKLCH values across all components.
@@ -252,7 +252,6 @@ trap, scroll lock, click-outside-to-close
 
 ```tsx
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content>
     <ModalGlass.Header>
       <ModalGlass.Title>Confirm</ModalGlass.Title>
@@ -270,7 +269,6 @@ trap, scroll lock, click-outside-to-close
 
 ```tsx
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content size="sm">
     <ModalGlass.Header>
       <ModalGlass.Title>Delete Item</ModalGlass.Title>
@@ -294,7 +292,6 @@ trap, scroll lock, click-outside-to-close
 
 ```tsx
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content size="default">
     <ModalGlass.Header>
       <ModalGlass.Title>Create New Project</ModalGlass.Title>

package/docs/COMPONENT_PATTERNS.md

@@ -0,0 +1,325 @@
+# Component Patterns Guide
+
+This document defines the established patterns for Glass UI components to ensure consistency across
+the library.
+
+## Naming Convention
+
+### Standard Pattern: `{Feature}Glass`
+
+All Glass UI components follow a consistent naming pattern: **`{Feature}Glass`**
+
+**Examples:**
+
+- `ButtonGlass` - Button component
+- `InputGlass` - Input component
+- `AlertGlass` - Alert component
+- `ModalGlass` - Modal/Dialog component
+- `TabsGlass` - Tabs component
+- `SidebarGlass` - Sidebar component
+- `CardGlass` - Card component (compound)
+
+### Exception: `GlassCard`
+
+The `GlassCard` component is the only exception to this pattern. It uses `Glass{Feature}` instead of
+`{Feature}Glass`. This is intentional and documented:
+
+- **`GlassCard`** - A simple glass container with visual effects (intensity, glow, hover)
+- **`CardGlass`** - A structured card with compound sub-components (shadcn/ui pattern)
+
+Both serve different purposes:
+
+- `GlassCard` = "Glass Container" (visual effects focus)
+- `CardGlass` = "Structured Card" (layout/composition focus)
+
+---
+
+## Export Patterns
+
+### Pattern 1: Object Pattern (Complex Compound Components)
+
+**When to use:** Components with 5+ sub-components
+
+**Structure:**
+
+```tsx
+export const ComponentGlass = {
+  Root: ComponentRoot,
+  Header: ComponentHeader,
+  Content: ComponentContent,
+  Footer: ComponentFooter,
+  // ... more sub-components
+};
+```
+
+**Usage:**
+
+```tsx
+<ComponentGlass.Root>
+  <ComponentGlass.Header>
+    <ComponentGlass.Title>Title</ComponentGlass.Title>
+  </ComponentGlass.Header>
+  <ComponentGlass.Content>Content</ComponentGlass.Content>
+  <ComponentGlass.Footer>Footer</ComponentGlass.Footer>
+</ComponentGlass.Root>
+```
+
+**Examples:**
+
+- `ModalGlass` (10 sub-components)
+- `TabsGlass` (4 sub-components)
+- `SidebarGlass` (20+ sub-components)
+- `SplitLayoutGlass` (10+ sub-components)
+- `CardGlass` (7 sub-components)
+
+### Pattern 2: Named Exports (Simple Compound Components)
+
+**When to use:** Components with 2-4 sub-components
+
+**Structure:**
+
+```tsx
+export const AlertGlass = AlertGlassRoot;
+export { AlertGlassTitle, AlertGlassDescription };
+```
+
+**Usage:**
+
+```tsx
+<AlertGlass variant="destructive">
+  <AlertGlassTitle>Error</AlertGlassTitle>
+  <AlertGlassDescription>Something went wrong</AlertGlassDescription>
+</AlertGlass>
+```
+
+**Examples:**
+
+- `AlertGlass` (3 exports)
+- `PopoverGlass` (4 exports)
+- `TooltipGlass` (5 exports)
+- `AvatarGlass` (4 exports)
+
+### Pattern 3: Single Export (Atomic Components)
+
+**When to use:** Self-contained components without sub-components
+
+**Structure:**
+
+```tsx
+export const ButtonGlass = forwardRef<HTMLButtonElement, ButtonGlassProps>(
+  ({ variant, size, className, ...props }, ref) => { ... }
+);
+```
+
+**Examples:**
+
+- `ButtonGlass`
+- `BadgeGlass`
+- `InputGlass`
+- `CheckboxGlass`
+- `SliderGlass`
+- `ToggleGlass`
+
+---
+
+## Compound Component Structure
+
+### Sub-component Naming
+
+For compound components using Object Pattern:
+
+- Root component: `ComponentRoot` (internal), `ComponentGlass.Root` (exported)
+- Sub-components: `ComponentHeader`, `ComponentTitle`, etc.
+
+### TypeScript Types
+
+```tsx
+// Props interface
+interface ComponentGlassProps extends React.ComponentProps<'div'> {
+  // Component-specific props
+}
+
+// For Radix-based components
+type ComponentGlassProps = React.ComponentProps<typeof Primitive.Root>;
+```
+
+### Data Slot Attributes
+
+All sub-components should include `data-slot` attributes for styling hooks:
+
+```tsx
+function CardGlassHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-header" className={cn('...', className)} {...props} />;
+}
+```
+
+---
+
+## CSS Variable Naming
+
+### 3-Layer Token Architecture
+
+Glass UI uses a 3-layer token system:
+
+1. **Layer 1 - Primitives:** `--oklch-*` (color values)
+2. **Layer 2 - Semantic:** `--semantic-*` (role-based)
+3. **Layer 3 - Component:** `--{component}-*` (component-specific)
+
+### Component Token Pattern
+
+```css
+/* Card Component Tokens */
+--card-subtle-bg: var(--semantic-surface);
+--card-medium-bg: var(--semantic-surface-elevated);
+--card-header-gap: 0.5rem;
+
+/* Modal Component Tokens */
+--modal-bg: var(--semantic-surface-elevated);
+--modal-overlay: var(--semantic-overlay);
+--modal-border: var(--semantic-border);
+```
+
+---
+
+## Radix UI Integration
+
+### When to Use Radix Primitives
+
+Use `@radix-ui/react-*` primitives for:
+
+- Components requiring complex accessibility (Dialog, Tooltip, Popover)
+- Components with trigger/portal patterns
+- Components needing state management (open/close, selected)
+
+### Wrapping Pattern
+
+```tsx
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+function ModalGlassRoot({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="modal" {...props} />;
+}
+
+function ModalGlassTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="modal-trigger" {...props} />;
+}
+```
+
+---
+
+## File Organization
+
+### Component Files
+
+```
+src/components/glass/ui/
+├── button-glass.tsx           # Single component
+├── button-glass.stories.tsx   # Colocated stories
+├── alert-glass.tsx            # Named exports compound
+├── modal-glass.tsx            # Object pattern compound
+├── card-glass.tsx             # Object pattern compound
+└── __tests__/
+    ├── button-glass.test.tsx
+    ├── alert-glass.test.tsx
+    └── modal-glass.test.tsx
+```
+
+### Complex Components (Nested Directory)
+
+```
+src/components/glass/ui/sidebar-glass/
+├── index.ts                   # Barrel export
+├── sidebar-context.tsx        # Context provider
+├── sidebar-glass.tsx          # Main components
+└── sidebar-menu.tsx           # Menu sub-components
+```
+
+---
+
+## Accessibility Requirements
+
+All Glass components must meet WCAG 2.1 AA standards:
+
+1. **Keyboard Navigation:** All interactive elements accessible via keyboard
+2. **Focus Management:** Visible focus indicators, focus trapping where appropriate
+3. **Screen Readers:** Proper ARIA attributes, semantic HTML
+4. **Color Contrast:** Meet minimum contrast ratios
+5. **Motion:** Respect `prefers-reduced-motion`
+
+### JSDoc Accessibility Documentation
+
+```tsx
+/**
+ * ModalGlass Component
+ *
+ * @accessibility
+ * - **Keyboard Navigation:** Escape key closes modal, Tab traps focus
+ * - **Focus Management:** Focus moved to modal on open, returned on close
+ * - **Screen Readers:** Uses role="dialog" and aria-modal="true"
+ */
+```
+
+---
+
+## Testing Requirements
+
+### Unit Tests
+
+Every component must have unit tests covering:
+
+- Rendering with default props
+- All variant combinations
+- Accessibility attributes
+- Event handlers
+
+### Visual Regression Tests
+
+All components need visual tests for:
+
+- All 3 themes (glass, light, aurora)
+- All size variants
+- All state variations (hover, focus, disabled)
+
+### Storybook Stories
+
+Required stories:
+
+- Default usage
+- All variants
+- All sizes
+- Interactive examples
+- Accessibility showcase
+
+---
+
+## Migration Guide
+
+### From shadcn/ui to Glass UI
+
+Replace shadcn/ui imports with Glass UI equivalents:
+
+```tsx
+// Before (shadcn/ui)
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+
+// After (Glass UI)
+import { CardGlass } from '@/components/glass/ui';
+
+// Usage
+<CardGlass.Root>
+  <CardGlass.Header>
+    <CardGlass.Title>Title</CardGlass.Title>
+  </CardGlass.Header>
+  <CardGlass.Content>Content</CardGlass.Content>
+</CardGlass.Root>;
+```
+
+For named export pattern (simpler components):
+
+```tsx
+// Before (shadcn/ui)
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
+
+// After (Glass UI)
+import { AlertGlass, AlertGlassTitle, AlertGlassDescription } from '@/components/glass/ui';
+```