shadcn-glass-ui 2.0.8 → 2.0.10

package/dist/{use-focus-ZE8ozmZE.cjs → use-focus-BRkQtQCj.cjs}

@@ -1,4 +1,4 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-r3qM09Jp.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-Dgu46oWI.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-ZE8ozmZE.cjs.map
+//# sourceMappingURL=use-focus-BRkQtQCj.cjs.map

package/dist/{use-focus-ZE8ozmZE.cjs.map → use-focus-BRkQtQCj.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"use-focus-ZE8ozmZE.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-BRkQtQCj.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":";;AAyEA,SAAgB,SAAS,UAA2B,EAAE,EAAkB;CACtE,MAAM,EACJ,aAAa,GACb,aAAa,GACb,eAAe,OACf,kBACE;CAEJ,MAAM,CAAC,WAAW,sBAAA,GAAA,MAAA,UAA8B,MAAM;CACtD,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAAkE,KAAK;CAC5F,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAAkE,KAAK;CAE5F,MAAM,gBAAA,GAAA,MAAA,cACH,UAAmB;AAClB,oBAAkB,MAAM;AACxB,kBAAgB,MAAM;IAExB,CAAC,cAAc,CAChB;CAED,MAAM,oBAAA,GAAA,MAAA,mBACE;AAEJ,MAAI,cAAc;AAChB,gBAAa,aAAa;AAC1B,mBAAgB,KAAK;;AAGvB,MAAI,aAAa,EAIf,iBAHgB,iBAAiB;AAC/B,gBAAa,KAAK;KACjB,WAAW,CACU;MAExB,cAAa,KAAK;IAGtB;EAAC;EAAY;EAAc;EAAa,CACzC;CAED,MAAM,oBAAA,GAAA,MAAA,mBACE;AAEJ,MAAI,cAAc;AAChB,gBAAa,aAAa;AAC1B,mBAAgB,KAAK;;AAGvB,MAAI,aAAa,EAIf,iBAHgB,iBAAiB;AAC/B,gBAAa,MAAM;KAClB,WAAW,CACU;MAExB,cAAa,MAAM;IAGvB;EAAC;EAAY;EAAc;EAAa,CACzC;CAED,MAAM,eAAA,GAAA,MAAA,mBACE;AACJ,MAAI,aACF,cAAa,KAAK;IAGtB,CAAC,cAAc,aAAa,CAC7B;CAED,MAAM,cAAA,GAAA,MAAA,mBACE;AACJ,MAAI,aACF,cAAa,MAAM;IAGvB,CAAC,cAAc,aAAa,CAC7B;AAWD,QAAO;EACL;EACA,YAX+C;GAC/C,cAAc;GACd,cAAc;GACd,GAAI,gBAAgB;IAClB,SAAS;IACT,QAAQ;IACT;GACF;EAKC;EACD;;AChJH,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;AAOpB,SAAS,6BAA6B;AACpC,KAAI,iBAAiB,OAAO,WAAW,YAAa;AAEpD,iBAAgB;CAGhB,MAAM,iBAAiB,MAAgC;AAErD,MAAI,EAAE,QAAQ,SAAS,EAAE,IAAI,WAAW,QAAQ,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjF,oBAAmB;;CAKvB,MAAM,0BAA0B;AAC9B,qBAAmB;;AAIrB,UAAS,iBAAiB,WAAW,eAAe,KAAK;AACzD,UAAS,iBAAiB,aAAa,mBAAmB,KAAK;AAC/D,UAAS,iBAAiB,eAAe,mBAAmB,KAAK;AACjE,UAAS,iBAAiB,cAAc,mBAAmB,KAAK;;AAgElE,SAAgB,SAAS,UAA2B,EAAE,EAAkB;CACtE,MAAM,EAAE,eAAe,eAAe,OAAO,cAAc;CAE3D,MAAM,CAAC,WAAW,sBAAA,GAAA,MAAA,UAA8B,MAAM;CACtD,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,MAAM;CAC3D,MAAM,uBAAA,GAAA,MAAA,QAA6B,MAAM;CACzC,MAAM,YAAA,GAAA,MAAA,QAAkB,MAAM;AAG9B,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,aACF,6BAA4B;IAE7B,CAAC,aAAa,CAAC;CAElB,MAAM,gBAAA,GAAA,MAAA,cACH,UAAmB;AAClB,oBAAkB,MAAM;AACxB,WAAS,UAAU;AACnB,kBAAgB,MAAM;IAExB,CAAC,cAAc,CAChB;CAED,MAAM,eAAA,GAAA,MAAA,mBACE;AACJ,eAAa,KAAK;AAElB,MAAI,cAAc;GAEhB,MAAM,kBAAkB;AACxB,qBAAkB,gBAAgB;AAClC,uBAAoB,UAAU;;IAGlC,CAAC,cAAc,aAAa,CAC7B;CAED,MAAM,cAAA,GAAA,MAAA,mBACE;AACJ,eAAa,MAAM;AACnB,oBAAkB,MAAM;IAE1B,CAAC,aAAa,CACf;CAED,MAAM,iBAAA,GAAA,MAAA,cACH,MAAqB;AACpB,sBAAoB,UAAU;AAC9B,cAAY,EAAE;IAEhB,CAAC,UAAU,CACZ;AAQD,QAAO;EACL;EACA;EACA,YAT+C;GAC/C,SAAS;GACT,QAAQ;GACR,GAAI,aAAa,EAAE,WAAW,eAAe;GAC9C;EAMC;EACA;EACD"}

