@shohojdhara/atomix 0.3.2 → 0.3.3

package/src/lib/composables/useTooltip.ts

@@ -0,0 +1,285 @@
+import { useState, useRef, useEffect, RefObject, useCallback } from 'react';
+
+export type TooltipPosition =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export type TooltipTrigger = 'click' | 'hover';
+
+interface UseTooltipProps {
+  position?: TooltipPosition;
+  trigger?: TooltipTrigger;
+  offset?: number;
+  delay?: number;
+}
+
+interface TooltipStyles {
+  tooltip: React.CSSProperties;
+  arrow: React.CSSProperties;
+}
+
+interface UseTooltipResult {
+  isVisible: boolean;
+  isPositioned: boolean;
+  tooltipId: string;
+  triggerRef: RefObject<HTMLDivElement>;
+  tooltipRef: RefObject<HTMLDivElement>;
+  tooltipStyle: React.CSSProperties;
+  arrowStyle: React.CSSProperties;
+  showTooltip: () => void;
+  hideTooltip: () => void;
+  toggleTooltip: () => void;
+  triggerProps: React.HTMLAttributes<HTMLDivElement>;
+  wrapperProps: React.HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * Calculate tooltip and arrow positions based on trigger and tooltip dimensions
+ */
+const calculateTooltipPosition = (
+  position: TooltipPosition,
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  wrapperRect: DOMRect,
+  offset: number,
+  arrowSize: number
+): TooltipStyles => {
+  const tooltipWidth = tooltipRect.width || 0;
+  const tooltipHeight = tooltipRect.height || 0;
+  const triggerWidth = triggerRect.width;
+  const triggerHeight = triggerRect.height;
+
+  const tooltipStyle: React.CSSProperties = {
+    '--atomix-tooltip-offset': `${offset}px`,
+  } as React.CSSProperties;
+
+  const arrowStyle: React.CSSProperties = {};
+
+  switch (position) {
+    case 'top':
+      tooltipStyle.top = `${triggerRect.top - wrapperRect.top - tooltipHeight - offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left + triggerWidth / 2 - tooltipWidth / 2}px`;
+      arrowStyle.bottom = `${arrowSize / -2}px`;
+      arrowStyle.left = `${tooltipWidth / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'bottom':
+      tooltipStyle.top = `${triggerRect.bottom - wrapperRect.top + offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left + triggerWidth / 2 - tooltipWidth / 2}px`;
+      arrowStyle.top = `${arrowSize / -2}px`;
+      arrowStyle.left = `${tooltipWidth / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'left':
+      tooltipStyle.right = `${wrapperRect.right - triggerRect.left + offset}px`;
+      tooltipStyle.top = `${triggerRect.top - wrapperRect.top + triggerHeight / 2 - tooltipHeight / 2}px`;
+      arrowStyle.right = `${arrowSize / -2}px`;
+      arrowStyle.top = `${tooltipHeight / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'right':
+      tooltipStyle.left = `${triggerRect.right - wrapperRect.left + offset}px`;
+      tooltipStyle.top = `${triggerRect.top - wrapperRect.top + triggerHeight / 2 - tooltipHeight / 2}px`;
+      arrowStyle.left = `${arrowSize / -2}px`;
+      arrowStyle.top = `${tooltipHeight / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'top-left':
+      tooltipStyle.bottom = `${wrapperRect.bottom - triggerRect.top + offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left}px`;
+      arrowStyle.bottom = `${arrowSize / -2}px`;
+      arrowStyle.left = `${arrowSize}px`;
+      break;
+
+    case 'top-right':
+      tooltipStyle.bottom = `${wrapperRect.bottom - triggerRect.top + offset}px`;
+      tooltipStyle.right = `${wrapperRect.right - triggerRect.right}px`;
+      arrowStyle.bottom = `${arrowSize / -2}px`;
+      arrowStyle.right = `${arrowSize}px`;
+      break;
+
+    case 'bottom-left':
+      tooltipStyle.top = `${triggerRect.bottom - wrapperRect.top + offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left}px`;
+      arrowStyle.top = `${arrowSize / -2}px`;
+      arrowStyle.left = `${arrowSize}px`;
+      break;
+
+    case 'bottom-right':
+      tooltipStyle.top = `${triggerRect.bottom - wrapperRect.top + offset}px`;
+      tooltipStyle.right = `${wrapperRect.right - triggerRect.right}px`;
+      arrowStyle.top = `${arrowSize / -2}px`;
+      arrowStyle.right = `${arrowSize}px`;
+      break;
+  }
+
+  return { tooltip: tooltipStyle, arrow: arrowStyle };
+};
+
+/**
+ * Get arrow size from CSS custom property
+ */
+const getArrowSize = (element: HTMLElement): number => {
+  const arrowSizeValue = getComputedStyle(element)
+    .getPropertyValue('--atomix-tooltip-arrow-size')
+    .trim();
+
+  if (!arrowSizeValue) return 8; // Default fallback
+
+  // Try to parse as rem (e.g., "0.5rem")
+  const remMatch = arrowSizeValue.match(/([\d.]+)rem/);
+  if (remMatch?.[1]) {
+    return parseFloat(remMatch[1]) * 16; // Convert rem to px
+  }
+
+  // Try to parse as px (e.g., "8px")
+  const pxMatch = arrowSizeValue.match(/([\d.]+)px/);
+  if (pxMatch?.[1]) {
+    return parseFloat(pxMatch[1]);
+  }
+
+  return 8; // Default fallback
+};
+
+/**
+ * Hook for managing tooltip state and positioning logic
+ */
+export const useTooltip = ({
+  position = 'top',
+  trigger = 'hover',
+  offset = 10,
+  delay = 200,
+}: UseTooltipProps): UseTooltipResult => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isPositioned, setIsPositioned] = useState(false);
+  const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});
+  const [arrowStyle, setArrowStyle] = useState<React.CSSProperties>({});
+  
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`;
+
+  const showTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        setIsVisible(true);
+      }, delay);
+    } else {
+      setIsVisible(true);
+    }
+  }, [delay]);
+
+  const hideTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+    setIsPositioned(false);
+  }, []);
+
+  const toggleTooltip = useCallback(() => {
+    if (isVisible) {
+      hideTooltip();
+    } else {
+      showTooltip();
+    }
+  }, [isVisible, showTooltip, hideTooltip]);
+
+  // Calculate and update tooltip position
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const wrapperElement = triggerRef.current.parentElement;
+
+    if (!wrapperElement) return;
+
+    const wrapperRect = wrapperElement.getBoundingClientRect();
+    const arrowSize = getArrowSize(tooltipRef.current);
+
+    const styles = calculateTooltipPosition(
+      position,
+      triggerRect,
+      tooltipRect,
+      wrapperRect,
+      offset,
+      arrowSize
+    );
+
+    setTooltipStyle(styles.tooltip);
+    setArrowStyle(styles.arrow);
+    setIsPositioned(true);
+  }, [position, offset]);
+
+  // Position tooltip when visible
+  useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+
+    // Use single RAF to ensure tooltip is rendered before calculating
+    const rafId = requestAnimationFrame(() => {
+      updatePosition();
+    });
+
+    // Recalculate on window resize and scroll
+    const handleUpdate = () => {
+      updatePosition();
+    };
+
+    window.addEventListener('resize', handleUpdate);
+    window.addEventListener('scroll', handleUpdate, true);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate, true);
+    };
+  }, [isVisible, updatePosition]);
+
+  // Setup trigger props
+  const triggerProps: React.HTMLAttributes<HTMLDivElement> = {
+    'aria-describedby': isVisible ? tooltipId : undefined,
+  };
+
+  const wrapperProps: React.HTMLAttributes<HTMLDivElement> = {};
+
+  if (trigger === 'hover') {
+    wrapperProps.onMouseEnter = showTooltip;
+    wrapperProps.onMouseLeave = hideTooltip;
+    triggerProps.onFocus = showTooltip;
+    triggerProps.onBlur = hideTooltip;
+  } else if (trigger === 'click') {
+    triggerProps.onClick = toggleTooltip;
+  }
+
+  return {
+    isVisible,
+    isPositioned,
+    tooltipId,
+    triggerRef,
+    tooltipRef,
+    tooltipStyle,
+    arrowStyle,
+    showTooltip,
+    hideTooltip,
+    toggleTooltip,
+    triggerProps,
+    wrapperProps,
+  };
+};
+
+export default useTooltip;
+

package/src/lib/constants/cssVariables.ts

@@ -0,0 +1,390 @@
+/**
+ * CSS Variables Constants
+ * 
+ * Comprehensive CSS custom property definitions for all components.
+ * These provide type-safe access to component styling variables.
+ */
+
+/**
+ * Button CSS Variables
+ */
+export const BUTTON_CSS_VARS = {
+  // Base properties
+  '--atomix-button-bg': 'background-color',
+  '--atomix-button-color': 'text color',
+  '--atomix-button-padding-x': 'horizontal padding',
+  '--atomix-button-padding-y': 'vertical padding',
+  '--atomix-button-border-radius': 'border radius',
+  '--atomix-button-border-width': 'border width',
+  '--atomix-button-border-color': 'border color',
+  '--atomix-button-font-size': 'font size',
+  '--atomix-button-font-weight': 'font weight',
+  '--atomix-button-font-family': 'font family',
+  '--atomix-button-line-height': 'line height',
+  '--atomix-button-min-width': 'minimum width',
+  '--atomix-button-min-height': 'minimum height',
+  '--atomix-button-transition': 'transition',
+  
+  // State properties
+  '--atomix-button-hover-bg': 'hover background',
+  '--atomix-button-hover-color': 'hover text color',
+  '--atomix-button-hover-border-color': 'hover border color',
+  '--atomix-button-active-bg': 'active background',
+  '--atomix-button-active-color': 'active text color',
+  '--atomix-button-focus-ring-color': 'focus ring color',
+  '--atomix-button-focus-ring-width': 'focus ring width',
+  '--atomix-button-disabled-opacity': 'disabled opacity',
+  '--atomix-button-disabled-bg': 'disabled background',
+  
+  // Part properties
+  '--atomix-button-icon-size': 'icon size',
+  '--atomix-button-icon-gap': 'icon spacing',
+  '--atomix-button-spinner-size': 'spinner size',
+  '--atomix-button-label-font-weight': 'label font weight',
+} as const;
+
+/**
+ * Card CSS Variables
+ */
+export const CARD_CSS_VARS = {
+  // Base properties
+  '--atomix-card-bg': 'background color',
+  '--atomix-card-color': 'text color',
+  '--atomix-card-padding': 'padding',
+  '--atomix-card-border-radius': 'border radius',
+  '--atomix-card-border-width': 'border width',
+  '--atomix-card-border-color': 'border color',
+  '--atomix-card-box-shadow': 'box shadow',
+  '--atomix-card-width': 'width',
+  '--atomix-card-max-width': 'maximum width',
+  
+  // State properties
+  '--atomix-card-hover-bg': 'hover background',
+  '--atomix-card-hover-shadow': 'hover shadow',
+  '--atomix-card-hover-transform': 'hover transform',
+  
+  // Part properties - Header
+  '--atomix-card-header-padding': 'header padding',
+  '--atomix-card-header-bg': 'header background',
+  '--atomix-card-header-border-bottom': 'header border bottom',
+  
+  // Part properties - Body
+  '--atomix-card-body-padding': 'body padding',
+  '--atomix-card-body-font-size': 'body font size',
+  
+  // Part properties - Footer
+  '--atomix-card-footer-padding': 'footer padding',
+  '--atomix-card-footer-bg': 'footer background',
+  '--atomix-card-footer-border-top': 'footer border top',
+  
+  // Part properties - Title
+  '--atomix-card-title-font-size': 'title font size',
+  '--atomix-card-title-font-weight': 'title font weight',
+  '--atomix-card-title-color': 'title color',
+  '--atomix-card-title-margin-bottom': 'title margin bottom',
+  
+  // Part properties - Image
+  '--atomix-card-image-border-radius': 'image border radius',
+  '--atomix-card-image-max-height': 'image max height',
+} as const;
+
+/**
+ * Input CSS Variables
+ */
+export const INPUT_CSS_VARS = {
+  // Base properties
+  '--atomix-input-bg': 'background color',
+  '--atomix-input-color': 'text color',
+  '--atomix-input-padding-x': 'horizontal padding',
+  '--atomix-input-padding-y': 'vertical padding',
+  '--atomix-input-border-radius': 'border radius',
+  '--atomix-input-border-width': 'border width',
+  '--atomix-input-border-color': 'border color',
+  '--atomix-input-font-size': 'font size',
+  '--atomix-input-font-family': 'font family',
+  '--atomix-input-line-height': 'line height',
+  '--atomix-input-height': 'height',
+  '--atomix-input-placeholder-color': 'placeholder color',
+  
+  // State properties
+  '--atomix-input-hover-border-color': 'hover border color',
+  '--atomix-input-focus-border-color': 'focus border color',
+  '--atomix-input-focus-ring-color': 'focus ring color',
+  '--atomix-input-focus-ring-width': 'focus ring width',
+  '--atomix-input-disabled-bg': 'disabled background',
+  '--atomix-input-disabled-opacity': 'disabled opacity',
+  '--atomix-input-invalid-border-color': 'invalid border color',
+  '--atomix-input-valid-border-color': 'valid border color',
+} as const;
+
+/**
+ * Modal CSS Variables
+ */
+export const MODAL_CSS_VARS = {
+  // Base properties
+  '--atomix-modal-bg': 'background color',
+  '--atomix-modal-color': 'text color',
+  '--atomix-modal-padding': 'padding',
+  '--atomix-modal-border-radius': 'border radius',
+  '--atomix-modal-box-shadow': 'box shadow',
+  '--atomix-modal-width': 'width',
+  '--atomix-modal-max-width': 'maximum width',
+  '--atomix-modal-max-height': 'maximum height',
+  
+  // Backdrop properties
+  '--atomix-modal-backdrop-bg': 'backdrop background',
+  '--atomix-modal-backdrop-opacity': 'backdrop opacity',
+  '--atomix-modal-backdrop-blur': 'backdrop blur',
+  
+  // Part properties - Header
+  '--atomix-modal-header-padding': 'header padding',
+  '--atomix-modal-header-border-bottom': 'header border bottom',
+  '--atomix-modal-title-font-size': 'title font size',
+  '--atomix-modal-title-font-weight': 'title font weight',
+  
+  // Part properties - Body
+  '--atomix-modal-body-padding': 'body padding',
+  '--atomix-modal-body-font-size': 'body font size',
+  
+  // Part properties - Footer
+  '--atomix-modal-footer-padding': 'footer padding',
+  '--atomix-modal-footer-border-top': 'footer border top',
+  '--atomix-modal-footer-gap': 'footer button gap',
+  
+  // Part properties - Close button
+  '--atomix-modal-close-size': 'close button size',
+  '--atomix-modal-close-color': 'close button color',
+  '--atomix-modal-close-hover-color': 'close button hover color',
+} as const;
+
+/**
+ * Dropdown CSS Variables
+ */
+export const DROPDOWN_CSS_VARS = {
+  // Base properties
+  '--atomix-dropdown-bg': 'background color',
+  '--atomix-dropdown-color': 'text color',
+  '--atomix-dropdown-border-radius': 'border radius',
+  '--atomix-dropdown-border-width': 'border width',
+  '--atomix-dropdown-border-color': 'border color',
+  '--atomix-dropdown-box-shadow': 'box shadow',
+  '--atomix-dropdown-min-width': 'minimum width',
+  '--atomix-dropdown-max-height': 'maximum height',
+  '--atomix-dropdown-padding': 'padding',
+  
+  // Part properties - Item
+  '--atomix-dropdown-item-padding': 'item padding',
+  '--atomix-dropdown-item-font-size': 'item font size',
+  '--atomix-dropdown-item-hover-bg': 'item hover background',
+  '--atomix-dropdown-item-hover-color': 'item hover color',
+  '--atomix-dropdown-item-active-bg': 'item active background',
+  '--atomix-dropdown-item-active-color': 'item active color',
+  '--atomix-dropdown-item-disabled-opacity': 'item disabled opacity',
+  
+  // Part properties - Divider
+  '--atomix-dropdown-divider-color': 'divider color',
+  '--atomix-dropdown-divider-margin': 'divider margin',
+  
+  // Part properties - Header
+  '--atomix-dropdown-header-padding': 'header padding',
+  '--atomix-dropdown-header-font-size': 'header font size',
+  '--atomix-dropdown-header-font-weight': 'header font weight',
+  '--atomix-dropdown-header-color': 'header color',
+} as const;
+
+/**
+ * Badge CSS Variables
+ */
+export const BADGE_CSS_VARS = {
+  // Base properties
+  '--atomix-badge-bg': 'background color',
+  '--atomix-badge-color': 'text color',
+  '--atomix-badge-padding-x': 'horizontal padding',
+  '--atomix-badge-padding-y': 'vertical padding',
+  '--atomix-badge-border-radius': 'border radius',
+  '--atomix-badge-font-size': 'font size',
+  '--atomix-badge-font-weight': 'font weight',
+  '--atomix-badge-line-height': 'line height',
+  
+  // Part properties
+  '--atomix-badge-icon-size': 'icon size',
+  '--atomix-badge-icon-gap': 'icon spacing',
+} as const;
+
+/**
+ * Tabs CSS Variables
+ */
+export const TABS_CSS_VARS = {
+  // Base properties
+  '--atomix-tabs-bg': 'background color',
+  '--atomix-tabs-border-color': 'border color',
+  '--atomix-tabs-border-width': 'border width',
+  
+  // Part properties - Nav
+  '--atomix-tabs-nav-gap': 'nav gap',
+  '--atomix-tabs-nav-padding': 'nav padding',
+  
+  // Part properties - Tab button
+  '--atomix-tabs-btn-padding-x': 'button horizontal padding',
+  '--atomix-tabs-btn-padding-y': 'button vertical padding',
+  '--atomix-tabs-btn-color': 'button color',
+  '--atomix-tabs-btn-font-size': 'button font size',
+  '--atomix-tabs-btn-font-weight': 'button font weight',
+  '--atomix-tabs-btn-hover-color': 'button hover color',
+  '--atomix-tabs-btn-active-color': 'button active color',
+  '--atomix-tabs-btn-active-border-color': 'button active border color',
+  '--atomix-tabs-btn-active-border-width': 'button active border width',
+  
+  // Part properties - Panel
+  '--atomix-tabs-panel-padding': 'panel padding',
+  '--atomix-tabs-panel-bg': 'panel background',
+} as const;
+
+/**
+ * Progress CSS Variables
+ */
+export const PROGRESS_CSS_VARS = {
+  // Base properties
+  '--atomix-progress-bg': 'background color',
+  '--atomix-progress-height': 'height',
+  '--atomix-progress-border-radius': 'border radius',
+  
+  // Part properties - Bar
+  '--atomix-progress-bar-bg': 'bar background',
+  '--atomix-progress-bar-transition': 'bar transition',
+} as const;
+
+/**
+ * Tooltip CSS Variables
+ */
+export const TOOLTIP_CSS_VARS = {
+  // Base properties
+  '--atomix-tooltip-bg': 'background color',
+  '--atomix-tooltip-color': 'text color',
+  '--atomix-tooltip-padding-x': 'horizontal padding',
+  '--atomix-tooltip-padding-y': 'vertical padding',
+  '--atomix-tooltip-border-radius': 'border radius',
+  '--atomix-tooltip-font-size': 'font size',
+  '--atomix-tooltip-max-width': 'maximum width',
+  '--atomix-tooltip-box-shadow': 'box shadow',
+  '--atomix-tooltip-z-index': 'z-index',
+  
+  // Arrow properties
+  '--atomix-tooltip-arrow-size': 'arrow size',
+  '--atomix-tooltip-arrow-color': 'arrow color',
+} as const;
+
+/**
+ * Checkbox CSS Variables
+ */
+export const CHECKBOX_CSS_VARS = {
+  // Base properties
+  '--atomix-checkbox-size': 'checkbox size',
+  '--atomix-checkbox-bg': 'background color',
+  '--atomix-checkbox-border-color': 'border color',
+  '--atomix-checkbox-border-width': 'border width',
+  '--atomix-checkbox-border-radius': 'border radius',
+  '--atomix-checkbox-transition': 'transition',
+  
+  // State properties
+  '--atomix-checkbox-checked-bg': 'checked background',
+  '--atomix-checkbox-checked-border-color': 'checked border color',
+  '--atomix-checkbox-hover-border-color': 'hover border color',
+  '--atomix-checkbox-focus-ring-color': 'focus ring color',
+  '--atomix-checkbox-focus-ring-width': 'focus ring width',
+  '--atomix-checkbox-disabled-opacity': 'disabled opacity',
+  '--atomix-checkbox-invalid-border-color': 'invalid border color',
+  
+  // Part properties
+  '--atomix-checkbox-icon-size': 'icon size',
+  '--atomix-checkbox-icon-color': 'icon color',
+  '--atomix-checkbox-label-gap': 'label spacing',
+  '--atomix-checkbox-label-font-size': 'label font size',
+  '--atomix-checkbox-label-color': 'label color',
+} as const;
+
+/**
+ * Radio CSS Variables
+ */
+export const RADIO_CSS_VARS = {
+  // Base properties
+  '--atomix-radio-size': 'radio size',
+  '--atomix-radio-bg': 'background color',
+  '--atomix-radio-border-color': 'border color',
+  '--atomix-radio-border-width': 'border width',
+  '--atomix-radio-transition': 'transition',
+  
+  // State properties
+  '--atomix-radio-checked-bg': 'checked background',
+  '--atomix-radio-checked-border-color': 'checked border color',
+  '--atomix-radio-hover-border-color': 'hover border color',
+  '--atomix-radio-focus-ring-color': 'focus ring color',
+  '--atomix-radio-focus-ring-width': 'focus ring width',
+  '--atomix-radio-disabled-opacity': 'disabled opacity',
+  '--atomix-radio-invalid-border-color': 'invalid border color',
+  
+  // Part properties
+  '--atomix-radio-dot-size': 'dot size',
+  '--atomix-radio-dot-color': 'dot color',
+  '--atomix-radio-label-gap': 'label spacing',
+  '--atomix-radio-label-font-size': 'label font size',
+  '--atomix-radio-label-color': 'label color',
+} as const;
+
+/**
+ * All component CSS variables
+ */
+export const COMPONENT_CSS_VARS = {
+  Button: BUTTON_CSS_VARS,
+  Card: CARD_CSS_VARS,
+  Input: INPUT_CSS_VARS,
+  Modal: MODAL_CSS_VARS,
+  Dropdown: DROPDOWN_CSS_VARS,
+  Badge: BADGE_CSS_VARS,
+  Tabs: TABS_CSS_VARS,
+  Progress: PROGRESS_CSS_VARS,
+  Tooltip: TOOLTIP_CSS_VARS,
+  Checkbox: CHECKBOX_CSS_VARS,
+  Radio: RADIO_CSS_VARS,
+} as const;
+
+/**
+ * Type-safe CSS variable keys by component
+ */
+export type ButtonCSSVariable = keyof typeof BUTTON_CSS_VARS;
+export type CardCSSVariable = keyof typeof CARD_CSS_VARS;
+export type InputCSSVariable = keyof typeof INPUT_CSS_VARS;
+export type ModalCSSVariable = keyof typeof MODAL_CSS_VARS;
+export type DropdownCSSVariable = keyof typeof DROPDOWN_CSS_VARS;
+export type BadgeCSSVariable = keyof typeof BADGE_CSS_VARS;
+export type TabsCSSVariable = keyof typeof TABS_CSS_VARS;
+export type ProgressCSSVariable = keyof typeof PROGRESS_CSS_VARS;
+export type TooltipCSSVariable = keyof typeof TOOLTIP_CSS_VARS;
+export type CheckboxCSSVariable = keyof typeof CHECKBOX_CSS_VARS;
+export type RadioCSSVariable = keyof typeof RADIO_CSS_VARS;
+
+/**
+ * Component name to CSS variable type mapping
+ */
+export type ComponentCSSVariables = {
+  Button: ButtonCSSVariable;
+  Card: CardCSSVariable;
+  Input: InputCSSVariable;
+  Modal: ModalCSSVariable;
+  Dropdown: DropdownCSSVariable;
+  Badge: BadgeCSSVariable;
+  Tabs: TabsCSSVariable;
+  Progress: ProgressCSSVariable;
+  Tooltip: TooltipCSSVariable;
+  Checkbox: CheckboxCSSVariable;
+  Radio: RadioCSSVariable;
+};
+
+/**
+ * Get CSS variables for a component
+ */
+export function getComponentCSSVars<T extends keyof typeof COMPONENT_CSS_VARS>(
+  component: T
+): typeof COMPONENT_CSS_VARS[T] {
+  return COMPONENT_CSS_VARS[component];
+}