@shalomormsby/ui 0.0.5

package/dist/utils-NA3gGYtZ.d.mts

@@ -0,0 +1,986 @@
+import React__default from 'react';
+import { ClassValue } from 'clsx';
+import './validation-Bj1ye-v_.mjs';
+
+interface BreadcrumbItemLegacy {
+    /**
+     * Display text for the breadcrumb
+     */
+    label: string;
+    /**
+     * Navigation URL (href for anchor tags)
+     * Omit for current/last item (will render as plain text)
+     */
+    href?: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: React__default.ReactNode;
+}
+interface BreadcrumbsProps {
+    /**
+     * Array of breadcrumb items (hierarchy from root to current)
+     */
+    items: BreadcrumbItemLegacy[];
+    /**
+     * Visual style variant
+     * @default 'subtle'
+     */
+    variant?: 'subtle' | 'bold' | 'underline';
+    /**
+     * Custom separator between items
+     * @default '/'
+     */
+    separator?: React__default.ReactNode;
+    /**
+     * ARIA label for the navigation
+     * @default 'Breadcrumb'
+     */
+    ariaLabel?: string;
+    /**
+     * Additional CSS classes for customization
+     */
+    className?: string;
+    /**
+     * Callback fired when a breadcrumb link is clicked
+     */
+    onNavigate?: (item: BreadcrumbItemLegacy, index: number) => void;
+}
+/**
+ * Breadcrumbs Component
+ *
+ * A navigation component showing page hierarchy with clickable links.
+ *
+ * Features:
+ * - Three visual variants (subtle, bold, underline)
+ * - Customizable separators
+ * - Full ARIA accessibility
+ * - Theme-aware styling
+ * - Keyboard navigable
+ * - Current page indication
+ *
+ * Example:
+ * ```tsx
+ * <Breadcrumbs
+ *   variant="subtle"
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Laptop' }, // Current page (no href)
+ *   ]}
+ * />
+ * ```
+ */
+declare const Breadcrumbs: React__default.FC<BreadcrumbsProps>;
+
+/**
+ * Syntax Parser Types
+ * Type definitions for the syntax parsing system
+ */
+type SyntaxType = 'comment' | 'keyword' | 'function' | 'string' | 'number' | 'boolean' | 'operator' | 'property' | 'className' | 'tag' | 'attribute' | 'variable' | 'punctuation' | 'plain';
+interface SyntaxToken {
+    text: string;
+    type: SyntaxType;
+}
+type Language = 'typescript' | 'javascript' | 'tsx' | 'jsx';
+
+/**
+ * Syntax Tokenizer
+ * Core tokenization logic for parsing code into syntax tokens
+ */
+
+/**
+ * Tokenizes source code into an array of syntax tokens
+ *
+ * @param code - The source code to tokenize
+ * @param language - The programming language (currently only affects metadata, all use same patterns)
+ * @returns Array of syntax tokens with text and type information
+ *
+ * @example
+ * ```ts
+ * const tokens = tokenize('const greeting = "Hello";');
+ * // Returns:
+ * // [
+ * //   { text: 'const', type: 'keyword' },
+ * //   { text: ' ', type: 'plain' },
+ * //   { text: 'greeting', type: 'plain' },
+ * //   { text: ' ', type: 'plain' },
+ * //   { text: '=', type: 'operator' },
+ * //   { text: ' ', type: 'plain' },
+ * //   { text: '"Hello"', type: 'string' },
+ * //   { text: ';', type: 'punctuation' },
+ * // ]
+ * ```
+ */
+declare function tokenize(code: string, language?: Language): SyntaxToken[];
+/**
+ * Detects the language from code content or file extension
+ * Currently returns 'typescript' for all cases as patterns support TS/JS/JSX/TSX
+ *
+ * @param code - The source code
+ * @param filename - Optional filename for extension detection
+ * @returns Detected language
+ */
+declare function detectLanguage(code: string, filename?: string): Language;
+
+/**
+ * Syntax Parser
+ *
+ * Lightweight syntax parser for automatic code tokenization.
+ * Converts plain code strings into syntax-highlighted token arrays.
+ *
+ * @example
+ * ```ts
+ * import { parseCode } from '@sage/ui';
+ *
+ * const tokens = parseCode('const greeting = "Hello World";');
+ * // Use with CollapsibleCodeBlock:
+ * <CollapsibleCodeBlock
+ *   id="example"
+ *   code={tokens}
+ * />
+ * ```
+ */
+
+/**
+ * Parses source code into syntax tokens for highlighting
+ *
+ * @param code - The source code to parse
+ * @param language - Optional language hint (auto-detected if not provided)
+ * @returns Array of syntax tokens ready for CollapsibleCodeBlock
+ *
+ * @example
+ * ```ts
+ * const code = `
+ *   import { useState } from 'react';
+ *
+ *   export function Counter() {
+ *     const [count, setCount] = useState(0);
+ *     return <button onClick={() => setCount(count + 1)}>{count}</button>;
+ *   }
+ * `;
+ *
+ * const tokens = parseCode(code);
+ * ```
+ */
+declare function parseCode(code: string, language?: Language): SyntaxToken[];
+
+/**
+ * Animation Presets
+ *
+ * Reusable animation configurations for consistent motion throughout the design system.
+ * Works with Framer Motion and respects user motion preferences.
+ */
+type Variant = {
+    [key: string]: any;
+};
+type Variants = {
+    [key: string]: Variant;
+};
+type Transition = {
+    duration?: number;
+    ease?: readonly number[] | number[] | string;
+    type?: 'spring' | 'tween' | 'inertia';
+    damping?: number;
+    stiffness?: number;
+    [key: string]: any;
+};
+/**
+ * Animation Duration Presets
+ * Based on Material Design motion guidelines
+ */
+declare const durations: {
+    readonly instant: 0;
+    readonly fast: 0.15;
+    readonly normal: 0.3;
+    readonly slow: 0.5;
+    readonly slower: 0.7;
+};
+/**
+ * Easing Presets
+ * Common easing curves for smooth animations
+ */
+declare const easings: {
+    readonly standard: readonly [0.4, 0, 0.2, 1];
+    readonly decelerate: readonly [0, 0, 0.2, 1];
+    readonly accelerate: readonly [0.4, 0, 1, 1];
+    readonly sharp: readonly [0.4, 0, 0.6, 1];
+    readonly bounce: readonly [0.68, -0.55, 0.265, 1.55];
+};
+/**
+ * Common transition presets
+ */
+declare const transitions: {
+    readonly default: Transition;
+    readonly fast: Transition;
+    readonly slow: Transition;
+    readonly bounce: Transition;
+    readonly spring: Transition;
+    readonly springBouncy: Transition;
+};
+/**
+ * Fade Animation Variants
+ */
+declare const fadeVariants: Variants;
+/**
+ * Slide Animation Variants
+ */
+declare const slideVariants: {
+    readonly fromLeft: {
+        readonly hidden: {
+            readonly x: -20;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly x: 0;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly x: -20;
+            readonly opacity: 0;
+        };
+    };
+    readonly fromRight: {
+        readonly hidden: {
+            readonly x: 20;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly x: 0;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly x: 20;
+            readonly opacity: 0;
+        };
+    };
+    readonly fromTop: {
+        readonly hidden: {
+            readonly y: -20;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly y: 0;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly y: -20;
+            readonly opacity: 0;
+        };
+    };
+    readonly fromBottom: {
+        readonly hidden: {
+            readonly y: 20;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly y: 0;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly y: 20;
+            readonly opacity: 0;
+        };
+    };
+};
+/**
+ * Scale Animation Variants
+ */
+declare const scaleVariants: {
+    readonly default: {
+        readonly hidden: {
+            readonly scale: 0.95;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly scale: 1;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly scale: 0.95;
+            readonly opacity: 0;
+        };
+    };
+    readonly grow: {
+        readonly hidden: {
+            readonly scale: 0.8;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly scale: 1;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly scale: 0.8;
+            readonly opacity: 0;
+        };
+    };
+    readonly pop: {
+        readonly hidden: {
+            readonly scale: 0;
+        };
+        readonly visible: {
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly scale: 0;
+        };
+    };
+};
+/**
+ * Rotate Animation Variants
+ */
+declare const rotateVariants: {
+    readonly default: {
+        readonly hidden: {
+            readonly rotate: -10;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly rotate: 0;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly rotate: 10;
+            readonly opacity: 0;
+        };
+    };
+    readonly flip: {
+        readonly hidden: {
+            readonly rotateX: 90;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly rotateX: 0;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly rotateX: -90;
+            readonly opacity: 0;
+        };
+    };
+};
+/**
+ * List/Stagger Animation Variants
+ */
+declare const listVariants: {
+    readonly container: {
+        readonly hidden: {
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly transition: {
+                readonly staggerChildren: 0.1;
+            };
+        };
+    };
+    readonly item: {
+        readonly hidden: {
+            readonly y: 20;
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly y: 0;
+            readonly opacity: 1;
+        };
+    };
+};
+/**
+ * Modal/Overlay Animation Variants
+ */
+declare const modalVariants: {
+    readonly overlay: {
+        readonly hidden: {
+            readonly opacity: 0;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+    };
+    readonly content: {
+        readonly hidden: {
+            readonly scale: 0.95;
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+        readonly visible: {
+            readonly scale: 1;
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly scale: 0.95;
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+    };
+};
+/**
+ * Drawer/Sheet Animation Variants
+ */
+declare const drawerVariants: {
+    readonly fromLeft: {
+        readonly hidden: {
+            readonly x: "-100%";
+        };
+        readonly visible: {
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly x: "-100%";
+        };
+    };
+    readonly fromRight: {
+        readonly hidden: {
+            readonly x: "100%";
+        };
+        readonly visible: {
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly x: "100%";
+        };
+    };
+    readonly fromTop: {
+        readonly hidden: {
+            readonly y: "-100%";
+        };
+        readonly visible: {
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly y: "-100%";
+        };
+    };
+    readonly fromBottom: {
+        readonly hidden: {
+            readonly y: "100%";
+        };
+        readonly visible: {
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly y: "100%";
+        };
+    };
+};
+/**
+ * Collapse/Expand Animation Variants
+ */
+declare const collapseVariants: {
+    readonly collapsed: {
+        readonly height: 0;
+        readonly opacity: 0;
+        readonly transition: {
+            readonly duration: 0.15;
+        };
+    };
+    readonly expanded: {
+        readonly height: "auto";
+        readonly opacity: 1;
+        readonly transition: {
+            readonly duration: 0.3;
+        };
+    };
+};
+/**
+ * Preset Animations
+ * Complete animation configurations ready to use
+ */
+declare const presets: {
+    /**
+     * Fade in/out animation
+     */
+    readonly fade: {
+        readonly initial: "hidden";
+        readonly animate: "visible";
+        readonly exit: "exit";
+        readonly variants: Variants;
+        readonly transition: Transition;
+    };
+    /**
+     * Slide from bottom animation
+     */
+    readonly slideUp: {
+        readonly initial: "hidden";
+        readonly animate: "visible";
+        readonly exit: "exit";
+        readonly variants: {
+            readonly hidden: {
+                readonly y: 20;
+                readonly opacity: 0;
+            };
+            readonly visible: {
+                readonly y: 0;
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly y: 20;
+                readonly opacity: 0;
+            };
+        };
+        readonly transition: Transition;
+    };
+    /**
+     * Scale animation
+     */
+    readonly scale: {
+        readonly initial: "hidden";
+        readonly animate: "visible";
+        readonly exit: "exit";
+        readonly variants: {
+            readonly hidden: {
+                readonly scale: 0.95;
+                readonly opacity: 0;
+            };
+            readonly visible: {
+                readonly scale: 1;
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly scale: 0.95;
+                readonly opacity: 0;
+            };
+        };
+        readonly transition: Transition;
+    };
+    /**
+     * Modal animation (overlay + content)
+     */
+    readonly modal: {
+        readonly overlay: {
+            readonly initial: "hidden";
+            readonly animate: "visible";
+            readonly exit: "exit";
+            readonly variants: {
+                readonly hidden: {
+                    readonly opacity: 0;
+                };
+                readonly visible: {
+                    readonly opacity: 1;
+                };
+                readonly exit: {
+                    readonly opacity: 0;
+                };
+            };
+            readonly transition: Transition;
+        };
+        readonly content: {
+            readonly initial: "hidden";
+            readonly animate: "visible";
+            readonly exit: "exit";
+            readonly variants: {
+                readonly hidden: {
+                    readonly scale: 0.95;
+                    readonly opacity: 0;
+                    readonly y: 20;
+                };
+                readonly visible: {
+                    readonly scale: 1;
+                    readonly opacity: 1;
+                    readonly y: 0;
+                };
+                readonly exit: {
+                    readonly scale: 0.95;
+                    readonly opacity: 0;
+                    readonly y: 20;
+                };
+            };
+            readonly transition: Transition;
+        };
+    };
+    /**
+     * List stagger animation
+     */
+    readonly list: {
+        readonly container: {
+            readonly initial: "hidden";
+            readonly animate: "visible";
+            readonly variants: {
+                readonly hidden: {
+                    readonly opacity: 0;
+                };
+                readonly visible: {
+                    readonly opacity: 1;
+                    readonly transition: {
+                        readonly staggerChildren: 0.1;
+                    };
+                };
+            };
+        };
+        readonly item: {
+            readonly variants: {
+                readonly hidden: {
+                    readonly y: 20;
+                    readonly opacity: 0;
+                };
+                readonly visible: {
+                    readonly y: 0;
+                    readonly opacity: 1;
+                };
+            };
+        };
+    };
+};
+/**
+ * Helper to create a custom animation preset
+ *
+ * @example
+ * ```tsx
+ * const customFade = createAnimation({
+ *   hidden: { opacity: 0, scale: 0.8 },
+ *   visible: { opacity: 1, scale: 1 },
+ * }, transitions.bounce);
+ * ```
+ */
+declare function createAnimation(variants: Variants, transition?: Transition): {
+    initial: string;
+    animate: string;
+    exit: string;
+    variants: Variants;
+    transition: Transition;
+};
+/**
+ * Helper to scale transition duration based on motion preference
+ *
+ * @example
+ * ```tsx
+ * const { scale } = useMotionPreference();
+ * const duration = scaleDuration(durations.normal, scale);
+ * ```
+ */
+declare function scaleDuration(duration: number, scale: number): number;
+
+interface RouteConfig {
+    [key: string]: {
+        label: string;
+        children?: RouteConfig;
+    };
+}
+/**
+ * Generates breadcrumb items from hash-based routing
+ *
+ * @param hash - Current window.location.hash (e.g., '#atoms/button')
+ * @param routeConfig - Configuration mapping routes to labels
+ * @param baseUrl - Base URL for href generation (default: '#')
+ * @returns Array of breadcrumb items with the last item having no href
+ *
+ * @example
+ * ```ts
+ * const routeConfig = {
+ *   atoms: {
+ *     label: 'Components',
+ *     children: {
+ *       button: { label: 'Button' }
+ *     }
+ *   }
+ * };
+ *
+ * // With hash: '#atoms/button'
+ * const breadcrumbs = generateBreadcrumbs('#atoms/button', routeConfig);
+ * // Returns: [
+ * //   { label: 'Home', href: '#' },
+ * //   { label: 'Components', href: '#atoms' },
+ * //   { label: 'Button' }  // No href for current page
+ * // ]
+ * ```
+ */
+declare function generateBreadcrumbs(hash: string, routeConfig: RouteConfig, baseUrl?: string): BreadcrumbItemLegacy[];
+
+/**
+ * Semantic Color Utilities
+ *
+ * Helper functions for working with the design system's color tokens
+ * and CSS variables.
+ */
+/**
+ * Color token categories
+ */
+declare const colorTokens: {
+    readonly background: "var(--color-background)";
+    readonly backgroundSecondary: "var(--color-background-secondary)";
+    readonly backgroundTertiary: "var(--color-background-tertiary)";
+    readonly surface: "var(--color-surface)";
+    readonly foreground: "var(--color-foreground)";
+    readonly foregroundSecondary: "var(--color-foreground-secondary)";
+    readonly foregroundTertiary: "var(--color-foreground-tertiary)";
+    readonly textPrimary: "var(--color-text-primary)";
+    readonly textSecondary: "var(--color-text-secondary)";
+    readonly textMuted: "var(--color-text-muted)";
+    readonly primary: "var(--color-primary)";
+    readonly primaryForeground: "var(--color-primary-foreground)";
+    readonly secondary: "var(--color-secondary)";
+    readonly secondaryForeground: "var(--color-secondary-foreground)";
+    readonly accent: "var(--color-accent)";
+    readonly accentForeground: "var(--color-accent-foreground)";
+    readonly success: "var(--color-success)";
+    readonly successForeground: "var(--color-success-foreground)";
+    readonly warning: "var(--color-warning)";
+    readonly warningForeground: "var(--color-warning-foreground)";
+    readonly error: "var(--color-error)";
+    readonly errorForeground: "var(--color-error-foreground)";
+    readonly info: "var(--color-info)";
+    readonly infoForeground: "var(--color-info-foreground)";
+    readonly border: "var(--color-border)";
+    readonly borderSubtle: "var(--color-border-subtle)";
+    readonly hover: "var(--color-hover)";
+    readonly active: "var(--color-active)";
+    readonly focus: "var(--color-focus)";
+    readonly link: "var(--color-link)";
+    readonly linkHover: "var(--color-link-hover)";
+    readonly linkHoverForeground: "var(--color-link-hover-foreground)";
+};
+/**
+ * Get CSS variable value from computed styles
+ *
+ * @param variableName - CSS variable name (with or without --)
+ * @param element - Element to get computed style from (defaults to document.documentElement)
+ * @returns The computed value of the CSS variable
+ *
+ * @example
+ * ```ts
+ * const primaryColor = getCSSVariable('--color-primary');
+ * // Returns: '#0066ff' (or whatever the current theme's primary color is)
+ * ```
+ */
+declare function getCSSVariable(variableName: string, element?: HTMLElement): string;
+/**
+ * Set CSS variable value
+ *
+ * @param variableName - CSS variable name (with or without --)
+ * @param value - Value to set
+ * @param element - Element to set the variable on (defaults to document.documentElement)
+ *
+ * @example
+ * ```ts
+ * setCSSVariable('--color-primary', '#ff0000');
+ * ```
+ */
+declare function setCSSVariable(variableName: string, value: string, element?: HTMLElement): void;
+/**
+ * Get contrasting foreground color for a background color
+ *
+ * @param backgroundToken - Background color token name (without 'var()')
+ * @returns The appropriate foreground color token
+ *
+ * @example
+ * ```ts
+ * const foreground = getForegroundColor('--color-primary');
+ * // Returns: 'var(--color-primary-foreground)'
+ * ```
+ */
+declare function getForegroundColor(backgroundToken: string): string;
+/**
+ * Semantic color groups for different use cases
+ */
+declare const semanticColors: {
+    /**
+     * Status colors for indicating states
+     */
+    readonly status: {
+        readonly success: {
+            readonly bg: "var(--color-success)";
+            readonly fg: "var(--color-success-foreground)";
+        };
+        readonly warning: {
+            readonly bg: "var(--color-warning)";
+            readonly fg: "var(--color-warning-foreground)";
+        };
+        readonly error: {
+            readonly bg: "var(--color-error)";
+            readonly fg: "var(--color-error-foreground)";
+        };
+        readonly info: {
+            readonly bg: "var(--color-info)";
+            readonly fg: "var(--color-info-foreground)";
+        };
+    };
+    /**
+     * Brand colors for primary UI elements
+     */
+    readonly brand: {
+        readonly primary: {
+            readonly bg: "var(--color-primary)";
+            readonly fg: "var(--color-primary-foreground)";
+        };
+        readonly secondary: {
+            readonly bg: "var(--color-secondary)";
+            readonly fg: "var(--color-secondary-foreground)";
+        };
+        readonly accent: {
+            readonly bg: "var(--color-accent)";
+            readonly fg: "var(--color-accent-foreground)";
+        };
+    };
+    /**
+     * Interactive state colors
+     */
+    readonly interactive: {
+        readonly default: {
+            readonly bg: "var(--color-background)";
+            readonly fg: "var(--color-foreground)";
+        };
+        readonly hover: {
+            readonly bg: "var(--color-hover)";
+            readonly fg: "var(--color-foreground)";
+        };
+        readonly active: {
+            readonly bg: "var(--color-active)";
+            readonly fg: "var(--color-foreground)";
+        };
+        readonly focus: {
+            readonly border: "var(--color-focus)";
+        };
+    };
+};
+/**
+ * Helper to create color pairs (background + foreground)
+ *
+ * @param type - Semantic color type
+ * @returns Object with bg and fg (and optionally border)
+ *
+ * @example
+ * ```tsx
+ * const errorColors = getSemanticColorPair('error');
+ * <div style={{
+ *   backgroundColor: errorColors.bg,
+ *   color: errorColors.fg
+ * }}>
+ *   Error message
+ * </div>
+ * ```
+ */
+declare function getSemanticColorPair(type: 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary' | 'accent'): {
+    bg: string;
+    fg: string;
+};
+/**
+ * Convert hex color to RGB values
+ *
+ * @param hex - Hex color string (with or without #)
+ * @returns Object with r, g, b values (0-255)
+ *
+ * @example
+ * ```ts
+ * const rgb = hexToRgb('#0066ff');
+ * // Returns: { r: 0, g: 102, b: 255 }
+ * ```
+ */
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Calculate relative luminance of a color (WCAG formula)
+ *
+ * @param r - Red value (0-255)
+ * @param g - Green value (0-255)
+ * @param b - Blue value (0-255)
+ * @returns Relative luminance (0-1)
+ */
+declare function getLuminance(r: number, g: number, b: number): number;
+/**
+ * Calculate contrast ratio between two colors (WCAG formula)
+ *
+ * @param hex1 - First color (hex)
+ * @param hex2 - Second color (hex)
+ * @returns Contrast ratio (1-21)
+ *
+ * @example
+ * ```ts
+ * const ratio = getContrastRatio('#ffffff', '#000000');
+ * // Returns: 21 (maximum contrast)
+ * ```
+ */
+declare function getContrastRatio(hex1: string, hex2: string): number;
+/**
+ * Check if color pair meets WCAG AA contrast requirements
+ *
+ * @param foreground - Foreground color (hex)
+ * @param background - Background color (hex)
+ * @param level - WCAG level ('AA' or 'AAA')
+ * @param size - Text size ('normal' or 'large')
+ * @returns true if contrast ratio meets requirements
+ *
+ * @example
+ * ```ts
+ * const isAccessible = meetsContrastRequirements('#000000', '#ffffff', 'AA', 'normal');
+ * // Returns: true
+ * ```
+ */
+declare function meetsContrastRequirements(foreground: string, background: string, level?: 'AA' | 'AAA', size?: 'normal' | 'large'): boolean;
+/**
+ * Convert hex to HSL for manipulation
+ */
+declare function hexToHSL(hex: string): {
+    h: number;
+    s: number;
+    l: number;
+};
+/**
+ * Convert HSL to hex
+ */
+declare function hslToHex(h: number, s: number, l: number): string;
+/**
+ * Adjust lightness of a hex color
+ * @param hex - Input color
+ * @param percent - Amount to adjust (-100 to 100)
+ */
+declare function adjustLightness(hex: string, percent: number): string;
+/**
+ * Adjust saturation of a hex color
+ * @param hex - Input color
+ * @param percent - Amount to adjust (-100 to 100)
+ */
+declare function adjustSaturation(hex: string, percent: number): string;
+/**
+ * Rotate hue of a hex color
+ * @param hex - Input color
+ * @param degrees - Degrees to rotate (0-360)
+ */
+declare function rotateHue(hex: string, degrees: number): string;
+/**
+ * Add opacity to a hex color (returns rgba CSS value)
+ * @param hex - Input color
+ * @param opacity - Opacity (0-1)
+ */
+declare function adjustOpacity(hex: string, opacity: number): string;
+/**
+ * Get optimal foreground color (white or black) for a background
+ * Uses WCAG contrast formula
+ */
+declare function getOptimalForeground(bgHex: string, whiteHex?: string, blackHex?: string): string;
+/**
+ * Generate a complete tint/shade scale (like Tailwind)
+ * Returns 50, 100, 200, ..., 900 variants
+ */
+declare function generateColorScale(baseHex: string): Record<number, string>;
+/**
+ * Color utilities for common operations
+ */
+declare const colorUtils: {
+    readonly getCSSVariable: typeof getCSSVariable;
+    readonly setCSSVariable: typeof setCSSVariable;
+    readonly getForegroundColor: typeof getForegroundColor;
+    readonly getSemanticColorPair: typeof getSemanticColorPair;
+    readonly hexToRgb: typeof hexToRgb;
+    readonly hexToHSL: typeof hexToHSL;
+    readonly hslToHex: typeof hslToHex;
+    readonly adjustLightness: typeof adjustLightness;
+    readonly adjustSaturation: typeof adjustSaturation;
+    readonly rotateHue: typeof rotateHue;
+    readonly adjustOpacity: typeof adjustOpacity;
+    readonly getOptimalForeground: typeof getOptimalForeground;
+    readonly generateColorScale: typeof generateColorScale;
+    readonly getContrastRatio: typeof getContrastRatio;
+    readonly meetsContrastRequirements: typeof meetsContrastRequirements;
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { getLuminance as A, type BreadcrumbItemLegacy as B, getContrastRatio as C, meetsContrastRequirements as D, hexToHSL as E, hslToHex as F, adjustLightness as G, adjustSaturation as H, rotateHue as I, adjustOpacity as J, getOptimalForeground as K, generateColorScale as L, colorUtils as M, cn as N, parseCode as O, tokenize as P, detectLanguage as Q, type RouteConfig as R, type SyntaxType as S, type Transition as T, type Language as U, type Variant as V, type SyntaxToken as a, Breadcrumbs as b, type BreadcrumbsProps as c, type Variants as d, durations as e, easings as f, fadeVariants as g, scaleVariants as h, drawerVariants as i, collapseVariants as j, createAnimation as k, listVariants as l, modalVariants as m, scaleDuration as n, generateBreadcrumbs as o, presets as p, colorTokens as q, rotateVariants as r, slideVariants as s, transitions as t, getCSSVariable as u, setCSSVariable as v, getForegroundColor as w, semanticColors as x, getSemanticColorPair as y, hexToRgb as z };