package/dist/{use-wallpaper-tint-BuS80tbN.cjs → use-wallpaper-tint-CfShPBo2.cjs}

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

package/dist/{use-wallpaper-tint-BuS80tbN.cjs.map → use-wallpaper-tint-CfShPBo2.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"use-wallpaper-tint-BuS80tbN.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":";;AAMA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAiCD,SAAgB,gBAAqC;CACnD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UACZ,OAAO,WAAW,cAAc,OAAO,aAAa,YAAY,GACjE;AAED,EAAA,GAAA,MAAA,iBAAgB;AAEd,MAAI,OAAO,WAAW,YAAa;EAEnC,MAAM,qBAAqB;AACzB,YAAS,OAAO,WAAW;;AAI7B,gBAAc;AAGd,SAAO,iBAAiB,UAAU,aAAa;AAG/C,eAAa,OAAO,oBAAoB,UAAU,aAAa;IAC9D,EAAE,CAAC;CAGN,MAAM,6BAAyC;AAC7C,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,SAAO;;CAGT,MAAM,oBAAoB,sBAAsB;AAEhD,QAAO;EACL,UAAU,QAAQ,YAAY;EAC9B,UAAU,SAAS,YAAY,MAAM,QAAQ,YAAY;EACzD,WAAW,SAAS,YAAY;EAChC;EACA;EACD;;AC7BH,IAAM,gBAAgB,GAAW,GAAW,MAAsB;AAEhE,QAAO,OAAQ,IAAI,OAAQ,IAAI,OAAQ;;AAMzC,IAAM,uBAAuB,OAC3B,UACA,aAAqB,OACD;AACpB,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,cAAc;AAElB,MAAI,eAAe;AACjB,OAAI;IAEF,MAAM,SAAS,SAAS,cAAc,SAAS;IAC/C,MAAM,MAAM,OAAO,WAAW,KAAK;AAEnC,QAAI,CAAC,KAAK;AACR,4BAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD;;AAIF,WAAO,QAAQ,IAAI;AACnB,WAAO,SAAS,IAAI;AAGpB,QAAI,UAAU,KAAK,GAAG,EAAE;IAGxB,MAAMA,SAAgD,EAAE;IACxD,MAAM,QAAQ,KAAK,MAAM,IAAI,QAAQ,WAAW;IAChD,MAAM,QAAQ,KAAK,MAAM,IAAI,SAAS,WAAW;AAEjD,SAAK,IAAI,IAAI,QAAQ,GAAG,IAAI,IAAI,QAAQ,KAAK,MAC3C,MAAK,IAAI,IAAI,QAAQ,GAAG,IAAI,IAAI,OAAO,KAAK,OAAO;KACjD,MAAM,QAAQ,IAAI,aAAa,GAAG,GAAG,GAAG,EAAE,CAAC;AAC3C,YAAO,KAAK;MACV,GAAG,MAAM;MACT,GAAG,MAAM;MACT,GAAG,MAAM;MACV,CAAC;;IAKN,MAAM,WAAW,OAAO,QACrB,KAAK,WAAW;KACf,GAAG,IAAI,IAAI,MAAM;KACjB,GAAG,IAAI,IAAI,MAAM;KACjB,GAAG,IAAI,IAAI,MAAM;KAClB,GACD;KAAE,GAAG;KAAG,GAAG;KAAG,GAAG;KAAG,CACrB;IAED,MAAM,QAAQ,OAAO;AACrB,aAAS,IAAI,KAAK,MAAM,SAAS,IAAI,MAAM;AAC3C,aAAS,IAAI,KAAK,MAAM,SAAS,IAAI,MAAM;AAC3C,aAAS,IAAI,KAAK,MAAM,SAAS,IAAI,MAAM;IAG3C,MAAM,YAAY,aAAa,SAAS,GAAG,SAAS,GAAG,SAAS,EAAE;AAGlE,QAAI,YAAY,IAAI;KAClB,MAAM,SAAS;AACf,cAAS,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,IAAI,OAAO,CAAC;AAC3D,cAAS,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,IAAI,OAAO,CAAC;AAC3D,cAAS,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,IAAI,OAAO,CAAC;;AAI7D,QAAI,YAAY,KAAK;KACnB,MAAM,SAAS;AACf,cAAS,IAAI,KAAK,MAAM,SAAS,IAAI,OAAO;AAC5C,cAAS,IAAI,KAAK,MAAM,SAAS,IAAI,OAAO;AAC5C,cAAS,IAAI,KAAK,MAAM,SAAS,IAAI,OAAO;;AAG9C,YAAQ,GAAG,SAAS,EAAE,IAAI,SAAS,EAAE,IAAI,SAAS,IAAI;YAC/C,OAAO;AACd,WAAO,MAAM;;;AAIjB,MAAI,gBAAgB;AAClB,0BAAO,IAAI,MAAM,uBAAuB,CAAC;;AAG3C,MAAI,MAAM;GACV;;AAkBJ,MAAa,oBACX,UAAgC,EAAE,KACV;CACxB,MAAM,EACJ,UACA,aAAa,KACb,aAAa,IACb,UAAU,SACR;CAEJ,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAwC,KAAK;CAC/D,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,MAAM;CACjD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAoC,KAAK;CAEvD,MAAM,eAAA,GAAA,MAAA,aAA0B,YAAY;AAC1C,MAAI,CAAC,YAAY,CAAC,SAAS;AACzB,gBAAa,KAAK;AAClB,YAAS,KAAK;AACd;;AAGF,eAAa,KAAK;AAClB,WAAS,KAAK;AAEd,MAAI;AAEF,gBADc,MAAM,qBAAqB,UAAU,WAAW,CAC3C;WACZ,KAAK;AAGZ,YADE,eAAe,QAAQ,IAAI,UAAU,+BACjB;AACtB,gBAAa,KAAK;YACV;AACR,gBAAa,MAAM;;IAEpB;EAAC;EAAU;EAAY;EAAQ,CAAC;AAEnC,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,YAAY,iBAAiB;AACjC,gBAAa;KACZ,WAAW;AAEd,eAAa,aAAa,UAAU;IACnC;EAAC;EAAa;EAAY;EAAQ,CAAC;AAEtC,QAAO;EACL;EACA;EACA;EACA,SAAS;EACV"}
+{"version":3,"file":"use-wallpaper-tint-CfShPBo2.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-DLXayspX.cjs → utils-BXN7AcRu.cjs}

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

package/dist/{utils-DLXayspX.cjs.map → utils-BXN7AcRu.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-DLXayspX.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-BXN7AcRu.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-DLXayspX.cjs");
+const require_utils = require("./utils-BXN7AcRu.cjs");
 exports.cn = require_utils.cn;

package/docs/AI_USAGE.md

@@ -3,37 +3,6 @@
 This guide is specifically for **AI assistants** (Claude Code, GitHub Copilot, GPT-based tools)
 helping users integrate shadcn-glass-ui into their projects.
 
-## Badges & Integrations
-
-[![CI](https://github.com/Yhooi2/shadcn-glass-ui-library/workflows/CI%2FCD%20Pipeline/badge.svg)](https://github.com/Yhooi2/shadcn-glass-ui-library/actions)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/shadcn-glass-ui)](https://bundlephobia.com/package/shadcn-glass-ui)
-[![React](https://img.shields.io/badge/React-19.2-blue)](https://reactjs.org/)
-[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.1-blue)](https://tailwindcss.com/)
-[![Claude Code](https://img.shields.io/badge/Claude-Code-5865F2?logo=anthropic)](docs/AI_USAGE.md)
-[![GitHub Copilot](https://img.shields.io/badge/GitHub-Copilot-181717?logo=github)](docs/AI_USAGE.md)
-[![Context7](https://img.shields.io/badge/Context7-Indexed-00D4AA)](https://context7.com/yhooi2/shadcn-glass-ui-library)
-
-### AI Tool Integration Status
-
-| Tool               | Status    | Integration                                                  |
-| ------------------ | --------- | ------------------------------------------------------------ |
-| **Claude Code**    | Optimized | [CLAUDE.md](../CLAUDE.md) with 500+ lines of project context |
-| **GitHub Copilot** | Supported | TypeScript strict mode + comprehensive JSDoc                 |
-| **ChatGPT/GPT-4**  | Supported | [EXPORTS_MAP.json](EXPORTS_MAP.json) with component metadata |
-| **Context7 MCP**   | Indexed   | [59 rules](../context7.json) covering breaking changes, APIs |
-| **Cursor**         | Supported | Full TypeScript inference                                    |
-
-### Library Identifiers
-
-| Identifier         | Value                             |
-| ------------------ | --------------------------------- |
-| npm package        | `shadcn-glass-ui`                 |
-| Registry namespace | `@shadcn-glass-ui`                |
-| Context7 ID        | `/yhooi2/shadcn-glass-ui-library` |
-| GitHub             | `Yhooi2/shadcn-glass-ui-library`  |
-
----
-
 ## 🎯 Quick Decision Tree
 
 ### When a user asks "I want to use shadcn-glass-ui"
@@ -1079,7 +1048,7 @@ for details.
 - **Context7 Library ID:** `/yhooi2/shadcn-glass-ui-library`
 - **Component count:** 58 (includes StepperGlass in v2.0.0+)
 - **React version:** 18.0+ or 19.0+
-- **Tailwind version:** 4.0+
+- **Tailwind version:** 4.1+
 - **Node version:** 20.16+, 22.19+, or 24+
 
 ### Import Patterns

package/docs/API_PATTERNS_COMPARISON.md

@@ -9,19 +9,20 @@ new `MetricCardGlass` API.
 
 ## 📊 Comparison Table: Core UI Components
 
-| Component             | Title/Label Prop           | Value Prop        | Variant System                                                                                        | Children       | Icon Support               | Notes                    |
-| --------------------- | -------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------- | -------------- | -------------------------- | ------------------------ |
-| **shadcn/ui Card**    | `CardTitle` (subcomponent) | —                 | —                                                                                                     | ✅ Composition | —                          | Compound component       |
-| **AlertGlass**        | `title?: string`           | —                 | `variant: 'default' \| 'destructive' \| 'success' \| 'warning'`                                       | ✅ `children`  | ✅ Auto (variant-based)    | **shadcn/ui compatible** |
-| **BadgeGlass**        | —                          | —                 | `variant: 'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning' \| 'info'` | ✅ `children`  | ❌                         | **shadcn/ui + extended** |
-| **ButtonGlass**       | —                          | —                 | `variant: 'primary' \| 'secondary' \| 'ghost' \| 'destructive' \| 'success' \| 'text'`                | ✅ `children`  | ✅ `iconLeft`, `iconRight` | **shadcn/ui-like**       |
-| **GlassCard**         | —                          | —                 | `intensity: 'low' \| 'medium' \| 'high'`                                                              | ✅ `children`  | ❌                         | Custom Glass prop        |
-| **NotificationGlass** | `title: string` (required) | `message: string` | `variant: 'default' \| 'destructive' \| 'success' \| 'warning'`                                       | ❌             | ✅ Auto (variant-based)    | **shadcn/ui compatible** |
+| Component             | Title/Label Prop                 | Value Prop        | Variant System                                                                                        | Children       | Icon Support               | Notes                    |
+| --------------------- | -------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------- | -------------- | -------------------------- | ------------------------ |
+| **shadcn/ui Card**    | `CardTitle` (subcomponent)       | —                 | —                                                                                                     | ✅ Composition | —                          | Compound component       |
+| **AlertGlass**        | `AlertGlassTitle` (subcomponent) | —                 | `variant: 'default' \| 'destructive' \| 'success' \| 'warning'`                                       | ✅ Composition | ✅ Auto (variant-based)    | **Compound component**   |
+| **BadgeGlass**        | —                                | —                 | `variant: 'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning' \| 'info'` | ✅ `children`  | ❌                         | **shadcn/ui + extended** |
+| **ButtonGlass**       | —                                | —                 | `variant: 'primary' \| 'secondary' \| 'ghost' \| 'destructive' \| 'success' \| 'text'`                | ✅ `children`  | ✅ `iconLeft`, `iconRight` | **shadcn/ui-like**       |
+| **GlassCard**         | —                                | —                 | `intensity: 'low' \| 'medium' \| 'high'`                                                              | ✅ `children`  | ❌                         | Custom Glass prop        |
+| **NotificationGlass** | `title: string` (required)       | `message: string` | `variant: 'default' \| 'destructive' \| 'success' \| 'warning'`                                       | ❌             | ✅ Auto (variant-based)    | **shadcn/ui compatible** |
 
 ### Insights from Core UI:
 
 1. **✅ Variant System** - all use `variant` prop (except GlassCard with `intensity`)
-2. **✅ Title vs Label** - `title` is used in AlertGlass, NotificationGlass
+2. **✅ Compound Components** - AlertGlass follows shadcn/ui pattern with subcomponents
+   (AlertGlassTitle, AlertGlassDescription)
 3. **✅ shadcn/ui variants** - base variants: `default`, `secondary`, `destructive`, `outline`
 4. **✅ Glass UI extensions** - extended variants: `success`, `warning`, `info`
 5. **✅ Icon handling** - automatic icons based on `variant` (AlertGlass, NotificationGlass)

package/docs/COMPONENTS_CATALOG.md

@@ -380,76 +380,130 @@ onValueChange | (value: string) => void | - | Change handler |
 
 #### DropdownGlass
 
-**File:** `src/components/glass/ui/dropdown-glass.tsx` **Features:** Radix UI based, submenu
-support, keyboard navigation **Usage:**
+**File:** `src/components/glass/ui/dropdown-glass.tsx` + `dropdown-menu-glass.tsx` **Features:**
+Radix UI based, submenu support, keyboard navigation **API:** Simple API (items prop) + Compound
+components (DropdownMenuGlass.\*)
+
+**Simple API (recommended for basic dropdowns):**
 
 ```tsx
 <DropdownGlass
   trigger={<ButtonGlass>Menu</ButtonGlass>}
   items={[
-    { label: 'Profile', onClick: () => {} },
-    { label: 'Settings', onClick: () => {} },
-    { separator: true },
-    { label: 'Logout', onClick: () => {} },
+    { label: 'Profile', icon: User, onClick: () => {} },
+    { label: 'Settings', icon: Settings, onClick: () => {} },
+    { divider: true },
+    { label: 'Logout', icon: LogOut, onClick: () => {}, danger: true },
   ]}
 />
 ```
 
+**Compound API (for complex dropdowns with full control):**
+
+```tsx
+<DropdownMenuGlass>
+  <DropdownMenuGlassTrigger asChild>
+    <ButtonGlass>Open Menu</ButtonGlass>
+  </DropdownMenuGlassTrigger>
+  <DropdownMenuGlassContent>
+    <DropdownMenuGlassLabel>My Account</DropdownMenuGlassLabel>
+    <DropdownMenuGlassSeparator />
+    <DropdownMenuGlassGroup>
+      <DropdownMenuGlassItem>
+        <User className="mr-2 h-4 w-4" />
+        Profile
+      </DropdownMenuGlassItem>
+      <DropdownMenuGlassItem>
+        <Settings className="mr-2 h-4 w-4" />
+        Settings
+      </DropdownMenuGlassItem>
+    </DropdownMenuGlassGroup>
+    <DropdownMenuGlassSeparator />
+    <DropdownMenuGlassItem variant="destructive">
+      <LogOut className="mr-2 h-4 w-4" />
+      Logout
+    </DropdownMenuGlassItem>
+  </DropdownMenuGlassContent>
+</DropdownMenuGlass>
+```
+
+**Available Compound Components:**
+
+- `DropdownMenuGlass` - Root container
+- `DropdownMenuGlassTrigger` - Trigger button (use `asChild`)
+- `DropdownMenuGlassContent` - Menu content container
+- `DropdownMenuGlassItem` - Menu item (supports `variant="destructive"`)
+- `DropdownMenuGlassLabel` - Section label
+- `DropdownMenuGlassSeparator` - Divider
+- `DropdownMenuGlassGroup` - Group items
+- `DropdownMenuGlassCheckboxItem` - Checkbox menu item
+- `DropdownMenuGlassRadioGroup` + `DropdownMenuGlassRadioItem` - Radio menu items
+- `DropdownMenuGlassSub` + `DropdownMenuGlassSubTrigger` + `DropdownMenuGlassSubContent` - Submenu
+
 #### AlertGlass
 
 **File:** `src/components/glass/ui/alert-glass.tsx` **Variants:** default, destructive, success,
-warning **Features:** Icon, title, description, dismissable, custom icons
+warning **Features:** Compound component (Title, Description), icon, dismissable **API:** Compound
+component pattern (shadcn/ui compatible)
 
 **Default Alert:**
 
 ```tsx
-<AlertGlass variant="default" title="Information">
-  This is an informational message.
+<AlertGlass variant="default">
+  <AlertGlassTitle>Information</AlertGlassTitle>
+  <AlertGlassDescription>This is an informational message.</AlertGlassDescription>
 </AlertGlass>
 ```
 
 **Destructive Alert:**
 
 ```tsx
-<AlertGlass variant="destructive" title="Error">
-  Something went wrong. Please try again.
+<AlertGlass variant="destructive">
+  <AlertGlassTitle>Error</AlertGlassTitle>
+  <AlertGlassDescription>Something went wrong. Please try again.</AlertGlassDescription>
 </AlertGlass>
 ```
 
 **Success Alert:**
 
 ```tsx
-<AlertGlass variant="success" title="Success!">
-  Your changes have been saved successfully.
+<AlertGlass variant="success">
+  <AlertGlassTitle>Success!</AlertGlassTitle>
+  <AlertGlassDescription>Your changes have been saved successfully.</AlertGlassDescription>
 </AlertGlass>
 ```
 
 **Warning Alert:**
 
 ```tsx
-<AlertGlass variant="warning" title="Warning">
-  This action may have unintended consequences.
+<AlertGlass variant="warning">
+  <AlertGlassTitle>Warning</AlertGlassTitle>
+  <AlertGlassDescription>This action may have unintended consequences.</AlertGlassDescription>
 </AlertGlass>
 ```
 
 **Dismissable Alert:**
 
 ```tsx
-<AlertGlass
-  variant="warning"
-  title="Session Expiring"
-  dismissable
-  onDismiss={() => console.log('dismissed')}
->
-  Your session will expire in 5 minutes.
+<AlertGlass variant="warning" dismissable onDismiss={() => console.log('dismissed')}>
+  <AlertGlassTitle>Session Expiring</AlertGlassTitle>
+  <AlertGlassDescription>Your session will expire in 5 minutes.</AlertGlassDescription>
 </AlertGlass>
 ```
 
-**Props:** | Prop | Type | Default | Description | |------|------|---------|-------------| | variant
-| default \| destructive \| success \| warning | default | Visual style | | title | string | - |
-Alert title | | children | ReactNode | - | Alert description | | icon | LucideIcon | - | Custom icon
-(auto-selected by variant) | | dismissable | boolean | false | Show dismiss button | | onDismiss |
-() => void | - | Dismiss callback |
+**Props (AlertGlass):**
+
+| Prop        | Type                                         | Default | Description                             |
+| ----------- | -------------------------------------------- | ------- | --------------------------------------- |
+| variant     | default \| destructive \| success \| warning | default | Visual style variant                    |
+| children    | ReactNode                                    | -       | AlertGlassTitle + AlertGlassDescription |
+| dismissable | boolean                                      | false   | Show dismiss button                     |
+| onDismiss   | () => void                                   | -       | Dismiss callback                        |
+
+**Sub-components:**
+
+- `AlertGlassTitle` - Alert title (inherits color from variant)
+- `AlertGlassDescription` - Alert description text (inherits color, 80% opacity)
 
 #### BadgeGlass
 
@@ -497,10 +551,22 @@ className | string | - | Additional styles |
 #### AvatarGlass
 
 **File:** `src/components/glass/ui/avatar-glass.tsx` **Sizes:** sm (32px), md (48px), lg (64px), xl
-(96px) **Status:** online, offline, busy, away **Features:** asChild, fallback, image **Usage:**
+(96px) **Status:** online, offline, busy, away **Features:** Compound component (Radix UI),
+fallback, image **API:** Compound component + Simple wrapper
+
+**Compound API (recommended):**
+
+```tsx
+<AvatarGlass size="lg" status="online">
+  <AvatarGlassImage src="/avatar.jpg" alt="John Doe" />
+  <AvatarGlassFallback>JD</AvatarGlassFallback>
+</AvatarGlass>
+```
+
+**Simple API (backward compatible):**
 
 ```tsx
-<AvatarGlass name="John Doe" src="/avatar.jpg" status="online" size="lg" />
+<AvatarGlassSimple name="John Doe" size="lg" status="online" />
 ```
 
 #### GlassCard
@@ -713,24 +779,43 @@ button |
 #### TooltipGlass
 
 **File:** `src/components/glass/ui/tooltip-glass.tsx` **Sides:** top, bottom, left, right
-**Features:** Delay config, Radix UI based, accessible
+**Features:** Radix UI based, accessible, delay config **API:** Compound component + Simple wrapper
 
-**Basic Tooltip:**
+**Compound API (recommended):**
 
 ```tsx
-<TooltipGlass content="This is a tooltip" side="top">
-  <ButtonGlass>Hover me</ButtonGlass>
-</TooltipGlass>
+<TooltipGlassProvider>
+  <TooltipGlass>
+    <TooltipGlassTrigger asChild>
+      <ButtonGlass>Hover me</ButtonGlass>
+    </TooltipGlassTrigger>
+    <TooltipGlassContent side="top">
+      <p>This is a tooltip</p>
+    </TooltipGlassContent>
+  </TooltipGlass>
+</TooltipGlassProvider>
+```
+
+**Simple API (backward compatible):**
+
+```tsx
+<TooltipGlassProvider>
+  <TooltipGlassSimple content="This is a tooltip" side="top">
+    <ButtonGlass>Hover me</ButtonGlass>
+  </TooltipGlassSimple>
+</TooltipGlassProvider>
 ```
 
 **Tooltip on Icon Button (Accessibility):**
 
 ```tsx
-<TooltipGlass content="Delete item" side="bottom">
-  <ButtonGlass variant="ghost" size="icon" aria-label="Delete item">
-    <Trash className="h-4 w-4" />
-  </ButtonGlass>
-</TooltipGlass>
+<TooltipGlassProvider>
+  <TooltipGlassSimple content="Delete item" side="bottom">
+    <ButtonGlass variant="ghost" size="icon" aria-label="Delete item">
+      <Trash className="h-4 w-4" />
+    </ButtonGlass>
+  </TooltipGlassSimple>
+</TooltipGlassProvider>
 ```
 
 **Tooltip with Custom Delay:**
@@ -748,20 +833,30 @@ delayDuration | number | 200 | Show delay (ms) | | sideOffset | number | 4 | Dis
 
 #### PopoverGlass
 
-**File:** `src/components/glass/ui/popover-glass.tsx` **Features:** Trigger, content, Radix UI based
-**Usage:**
+**File:** `src/components/glass/ui/popover-glass.tsx` **Features:** Radix UI based, trigger,
+content, anchor **API:** Compound component + Legacy wrapper
+
+**Compound API (recommended):**
 
 ```tsx
 <PopoverGlass>
-  <PopoverGlass.Trigger asChild>
+  <PopoverGlassTrigger asChild>
     <ButtonGlass>Open</ButtonGlass>
-  </PopoverGlass.Trigger>
-  <PopoverGlass.Content>
+  </PopoverGlassTrigger>
+  <PopoverGlassContent side="bottom" align="center">
     <p>Popover content</p>
-  </PopoverGlass.Content>
+  </PopoverGlassContent>
 </PopoverGlass>
 ```
 
+**Legacy API (backward compatible):**
+
+```tsx
+<PopoverGlassLegacy trigger={<ButtonGlass>Open</ButtonGlass>} side="bottom" align="center">
+  <p>Popover content</p>
+</PopoverGlassLegacy>
+```
+
 ---
 
 ### Level 2 - Atomic (7)