react-18-ui-library 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,3512 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useEffect, useCallback, useState, useRef, useId, useMemo, Component, useContext } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { X, Menu, ChevronRight, ChevronLeft, ChevronDown, ChevronsLeft, ChevronsRight, Check, Loader2, EyeOff, Eye, ChevronUp, Minus, Search, Star, Calendar, AlertCircle, Upload, Image as Image$1, FileText, File as File$1, ImageOff, User, ChevronsUpDown, TrendingUp, TrendingDown, Inbox, AlertTriangle, CheckCircle, Info, RefreshCw, Trash2, Copy, ExternalLink } from 'lucide-react';
+import * as RadixTabs from '@radix-ui/react-tabs';
+import { cva } from 'class-variance-authority';
+import * as RadixSelect from '@radix-ui/react-select';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import * as RadixRadio from '@radix-ui/react-radio-group';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import { createPortal } from 'react-dom';
+import * as RadixSlider from '@radix-ui/react-slider';
+import { DayPicker } from 'react-day-picker';
+import { format, isValid, getYear, getMonth, setMonth, setYear } from 'date-fns';
+import { useForm, Controller } from 'react-hook-form';
+import { useDropzone } from 'react-dropzone';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { themes, Highlight } from 'prism-react-renderer';
+import * as RadixToast from '@radix-ui/react-toast';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixPopover from '@radix-ui/react-popover';
+import * as RadixContextMenu from '@radix-ui/react-context-menu';
+import * as RadixLabel from '@radix-ui/react-label';
+
+const TOKEN_MAP = {
+    colorPrimary: '--color-primary',
+    colorPrimaryHover: '--color-primary-hover',
+    colorPrimaryForeground: '--color-primary-foreground',
+    colorSecondary: '--color-secondary',
+    colorSecondaryHover: '--color-secondary-hover',
+    colorSecondaryForeground: '--color-secondary-foreground',
+    colorBackground: '--color-background',
+    colorSurface: '--color-surface',
+    colorSurfaceHover: '--color-surface-hover',
+    colorBorder: '--color-border',
+    colorBorderFocus: '--color-border-focus',
+    colorText: '--color-text',
+    colorTextMuted: '--color-text-muted',
+    colorTextDisabled: '--color-text-disabled',
+    colorError: '--color-error',
+    colorErrorBg: '--color-error-bg',
+    colorSuccess: '--color-success',
+    colorSuccessBg: '--color-success-bg',
+    colorWarning: '--color-warning',
+    colorWarningBg: '--color-warning-bg',
+    colorInfo: '--color-info',
+    colorInfoBg: '--color-info-bg',
+    colorOverlay: '--color-overlay',
+    colorNavbar: '--color-navbar',
+    colorSidebar: '--color-sidebar',
+    colorSidebarText: '--color-sidebar-text',
+    colorSidebarActive: '--color-sidebar-active',
+    colorSidebarActiveBg: '--color-sidebar-active-bg',
+    radiusSm: '--radius-sm',
+    radiusMd: '--radius-md',
+    radiusLg: '--radius-lg',
+    radiusXl: '--radius-xl',
+    fontFamilyBase: '--font-family-base',
+    fontFamilyMono: '--font-family-mono',
+    shadowSm: '--shadow-sm',
+    shadowMd: '--shadow-md',
+    shadowLg: '--shadow-lg',
+    shadowXl: '--shadow-xl',
+    transitionFast: '--transition-fast',
+    transitionSpeed: '--transition-speed',
+    transitionSlow: '--transition-slow',
+    navbarHeight: '--navbar-height',
+    sidebarWidth: '--sidebar-width',
+    sidebarCollapsedWidth: '--sidebar-collapsed-width',
+};
+const ThemeContext = createContext({
+    tokens: {},
+    setToken: () => undefined,
+});
+function ThemeProvider({ tokens = {}, children }) {
+    useEffect(() => {
+        const root = document.documentElement;
+        Object.entries(tokens).forEach(([key, value]) => {
+            if (value !== undefined) {
+                const cssVar = TOKEN_MAP[key];
+                if (cssVar)
+                    root.style.setProperty(cssVar, value);
+            }
+        });
+    }, [tokens]);
+    const setToken = (key, value) => {
+        const cssVar = TOKEN_MAP[key];
+        if (cssVar)
+            document.documentElement.style.setProperty(cssVar, value);
+    };
+    return (jsx(ThemeContext.Provider, { value: { tokens, setToken }, children: children }));
+}
+
+function useTheme() {
+    const getToken = useCallback((token) => {
+        if (typeof window === 'undefined')
+            return '';
+        return getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+    }, []);
+    const setToken = useCallback((token, value) => {
+        if (typeof window === 'undefined')
+            return;
+        document.documentElement.style.setProperty(token, value);
+    }, []);
+    return { getToken, setToken };
+}
+
+function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mediaQuery = window.matchMedia(query);
+        const handler = (e) => setMatches(e.matches);
+        mediaQuery.addEventListener('change', handler);
+        setMatches(mediaQuery.matches);
+        return () => mediaQuery.removeEventListener('change', handler);
+    }, [query]);
+    return matches;
+}
+
+function useClickOutside(ref, handler, enabled = true) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const listener = (event) => {
+            if (!ref.current || ref.current.contains(event.target))
+                return;
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler, enabled]);
+}
+
+function useDebounce(value, delay = 300) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay);
+        return () => clearTimeout(timer);
+    }, [value, delay]);
+    return debouncedValue;
+}
+
+let toastCounter = 0;
+function useToast() {
+    const [toasts, setToasts] = useState([]);
+    const toast = useCallback((options) => {
+        const id = `toast-${++toastCounter}`;
+        const newToast = { id, duration: 5000, variant: 'info', ...options };
+        setToasts((prev) => [...prev, newToast]);
+        if (newToast.duration && newToast.duration > 0) {
+            setTimeout(() => {
+                setToasts((prev) => prev.filter((t) => t.id !== id));
+            }, newToast.duration);
+        }
+        return id;
+    }, []);
+    const dismiss = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const dismissAll = useCallback(() => {
+        setToasts([]);
+    }, []);
+    return { toasts, toast, dismiss, dismissAll };
+}
+
+function useLocalStorage(key, initialValue) {
+    const [storedValue, setStoredValue] = useState(() => {
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        }
+        catch {
+            return initialValue;
+        }
+    });
+    const setValue = useCallback((value) => {
+        try {
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            setStoredValue(valueToStore);
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        }
+        catch {
+            // ignore write errors
+        }
+    }, [key, storedValue]);
+    const removeValue = useCallback(() => {
+        try {
+            window.localStorage.removeItem(key);
+            setStoredValue(initialValue);
+        }
+        catch {
+            // ignore
+        }
+    }, [key, initialValue]);
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === key && e.newValue !== null) {
+                try {
+                    setStoredValue(JSON.parse(e.newValue));
+                }
+                catch {
+                    // ignore
+                }
+            }
+        };
+        window.addEventListener('storage', handler);
+        return () => window.removeEventListener('storage', handler);
+    }, [key]);
+    return [storedValue, setValue, removeValue];
+}
+
+function useClipboard(options = {}) {
+    const { timeout = 2000, onSuccess, onError } = options;
+    const [copied, setCopied] = useState(false);
+    const [timeoutId, setTimeoutId] = useState(null);
+    const reset = useCallback(() => {
+        setCopied(false);
+        if (timeoutId)
+            clearTimeout(timeoutId);
+    }, [timeoutId]);
+    const copy = useCallback(async (value) => {
+        try {
+            if (navigator.clipboard) {
+                await navigator.clipboard.writeText(value);
+            }
+            else {
+                const el = document.createElement('textarea');
+                el.value = value;
+                el.style.position = 'fixed';
+                el.style.opacity = '0';
+                document.body.appendChild(el);
+                el.select();
+                document.execCommand('copy');
+                document.body.removeChild(el);
+            }
+            setCopied(true);
+            onSuccess?.(value);
+            const id = setTimeout(() => setCopied(false), timeout);
+            setTimeoutId(id);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to copy');
+            onError?.(error);
+        }
+    }, [timeout, onSuccess, onError]);
+    return { copied, copy, reset };
+}
+
+function useWindowSize() {
+    const [size, setSize] = useState(() => {
+        if (typeof window === 'undefined') {
+            return { width: 0, height: 0, isMobile: false, isTablet: false, isDesktop: true };
+        }
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            isMobile: window.innerWidth < 768,
+            isTablet: window.innerWidth >= 768 && window.innerWidth < 1024,
+            isDesktop: window.innerWidth >= 1024,
+        };
+    });
+    useEffect(() => {
+        const handler = () => {
+            setSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+                isMobile: window.innerWidth < 768,
+                isTablet: window.innerWidth >= 768 && window.innerWidth < 1024,
+                isDesktop: window.innerWidth >= 1024,
+            });
+        };
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
+    }, []);
+    return size;
+}
+
+function useIntersectionObserver(options = {}) {
+    const { freezeOnceVisible = false, ...observerOptions } = options;
+    const ref = useRef(null);
+    const [entry, setEntry] = useState(null);
+    const isVisible = entry?.isIntersecting ?? false;
+    const frozen = isVisible && freezeOnceVisible;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || frozen)
+            return;
+        const observer = new IntersectionObserver(([e]) => setEntry(e), observerOptions);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [frozen, observerOptions.root, observerOptions.rootMargin, observerOptions.threshold]);
+    return [ref, isVisible, entry];
+}
+
+function useKeyboard(shortcuts) {
+    const shortcutList = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
+    const handleKeyDown = useCallback((e) => {
+        for (const shortcut of shortcutList) {
+            if (shortcut.enabled === false)
+                continue;
+            const keyMatch = e.key.toLowerCase() === shortcut.key.toLowerCase();
+            const modifiers = shortcut.modifiers ?? [];
+            modifiers.includes('ctrl') ? e.ctrlKey : !e.ctrlKey || modifiers.length === 0;
+            modifiers.includes('meta') ? e.metaKey : !e.metaKey || modifiers.length === 0;
+            modifiers.includes('shift') ? e.shiftKey : !e.shiftKey;
+            modifiers.includes('alt') ? e.altKey : !e.altKey;
+            const modMatch = modifiers.every((mod) => {
+                if (mod === 'ctrl')
+                    return e.ctrlKey;
+                if (mod === 'meta')
+                    return e.metaKey;
+                if (mod === 'shift')
+                    return e.shiftKey;
+                if (mod === 'alt')
+                    return e.altKey;
+                return false;
+            });
+            const noExtraModifiers = (e.ctrlKey === modifiers.includes('ctrl')) &&
+                (e.metaKey === modifiers.includes('meta')) &&
+                (e.shiftKey === modifiers.includes('shift')) &&
+                (e.altKey === modifiers.includes('alt'));
+            if (keyMatch && modMatch && noExtraModifiers) {
+                if (shortcut.preventDefault !== false)
+                    e.preventDefault();
+                shortcut.handler(e);
+            }
+        }
+    }, [shortcutList]);
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown]);
+}
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+function Navbar({ logo, links = [], actions, sticky = false, fixed = false, bordered = true, className, onMenuToggle, }) {
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const handleMenuToggle = () => {
+        const next = !mobileOpen;
+        setMobileOpen(next);
+        onMenuToggle?.(next);
+    };
+    return (jsxs("header", { className: cn('w-full bg-navbar font-base', sticky && 'sticky top-0', fixed && 'fixed top-0 left-0 right-0', bordered && 'border-b border-border', 'z-navbar', className), style: { height: 'var(--navbar-height)' }, children: [jsxs("div", { className: "flex items-center justify-between h-full px-4 md:px-6", children: [logo && jsx("div", { className: "flex-shrink-0", children: logo }), links.length > 0 && (jsx("nav", { className: "hidden md:flex items-center gap-1 ml-6", children: links.map((link, i) => (jsxs("a", { href: link.href, onClick: link.onClick, className: cn('flex items-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer', link.active
+                                ? 'bg-primary text-primary-foreground'
+                                : 'text-text-muted hover:text-text hover:bg-surface-hover'), children: [link.icon && jsx("span", { className: "flex-shrink-0", children: link.icon }), link.label] }, i))) })), jsx("div", { className: "flex-1" }), actions && (jsx("div", { className: "hidden md:flex items-center gap-2", children: actions })), jsx("button", { type: "button", className: "md:hidden p-2 rounded-md text-text-muted hover:text-text hover:bg-surface-hover transition-colors", onClick: handleMenuToggle, "aria-label": "Toggle menu", children: mobileOpen ? jsx(X, { size: 20 }) : jsx(Menu, { size: 20 }) })] }), mobileOpen && (jsxs("div", { className: "md:hidden border-t border-border bg-navbar px-4 pb-4", children: [jsx("nav", { className: "flex flex-col gap-1 mt-2", children: links.map((link, i) => (jsxs("a", { href: link.href, onClick: () => {
+                                link.onClick?.();
+                                setMobileOpen(false);
+                            }, className: cn('flex items-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer', link.active
+                                ? 'bg-primary text-primary-foreground'
+                                : 'text-text-muted hover:text-text hover:bg-surface-hover'), children: [link.icon && jsx("span", { className: "flex-shrink-0", children: link.icon }), link.label] }, i))) }), actions && jsx("div", { className: "flex items-center gap-2 mt-3", children: actions })] }))] }));
+}
+
+function SidebarItemComponent({ item, collapsed, depth = 0, }) {
+    const [expanded, setExpanded] = useState(false);
+    const hasChildren = item.children && item.children.length > 0;
+    const handleClick = () => {
+        if (hasChildren)
+            setExpanded((v) => !v);
+        item.onClick?.();
+    };
+    return (jsxs("li", { children: [jsxs("a", { href: item.href, onClick: handleClick, title: collapsed ? item.label : undefined, className: cn('flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors text-sm', 'text-sidebar-text hover:bg-sidebar-active-bg hover:text-white', item.active && 'bg-sidebar-active-bg text-white', depth > 0 && 'ml-4', collapsed && 'justify-center px-2'), children: [item.icon && (jsx("span", { className: "flex-shrink-0 w-5 h-5 flex items-center justify-center", children: item.icon })), !collapsed && (jsxs(Fragment, { children: [jsx("span", { className: "flex-1 truncate", children: item.label }), item.badge !== undefined && (jsx("span", { className: "ml-auto text-xs bg-primary text-primary-foreground rounded-full px-1.5 py-0.5 min-w-[1.25rem] text-center", children: item.badge })), hasChildren && (jsx("span", { className: "ml-auto", children: expanded ? jsx(ChevronDown, { size: 14 }) : jsx(ChevronRight, { size: 14 }) }))] }))] }), hasChildren && expanded && !collapsed && (jsx("ul", { className: "mt-1 space-y-1", children: item.children.map((child) => (jsx(SidebarItemComponent, { item: child, collapsed: collapsed, depth: depth + 1 }, child.id))) }))] }));
+}
+function Sidebar({ items = [], collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, header, footer, overlay = false, open = true, onClose, className, }) {
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const collapsed = controlledCollapsed ?? internalCollapsed;
+    const toggleCollapsed = () => {
+        const next = !collapsed;
+        setInternalCollapsed(next);
+        onCollapsedChange?.(next);
+    };
+    return (jsxs(Fragment, { children: [overlay && open && (jsx("div", { className: "fixed inset-0 bg-overlay md:hidden", style: { zIndex: 'calc(var(--z-sidebar) - 1)' }, onClick: onClose })), jsxs("aside", { className: cn('flex flex-col h-full bg-sidebar transition-all duration-300', collapsed
+                    ? 'w-[var(--sidebar-collapsed-width)]'
+                    : 'w-[var(--sidebar-width)]', overlay && 'fixed top-0 left-0 bottom-0', overlay && !open && '-translate-x-full', 'z-sidebar', className), children: [header && (jsx("div", { className: cn('flex-shrink-0 p-4', collapsed && 'px-2'), children: header })), jsx("nav", { className: "flex-1 overflow-y-auto py-2 px-2", children: jsx("ul", { className: "space-y-1", children: items.map((item) => (jsx(SidebarItemComponent, { item: item, collapsed: collapsed }, item.id))) }) }), footer && (jsx("div", { className: cn('flex-shrink-0 p-4 border-t border-border/20', collapsed && 'px-2'), children: footer })), jsx("button", { type: "button", onClick: toggleCollapsed, className: "flex-shrink-0 flex items-center justify-center h-10 border-t border-border/20 text-sidebar-text hover:text-white hover:bg-sidebar-active-bg transition-colors", "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar', children: collapsed ? jsx(ChevronRight, { size: 16 }) : jsx(ChevronLeft, { size: 16 }) })] })] }));
+}
+
+function AppShell({ navbar, sidebar, children, defaultSidebarCollapsed = false, className, contentClassName, }) {
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);
+    const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+    return (jsxs("div", { className: cn('flex flex-col h-screen bg-background', className), children: [navbar && (jsx(Navbar, { ...navbar, sticky: true, onMenuToggle: (open) => setMobileSidebarOpen(open) })), jsxs("div", { className: "flex flex-1 overflow-hidden", children: [sidebar && (jsxs(Fragment, { children: [jsx("div", { className: "hidden md:flex flex-shrink-0", children: jsx(Sidebar, { ...sidebar, collapsed: sidebarCollapsed, onCollapsedChange: setSidebarCollapsed }) }), jsx("div", { className: "md:hidden", children: jsx(Sidebar, { ...sidebar, overlay: true, open: mobileSidebarOpen, onClose: () => setMobileSidebarOpen(false) }) })] })), jsx("main", { className: cn('flex-1 overflow-auto bg-background', contentClassName), children: children })] })] }));
+}
+
+const sizeClasses$g = {
+    sm: 'max-w-screen-sm',
+    md: 'max-w-screen-md',
+    lg: 'max-w-screen-lg',
+    xl: 'max-w-screen-xl',
+    '2xl': 'max-w-screen-2xl',
+    full: 'max-w-full',
+};
+function Container({ size = 'xl', centered = true, padded = true, className, children, ...props }) {
+    return (jsx("div", { className: cn('w-full', sizeClasses$g[size], centered && 'mx-auto', padded && 'px-4 md:px-6 lg:px-8', className), ...props, children: children }));
+}
+
+const gapClasses$1 = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+};
+const alignClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+};
+const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly',
+};
+function Stack({ direction = 'col', align = 'stretch', justify = 'start', gap = 'md', wrap = false, inline = false, className, children, ...props }) {
+    return (jsx("div", { className: cn(inline ? 'inline-flex' : 'flex', direction === 'row' ? 'flex-row' : 'flex-col', alignClasses[align], justifyClasses[justify], gapClasses$1[gap], wrap && 'flex-wrap', className), ...props, children: children }));
+}
+
+const colClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    5: 'grid-cols-5',
+    6: 'grid-cols-6',
+    7: 'grid-cols-7',
+    8: 'grid-cols-8',
+    9: 'grid-cols-9',
+    10: 'grid-cols-10',
+    11: 'grid-cols-11',
+    12: 'grid-cols-12',
+};
+const smColClasses = {
+    1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3',
+    4: 'sm:grid-cols-4', 5: 'sm:grid-cols-5', 6: 'sm:grid-cols-6',
+    7: 'sm:grid-cols-7', 8: 'sm:grid-cols-8', 9: 'sm:grid-cols-9',
+    10: 'sm:grid-cols-10', 11: 'sm:grid-cols-11', 12: 'sm:grid-cols-12',
+};
+const mdColClasses = {
+    1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4', 5: 'md:grid-cols-5', 6: 'md:grid-cols-6',
+    7: 'md:grid-cols-7', 8: 'md:grid-cols-8', 9: 'md:grid-cols-9',
+    10: 'md:grid-cols-10', 11: 'md:grid-cols-11', 12: 'md:grid-cols-12',
+};
+const lgColClasses = {
+    1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3',
+    4: 'lg:grid-cols-4', 5: 'lg:grid-cols-5', 6: 'lg:grid-cols-6',
+    7: 'lg:grid-cols-7', 8: 'lg:grid-cols-8', 9: 'lg:grid-cols-9',
+    10: 'lg:grid-cols-10', 11: 'lg:grid-cols-11', 12: 'lg:grid-cols-12',
+};
+const gapClasses = {
+    none: 'gap-0', xs: 'gap-1', sm: 'gap-2', md: 'gap-4', lg: 'gap-6', xl: 'gap-8',
+};
+function Grid({ cols = 1, smCols, mdCols, lgCols, gap = 'md', autoFill = false, minColWidth = '200px', className, style, children, ...props }) {
+    return (jsx("div", { className: cn('grid', !autoFill && colClasses[cols], !autoFill && smCols && smColClasses[smCols], !autoFill && mdCols && mdColClasses[mdCols], !autoFill && lgCols && lgColClasses[lgCols], gapClasses[gap], className), style: autoFill ? { gridTemplateColumns: `repeat(auto-fill, minmax(${minColWidth}, 1fr))`, ...style } : style, ...props, children: children }));
+}
+
+function Divider({ orientation = 'horizontal', label, labelPosition = 'center', className, style, id, }) {
+    if (orientation === 'vertical') {
+        return (jsx("div", { className: cn('inline-block self-stretch w-px bg-border mx-2', className), style: style, id: id, role: "separator", "aria-orientation": "vertical" }));
+    }
+    if (label) {
+        return (jsxs("div", { className: cn('flex items-center gap-3 w-full my-2', labelPosition === 'left' && 'flex-row', labelPosition === 'right' && 'flex-row-reverse', className), style: style, id: id, role: "separator", children: [labelPosition !== 'left' && jsx("div", { className: "flex-1 h-px bg-border" }), jsx("span", { className: "text-xs text-text-muted whitespace-nowrap px-1", children: label }), labelPosition !== 'right' && jsx("div", { className: "flex-1 h-px bg-border" })] }));
+    }
+    return (jsx("hr", { className: cn('border-0 border-t border-border my-2 w-full', className), style: style, id: id, role: "separator" }));
+}
+
+function Spacer({ size = 4, axis = 'vertical', className }) {
+    const sizeValue = typeof size === 'number' ? `${size * 0.25}rem` : size;
+    return (jsx("span", { className: cn('block', className), style: {
+            width: axis === 'horizontal' || axis === 'both' ? sizeValue : undefined,
+            height: axis === 'vertical' || axis === 'both' ? sizeValue : undefined,
+            minWidth: axis === 'horizontal' || axis === 'both' ? sizeValue : undefined,
+            minHeight: axis === 'vertical' || axis === 'both' ? sizeValue : undefined,
+        }, "aria-hidden": "true" }));
+}
+
+function Breadcrumb({ items, separator = jsx(ChevronRight, { size: 14 }), maxItems, className, }) {
+    let displayItems = items;
+    let truncated = false;
+    if (maxItems && items.length > maxItems) {
+        truncated = true;
+        displayItems = [
+            items[0],
+            { label: '...', href: undefined },
+            ...items.slice(-(maxItems - 2)),
+        ];
+    }
+    return (jsx("nav", { "aria-label": "Breadcrumb", className: cn('flex items-center', className), children: jsx("ol", { className: "flex items-center gap-1 flex-wrap", children: displayItems.map((item, i) => {
+                const isLast = i === displayItems.length - 1;
+                const isEllipsis = truncated && item.label === '...';
+                return (jsxs("li", { className: "flex items-center gap-1", children: [i > 0 && (jsx("span", { className: "text-text-muted flex items-center", "aria-hidden": "true", children: separator })), isLast || isEllipsis ? (jsx("span", { className: cn('text-sm', isLast ? 'text-text font-medium' : 'text-text-muted'), "aria-current": isLast ? 'page' : undefined, children: item.label })) : (jsx("a", { href: item.href, onClick: item.onClick, className: "text-sm text-text-muted hover:text-text transition-colors cursor-pointer", children: item.label }))] }, i));
+            }) }) }));
+}
+
+function Tabs({ items, defaultValue, value, onValueChange, variant = 'underline', children, className, listClassName, }) {
+    return (jsxs(RadixTabs.Root, { defaultValue: defaultValue ?? items[0]?.value, value: value, onValueChange: onValueChange, className: cn('w-full', className), children: [jsx(RadixTabs.List, { className: cn('flex', variant === 'underline' && 'border-b border-border gap-0', variant === 'pill' && 'bg-surface rounded-lg p-1 gap-1 w-fit', variant === 'card' && 'border-b border-border gap-0', listClassName), children: items.map((item) => (jsxs(RadixTabs.Trigger, { value: item.value, disabled: item.disabled, className: cn('flex items-center gap-2 text-sm font-medium transition-colors outline-none cursor-pointer', 'disabled:opacity-50 disabled:cursor-not-allowed', variant === 'underline' && [
+                        'px-4 py-2.5 border-b-2 border-transparent -mb-px',
+                        'text-text-muted hover:text-text hover:border-border',
+                        'data-[state=active]:text-primary data-[state=active]:border-primary',
+                    ], variant === 'pill' && [
+                        'px-3 py-1.5 rounded-md',
+                        'text-text-muted hover:text-text hover:bg-surface-hover',
+                        'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground',
+                    ], variant === 'card' && [
+                        'px-4 py-2.5 border border-transparent border-b-0 rounded-t-md -mb-px',
+                        'text-text-muted hover:text-text hover:bg-surface-hover',
+                        'data-[state=active]:bg-surface data-[state=active]:text-text data-[state=active]:border-border',
+                    ]), children: [item.icon && jsx("span", { className: "w-4 h-4 flex items-center", children: item.icon }), item.label, item.badge !== undefined && (jsx("span", { className: "ml-1 text-xs bg-primary/10 text-primary rounded-full px-1.5 py-0.5 min-w-[1.25rem] text-center", children: item.badge }))] }, item.value))) }), children] }));
+}
+function TabsContent({ value, children, className, }) {
+    return (jsx(RadixTabs.Content, { value: value, className: cn('outline-none mt-4', className), children: children }));
+}
+
+function range(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function Pagination({ page, pageSize = 10, total, siblingCount = 1, showFirstLast = true, onPageChange, className, }) {
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const pages = React.useMemo(() => {
+        const totalPageNumbers = siblingCount * 2 + 5;
+        if (totalPages <= totalPageNumbers)
+            return range(1, totalPages);
+        const leftSibling = Math.max(page - siblingCount, 1);
+        const rightSibling = Math.min(page + siblingCount, totalPages);
+        const showLeftDots = leftSibling > 2;
+        const showRightDots = rightSibling < totalPages - 1;
+        if (!showLeftDots && showRightDots) {
+            const leftRange = range(1, 3 + siblingCount * 2);
+            return [...leftRange, '...', totalPages];
+        }
+        if (showLeftDots && !showRightDots) {
+            const rightRange = range(totalPages - (2 + siblingCount * 2), totalPages);
+            return [1, '...', ...rightRange];
+        }
+        return [1, '...', ...range(leftSibling, rightSibling), '...', totalPages];
+    }, [page, siblingCount, totalPages]);
+    const btnBase = 'flex items-center justify-center w-8 h-8 rounded-md text-sm font-medium transition-colors';
+    const btnActive = 'bg-primary text-primary-foreground';
+    const btnInactive = 'text-text-muted hover:bg-surface-hover hover:text-text';
+    const btnDisabled = 'opacity-40 cursor-not-allowed pointer-events-none';
+    return (jsxs("nav", { "aria-label": "Pagination", className: cn('flex items-center gap-1', className), children: [showFirstLast && (jsx("button", { type: "button", onClick: () => onPageChange(1), disabled: page === 1, className: cn(btnBase, page === 1 ? btnDisabled : btnInactive), "aria-label": "First page", children: jsx(ChevronsLeft, { size: 14 }) })), jsx("button", { type: "button", onClick: () => onPageChange(page - 1), disabled: page === 1, className: cn(btnBase, page === 1 ? btnDisabled : btnInactive), "aria-label": "Previous page", children: jsx(ChevronLeft, { size: 14 }) }), pages.map((p, i) => p === '...' ? (jsx("span", { className: "flex items-center justify-center w-8 h-8 text-text-muted text-sm", children: "\u2026" }, `dots-${i}`)) : (jsx("button", { type: "button", onClick: () => onPageChange(p), className: cn(btnBase, page === p ? btnActive : btnInactive), "aria-label": `Page ${p}`, "aria-current": page === p ? 'page' : undefined, children: p }, p))), jsx("button", { type: "button", onClick: () => onPageChange(page + 1), disabled: page === totalPages, className: cn(btnBase, page === totalPages ? btnDisabled : btnInactive), "aria-label": "Next page", children: jsx(ChevronRight, { size: 14 }) }), showFirstLast && (jsx("button", { type: "button", onClick: () => onPageChange(totalPages), disabled: page === totalPages, className: cn(btnBase, page === totalPages ? btnDisabled : btnInactive), "aria-label": "Last page", children: jsx(ChevronsRight, { size: 14 }) }))] }));
+}
+
+function StepIndicator({ steps, currentStep, orientation = 'horizontal', className, }) {
+    const getStatus = (index) => {
+        if (index < currentStep)
+            return 'completed';
+        if (index === currentStep)
+            return 'current';
+        return 'upcoming';
+    };
+    return (jsx("ol", { className: cn('flex', orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col', className), children: steps.map((step, index) => {
+            const status = getStatus(index);
+            const isLast = index === steps.length - 1;
+            return (jsxs("li", { className: cn('flex', orientation === 'horizontal' ? 'flex-col items-center flex-1' : 'flex-row items-start'), children: [jsxs("div", { className: cn('flex items-center', orientation === 'horizontal' ? 'w-full' : 'flex-col'), children: [jsx("div", { className: cn('flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-colors', status === 'completed' && 'bg-primary border-primary text-primary-foreground', status === 'current' && 'bg-surface border-primary text-primary', status === 'upcoming' && 'bg-surface border-border text-text-muted'), children: status === 'completed' ? (jsx(Check, { size: 14 })) : step.icon ? (step.icon) : (jsx("span", { children: index + 1 })) }), !isLast && (jsx("div", { className: cn('transition-colors', orientation === 'horizontal' ? 'flex-1 h-0.5 mx-2' : 'w-0.5 h-8 my-1 ml-3.5', index < currentStep ? 'bg-primary' : 'bg-border') }))] }), jsxs("div", { className: cn(orientation === 'horizontal' ? 'text-center mt-2' : 'ml-3 pb-6', isLast && orientation === 'vertical' && 'pb-0'), children: [jsx("p", { className: cn('text-sm font-medium', status === 'current' && 'text-primary', status === 'completed' && 'text-text', status === 'upcoming' && 'text-text-muted'), children: step.label }), step.description && (jsx("p", { className: "text-xs text-text-muted mt-0.5", children: step.description }))] })] }, step.id));
+        }) }));
+}
+
+const buttonVariants = cva([
+    'inline-flex items-center justify-center gap-2 font-medium rounded-md',
+    'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2',
+    'disabled:opacity-50 disabled:cursor-not-allowed',
+    'select-none cursor-pointer',
+], {
+    variants: {
+        variant: {
+            primary: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover',
+            outline: 'border border-border bg-transparent text-text hover:bg-surface-hover',
+            ghost: 'bg-transparent text-text hover:bg-surface-hover',
+            danger: 'bg-error text-white hover:opacity-90',
+            success: 'bg-success text-white hover:opacity-90',
+            link: 'bg-transparent text-primary underline-offset-4 hover:underline p-0 h-auto',
+        },
+        size: {
+            xs: 'h-7 px-2.5 text-xs',
+            sm: 'h-8 px-3 text-sm',
+            md: 'h-9 px-4 text-sm',
+            lg: 'h-10 px-5 text-base',
+            xl: 'h-12 px-6 text-base',
+        },
+        fullWidth: {
+            true: 'w-full',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        fullWidth: false,
+    },
+});
+const Button = React.forwardRef(({ variant, size, fullWidth, loading = false, leftIcon, rightIcon, disabled, className, children, ...props }, ref) => {
+    return (jsxs("button", { ref: ref, disabled: disabled || loading, className: cn(buttonVariants({ variant, size, fullWidth }), className), ...props, children: [loading ? (jsx(Loader2, { size: 16, className: "animate-spin" })) : (leftIcon && jsx("span", { className: "flex-shrink-0", children: leftIcon })), children, !loading && rightIcon && jsx("span", { className: "flex-shrink-0", children: rightIcon })] }));
+});
+Button.displayName = 'Button';
+
+const iconButtonVariants = cva([
+    'inline-flex items-center justify-center rounded-md',
+    'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2',
+    'disabled:opacity-50 disabled:cursor-not-allowed',
+    'select-none cursor-pointer flex-shrink-0',
+], {
+    variants: {
+        variant: {
+            primary: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover',
+            outline: 'border border-border bg-transparent text-text hover:bg-surface-hover',
+            ghost: 'bg-transparent text-text-muted hover:bg-surface-hover hover:text-text',
+            danger: 'bg-error text-white hover:opacity-90',
+        },
+        size: {
+            xs: 'w-6 h-6',
+            sm: 'w-7 h-7',
+            md: 'w-8 h-8',
+            lg: 'w-10 h-10',
+            xl: 'w-12 h-12',
+        },
+        rounded: {
+            true: 'rounded-full',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'ghost',
+        size: 'md',
+        rounded: false,
+    },
+});
+const IconButton = React.forwardRef(({ variant, size, rounded, loading = false, icon, disabled, className, ...props }, ref) => {
+    return (jsx("button", { ref: ref, disabled: disabled || loading, className: cn(iconButtonVariants({ variant, size, rounded }), className), ...props, children: loading ? jsx(Loader2, { size: 14, className: "animate-spin" }) : icon }));
+});
+IconButton.displayName = 'IconButton';
+
+const sizeClasses$f = {
+    sm: { input: 'h-8 text-sm px-2.5', icon: 'w-8', adornment: 'text-xs' },
+    md: { input: 'h-9 text-sm px-3', icon: 'w-9', adornment: 'text-sm' },
+    lg: { input: 'h-11 text-base px-4', icon: 'w-11', adornment: 'text-base' },
+};
+const TextField = React.forwardRef(({ label, helperText, error, size = 'md', prefixIcon, prefixImage, prefixText, suffixIcon, suffixImage, suffixText, clearable = false, onClear, fullWidth = false, showMaxLength = false, containerClassName, inputClassName, type = 'text', value, onChange, disabled, required, id: externalId, ...props }, ref) => {
+    const generatedId = useId();
+    const id = externalId ?? generatedId;
+    const [showPassword, setShowPassword] = useState(false);
+    const isPassword = type === 'password';
+    const inputType = isPassword ? (showPassword ? 'text' : 'password') : type;
+    const hasPrefix = !!(prefixIcon || prefixImage || prefixText);
+    const hasSuffix = !!(suffixIcon || suffixImage || suffixText || clearable || isPassword);
+    const sz = sizeClasses$f[size];
+    const hasValue = value !== undefined ? String(value).length > 0 : false;
+    const charCount = value !== undefined ? String(value).length : 0;
+    const maxLen = props.maxLength;
+    return (jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', containerClassName), children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsxs("div", { className: cn('relative flex items-center', fullWidth && 'w-full'), children: [hasPrefix && (jsx("div", { className: cn('absolute left-0 flex items-center justify-center h-full border-r border-border bg-surface-hover rounded-l-md', sz.icon, 'text-text-muted', sz.adornment), children: prefixImage ? (jsx("img", { src: prefixImage, alt: "", className: "w-4 h-4 object-contain" })) : prefixIcon ? (jsx("span", { className: "flex items-center justify-center w-4 h-4", children: prefixIcon })) : (jsx("span", { className: "px-2 whitespace-nowrap", children: prefixText })) })), jsx("input", { ref: ref, id: id, type: inputType, value: value, onChange: onChange, disabled: disabled, required: required, className: cn('w-full rounded-md border bg-surface text-text placeholder:text-text-muted', 'transition-colors outline-none', 'focus:border-border-focus focus:ring-2 focus:ring-border-focus/20', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-hover', error ? 'border-error focus:border-error focus:ring-error/20' : 'border-border', sz.input, hasPrefix && 'pl-[calc(var(--prefix-width,2.25rem)+0.5rem)]', hasSuffix && 'pr-[calc(var(--suffix-width,2.25rem)+0.5rem)]', inputClassName), style: {
+                            paddingLeft: hasPrefix ? `calc(${sz.icon.replace('w-', '')}*0.25rem + 0.75rem)` : undefined,
+                            paddingRight: hasSuffix ? `calc(${sz.icon.replace('w-', '')}*0.25rem + 0.75rem)` : undefined,
+                        }, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : helperText ? `${id}-helper` : undefined, ...props }), hasSuffix && (jsxs("div", { className: cn('absolute right-0 flex items-center justify-center h-full gap-1 pr-2', 'text-text-muted', sz.adornment), children: [suffixImage ? (jsx("img", { src: suffixImage, alt: "", className: "w-4 h-4 object-contain" })) : suffixIcon ? (jsx("span", { className: "flex items-center justify-center w-4 h-4", children: suffixIcon })) : suffixText ? (jsx("span", { className: "whitespace-nowrap border-l border-border pl-2", children: suffixText })) : null, clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: onClear, className: "flex items-center justify-center w-4 h-4 rounded-full hover:bg-surface-hover transition-colors", "aria-label": "Clear input", children: jsx(X, { size: 12 }) })), isPassword && (jsx("button", { type: "button", onClick: () => setShowPassword((v) => !v), className: "flex items-center justify-center w-4 h-4 hover:text-text transition-colors", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? jsx(EyeOff, { size: 14 }) : jsx(Eye, { size: 14 }) }))] }))] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [error && (jsx("p", { id: `${id}-error`, className: "text-xs text-error", role: "alert", children: error })), !error && helperText && (jsx("p", { id: `${id}-helper`, className: "text-xs text-text-muted", children: helperText }))] }), showMaxLength && maxLen !== undefined && (jsxs("p", { className: cn('text-xs text-text-muted ml-auto', charCount >= maxLen && 'text-error'), children: [charCount, "/", maxLen] }))] })] }));
+});
+TextField.displayName = 'TextField';
+
+const TextArea = React.forwardRef(({ label, helperText, error, prefixIcon, prefixImage, suffixIcon, suffixImage, autoResize = false, showCharCount = false, showMaxLength = false, maxLength, fullWidth = false, containerClassName, textareaClassName, value, onChange, disabled, required, rows = 3, id: externalId, ...props }, ref) => {
+    const generatedId = useId();
+    const id = externalId ?? generatedId;
+    const internalRef = useRef(null);
+    const resolvedRef = ref ?? internalRef;
+    const charCount = value !== undefined ? String(value).length : 0;
+    const hasPrefix = !!(prefixIcon || prefixImage);
+    const hasSuffix = !!(suffixIcon || suffixImage);
+    useEffect(() => {
+        if (!autoResize || !resolvedRef.current)
+            return;
+        const el = resolvedRef.current;
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }, [value, autoResize, resolvedRef]);
+    return (jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', containerClassName), children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsxs("div", { className: cn('relative', fullWidth && 'w-full'), children: [hasPrefix && (jsx("div", { className: "absolute top-2.5 left-0 flex items-center justify-center w-9 text-text-muted", children: prefixImage ? (jsx("img", { src: prefixImage, alt: "", className: "w-4 h-4 object-contain" })) : (jsx("span", { className: "flex items-center justify-center w-4 h-4", children: prefixIcon })) })), jsx("textarea", { ref: resolvedRef, id: id, value: value, onChange: onChange, disabled: disabled, required: required, rows: rows, maxLength: maxLength, className: cn('w-full rounded-md border bg-surface text-text placeholder:text-text-muted text-sm', 'transition-colors outline-none resize-y py-2 px-3', 'focus:border-border-focus focus:ring-2 focus:ring-border-focus/20', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-hover', error ? 'border-error focus:border-error focus:ring-error/20' : 'border-border', hasPrefix && 'pl-9', hasSuffix && 'pr-9', autoResize && 'resize-none overflow-hidden', textareaClassName), "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : helperText ? `${id}-helper` : undefined, ...props }), hasSuffix && (jsx("div", { className: "absolute top-2.5 right-2 flex items-center justify-center text-text-muted", children: suffixImage ? (jsx("img", { src: suffixImage, alt: "", className: "w-4 h-4 object-contain" })) : (jsx("span", { className: "flex items-center justify-center w-4 h-4", children: suffixIcon })) }))] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [error && (jsx("p", { id: `${id}-error`, className: "text-xs text-error", role: "alert", children: error })), !error && helperText && (jsx("p", { id: `${id}-helper`, className: "text-xs text-text-muted", children: helperText }))] }), (showCharCount || showMaxLength) && (jsxs("p", { className: cn('text-xs text-text-muted ml-auto', maxLength && charCount >= maxLength && 'text-error'), children: [charCount, maxLength ? `/${maxLength}` : ''] }))] })] }));
+});
+TextArea.displayName = 'TextArea';
+
+function Select({ options = [], groups = [], value, defaultValue, onValueChange, placeholder = 'Select an option', label, helperText, error, disabled, required, fullWidth = false, className, }) {
+    const id = useId();
+    const renderOption = (opt) => (jsxs(RadixSelect.Item, { value: opt.value, disabled: opt.disabled, className: cn('flex items-center gap-2 px-3 py-2 text-sm rounded-md cursor-pointer outline-none', 'text-text hover:bg-surface-hover focus:bg-surface-hover', 'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed', 'data-[highlighted]:bg-primary/10 data-[highlighted]:text-primary'), children: [jsx(RadixSelect.ItemText, { children: opt.label }), jsx(RadixSelect.ItemIndicator, { className: "ml-auto", children: jsx(Check, { size: 14 }) })] }, opt.value));
+    return (jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', className), children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsxs(RadixSelect.Root, { value: value, defaultValue: defaultValue, onValueChange: onValueChange, disabled: disabled, children: [jsxs(RadixSelect.Trigger, { id: id, className: cn('flex items-center justify-between gap-2 h-9 px-3 w-full rounded-md border bg-surface text-sm', 'transition-colors outline-none cursor-pointer', 'focus:border-border-focus focus:ring-2 focus:ring-border-focus/20', 'disabled:opacity-50 disabled:cursor-not-allowed', 'data-[placeholder]:text-text-muted', error ? 'border-error' : 'border-border', fullWidth && 'w-full'), "aria-invalid": !!error, children: [jsx(RadixSelect.Value, { placeholder: placeholder }), jsx(RadixSelect.Icon, { children: jsx(ChevronDown, { size: 14, className: "text-text-muted" }) })] }), jsx(RadixSelect.Portal, { children: jsxs(RadixSelect.Content, { className: cn('z-dropdown bg-surface border border-border rounded-md shadow-lg overflow-hidden', 'animate-in fade-in-0 zoom-in-95'), position: "popper", sideOffset: 4, children: [jsx(RadixSelect.ScrollUpButton, { className: "flex items-center justify-center py-1 text-text-muted", children: jsx(ChevronUp, { size: 14 }) }), jsx(RadixSelect.Viewport, { className: "p-1 max-h-60", children: groups.length > 0
+                                        ? groups.map((group) => (jsxs(RadixSelect.Group, { children: [jsx(RadixSelect.Label, { className: "px-3 py-1.5 text-xs font-semibold text-text-muted uppercase tracking-wide", children: group.label }), group.options.map(renderOption)] }, group.label)))
+                                        : options.map(renderOption) }), jsx(RadixSelect.ScrollDownButton, { className: "flex items-center justify-center py-1 text-text-muted", children: jsx(ChevronDown, { size: 14 }) })] }) })] }), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const sizeMap$5 = {
+    sm: { box: 'w-3.5 h-3.5', icon: 10, label: 'text-sm' },
+    md: { box: 'w-4 h-4', icon: 12, label: 'text-sm' },
+    lg: { box: 'w-5 h-5', icon: 14, label: 'text-base' },
+};
+function Checkbox({ label, description, checked, defaultChecked, onCheckedChange, disabled, required, error, size = 'md', className, id: externalId, }) {
+    const generatedId = useId();
+    const id = externalId ?? generatedId;
+    const sz = sizeMap$5[size];
+    return (jsxs("div", { className: cn('flex flex-col gap-1', className), children: [jsxs("div", { className: "flex items-start gap-2", children: [jsx(RadixCheckbox.Root, { id: id, checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, required: required, className: cn('flex-shrink-0 flex items-center justify-center rounded border-2 transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', sz.box, checked === true || checked === 'indeterminate'
+                            ? 'bg-primary border-primary'
+                            : 'bg-surface border-border hover:border-primary'), children: jsx(RadixCheckbox.Indicator, { children: checked === 'indeterminate' ? (jsx(Minus, { size: sz.icon, className: "text-primary-foreground" })) : (jsx(Check, { size: sz.icon, className: "text-primary-foreground" })) }) }), (label || description) && (jsxs("div", { className: "flex flex-col", children: [label && (jsxs("label", { htmlFor: id, className: cn('font-medium text-text cursor-pointer leading-tight', sz.label, disabled && 'opacity-50 cursor-not-allowed'), children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), description && (jsx("p", { className: "text-xs text-text-muted mt-0.5", children: description }))] }))] }), error && jsx("p", { className: "text-xs text-error ml-6", role: "alert", children: error })] }));
+}
+
+const sizeMap$4 = {
+    sm: { radio: 'w-3.5 h-3.5', dot: 'w-1.5 h-1.5', label: 'text-sm' },
+    md: { radio: 'w-4 h-4', dot: 'w-2 h-2', label: 'text-sm' },
+    lg: { radio: 'w-5 h-5', dot: 'w-2.5 h-2.5', label: 'text-base' },
+};
+function RadioGroup({ options, value, defaultValue, onValueChange, orientation = 'vertical', label, error, disabled, required, size = 'md', className, }) {
+    const groupId = useId();
+    const sz = sizeMap$4[size];
+    return (jsxs("div", { className: cn('flex flex-col gap-1.5', className), children: [label && (jsxs("p", { className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsx(RadixRadio.Root, { value: value, defaultValue: defaultValue, onValueChange: onValueChange, disabled: disabled, orientation: orientation, className: cn('flex gap-3', orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap'), "aria-label": label, children: options.map((opt) => {
+                    const id = `${groupId}-${opt.value}`;
+                    return (jsxs("div", { className: "flex items-start gap-2", children: [jsx(RadixRadio.Item, { id: id, value: opt.value, disabled: opt.disabled, className: cn('flex-shrink-0 flex items-center justify-center rounded-full border-2 transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', sz.radio, 'border-border bg-surface hover:border-primary', 'data-[state=checked]:border-primary data-[state=checked]:bg-surface'), children: jsx(RadixRadio.Indicator, { className: cn('rounded-full bg-primary', sz.dot) }) }), jsxs("div", { className: "flex flex-col", children: [jsx("label", { htmlFor: id, className: cn('font-medium text-text cursor-pointer leading-tight', sz.label, opt.disabled && 'opacity-50 cursor-not-allowed'), children: opt.label }), opt.description && (jsx("p", { className: "text-xs text-text-muted mt-0.5", children: opt.description }))] })] }, opt.value));
+                }) }), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error })] }));
+}
+
+const sizeMap$3 = {
+    sm: { root: 'w-8 h-4', thumb: 'w-3 h-3 data-[state=checked]:translate-x-4', label: 'text-sm' },
+    md: { root: 'w-10 h-5', thumb: 'w-4 h-4 data-[state=checked]:translate-x-5', label: 'text-sm' },
+    lg: { root: 'w-12 h-6', thumb: 'w-5 h-5 data-[state=checked]:translate-x-6', label: 'text-base' },
+};
+function Switch({ label, description, checked, defaultChecked, onCheckedChange, disabled, required, size = 'md', labelPosition = 'right', className, id: externalId, }) {
+    const generatedId = useId();
+    const id = externalId ?? generatedId;
+    const sz = sizeMap$3[size];
+    const switchEl = (jsx(RadixSwitch.Root, { id: id, checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, required: required, className: cn('relative inline-flex flex-shrink-0 items-center rounded-full border-2 border-transparent', 'transition-colors cursor-pointer', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', 'bg-border data-[state=checked]:bg-primary', sz.root), children: jsx(RadixSwitch.Thumb, { className: cn('block rounded-full bg-white shadow-sm transition-transform translate-x-0', sz.thumb) }) }));
+    if (!label && !description)
+        return switchEl;
+    return (jsxs("div", { className: cn('flex items-start gap-3', className), children: [labelPosition === 'left' && (jsxs("div", { className: "flex flex-col flex-1", children: [label && (jsxs("label", { htmlFor: id, className: cn('font-medium text-text cursor-pointer', sz.label, disabled && 'opacity-50 cursor-not-allowed'), children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), description && jsx("p", { className: "text-xs text-text-muted", children: description })] })), switchEl, labelPosition === 'right' && (jsxs("div", { className: "flex flex-col", children: [label && (jsxs("label", { htmlFor: id, className: cn('font-medium text-text cursor-pointer', sz.label, disabled && 'opacity-50 cursor-not-allowed'), children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), description && jsx("p", { className: "text-xs text-text-muted", children: description })] }))] }));
+}
+
+function flattenOptions(options = [], groups = []) {
+    return [...options, ...groups.flatMap((g) => g.options)];
+}
+function SearchSelect(props) {
+    const { options = [], groups = [], placeholder = 'Select…', searchPlaceholder = 'Search…', label, helperText, error, disabled = false, required = false, clearable = true, fullWidth = false, className, maxSelected, } = props;
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    useRef(null);
+    const searchRef = useRef(null);
+    const [dropdownStyle, setDropdownStyle] = useState({});
+    const [visibleCount, setVisibleCount] = useState(Infinity);
+    const measureRef = useRef(null);
+    const rafRef = useRef(0);
+    const allOptions = flattenOptions(options, groups);
+    const selectedValues = props.multiple
+        ? (props.value ?? [])
+        : props.value
+            ? [props.value]
+            : [];
+    const filtered = allOptions.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
+    const filteredGroups = groups.length > 0
+        ? groups
+            .map((g) => ({
+            ...g,
+            options: g.options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),
+        }))
+            .filter((g) => g.options.length > 0)
+        : [];
+    const isSelected = (val) => selectedValues.includes(val);
+    const toggle = useCallback((val) => {
+        if (props.multiple) {
+            const current = props.value ?? [];
+            const next = current.includes(val)
+                ? current.filter((v) => v !== val)
+                : maxSelected && current.length >= maxSelected
+                    ? current
+                    : [...current, val];
+            props.onChange?.(next);
+        }
+        else {
+            props.onChange?.(val);
+            setOpen(false);
+            setQuery('');
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.multiple, props.value, maxSelected]);
+    const removeChip = (val, e) => {
+        e.stopPropagation();
+        if (props.multiple) {
+            props.onChange?.((props.value ?? []).filter((v) => v !== val));
+        }
+    };
+    const clearAll = (e) => {
+        e.stopPropagation();
+        if (props.multiple) {
+            props.onChange?.([]);
+        }
+        else {
+            props.onChange?.('');
+        }
+    };
+    const updateDropdownPosition = useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const openUpward = spaceBelow < 260 && spaceAbove > spaceBelow;
+        setDropdownStyle({
+            position: 'fixed',
+            top: openUpward ? undefined : rect.bottom + 4,
+            bottom: openUpward ? window.innerHeight - rect.top + 4 : undefined,
+            left: rect.left,
+            width: rect.width,
+            zIndex: 9999,
+        });
+    }, []);
+    useEffect(() => {
+        if (open) {
+            updateDropdownPosition();
+            setTimeout(() => searchRef.current?.focus(), 10);
+        }
+        else {
+            setQuery('');
+        }
+    }, [open, updateDropdownPosition]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onScroll = () => updateDropdownPosition();
+        const onResize = () => updateDropdownPosition();
+        window.addEventListener('scroll', onScroll, true);
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', onResize);
+        };
+    }, [open, updateDropdownPosition]);
+    useEffect(() => {
+        const handler = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target) &&
+                !e.target.closest('[data-searchselect-dropdown]')) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, []);
+    const selectedLabels = selectedValues
+        .map((v) => allOptions.find((o) => o.value === v))
+        .filter(Boolean);
+    const hasValue = selectedValues.length > 0;
+    // Measure from the off-screen clone (measureRef) — never mutates the visible DOM
+    const recalcVisibleCount = useCallback(() => {
+        if (!measureRef.current || !triggerRef.current || !props.multiple)
+            return;
+        const chips = Array.from(measureRef.current.querySelectorAll('[data-chip-measure]'));
+        if (chips.length === 0) {
+            setVisibleCount(Infinity);
+            return;
+        }
+        // Available width = trigger width minus actions area (clear btn + chevron ~52px) minus padding (~24px)
+        const triggerW = triggerRef.current.offsetWidth;
+        const ACTIONS_W = 56;
+        const PADDING = 24;
+        const MORE_BADGE_W = 60;
+        const GAP = 4;
+        const available = triggerW - ACTIONS_W - PADDING;
+        let used = 0;
+        let count = 0;
+        for (let i = 0; i < chips.length; i++) {
+            const chipW = chips[i].offsetWidth + GAP;
+            const isLast = i === chips.length - 1;
+            if (used + chipW <= available - (isLast ? 0 : MORE_BADGE_W)) {
+                used += chipW;
+                count++;
+            }
+            else {
+                break;
+            }
+        }
+        setVisibleCount(Math.max(1, count));
+    }, [props.multiple]);
+    // Re-measure whenever selection changes or trigger resizes
+    useEffect(() => {
+        if (!props.multiple)
+            return;
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(recalcVisibleCount);
+        return () => cancelAnimationFrame(rafRef.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedValues.join(','), recalcVisibleCount]);
+    useEffect(() => {
+        if (!props.multiple || !triggerRef.current)
+            return;
+        const ro = new ResizeObserver(() => {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(recalcVisibleCount);
+        });
+        ro.observe(triggerRef.current);
+        return () => ro.disconnect();
+    }, [props.multiple, recalcVisibleCount]);
+    const renderOption = (opt) => (jsxs("button", { type: "button", disabled: opt.disabled || (!isSelected(opt.value) && !!maxSelected && selectedValues.length >= maxSelected), onClick: () => toggle(opt.value), className: cn('flex items-center gap-2 w-full px-3 py-2 text-sm rounded-md text-left outline-none transition-colors', 'hover:bg-surface-hover focus:bg-surface-hover', 'disabled:opacity-50 disabled:cursor-not-allowed', isSelected(opt.value) && 'bg-primary/10 text-primary font-medium'), children: [opt.icon && jsx("span", { className: "flex-shrink-0", children: opt.icon }), jsx("span", { className: "flex-1 truncate", children: opt.label }), isSelected(opt.value) && jsx(Check, { size: 14, className: "flex-shrink-0" })] }, opt.value));
+    return (jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', className), ref: containerRef, children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" })] })), jsxs("div", { ref: triggerRef, id: id, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": !!error, tabIndex: disabled ? -1 : 0, onClick: () => !disabled && setOpen((o) => !o), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        !disabled && setOpen((o) => !o);
+                    }
+                    if (e.key === 'Escape')
+                        setOpen(false);
+                }, className: cn('flex items-center gap-2 min-h-9 px-3 py-1.5 w-full rounded-md border bg-surface text-sm', 'transition-colors outline-none cursor-pointer select-none', 'focus:border-border-focus focus:ring-2 focus:ring-border-focus/20', disabled && 'opacity-50 cursor-not-allowed', error ? 'border-error' : open ? 'border-border-focus ring-2 ring-border-focus/20' : 'border-border'), children: [jsx("div", { className: "flex-1 flex items-center gap-1 min-w-0 overflow-hidden", children: props.multiple && selectedLabels.length > 0 ? (jsxs(Fragment, { children: [selectedLabels.slice(0, visibleCount).map((opt) => (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary flex-shrink-0", children: [jsx("span", { className: "max-w-[120px] truncate", children: opt.label }), jsx("button", { type: "button", onClick: (e) => removeChip(opt.value, e), className: "hover:text-primary/70 focus:outline-none", "aria-label": `Remove ${opt.label}`, children: jsx(X, { size: 10 }) })] }, opt.value))), selectedLabels.length > visibleCount && (jsxs("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted flex-shrink-0 whitespace-nowrap", children: ["+", selectedLabels.length - visibleCount, " more"] }))] })) : !props.multiple && selectedLabels.length > 0 ? (jsx("span", { className: "text-text truncate", children: selectedLabels[0].label })) : (jsx("span", { className: "text-text-muted truncate", children: placeholder })) }), props.multiple && (jsx("div", { ref: measureRef, "aria-hidden": "true", style: {
+                            position: 'fixed',
+                            top: -9999,
+                            left: -9999,
+                            visibility: 'hidden',
+                            pointerEvents: 'none',
+                            display: 'flex',
+                            gap: 4,
+                            flexWrap: 'nowrap',
+                        }, children: selectedLabels.map((opt) => (jsxs("span", { "data-chip-measure": "", className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary flex-shrink-0", children: [jsx("span", { className: "max-w-[120px] truncate", children: opt.label }), jsx("span", { style: { width: 10, height: 10, display: 'inline-block' } })] }, opt.value))) })), jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: clearAll, className: "text-text-muted hover:text-text focus:outline-none", "aria-label": "Clear selection", children: jsx(X, { size: 14 }) })), jsx(ChevronDown, { size: 14, className: cn('text-text-muted transition-transform', open && 'rotate-180') })] })] }), open && createPortal(jsxs("div", { "data-searchselect-dropdown": "", className: cn('bg-surface border border-border rounded-md shadow-xl overflow-hidden', 'animate-in fade-in-0 zoom-in-95'), style: dropdownStyle, children: [jsx("div", { className: "p-2 border-b border-border", children: jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-border bg-background", children: [jsx(Search, { size: 14, className: "text-text-muted flex-shrink-0" }), jsx("input", { ref: searchRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, className: "flex-1 text-sm bg-transparent outline-none text-text placeholder:text-text-muted", onClick: (e) => e.stopPropagation() }), query && (jsx("button", { type: "button", onClick: () => setQuery(''), className: "text-text-muted hover:text-text", children: jsx(X, { size: 12 }) }))] }) }), jsx("div", { className: "p-1 max-h-60 overflow-y-auto", role: "listbox", children: filteredGroups.length > 0
+                            ? filteredGroups.map((group) => (jsxs("div", { children: [jsx("p", { className: "px-3 py-1.5 text-xs font-semibold text-text-muted uppercase tracking-wide", children: group.label }), group.options.map(renderOption)] }, group.label)))
+                            : groups.length === 0
+                                ? filtered.length > 0
+                                    ? filtered.map(renderOption)
+                                    : (jsx("p", { className: "px-3 py-4 text-sm text-text-muted text-center", children: "No options found" }))
+                                : (jsx("p", { className: "px-3 py-4 text-sm text-text-muted text-center", children: "No options found" })) }), props.multiple && maxSelected && (jsxs("div", { className: "px-3 py-2 border-t border-border text-xs text-text-muted", children: [selectedValues.length, " / ", maxSelected, " selected"] }))] }), document.body), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const sizeClasses$e = {
+    sm: 'px-2.5 py-1 text-xs gap-1',
+    md: 'px-3 py-1.5 text-sm gap-1.5',
+    lg: 'px-4 py-2 text-sm gap-2',
+};
+function ChipSelect({ options, value = [], onChange, multiple = true, maxSelect, label, helperText, error, disabled = false, required = false, size = 'md', className, fullWidth = true, }) {
+    const id = useId();
+    const isSelected = (val) => value.includes(val);
+    const toggle = (val) => {
+        if (disabled)
+            return;
+        const opt = options.find((o) => o.value === val);
+        if (opt?.disabled)
+            return;
+        if (multiple) {
+            if (isSelected(val)) {
+                onChange?.(value.filter((v) => v !== val));
+            }
+            else {
+                if (maxSelect && value.length >= maxSelect)
+                    return;
+                onChange?.([...value, val]);
+            }
+        }
+        else {
+            onChange?.(isSelected(val) ? [] : [val]);
+        }
+    };
+    return (jsxs("div", { className: cn('flex flex-col gap-1.5', fullWidth && 'w-full', className), children: [label && (jsxs("label", { id: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" })] })), jsx("div", { role: "group", "aria-labelledby": label ? id : undefined, className: cn('flex flex-wrap gap-2', disabled && 'opacity-60 pointer-events-none'), children: options.map((opt) => {
+                    const selected = isSelected(opt.value);
+                    const atMax = !selected && !!maxSelect && value.length >= maxSelect;
+                    const isDisabled = opt.disabled || atMax;
+                    return (jsxs("button", { type: "button", role: "checkbox", "aria-checked": selected, disabled: isDisabled, onClick: () => toggle(opt.value), className: cn('inline-flex items-center rounded-full border font-medium transition-all', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1', sizeClasses$e[size], selected
+                            ? 'bg-primary text-primary-foreground border-primary shadow-sm'
+                            : 'bg-surface text-text border-border hover:border-primary/50 hover:bg-primary/5', isDisabled && 'opacity-50 cursor-not-allowed pointer-events-none'), children: [opt.icon && (jsx("span", { className: cn('flex-shrink-0', selected ? 'text-primary-foreground' : 'text-text-muted'), children: opt.icon })), jsx("span", { children: opt.label }), selected && jsx(Check, { size: 12, className: "flex-shrink-0" })] }, opt.value));
+                }) }), maxSelect && (jsxs("p", { className: "text-xs text-text-muted", children: [value.length, " of ", maxSelect, " selected"] })), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const SEPARATOR_KEYS = {
+    space: [' '],
+    comma: [','],
+    enter: ['Enter'],
+};
+function TagInput({ value = [], onChange, separator = ['space', 'comma', 'enter'], placeholder = 'Type and press Enter…', label, helperText, error, disabled = false, required = false, maxTags, allowDuplicates = false, fullWidth = false, className, }) {
+    const id = useId();
+    const [inputValue, setInputValue] = useState('');
+    const inputRef = useRef(null);
+    const separatorKeys = separator.flatMap((s) => SEPARATOR_KEYS[s]);
+    const addTag = (raw) => {
+        const tag = raw.trim();
+        if (!tag)
+            return;
+        if (!allowDuplicates && value.includes(tag)) {
+            setInputValue('');
+            return;
+        }
+        if (maxTags && value.length >= maxTags)
+            return;
+        onChange?.([...value, tag]);
+        setInputValue('');
+    };
+    const removeTag = (index) => {
+        onChange?.(value.filter((_, i) => i !== index));
+    };
+    const handleKeyDown = (e) => {
+        if (separatorKeys.includes(e.key)) {
+            e.preventDefault();
+            addTag(inputValue);
+            return;
+        }
+        if (e.key === 'Backspace' && inputValue === '' && value.length > 0) {
+            removeTag(value.length - 1);
+        }
+    };
+    const handleChange = (e) => {
+        const raw = e.target.value;
+        if (separator.includes('comma') && raw.includes(',')) {
+            const parts = raw.split(',');
+            const last = parts.pop() ?? '';
+            parts.forEach((p) => addTag(p));
+            setInputValue(last);
+        }
+        else if (separator.includes('space') && raw.endsWith(' ')) {
+            addTag(raw);
+        }
+        else {
+            setInputValue(raw);
+        }
+    };
+    const atMax = !!maxTags && value.length >= maxTags;
+    return (jsxs("div", { className: cn('flex flex-col gap-1.5', fullWidth && 'w-full', className), children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" })] })), jsxs("div", { onClick: () => inputRef.current?.focus(), className: cn('flex flex-col gap-2 min-h-[80px] w-full rounded-md border bg-surface px-3 py-2', 'transition-colors cursor-text', 'focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/20', disabled && 'opacity-50 cursor-not-allowed', error ? 'border-error' : 'border-border'), children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { ref: inputRef, id: id, type: "text", value: inputValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: atMax ? `Max ${maxTags} tags reached` : placeholder, disabled: disabled || atMax, "aria-invalid": !!error, className: cn('flex-1 text-sm bg-transparent outline-none text-text placeholder:text-text-muted', 'disabled:cursor-not-allowed') }), inputValue && (jsx("button", { type: "button", onClick: () => setInputValue(''), className: "text-text-muted hover:text-text focus:outline-none", tabIndex: -1, "aria-label": "Clear input", children: jsx(X, { size: 12 }) }))] }), value.length > 0 && (jsx("div", { className: "border-t border-border" })), value.length > 0 && (jsx("div", { className: "flex flex-wrap gap-1.5", children: value.map((tag, i) => (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20", children: [jsx("span", { children: tag }), !disabled && (jsx("button", { type: "button", onClick: () => removeTag(i), className: "hover:text-primary/70 focus:outline-none flex-shrink-0", "aria-label": `Remove ${tag}`, children: jsx(X, { size: 10 }) }))] }, `${tag}-${i}`))) }))] }), maxTags && (jsxs("p", { className: "text-xs text-text-muted", children: [value.length, " / ", maxTags, " tags"] })), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const trackSize = {
+    sm: 'h-1',
+    md: 'h-1.5',
+    lg: 'h-2',
+};
+const thumbSize = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+};
+function Slider({ value, defaultValue = [0], onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled = false, orientation = 'horizontal', size = 'md', showTooltip = false, showMarks = false, formatValue = (v) => String(v), label, helperText, className, }) {
+    const [internalValue, setInternalValue] = React.useState(value ?? defaultValue);
+    const [showTip, setShowTip] = React.useState(false);
+    const currentValue = value ?? internalValue;
+    const handleValueChange = (v) => {
+        setInternalValue(v);
+        onValueChange?.(v);
+    };
+    const marks = React.useMemo(() => {
+        if (!showMarks)
+            return [];
+        const count = Math.floor((max - min) / step);
+        return Array.from({ length: count + 1 }, (_, i) => min + i * step);
+    }, [showMarks, min, max, step]);
+    return (jsxs("div", { className: cn('flex flex-col gap-1.5', className), children: [label && (jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm font-medium text-text", children: label }), jsx("span", { className: "text-sm text-text-muted", children: currentValue.map(formatValue).join(' – ') })] })), jsxs(RadixSlider.Root, { className: cn('relative flex items-center select-none touch-none', orientation === 'horizontal' ? 'w-full' : 'flex-col h-40 w-5', disabled && 'opacity-50 cursor-not-allowed'), value: currentValue, defaultValue: defaultValue, onValueChange: handleValueChange, onValueCommit: onValueCommit, min: min, max: max, step: step, disabled: disabled, orientation: orientation, children: [jsx(RadixSlider.Track, { className: cn('relative grow rounded-full bg-surface-hover overflow-hidden', orientation === 'horizontal' ? `w-full ${trackSize[size]}` : `h-full w-${size === 'sm' ? '1' : size === 'md' ? '1.5' : '2'}`), children: jsx(RadixSlider.Range, { className: "absolute bg-primary rounded-full h-full" }) }), currentValue.map((_, i) => (jsx(RadixSlider.Thumb, { className: cn('block rounded-full bg-white border-2 border-primary shadow-md', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40', 'transition-transform hover:scale-110', 'cursor-grab active:cursor-grabbing', thumbSize[size], disabled && 'cursor-not-allowed hover:scale-100'), onMouseEnter: () => showTooltip && setShowTip(true), onMouseLeave: () => showTooltip && setShowTip(false), "aria-label": `Slider thumb ${i + 1}`, children: showTooltip && showTip && (jsx("div", { className: "absolute -top-8 left-1/2 -translate-x-1/2 bg-text text-background text-xs px-2 py-0.5 rounded whitespace-nowrap pointer-events-none", children: formatValue(currentValue[i]) })) }, i)))] }), showMarks && (jsx("div", { className: "relative flex justify-between mt-1", children: marks.map((mark) => (jsx("span", { className: "text-xs text-text-muted", children: formatValue(mark) }, mark))) })), helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const sizeClasses$d = {
+    sm: { input: 'h-8 text-sm px-2.5', btn: 'h-4 w-6' },
+    md: { input: 'h-9 text-sm px-3', btn: 'h-[18px] w-7' },
+    lg: { input: 'h-11 text-base px-4', btn: 'h-5 w-8' },
+};
+const NumberInput = React.forwardRef(({ value: controlledValue, defaultValue, onChange, min, max, step = 1, precision, prefix, suffix, label, helperText, error, size = 'md', fullWidth = false, hideControls = false, showMaxLength = false, formatValue, disabled, required, id: externalId, containerClassName, className, ...props }, ref) => {
+    const generatedId = useId();
+    const id = externalId ?? generatedId;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [inputStr, setInputStr] = useState(defaultValue !== undefined ? String(defaultValue) : '');
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const sz = sizeClasses$d[size];
+    const clamp = (v) => {
+        let result = v;
+        if (min !== undefined)
+            result = Math.max(min, result);
+        if (max !== undefined)
+            result = Math.min(max, result);
+        if (precision !== undefined)
+            result = parseFloat(result.toFixed(precision));
+        return result;
+    };
+    const commit = (v) => {
+        setInternalValue(v);
+        onChange?.(v);
+        setInputStr(v !== undefined ? (formatValue ? formatValue(v) : String(v)) : '');
+    };
+    const increment = () => {
+        const base = value ?? (min ?? 0);
+        commit(clamp(base + step));
+    };
+    const decrement = () => {
+        const base = value ?? (min ?? 0);
+        commit(clamp(base - step));
+    };
+    const handleChange = (e) => {
+        const raw = e.target.value;
+        setInputStr(raw);
+        const parsed = parseFloat(raw);
+        if (raw === '' || raw === '-') {
+            setInternalValue(undefined);
+            onChange?.(undefined);
+        }
+        else if (!isNaN(parsed)) {
+            setInternalValue(parsed);
+            onChange?.(parsed);
+        }
+    };
+    const handleBlur = () => {
+        if (value !== undefined)
+            commit(clamp(value));
+        else
+            setInputStr('');
+    };
+    const handleKeyDown = (e) => {
+        if (!hideControls) {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                increment();
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                decrement();
+                return;
+            }
+        }
+        const allowed = [
+            'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+            'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+            'Home', 'End',
+        ];
+        if (allowed.includes(e.key))
+            return;
+        if (e.ctrlKey || e.metaKey)
+            return;
+        const isDigit = /^[0-9]$/.test(e.key);
+        const isMinus = e.key === '-' && (e.currentTarget.selectionStart === 0) && !e.currentTarget.value.includes('-');
+        const isDot = (e.key === '.' || e.key === ',') && !e.currentTarget.value.includes('.');
+        if (!isDigit && !isMinus && !isDot)
+            e.preventDefault();
+    };
+    const displayValue = document.activeElement?.id === id
+        ? inputStr
+        : value !== undefined
+            ? (formatValue ? formatValue(value) : String(value))
+            : '';
+    return (jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', containerClassName), children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsxs("div", { className: cn('relative flex items-center', fullWidth && 'w-full'), children: [prefix && (jsx("span", { className: "absolute left-0 flex items-center justify-center h-full px-2.5 border-r border-border bg-surface-hover rounded-l-md text-sm text-text-muted select-none", children: prefix })), jsx("input", { ref: ref, id: id, type: "text", inputMode: "decimal", value: displayValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: disabled, required: required, "aria-invalid": !!error, className: cn('w-full rounded-md border bg-surface text-text placeholder:text-text-muted', 'transition-colors outline-none', 'focus:border-border-focus focus:ring-2 focus:ring-border-focus/20', 'disabled:opacity-50 disabled:cursor-not-allowed', error ? 'border-error focus:border-error focus:ring-error/20' : 'border-border', sz.input, prefix && 'pl-10', (suffix || !hideControls) && 'pr-10', className), ...props }), suffix && hideControls && (jsx("span", { className: "absolute right-0 flex items-center justify-center h-full px-2.5 border-l border-border bg-surface-hover rounded-r-md text-sm text-text-muted select-none", children: suffix })), !hideControls && (jsxs("div", { className: "absolute right-0 flex flex-col h-full border-l border-border rounded-r-md overflow-hidden", children: [jsx("button", { type: "button", tabIndex: -1, onClick: increment, disabled: disabled || (max !== undefined && (value ?? -Infinity) >= max), className: cn('flex items-center justify-center flex-1 bg-surface-hover hover:bg-surface-active transition-colors disabled:opacity-40 disabled:cursor-not-allowed', sz.btn), "aria-label": "Increment", children: jsx(ChevronUp, { size: 10 }) }), jsx("button", { type: "button", tabIndex: -1, onClick: decrement, disabled: disabled || (min !== undefined && (value ?? Infinity) <= min), className: cn('flex items-center justify-center flex-1 bg-surface-hover hover:bg-surface-active transition-colors border-t border-border disabled:opacity-40 disabled:cursor-not-allowed', sz.btn), "aria-label": "Decrement", children: jsx(ChevronDown, { size: 10 }) })] }))] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }), showMaxLength && props.maxLength !== undefined && (jsxs("p", { className: cn('text-xs text-text-muted ml-auto', displayValue.length >= (props.maxLength ?? Infinity) && 'text-error'), children: [displayValue.length, "/", props.maxLength] }))] })] }));
+});
+NumberInput.displayName = 'NumberInput';
+
+const DEFAULT_COUNTRY_CODES = [
+    { code: 'US', dialCode: '+1', flag: '🇺🇸', name: 'United States' },
+    { code: 'GB', dialCode: '+44', flag: '🇬🇧', name: 'United Kingdom' },
+    { code: 'IN', dialCode: '+91', flag: '🇮🇳', name: 'India' },
+    { code: 'CA', dialCode: '+1', flag: '🇨🇦', name: 'Canada' },
+    { code: 'AU', dialCode: '+61', flag: '🇦🇺', name: 'Australia' },
+    { code: 'DE', dialCode: '+49', flag: '🇩🇪', name: 'Germany' },
+    { code: 'FR', dialCode: '+33', flag: '🇫🇷', name: 'France' },
+    { code: 'JP', dialCode: '+81', flag: '🇯🇵', name: 'Japan' },
+    { code: 'CN', dialCode: '+86', flag: '🇨🇳', name: 'China' },
+    { code: 'BR', dialCode: '+55', flag: '🇧🇷', name: 'Brazil' },
+    { code: 'MX', dialCode: '+52', flag: '🇲🇽', name: 'Mexico' },
+    { code: 'ZA', dialCode: '+27', flag: '🇿🇦', name: 'South Africa' },
+    { code: 'NG', dialCode: '+234', flag: '🇳🇬', name: 'Nigeria' },
+    { code: 'AE', dialCode: '+971', flag: '🇦🇪', name: 'UAE' },
+    { code: 'SG', dialCode: '+65', flag: '🇸🇬', name: 'Singapore' },
+    { code: 'KR', dialCode: '+82', flag: '🇰🇷', name: 'South Korea' },
+    { code: 'IT', dialCode: '+39', flag: '🇮🇹', name: 'Italy' },
+    { code: 'ES', dialCode: '+34', flag: '🇪🇸', name: 'Spain' },
+    { code: 'RU', dialCode: '+7', flag: '🇷🇺', name: 'Russia' },
+    { code: 'PK', dialCode: '+92', flag: '🇵🇰', name: 'Pakistan' },
+    { code: 'BD', dialCode: '+880', flag: '🇧🇩', name: 'Bangladesh' },
+    { code: 'ID', dialCode: '+62', flag: '🇮🇩', name: 'Indonesia' },
+    { code: 'TR', dialCode: '+90', flag: '🇹🇷', name: 'Turkey' },
+    { code: 'SA', dialCode: '+966', flag: '🇸🇦', name: 'Saudi Arabia' },
+    { code: 'NL', dialCode: '+31', flag: '🇳🇱', name: 'Netherlands' },
+    { code: 'CH', dialCode: '+41', flag: '🇨🇭', name: 'Switzerland' },
+    { code: 'SE', dialCode: '+46', flag: '🇸🇪', name: 'Sweden' },
+    { code: 'NO', dialCode: '+47', flag: '🇳🇴', name: 'Norway' },
+    { code: 'PL', dialCode: '+48', flag: '🇵🇱', name: 'Poland' },
+    { code: 'AR', dialCode: '+54', flag: '🇦🇷', name: 'Argentina' },
+];
+const sizeClasses$c = {
+    sm: 'h-8 text-sm',
+    md: 'h-9 text-sm',
+    lg: 'h-11 text-base',
+};
+const dialSelectSizes = {
+    sm: 'text-sm px-1.5',
+    md: 'text-sm px-2',
+    lg: 'text-base px-2.5',
+};
+const PhoneInput = React.forwardRef(({ value: controlledValue, defaultCountry = 'US', onChange, label, helperText, error, placeholder = 'Phone number', disabled = false, required = false, size = 'md', fullWidth = false, maxLength, showMaxLength = false, countryCodes = DEFAULT_COUNTRY_CODES, className, containerClassName, id: externalId, }, ref) => {
+    const generatedId = useId();
+    const id = externalId ?? generatedId;
+    const defaultCC = countryCodes.find((c) => c.code === defaultCountry) ?? countryCodes[0];
+    const [selectedCountry, setSelectedCountry] = useState(controlledValue?.countryCode ?? defaultCC);
+    const [phoneNumber, setPhoneNumber] = useState(controlledValue?.number ?? '');
+    const activeCountry = controlledValue?.countryCode ?? selectedCountry;
+    const activeNumber = controlledValue?.number ?? phoneNumber;
+    const buildValue = (country, number) => ({
+        countryCode: country,
+        number,
+        full: `${country.dialCode} ${number}`.trim(),
+    });
+    const handleCountryChange = (e) => {
+        const country = countryCodes.find((c) => c.code === e.target.value) ?? defaultCC;
+        setSelectedCountry(country);
+        onChange?.(buildValue(country, activeNumber));
+    };
+    const handleNumberChange = (e) => {
+        const raw = e.target.value.replace(/[^\d\s\-().+]/g, '');
+        if (maxLength !== undefined && raw.replace(/\D/g, '').length > maxLength)
+            return;
+        setPhoneNumber(raw);
+        onChange?.(buildValue(activeCountry, raw));
+    };
+    const handleKeyDown = (e) => {
+        const allowed = [
+            'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+            'ArrowLeft', 'ArrowRight', 'Home', 'End',
+            ' ', '-', '(', ')', '.', '+',
+        ];
+        if (allowed.includes(e.key))
+            return;
+        if (e.ctrlKey || e.metaKey)
+            return;
+        if (!/^\d$/.test(e.key))
+            e.preventDefault();
+    };
+    const height = sizeClasses$c[size];
+    const dialSize = dialSelectSizes[size];
+    return (jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', containerClassName), children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsxs("div", { className: cn('flex items-stretch rounded-md border overflow-hidden bg-surface transition-colors', 'focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/20', error ? 'border-error focus-within:border-error focus-within:ring-error/20' : 'border-border', disabled && 'opacity-50 cursor-not-allowed', fullWidth && 'w-full'), children: [jsx("select", { value: activeCountry.code, onChange: handleCountryChange, disabled: disabled, "aria-label": "Country code", className: cn('border-r border-border bg-surface-hover text-text cursor-pointer outline-none', 'appearance-none focus:outline-none', height, dialSize), style: { minWidth: size === 'sm' ? 72 : size === 'lg' ? 96 : 84 }, children: countryCodes.map((c) => (jsxs("option", { value: c.code, children: [c.flag, " ", c.dialCode] }, c.code))) }), jsx("input", { ref: ref, id: id, type: "tel", inputMode: "tel", value: activeNumber, onChange: handleNumberChange, onKeyDown: handleKeyDown, disabled: disabled, required: required, placeholder: placeholder, "aria-invalid": !!error, className: cn('flex-1 bg-transparent text-text placeholder:text-text-muted outline-none px-3', 'disabled:cursor-not-allowed', height, className) })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }), showMaxLength && maxLength !== undefined && (jsxs("p", { className: cn('text-xs text-text-muted ml-auto', activeNumber.replace(/\D/g, '').length >= maxLength && 'text-error'), children: [activeNumber.replace(/\D/g, '').length, "/", maxLength] }))] })] }));
+});
+PhoneInput.displayName = 'PhoneInput';
+
+const sizeClasses$b = {
+    sm: 'w-8 h-9 text-sm',
+    md: 'w-10 h-11 text-base',
+    lg: 'w-12 h-13 text-lg',
+};
+function OTPInput({ length = 6, value: controlledValue, onChange, onComplete, size = 'md', mask = false, disabled = false, error, label, helperText, separator = false, separatorAt = [], autoFocus = false, className, }) {
+    const id = useId();
+    const [internalValue, setInternalValue] = useState('');
+    const inputsRef = useRef([]);
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const digits = value.split('').slice(0, length);
+    const update = (newVal) => {
+        setInternalValue(newVal);
+        onChange?.(newVal);
+        if (newVal.length === length)
+            onComplete?.(newVal);
+    };
+    const handleChange = (index, e) => {
+        const raw = e.target.value.replace(/\D/g, '');
+        if (!raw)
+            return;
+        const char = raw[raw.length - 1];
+        const newDigits = [...digits];
+        newDigits[index] = char;
+        const newVal = newDigits.join('').slice(0, length);
+        update(newVal);
+        if (index < length - 1)
+            inputsRef.current[index + 1]?.focus();
+    };
+    const handleKeyDown = (index, e) => {
+        if (e.key === 'Backspace') {
+            e.preventDefault();
+            const newDigits = [...digits];
+            if (newDigits[index]) {
+                newDigits[index] = '';
+                update(newDigits.join(''));
+            }
+            else if (index > 0) {
+                inputsRef.current[index - 1]?.focus();
+                const prev = [...digits];
+                prev[index - 1] = '';
+                update(prev.join(''));
+            }
+        }
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            inputsRef.current[index - 1]?.focus();
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            inputsRef.current[index + 1]?.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, length);
+        update(pasted);
+        const focusIdx = Math.min(pasted.length, length - 1);
+        inputsRef.current[focusIdx]?.focus();
+    };
+    const defaultSeparatorAt = separator ? [Math.floor(length / 2) - 1] : separatorAt;
+    return (jsxs("div", { className: cn('flex flex-col gap-1.5', className), children: [label && (jsx("label", { htmlFor: `${id}-0`, className: "text-sm font-medium text-text", children: label })), jsx("div", { className: "flex items-center gap-2", children: Array.from({ length }).map((_, i) => (jsxs(React.Fragment, { children: [jsx("input", { ref: (el) => { inputsRef.current[i] = el; }, id: `${id}-${i}`, type: mask ? 'password' : 'text', inputMode: "numeric", maxLength: 1, value: digits[i] ?? '', onChange: (e) => handleChange(i, e), onKeyDown: (e) => handleKeyDown(i, e), onPaste: handlePaste, onFocus: (e) => e.target.select(), disabled: disabled, autoFocus: autoFocus && i === 0, className: cn('rounded-md border text-center font-mono font-semibold bg-surface text-text', 'transition-colors outline-none', 'focus:border-border-focus focus:ring-2 focus:ring-border-focus/20', 'disabled:opacity-50 disabled:cursor-not-allowed', error ? 'border-error focus:border-error focus:ring-error/20' : 'border-border', sizeClasses$b[size]), "aria-label": `Digit ${i + 1} of ${length}` }), defaultSeparatorAt.includes(i) && (jsx("span", { className: "text-text-muted font-bold text-lg select-none", children: "\u2013" }))] }, i))) }), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const sizeMap$2 = { sm: 16, md: 20, lg: 28 };
+function Rating({ value: controlledValue, defaultValue = 0, onChange, max = 5, size = 'md', disabled = false, readOnly = false, allowHalf = false, allowClear = true, label, helperText, className, icon, emptyIcon, }) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [hoverValue, setHoverValue] = useState(null);
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const iconSize = sizeMap$2[size];
+    const interactive = !disabled && !readOnly;
+    const handleClick = (star) => {
+        if (!interactive)
+            return;
+        const newVal = allowClear && star === value ? 0 : star;
+        setInternalValue(newVal);
+        onChange?.(newVal);
+    };
+    const getStarFill = (star) => {
+        const display = hoverValue ?? value;
+        if (display >= star)
+            return 'full';
+        if (allowHalf && display >= star - 0.5)
+            return 'half';
+        return 'empty';
+    };
+    return (jsxs("div", { className: cn('flex flex-col gap-1', className), children: [label && jsx("span", { className: "text-sm font-medium text-text", children: label }), jsx("div", { className: cn('flex items-center gap-0.5', interactive && 'cursor-pointer'), onMouseLeave: () => interactive && setHoverValue(null), role: interactive ? 'slider' : 'img', "aria-label": `Rating: ${value} out of ${max}`, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, children: Array.from({ length: max }, (_, i) => {
+                    const star = i + 1;
+                    const fill = getStarFill(star);
+                    return (jsx("button", { type: "button", onClick: () => handleClick(star), onMouseEnter: () => interactive && setHoverValue(star), disabled: disabled, className: cn('relative transition-transform focus:outline-none', interactive && 'hover:scale-110', disabled && 'cursor-not-allowed opacity-50'), "aria-label": `Rate ${star} out of ${max}`, tabIndex: interactive ? 0 : -1, children: fill === 'empty' ? (emptyIcon ?? (jsx(Star, { size: iconSize, className: "text-border fill-transparent transition-colors" }))) : fill === 'full' ? (icon ?? (jsx(Star, { size: iconSize, className: cn('transition-colors', hoverValue !== null ? 'text-warning fill-warning' : 'text-warning fill-warning') }))) : (jsxs("span", { className: "relative inline-block", children: [jsx(Star, { size: iconSize, className: "text-border fill-transparent" }), jsx("span", { className: "absolute inset-0 overflow-hidden w-1/2", children: jsx(Star, { size: iconSize, className: "text-warning fill-warning" }) })] })) }, star));
+                }) }), helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const sizeClasses$a = {
+    sm: 'min-h-8 text-sm px-2.5',
+    md: 'min-h-9 text-sm px-3',
+    lg: 'min-h-11 text-base px-4',
+};
+function MultiSelect({ options = [], groups = [], value: controlledValue, defaultValue = [], onChange, placeholder = 'Select options…', searchPlaceholder = 'Search…', label, helperText, error, disabled = false, required = false, searchable = true, clearable = true, maxSelected, maxDisplayed = 3, size = 'md', fullWidth = false, className, containerClassName, }) {
+    const id = useId();
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const containerRef = useRef(null);
+    const searchRef = useRef(null);
+    const value = controlledValue ?? internalValue;
+    const allOptions = [
+        ...options,
+        ...groups.flatMap((g) => g.options),
+    ];
+    const update = (next) => {
+        setInternalValue(next);
+        onChange?.(next);
+    };
+    const toggle = (optValue) => {
+        if (value.includes(optValue)) {
+            update(value.filter((v) => v !== optValue));
+        }
+        else {
+            if (maxSelected && value.length >= maxSelected)
+                return;
+            update([...value, optValue]);
+        }
+    };
+    const removeTag = (e, optValue) => {
+        e.stopPropagation();
+        update(value.filter((v) => v !== optValue));
+    };
+    const clearAll = (e) => {
+        e.stopPropagation();
+        update([]);
+    };
+    useEffect(() => {
+        if (open)
+            setTimeout(() => searchRef.current?.focus(), 10);
+        else
+            setSearch('');
+    }, [open]);
+    useEffect(() => {
+        const handler = (e) => {
+            if (!containerRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, []);
+    const filterOption = (opt) => opt.label.toLowerCase().includes(search.toLowerCase()) ||
+        opt.description?.toLowerCase().includes(search.toLowerCase());
+    const filteredOptions = options.filter(filterOption);
+    const filteredGroups = groups
+        .map((g) => ({ ...g, options: g.options.filter(filterOption) }))
+        .filter((g) => g.options.length > 0);
+    const hasResults = filteredOptions.length > 0 || filteredGroups.length > 0;
+    const selectedLabels = value.map((v) => allOptions.find((o) => o.value === v)?.label ?? v);
+    const displayedTags = selectedLabels.slice(0, maxDisplayed);
+    const overflow = selectedLabels.length - maxDisplayed;
+    const renderOption = (opt) => {
+        const selected = value.includes(opt.value);
+        const atMax = !selected && maxSelected !== undefined && value.length >= maxSelected;
+        return (jsxs("div", { role: "option", "aria-selected": selected, "aria-disabled": opt.disabled || atMax, onClick: () => !opt.disabled && !atMax && toggle(opt.value), className: cn('flex items-center gap-2.5 px-3 py-2 rounded-md cursor-pointer transition-colors text-sm', selected ? 'bg-primary/10 text-primary' : 'text-text hover:bg-surface-hover', (opt.disabled || atMax) && 'opacity-40 cursor-not-allowed pointer-events-none'), children: [jsx("div", { className: cn('flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center transition-colors', selected ? 'bg-primary border-primary' : 'border-border bg-surface'), children: selected && jsx(Check, { size: 10, className: "text-primary-foreground" }) }), opt.icon && jsx("span", { className: "flex-shrink-0 text-text-muted", children: opt.icon }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "truncate", children: opt.label }), opt.description && jsx("div", { className: "text-xs text-text-muted truncate", children: opt.description })] })] }, opt.value));
+    };
+    return (jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', containerClassName), children: [label && (jsxs("label", { htmlFor: `${id}-trigger`, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsxs("div", { ref: containerRef, className: cn('relative', fullWidth && 'w-full', className), children: [jsxs("div", { id: `${id}-trigger`, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-disabled": disabled, onClick: () => !disabled && setOpen((v) => !v), className: cn('flex items-center flex-wrap gap-1.5 rounded-md border bg-surface cursor-pointer', 'transition-colors outline-none py-1.5', open ? 'border-border-focus ring-2 ring-border-focus/20' : 'border-border', error && 'border-error ring-0', disabled && 'opacity-50 cursor-not-allowed', sizeClasses$a[size]), children: [value.length === 0 ? (jsx("span", { className: "text-text-muted flex-1", children: placeholder })) : (jsxs(Fragment, { children: [displayedTags.map((tag, i) => (jsxs("span", { className: "inline-flex items-center gap-1 bg-primary/10 text-primary text-xs px-2 py-0.5 rounded-full", children: [tag, jsx("button", { type: "button", onClick: (e) => removeTag(e, value[i]), className: "hover:text-primary/60 transition-colors", "aria-label": `Remove ${tag}`, children: jsx(X, { size: 10 }) })] }, value[i]))), overflow > 0 && (jsxs("span", { className: "text-xs text-text-muted bg-surface-hover px-2 py-0.5 rounded-full", children: ["+", overflow, " more"] })), jsx("span", { className: "flex-1" })] })), jsxs("div", { className: "flex items-center gap-1 ml-auto pr-1", children: [clearable && value.length > 0 && !disabled && (jsx("button", { type: "button", onClick: clearAll, className: "text-text-muted hover:text-text transition-colors", "aria-label": "Clear all", children: jsx(X, { size: 14 }) })), jsx(ChevronDown, { size: 16, className: cn('text-text-muted transition-transform', open && 'rotate-180') })] })] }), open && (jsxs("div", { className: "absolute z-50 w-full mt-1 bg-surface border border-border rounded-lg shadow-lg overflow-hidden", children: [searchable && (jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [jsx(Search, { size: 14, className: "text-text-muted flex-shrink-0" }), jsx("input", { ref: searchRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: searchPlaceholder, className: "flex-1 bg-transparent text-sm text-text placeholder:text-text-muted outline-none" })] })), jsx("div", { role: "listbox", "aria-multiselectable": "true", className: "max-h-60 overflow-y-auto p-1.5", children: !hasResults ? (jsx("div", { className: "py-6 text-center text-sm text-text-muted", children: "No options found." })) : (jsxs(Fragment, { children: [filteredOptions.map(renderOption), filteredGroups.map((group) => (jsxs("div", { children: [jsx("div", { className: "px-3 py-1.5 text-xs font-semibold text-text-muted uppercase tracking-wider", children: group.label }), group.options.map(renderOption)] }, group.label)))] })) }), maxSelected && (jsxs("div", { className: "px-3 py-1.5 border-t border-border text-xs text-text-muted", children: [value.length, "/", maxSelected, " selected"] }))] }))] }), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] }));
+}
+
+const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+];
+const selectStyle = {
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    background: 'var(--color-surface-hover)',
+    border: '1px solid var(--color-border)',
+    borderRadius: 'var(--radius-sm, 4px)',
+    color: 'var(--color-text)',
+    cursor: 'pointer',
+    fontSize: '0.8125rem',
+    fontWeight: 600,
+    padding: '2px 20px 2px 6px',
+    outline: 'none',
+    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'right 4px center',
+};
+function MonthCaption({ displayMonth, onMonthChange, minDate, maxDate, yearRangeBefore = 10, yearRangeAfter = 5 }) {
+    const today = new Date();
+    const currentYear = getYear(displayMonth);
+    const currentMonth = getMonth(displayMonth);
+    const minYear = minDate ? getYear(minDate) : getYear(today) - yearRangeBefore;
+    const maxYear = maxDate ? getYear(maxDate) : getYear(today) + yearRangeAfter;
+    const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i);
+    return (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.375rem' }, children: [jsx("select", { value: currentMonth, onChange: (e) => onMonthChange(setMonth(displayMonth, Number(e.target.value))), style: selectStyle, "aria-label": "Select month", children: MONTHS.map((m, i) => (jsx("option", { value: i, children: m }, m))) }), jsx("select", { value: currentYear, onChange: (e) => onMonthChange(setYear(displayMonth, Number(e.target.value))), style: selectStyle, "aria-label": "Select year", children: years.map((y) => (jsx("option", { value: y, children: y }, y))) })] }));
+}
+const sizeClasses$9 = {
+    sm: 'h-8 text-sm px-2.5',
+    md: 'h-9 text-sm px-3',
+    lg: 'h-11 text-base px-4',
+};
+const dayPickerStyles = `
+  /* react-day-picker v9 class names */
+  .rdp-root { --rdp-accent-color: var(--color-primary); margin: 0; }
+  .rdp-months { display: flex; gap: 1rem; }
+  .rdp-month { width: auto; }
+  .rdp-month_caption { display: flex; align-items: center; justify-content: space-between; padding: 0 0.25rem 0.75rem; min-width: 252px; }
+  .rdp-month_grid { border-collapse: collapse; table-layout: fixed; }
+  .rdp-caption_label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
+  .rdp-nav { display: flex; gap: 0.25rem; }
+  .rdp-button_previous, .rdp-button_next { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: background 0.15s; }
+  .rdp-button_previous:hover, .rdp-button_next:hover { background: var(--color-surface-hover); color: var(--color-text); }
+  .rdp-weekdays { display: table-row; }
+  .rdp-weekday { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); text-align: center !important; padding: 0.25rem 0; width: 2.25rem; min-width: 2.25rem; }
+  .rdp-weekday abbr { text-decoration: none; }
+  .rdp-week { display: table-row; }
+  .rdp-day { padding: 0.125rem; text-align: center; width: 2.25rem; min-width: 2.25rem; }
+  .rdp-day_button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-md); font-size: 0.8125rem; color: var(--color-text); cursor: pointer; transition: background 0.15s, color 0.15s; border: none; background: transparent; }
+  .rdp-day_button:hover:not(:disabled) { background: var(--color-surface-hover); }
+  .rdp-selected .rdp-day_button { background: var(--color-primary) !important; color: var(--color-primary-foreground) !important; border-radius: var(--radius-md); }
+  .rdp-today:not(.rdp-selected) .rdp-day_button { font-weight: 700; color: var(--color-primary); }
+  .rdp-disabled .rdp-day_button { opacity: 0.35; cursor: not-allowed; }
+  .rdp-outside .rdp-day_button { opacity: 0.4; }
+  .rdp-range_start .rdp-day_button, .rdp-range_end .rdp-day_button { background: var(--color-primary) !important; color: var(--color-primary-foreground) !important; }
+  .rdp-range_middle .rdp-day_button { background: color-mix(in srgb, var(--color-primary) 15%, transparent) !important; color: var(--color-primary) !important; border-radius: 0; }
+  .rdp-range_start .rdp-day_button { border-radius: var(--radius-md) 0 0 var(--radius-md) !important; }
+  .rdp-range_end .rdp-day_button { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; }
+`;
+function formatDateDisplay(date, fmt) {
+    if (!date || !isValid(date))
+        return '';
+    return format(date, fmt);
+}
+function formatRangeDisplay(range, fmt) {
+    if (!range)
+        return '';
+    const from = range.from ? format(range.from, fmt) : '';
+    const to = range.to ? format(range.to, fmt) : '';
+    if (from && to)
+        return `${from} – ${to}`;
+    if (from)
+        return `${from} – …`;
+    return '';
+}
+function DatePicker(props) {
+    const { label, helperText, error, placeholder, dateFormat = 'MMM d, yyyy', disabled = false, required = false, clearable = true, size = 'md', fullWidth = false, minDate, maxDate, disabledDates, yearRangeBefore, yearRangeAfter, className, containerClassName, } = props;
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [popoverStyle, setPopoverStyle] = useState({});
+    const [displayMonth, setDisplayMonth] = useState(new Date());
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const isRange = props.mode === 'range';
+    // Single mode state
+    const [singleInternal, setSingleInternal] = useState(!isRange ? props.defaultValue : undefined);
+    const singleValue = !isRange
+        ? (props.value ?? singleInternal)
+        : undefined;
+    // Range mode state
+    const [rangeInternal, setRangeInternal] = useState(isRange ? props.defaultValue : undefined);
+    const rangeValue = isRange
+        ? (props.value ?? rangeInternal)
+        : undefined;
+    const displayValue = isRange
+        ? formatRangeDisplay(rangeValue, dateFormat)
+        : formatDateDisplay(singleValue, dateFormat);
+    const hasValue = isRange ? !!(rangeValue?.from) : !!singleValue;
+    const updatePopoverPosition = useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const popoverHeight = 360;
+        const openUpward = spaceBelow < popoverHeight && rect.top > popoverHeight;
+        setPopoverStyle({
+            position: 'fixed',
+            left: rect.left,
+            zIndex: 9999,
+            ...(openUpward
+                ? { bottom: window.innerHeight - rect.top + 4 }
+                : { top: rect.bottom + 4 }),
+        });
+    }, []);
+    useEffect(() => {
+        if (open)
+            updatePopoverPosition();
+    }, [open, updatePopoverPosition]);
+    useEffect(() => {
+        const handler = (e) => {
+            const target = e.target;
+            if (!containerRef.current?.contains(target) &&
+                !(document.getElementById(`${id}-popover`)?.contains(target))) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [id]);
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (isRange) {
+            setRangeInternal(undefined);
+            props.onChange?.(undefined);
+        }
+        else {
+            setSingleInternal(undefined);
+            props.onChange?.(undefined);
+        }
+    };
+    const disabledMatcher = disabledDates
+        ? (date) => disabledDates.some((d) => format(d, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd'))
+        : undefined;
+    return (jsxs(Fragment, { children: [jsx("style", { children: dayPickerStyles }), jsxs("div", { className: cn('flex flex-col gap-1', fullWidth && 'w-full', containerClassName), children: [label && (jsxs("label", { htmlFor: `${id}-trigger`, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", children: "*" })] })), jsxs("div", { ref: containerRef, className: cn(fullWidth && 'w-full'), children: [jsxs("div", { ref: triggerRef, id: `${id}-trigger`, role: "combobox", "aria-expanded": open, "aria-haspopup": "dialog", "aria-disabled": disabled, onClick: () => !disabled && setOpen((v) => !v), className: cn('flex items-center gap-2 rounded-md border bg-surface cursor-pointer', 'transition-colors outline-none', open ? 'border-border-focus ring-2 ring-border-focus/20' : 'border-border', error && 'border-error ring-0', disabled && 'opacity-50 cursor-not-allowed', sizeClasses$9[size], fullWidth && 'w-full', className), children: [jsx(Calendar, { size: 15, className: "text-text-muted flex-shrink-0" }), jsx("span", { className: cn('flex-1 text-sm', displayValue ? 'text-text' : 'text-text-muted'), children: displayValue || (placeholder ?? (isRange ? 'Select date range' : 'Select date')) }), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: handleClear, className: "text-text-muted hover:text-text transition-colors flex-shrink-0", "aria-label": "Clear date", children: jsx(X, { size: 14 }) }))] }), open && typeof document !== 'undefined' && createPortal(jsxs("div", { id: `${id}-popover`, style: popoverStyle, className: "bg-surface border border-border rounded-xl shadow-2xl p-3", role: "dialog", "aria-label": "Date picker", children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.25rem' }, children: [jsxs("div", { style: { display: 'flex', gap: '0.25rem' }, children: [jsx("button", { type: "button", onClick: () => setDisplayMonth((m) => new Date(m.getFullYear(), m.getMonth() - 1, 1)), style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '1.75rem', height: '1.75rem', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border)', background: 'var(--color-surface)', color: 'var(--color-text-muted)', cursor: 'pointer' }, "aria-label": "Previous month", children: jsx(ChevronLeft, { size: 14 }) }), jsx("button", { type: "button", onClick: () => setDisplayMonth((m) => new Date(m.getFullYear(), m.getMonth() + 1, 1)), style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '1.75rem', height: '1.75rem', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border)', background: 'var(--color-surface)', color: 'var(--color-text-muted)', cursor: 'pointer' }, "aria-label": "Next month", children: jsx(ChevronRight, { size: 14 }) })] }), jsx(MonthCaption, { displayMonth: displayMonth, onMonthChange: setDisplayMonth, minDate: minDate, maxDate: maxDate, yearRangeBefore: yearRangeBefore, yearRangeAfter: yearRangeAfter })] }), isRange ? (jsx(DayPicker, { mode: "range", month: displayMonth, onMonthChange: setDisplayMonth, selected: rangeValue, onSelect: (range) => {
+                                            setRangeInternal(range);
+                                            props.onChange?.(range);
+                                            if (range?.from && range?.to)
+                                                setOpen(false);
+                                        }, disabled: [
+                                            ...(minDate ? [{ before: minDate }] : []),
+                                            ...(maxDate ? [{ after: maxDate }] : []),
+                                            ...(disabledMatcher ? [disabledMatcher] : []),
+                                        ], hideNavigation: true, components: {} })) : (jsx(DayPicker, { mode: "single", month: displayMonth, onMonthChange: setDisplayMonth, selected: singleValue, onSelect: (date) => {
+                                            setSingleInternal(date);
+                                            props.onChange?.(date);
+                                            setOpen(false);
+                                        }, disabled: [
+                                            ...(minDate ? [{ before: minDate }] : []),
+                                            ...(maxDate ? [{ after: maxDate }] : []),
+                                            ...(disabledMatcher ? [disabledMatcher] : []),
+                                        ], hideNavigation: true, components: {} }))] }), document.body)] }), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText })] })] }));
+}
+
+function FormField({ label, helperText, error, required, disabled, htmlFor, children, className, }) {
+    const generatedId = useId();
+    const id = htmlFor ?? generatedId;
+    return (jsxs("div", { className: cn('flex flex-col gap-1', disabled && 'opacity-60', className), children: [label && (jsxs("label", { htmlFor: id, className: "text-sm font-medium text-text", children: [label, required && jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" })] })), children, error && (jsx("p", { className: "text-xs text-error", role: "alert", children: error })), !error && helperText && (jsx("p", { className: "text-xs text-text-muted", children: helperText }))] }));
+}
+
+function JSONForm({ schema, defaultValues, onSubmit, onCancel, submitLabel = 'Submit', cancelLabel = 'Cancel', loading = false, columns = 1, className, actionsClassName, }) {
+    const { control, handleSubmit, formState: { errors }, } = useForm({
+        defaultValues: defaultValues ?? Object.fromEntries(schema.map((f) => [f.name, f.defaultValue ?? ''])),
+    });
+    const gridCols = {
+        1: 'grid-cols-1',
+        2: 'grid-cols-1 md:grid-cols-2',
+        3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    };
+    const colSpanClasses = {
+        1: 'col-span-1',
+        2: 'col-span-1 md:col-span-2',
+        3: 'col-span-1 md:col-span-2 lg:col-span-3',
+    };
+    return (jsxs("form", { onSubmit: handleSubmit(onSubmit), noValidate: true, className: cn('w-full', className), children: [jsx("div", { className: cn('grid gap-4', gridCols[columns]), children: schema.map((field) => {
+                    if (field.type === 'hidden') {
+                        return (jsx(Controller, { name: field.name, control: control, render: ({ field: f }) => jsx("input", { type: "hidden", ...f, value: String(f.value ?? '') }) }, field.name));
+                    }
+                    const errorMsg = errors[field.name]?.message;
+                    const colSpan = field.colSpan ?? 1;
+                    return (jsx("div", { className: cn(colSpanClasses[colSpan]), children: jsx(Controller, { name: field.name, control: control, rules: (() => {
+                                if (field.validator) {
+                                    const compiled = field.validator.compile();
+                                    return {
+                                        required: field.required
+                                            ? `${field.label ?? field.name} is required`
+                                            : compiled.required,
+                                        minLength: compiled.minLength,
+                                        maxLength: compiled.maxLength,
+                                        min: compiled.min,
+                                        max: compiled.max,
+                                        pattern: compiled.pattern,
+                                        validate: compiled.validate,
+                                    };
+                                }
+                                return {
+                                    required: field.required ? `${field.label ?? field.name} is required` : false,
+                                    minLength: field.validation?.minLength
+                                        ? { value: field.validation.minLength, message: `Minimum ${field.validation.minLength} characters` }
+                                        : undefined,
+                                    maxLength: field.validation?.maxLength
+                                        ? { value: field.validation.maxLength, message: `Maximum ${field.validation.maxLength} characters` }
+                                        : undefined,
+                                    min: field.validation?.min
+                                        ? { value: field.validation.min, message: `Minimum value is ${field.validation.min}` }
+                                        : undefined,
+                                    max: field.validation?.max
+                                        ? { value: field.validation.max, message: `Maximum value is ${field.validation.max}` }
+                                        : undefined,
+                                    pattern: field.validation?.pattern
+                                        ? { value: field.validation.pattern, message: 'Invalid format' }
+                                        : undefined,
+                                    validate: field.validation?.validate,
+                                };
+                            })(), render: ({ field: f }) => {
+                                const commonProps = {
+                                    label: field.label,
+                                    helperText: field.helperText,
+                                    error: errorMsg,
+                                    disabled: field.disabled,
+                                    required: field.required,
+                                    fullWidth: true,
+                                };
+                                if (field.type === 'textarea') {
+                                    return (jsx(TextArea, { ...commonProps, value: String(f.value ?? ''), onChange: f.onChange, onBlur: f.onBlur, placeholder: field.placeholder, rows: field.rows, autoResize: field.autoResize, showCharCount: field.showCharCount, maxLength: field.validation?.maxLength, prefixIcon: field.prefixIcon, prefixImage: field.prefixImage, suffixIcon: field.suffixIcon, suffixImage: field.suffixImage }));
+                                }
+                                if (field.type === 'select') {
+                                    return (jsx(Select, { ...commonProps, options: field.options ?? [], value: String(f.value ?? ''), onValueChange: f.onChange, placeholder: field.placeholder }));
+                                }
+                                if (field.type === 'searchselect') {
+                                    return (jsx(SearchSelect, { ...commonProps, options: field.options ?? [], value: String(f.value ?? ''), onChange: (v) => f.onChange(v), placeholder: field.placeholder, fullWidth: true }));
+                                }
+                                if (field.type === 'multiselect' || field.type === 'multisearchselect') {
+                                    return (jsx(SearchSelect, { ...commonProps, multiple: true, options: field.options ?? [], value: Array.isArray(f.value) ? f.value : [], onChange: (v) => f.onChange(v), placeholder: field.placeholder, fullWidth: true }));
+                                }
+                                if (field.type === 'chipselect') {
+                                    return (jsx(ChipSelect, { label: field.label, helperText: field.helperText, error: errorMsg, disabled: field.disabled, required: field.required, options: field.options ?? [], value: Array.isArray(f.value) ? f.value : [], onChange: (v) => f.onChange(v), fullWidth: true }));
+                                }
+                                if (field.type === 'taginput') {
+                                    return (jsx(TagInput, { label: field.label, helperText: field.helperText, error: errorMsg, disabled: field.disabled, required: field.required, value: Array.isArray(f.value) ? f.value : [], onChange: (v) => f.onChange(v), placeholder: field.placeholder, fullWidth: true }));
+                                }
+                                if (field.type === 'checkbox') {
+                                    return (jsx(Checkbox, { label: field.label, checked: Boolean(f.value), onCheckedChange: f.onChange, disabled: field.disabled, required: field.required, error: errorMsg }));
+                                }
+                                if (field.type === 'switch') {
+                                    return (jsx(Switch, { label: field.label, checked: Boolean(f.value), onCheckedChange: f.onChange, disabled: field.disabled, required: field.required }));
+                                }
+                                if (field.type === 'radio') {
+                                    return (jsx(RadioGroup, { label: field.label, options: field.options ?? [], value: String(f.value ?? ''), onValueChange: f.onChange, disabled: field.disabled, required: field.required, error: errorMsg }));
+                                }
+                                return (jsx(TextField, { ...commonProps, type: field.type, value: String(f.value ?? ''), onChange: f.onChange, onBlur: f.onBlur, placeholder: field.placeholder, prefixIcon: field.prefixIcon, prefixImage: field.prefixImage, prefixText: field.prefixText, suffixIcon: field.suffixIcon, suffixImage: field.suffixImage, suffixText: field.suffixText }));
+                            } }) }, field.name));
+                }) }), jsxs("div", { className: cn('flex items-center justify-end gap-3 mt-6', actionsClassName), children: [onCancel && (jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: cancelLabel })), jsx(Button, { type: "submit", variant: "primary", loading: loading, children: submitLabel })] })] }));
+}
+
+// ─── Base builder ────────────────────────────────────────────────────────────
+class BaseValidator {
+    constructor() {
+        Object.defineProperty(this, "_required", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "_validates", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+    }
+    required(message) {
+        this._required = message ?? 'This field is required';
+        return this;
+    }
+    custom(name, fn, message) {
+        this._validates[name] = (v) => {
+            const result = fn(v);
+            if (result === false)
+                return message ?? 'Invalid value';
+            return result;
+        };
+        return this;
+    }
+}
+// ─── String validator ─────────────────────────────────────────────────────────
+class StringValidator extends BaseValidator {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "_minLength", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_maxLength", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_pattern", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_mustBeString", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+    }
+    mustBe(_type) {
+        this._mustBeString = true;
+        return this;
+    }
+    minLength(len, message) {
+        this._minLength = { value: len, message: message ?? `Minimum ${len} characters required` };
+        return this;
+    }
+    maxLength(len, message) {
+        this._maxLength = { value: len, message: message ?? `Maximum ${len} characters allowed` };
+        return this;
+    }
+    lengthBetween(min, max, message) {
+        this._minLength = { value: min, message: message ?? `Must be between ${min} and ${max} characters` };
+        this._maxLength = { value: max, message: message ?? `Must be between ${min} and ${max} characters` };
+        return this;
+    }
+    length(exact, message) {
+        this._minLength = { value: exact, message: message ?? `Must be exactly ${exact} characters` };
+        this._maxLength = { value: exact, message: message ?? `Must be exactly ${exact} characters` };
+        return this;
+    }
+    shouldMatch(pattern, message) {
+        this._pattern = { value: pattern, message: message ?? 'Invalid format' };
+        return this;
+    }
+    shouldBeIn(list, message) {
+        this._validates['shouldBeIn'] = (v) => list.includes(String(v ?? '')) || (message ?? `Must be one of: ${list.join(', ')}`);
+        return this;
+    }
+    notEmpty(message) {
+        this._validates['notEmpty'] = (v) => (String(v ?? '').trim().length > 0) || (message ?? 'Cannot be empty or whitespace');
+        return this;
+    }
+    noSpaces(message) {
+        this._validates['noSpaces'] = (v) => !/\s/.test(String(v ?? '')) || (message ?? 'No spaces allowed');
+        return this;
+    }
+    alphanumeric(message) {
+        this._validates['alphanumeric'] = (v) => /^[a-zA-Z0-9]*$/.test(String(v ?? '')) || (message ?? 'Only letters and numbers allowed');
+        return this;
+    }
+    startsWith(prefix, message) {
+        this._validates['startsWith'] = (v) => String(v ?? '').startsWith(prefix) || (message ?? `Must start with "${prefix}"`);
+        return this;
+    }
+    endsWith(suffix, message) {
+        this._validates['endsWith'] = (v) => String(v ?? '').endsWith(suffix) || (message ?? `Must end with "${suffix}"`);
+        return this;
+    }
+    compile() {
+        const validates = { ...this._validates };
+        if (this._mustBeString) {
+            validates['mustBeString'] = (v) => typeof v === 'string' || 'Must be a string';
+        }
+        return {
+            required: this._required || undefined,
+            minLength: this._minLength,
+            maxLength: this._maxLength,
+            pattern: this._pattern,
+            validate: Object.keys(validates).length ? validates : undefined,
+        };
+    }
+}
+// ─── Number validator ─────────────────────────────────────────────────────────
+class NumberValidator extends BaseValidator {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "_min", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_max", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_maxLength", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_mustBeNumber", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+    }
+    mustBe(_type) {
+        this._mustBeNumber = true;
+        return this;
+    }
+    min(value, message) {
+        this._min = { value, message: message ?? `Minimum value is ${value}` };
+        return this;
+    }
+    max(value, message) {
+        this._max = { value, message: message ?? `Maximum value is ${value}` };
+        return this;
+    }
+    between(min, max, message) {
+        this._min = { value: min, message: message ?? `Must be between ${min} and ${max}` };
+        this._max = { value: max, message: message ?? `Must be between ${min} and ${max}` };
+        return this;
+    }
+    length(digits, message) {
+        this._maxLength = { value: digits, message: message ?? `Must be ${digits} digits` };
+        this._validates['exactLength'] = (v) => {
+            const s = String(v ?? '').replace(/\D/g, '');
+            return s.length === digits || (message ?? `Must be exactly ${digits} digits`);
+        };
+        return this;
+    }
+    positive(message) {
+        this._min = { value: 0, message: message ?? 'Must be a positive number' };
+        return this;
+    }
+    integer(message) {
+        this._validates['integer'] = (v) => Number.isInteger(Number(v)) || (message ?? 'Must be a whole number');
+        return this;
+    }
+    nonZero(message) {
+        this._validates['nonZero'] = (v) => Number(v) !== 0 || (message ?? 'Cannot be zero');
+        return this;
+    }
+    negative(message) {
+        this._max = { value: 0, message: message ?? 'Must be a negative number' };
+        return this;
+    }
+    multipleOf(factor, message) {
+        this._validates['multipleOf'] = (v) => Number(v) % factor === 0 || (message ?? `Must be a multiple of ${factor}`);
+        return this;
+    }
+    compile() {
+        const validates = { ...this._validates };
+        if (this._mustBeNumber) {
+            validates['mustBeNumber'] = (v) => !isNaN(Number(v)) || 'Must be a number';
+        }
+        return {
+            required: this._required || undefined,
+            min: this._min,
+            max: this._max,
+            maxLength: this._maxLength,
+            validate: Object.keys(validates).length ? validates : undefined,
+        };
+    }
+}
+// ─── Email validator ──────────────────────────────────────────────────────────
+class EmailValidator extends BaseValidator {
+    mustBe(_type) { return this; }
+    shouldMatch(pattern, message) {
+        this._validates['pattern'] = (v) => pattern.test(String(v ?? '')) || (message ?? 'Invalid email format');
+        return this;
+    }
+    domain(allowedDomains, message) {
+        this._validates['domain'] = (v) => {
+            const domain = String(v ?? '').split('@')[1] ?? '';
+            return allowedDomains.includes(domain) || (message ?? `Email must be from: ${allowedDomains.join(', ')}`);
+        };
+        return this;
+    }
+    blockedDomains(blocked, message) {
+        this._validates['blockedDomains'] = (v) => {
+            const domain = String(v ?? '').split('@')[1] ?? '';
+            return !blocked.includes(domain) || (message ?? `Email from ${domain} is not allowed`);
+        };
+        return this;
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            pattern: { value: EmailValidator.EMAIL_RE, message: 'Enter a valid email address' },
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+Object.defineProperty(EmailValidator, "EMAIL_RE", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+});
+// ─── URL validator ────────────────────────────────────────────────────────────
+class UrlValidator extends BaseValidator {
+    mustBe(_type) { return this; }
+    httpsOnly(message) {
+        this._validates['httpsOnly'] = (v) => String(v ?? '').startsWith('https://') || (message ?? 'URL must use HTTPS');
+        return this;
+    }
+    allowedDomains(domains, message) {
+        this._validates['allowedDomains'] = (v) => {
+            try {
+                const hostname = new URL(String(v ?? '')).hostname;
+                return domains.some((d) => hostname === d || hostname.endsWith(`.${d}`)) ||
+                    (message ?? `URL must be from: ${domains.join(', ')}`);
+            }
+            catch {
+                return message ?? 'Invalid URL';
+            }
+        };
+        return this;
+    }
+    noTrailingSlash(message) {
+        this._validates['noTrailingSlash'] = (v) => !String(v ?? '').endsWith('/') || (message ?? 'URL must not end with a slash');
+        return this;
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            pattern: { value: UrlValidator.URL_RE, message: 'Enter a valid URL' },
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+Object.defineProperty(UrlValidator, "URL_RE", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)$/
+});
+// ─── Tel / Phone validator ────────────────────────────────────────────────────
+class TelValidator extends BaseValidator {
+    length(digits, message) {
+        this._validates['length'] = (v) => {
+            const s = String(v ?? '').replace(/\D/g, '');
+            return s.length === digits || (message ?? `Must be exactly ${digits} digits`);
+        };
+        return this;
+    }
+    minLength(digits, message) {
+        this._validates['minLength'] = (v) => {
+            const s = String(v ?? '').replace(/\D/g, '');
+            return s.length >= digits || (message ?? `Must be at least ${digits} digits`);
+        };
+        return this;
+    }
+    maxLength(digits, message) {
+        this._validates['maxLength'] = (v) => {
+            const s = String(v ?? '').replace(/\D/g, '');
+            return s.length <= digits || (message ?? `Must be at most ${digits} digits`);
+        };
+        return this;
+    }
+    shouldMatch(pattern, message) {
+        this._validates['pattern'] = (v) => pattern.test(String(v ?? '')) || (message ?? 'Invalid phone number format');
+        return this;
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+// ─── Boolean validator ────────────────────────────────────────────────────────
+class BooleanValidator extends BaseValidator {
+    mustBeTrue(message) {
+        this._validates['mustBeTrue'] = (v) => v === true || (message ?? 'Must be checked');
+        return this;
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            validate: Object.keys(this._validates).length ? this._validates : undefined,
+        };
+    }
+}
+// ─── Array validator ──────────────────────────────────────────────────────────
+class ArrayValidator extends BaseValidator {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "_min", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_max", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    minItems(count, message) {
+        this._min = count;
+        this._validates['minItems'] = (v) => {
+            const arr = Array.isArray(v) ? v : [];
+            return arr.length >= count || (message ?? `Select at least ${count} item${count > 1 ? 's' : ''}`);
+        };
+        return this;
+    }
+    maxItems(count, message) {
+        this._max = count;
+        this._validates['maxItems'] = (v) => {
+            const arr = Array.isArray(v) ? v : [];
+            return arr.length <= count || (message ?? `Select at most ${count} item${count > 1 ? 's' : ''}`);
+        };
+        return this;
+    }
+    exactItems(count, message) {
+        this._validates['exactItems'] = (v) => {
+            const arr = Array.isArray(v) ? v : [];
+            return arr.length === count || (message ?? `Must select exactly ${count} item${count > 1 ? 's' : ''}`);
+        };
+        return this;
+    }
+    noEmpty(message) {
+        this._validates['noEmpty'] = (v) => {
+            const arr = Array.isArray(v) ? v : [];
+            return arr.every((item) => String(item).trim().length > 0) || (message ?? 'Items cannot be empty');
+        };
+        return this;
+    }
+    shouldBeIn(list, message) {
+        this._validates['shouldBeIn'] = (v) => {
+            const arr = Array.isArray(v) ? v : [];
+            const invalid = arr.filter((item) => !list.includes(item));
+            return invalid.length === 0 || (message ?? `Invalid selection: ${invalid.join(', ')}`);
+        };
+        return this;
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+// ─── Password validator ───────────────────────────────────────────────────────
+class PasswordValidator extends BaseValidator {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "_minLength", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_maxLength", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    minLength(len, message) {
+        this._minLength = { value: len, message: message ?? `Minimum ${len} characters required` };
+        return this;
+    }
+    maxLength(len, message) {
+        this._maxLength = { value: len, message: message ?? `Maximum ${len} characters allowed` };
+        return this;
+    }
+    hasUppercase(message) {
+        this._validates['hasUppercase'] = (v) => /[A-Z]/.test(String(v ?? '')) || (message ?? 'Must contain at least one uppercase letter');
+        return this;
+    }
+    hasLowercase(message) {
+        this._validates['hasLowercase'] = (v) => /[a-z]/.test(String(v ?? '')) || (message ?? 'Must contain at least one lowercase letter');
+        return this;
+    }
+    hasDigit(message) {
+        this._validates['hasDigit'] = (v) => /\d/.test(String(v ?? '')) || (message ?? 'Must contain at least one number');
+        return this;
+    }
+    hasSpecialChar(message) {
+        this._validates['hasSpecialChar'] = (v) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]/.test(String(v ?? '')) ||
+            (message ?? 'Must contain at least one special character');
+        return this;
+    }
+    noSpaces(message) {
+        this._validates['noSpaces'] = (v) => !/\s/.test(String(v ?? '')) || (message ?? 'Password cannot contain spaces');
+        return this;
+    }
+    /** Confirm this field matches another field value — pass a getter for the other field */
+    confirmMatch(getOtherValue, message) {
+        this._validates['confirmMatch'] = (v) => v === getOtherValue() || (message ?? 'Passwords do not match');
+        return this;
+    }
+    /** Shorthand: minLength(8) + uppercase + lowercase + digit + special char */
+    strong(message) {
+        return this.minLength(8, message).hasUppercase(message).hasLowercase(message).hasDigit(message).hasSpecialChar(message);
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            minLength: this._minLength,
+            maxLength: this._maxLength,
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+// ─── Date validator ───────────────────────────────────────────────────────────
+class DateValidator extends BaseValidator {
+    _toDate(v) {
+        if (v instanceof Date)
+            return isNaN(v.getTime()) ? null : v;
+        if (typeof v === 'string' || typeof v === 'number') {
+            const d = new Date(v);
+            return isNaN(d.getTime()) ? null : d;
+        }
+        return null;
+    }
+    validDate(message) {
+        this._validates['validDate'] = (v) => this._toDate(v) !== null || (message ?? 'Must be a valid date');
+        return this;
+    }
+    minDate(date, message) {
+        this._validates['minDate'] = (v) => {
+            const d = this._toDate(v);
+            if (!d)
+                return 'Invalid date';
+            return d >= date || (message ?? `Date must be on or after ${date.toLocaleDateString()}`);
+        };
+        return this;
+    }
+    maxDate(date, message) {
+        this._validates['maxDate'] = (v) => {
+            const d = this._toDate(v);
+            if (!d)
+                return 'Invalid date';
+            return d <= date || (message ?? `Date must be on or before ${date.toLocaleDateString()}`);
+        };
+        return this;
+    }
+    notInPast(message) {
+        this._validates['notInPast'] = (v) => {
+            const d = this._toDate(v);
+            if (!d)
+                return 'Invalid date';
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            return d >= today || (message ?? 'Date cannot be in the past');
+        };
+        return this;
+    }
+    notInFuture(message) {
+        this._validates['notInFuture'] = (v) => {
+            const d = this._toDate(v);
+            if (!d)
+                return 'Invalid date';
+            const today = new Date();
+            today.setHours(23, 59, 59, 999);
+            return d <= today || (message ?? 'Date cannot be in the future');
+        };
+        return this;
+    }
+    between(minDate, maxDate, message) {
+        return this.minDate(minDate, message).maxDate(maxDate, message);
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+// ─── Select validator (select / radio) ───────────────────────────────────────
+class SelectValidator extends BaseValidator {
+    shouldBeIn(list, message) {
+        this._validates['shouldBeIn'] = (v) => list.includes(String(v ?? '')) || (message ?? `Must be one of: ${list.join(', ')}`);
+        return this;
+    }
+    notEmpty(message) {
+        this._validates['notEmpty'] = (v) => (String(v ?? '').trim().length > 0) || (message ?? 'Please make a selection');
+        return this;
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+// ─── File validator ───────────────────────────────────────────────────────────
+class FileValidator extends BaseValidator {
+    /** Max file size in bytes */
+    maxSize(bytes, message) {
+        this._validates['maxSize'] = (v) => {
+            const files = Array.isArray(v) ? v : v instanceof File ? [v] : [];
+            const tooBig = files.filter((f) => f.size > bytes);
+            if (tooBig.length === 0)
+                return true;
+            const mb = (bytes / 1024 / 1024).toFixed(1);
+            return message ?? `File size must not exceed ${mb} MB`;
+        };
+        return this;
+    }
+    allowedTypes(mimeTypes, message) {
+        this._validates['allowedTypes'] = (v) => {
+            const files = Array.isArray(v) ? v : v instanceof File ? [v] : [];
+            const invalid = files.filter((f) => !mimeTypes.some((t) => t.endsWith('/*') ? f.type.startsWith(t.replace('/*', '/')) : f.type === t));
+            return invalid.length === 0 || (message ?? `Allowed types: ${mimeTypes.join(', ')}`);
+        };
+        return this;
+    }
+    allowedExtensions(exts, message) {
+        this._validates['allowedExtensions'] = (v) => {
+            const files = Array.isArray(v) ? v : v instanceof File ? [v] : [];
+            const invalid = files.filter((f) => {
+                const ext = f.name.split('.').pop()?.toLowerCase() ?? '';
+                return !exts.map((e) => e.toLowerCase().replace('.', '')).includes(ext);
+            });
+            return invalid.length === 0 || (message ?? `Allowed extensions: ${exts.join(', ')}`);
+        };
+        return this;
+    }
+    maxFiles(count, message) {
+        this._validates['maxFiles'] = (v) => {
+            const files = Array.isArray(v) ? v : v instanceof File ? [v] : [];
+            return files.length <= count || (message ?? `Maximum ${count} file${count > 1 ? 's' : ''} allowed`);
+        };
+        return this;
+    }
+    minFiles(count, message) {
+        this._validates['minFiles'] = (v) => {
+            const files = Array.isArray(v) ? v : v instanceof File ? [v] : [];
+            return files.length >= count || (message ?? `At least ${count} file${count > 1 ? 's' : ''} required`);
+        };
+        return this;
+    }
+    compile() {
+        return {
+            required: this._required || undefined,
+            validate: Object.keys(this._validates).length ? { ...this._validates } : undefined,
+        };
+    }
+}
+// ─── Entry point ──────────────────────────────────────────────────────────────
+const v = {
+    /** text, textarea fields — lengthBetween, shouldMatch, shouldBeIn, noSpaces, alphanumeric */
+    string: () => new StringValidator(),
+    /** number fields — between, integer, multipleOf, nonZero, length */
+    number: () => new NumberValidator(),
+    /** password fields — strong(), hasUppercase, hasDigit, hasSpecialChar, confirmMatch */
+    password: () => new PasswordValidator(),
+    /** email fields — auto email regex, domain whitelist/blacklist */
+    email: () => new EmailValidator(),
+    /** url fields — httpsOnly, allowedDomains, noTrailingSlash */
+    url: () => new UrlValidator(),
+    /** tel/phone fields — length, minLength, maxLength, shouldMatch */
+    tel: () => new TelValidator(),
+    /** DatePicker fields — minDate, maxDate, notInPast, notInFuture */
+    date: () => new DateValidator(),
+    /** select/radio fields — shouldBeIn, notEmpty */
+    select: () => new SelectValidator(),
+    /** checkbox/switch fields — mustBeTrue */
+    boolean: () => new BooleanValidator(),
+    /** multiselect/chipselect/taginput — minItems, maxItems, exactItems, shouldBeIn, noEmpty */
+    array: () => new ArrayValidator(),
+    /** FileUpload fields — maxSize, allowedTypes, allowedExtensions, maxFiles, minFiles */
+    file: () => new FileValidator(),
+};
+
+function getFileIcon(file) {
+    if (file.type.startsWith('image/'))
+        return jsx(Image$1, { size: 20 });
+    if (file.type.includes('pdf') || file.type.includes('text'))
+        return jsx(FileText, { size: 20 });
+    return jsx(File$1, { size: 20 });
+}
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+let fileIdCounter = 0;
+function FileUpload({ accept, maxFiles, maxSize, multiple = true, disabled = false, label, helperText, error, files = [], onFilesChange, onFileRemove, showPreview = true, className, }) {
+    const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
+        const newFiles = acceptedFiles.map((file) => ({
+            file,
+            id: `file-${++fileIdCounter}`,
+            preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+            progress: 0,
+        }));
+        const rejectedMapped = rejectedFiles.map(({ file, errors }) => ({
+            file,
+            id: `file-${++fileIdCounter}`,
+            error: errors[0]?.message ?? 'File rejected',
+        }));
+        onFilesChange?.([...files, ...newFiles, ...rejectedMapped]);
+    }, [files, onFilesChange]);
+    const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+        onDrop,
+        accept,
+        maxFiles,
+        maxSize,
+        multiple,
+        disabled,
+    });
+    return (jsxs("div", { className: cn('flex flex-col gap-3', className), children: [label && jsx("p", { className: "text-sm font-medium text-text", children: label }), jsxs("div", { ...getRootProps(), className: cn('relative flex flex-col items-center justify-center gap-3 p-8 rounded-lg border-2 border-dashed', 'transition-colors cursor-pointer outline-none', isDragActive && !isDragReject && 'border-primary bg-primary/5', isDragReject && 'border-error bg-error-bg', !isDragActive && !isDragReject && 'border-border hover:border-primary hover:bg-surface-hover', disabled && 'opacity-50 cursor-not-allowed pointer-events-none', error && 'border-error'), children: [jsx("input", { ...getInputProps() }), jsx("div", { className: cn('flex items-center justify-center w-12 h-12 rounded-full', isDragReject ? 'bg-error-bg text-error' : 'bg-surface-hover text-text-muted'), children: isDragReject ? jsx(AlertCircle, { size: 24 }) : jsx(Upload, { size: 24 }) }), jsxs("div", { className: "text-center", children: [jsx("p", { className: "text-sm font-medium text-text", children: isDragActive
+                                    ? isDragReject
+                                        ? 'File not accepted'
+                                        : 'Drop files here'
+                                    : 'Drag & drop files here' }), jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["or", ' ', jsx("span", { className: "text-primary font-medium cursor-pointer hover:underline", children: "browse files" })] }), (maxSize || accept) && (jsxs("p", { className: "text-xs text-text-muted mt-2", children: [accept && `Accepted: ${Object.values(accept).flat().join(', ')} · `, maxSize && `Max size: ${formatBytes(maxSize)}`, maxFiles && ` · Max files: ${maxFiles}`] }))] })] }), error && jsx("p", { className: "text-xs text-error", role: "alert", children: error }), !error && helperText && jsx("p", { className: "text-xs text-text-muted", children: helperText }), showPreview && files.length > 0 && (jsx("ul", { className: "flex flex-col gap-2", children: files.map((uploadedFile) => (jsxs("li", { className: cn('flex items-center gap-3 p-3 rounded-lg border bg-surface', uploadedFile.error ? 'border-error bg-error-bg' : 'border-border'), children: [jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-md overflow-hidden bg-surface-hover flex items-center justify-center text-text-muted", children: uploadedFile.preview ? (jsx("img", { src: uploadedFile.preview, alt: uploadedFile.file.name, className: "w-full h-full object-cover" })) : (getFileIcon(uploadedFile.file)) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-medium text-text truncate", children: uploadedFile.file.name }), uploadedFile.error ? (jsx("p", { className: "text-xs text-error", children: uploadedFile.error })) : (jsx("p", { className: "text-xs text-text-muted", children: formatBytes(uploadedFile.file.size) })), uploadedFile.progress !== undefined && uploadedFile.progress < 100 && !uploadedFile.error && (jsx("div", { className: "mt-1.5 h-1 w-full bg-surface-hover rounded-full overflow-hidden", children: jsx("div", { className: "h-full bg-primary rounded-full transition-all", style: { width: `${uploadedFile.progress}%` } }) }))] }), jsx("button", { type: "button", onClick: () => onFileRemove?.(uploadedFile.id), className: "flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full text-text-muted hover:text-error hover:bg-error-bg transition-colors", "aria-label": `Remove ${uploadedFile.file.name}`, children: jsx(X, { size: 14 }) })] }, uploadedFile.id))) }))] }));
+}
+
+const shadowClasses$1 = {
+    none: '',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+};
+const paddingClasses$1 = {
+    none: '',
+    sm: 'p-3',
+    md: 'p-4',
+    lg: 'p-6',
+};
+function Card({ header, footer, hoverable = false, clickable = false, bordered = true, shadow = 'sm', padding = 'md', className, children, onClick, ...props }) {
+    return (jsxs("div", { className: cn('rounded-lg bg-surface', bordered && 'border border-border', shadowClasses$1[shadow], hoverable && 'transition-shadow hover:shadow-md', (clickable || onClick) && 'cursor-pointer hover:shadow-md transition-shadow', className), onClick: onClick, role: clickable || onClick ? 'button' : undefined, tabIndex: clickable || onClick ? 0 : undefined, onKeyDown: (clickable || onClick)
+            ? (e) => { if (e.key === 'Enter' || e.key === ' ')
+                onClick?.(e); }
+            : undefined, ...props, children: [header && (jsx("div", { className: cn('border-b border-border', paddingClasses$1[padding]), children: header })), jsx("div", { className: cn(paddingClasses$1[padding]), children: children }), footer && (jsx("div", { className: cn('border-t border-border', paddingClasses$1[padding]), children: footer }))] }));
+}
+
+const bgClasses = {
+    surface: 'bg-surface',
+    background: 'bg-background',
+    primary: 'bg-primary text-primary-foreground',
+    secondary: 'bg-secondary text-secondary-foreground',
+    error: 'bg-error-bg text-error',
+    success: 'bg-success-bg text-success',
+    warning: 'bg-warning-bg text-warning',
+    info: 'bg-info-bg text-info',
+};
+const roundedClasses$1 = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    full: 'rounded-full',
+};
+const shadowClasses = {
+    none: '',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+};
+const paddingClasses = {
+    none: '',
+    xs: 'p-1',
+    sm: 'p-2',
+    md: 'p-4',
+    lg: 'p-6',
+    xl: 'p-8',
+};
+function Box({ as: Component = 'div', bg, rounded, shadow, bordered = false, padding, className, children, ...props }) {
+    return (jsx(Component, { className: cn(bg && bgClasses[bg], rounded && roundedClasses$1[rounded], shadow && shadowClasses[shadow], bordered && 'border border-border', padding && paddingClasses[padding], className), ...props, children: children }));
+}
+
+const ratioClasses = {
+    '1/1': 'aspect-square',
+    '4/3': 'aspect-[4/3]',
+    '16/9': 'aspect-video',
+    '3/2': 'aspect-[3/2]',
+    '2/3': 'aspect-[2/3]',
+    auto: '',
+};
+const fitClasses = {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill',
+    none: 'object-none',
+    'scale-down': 'object-scale-down',
+};
+const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    full: 'rounded-full',
+};
+function Image({ src, fallbackSrc, fallbackIcon, fit = 'cover', ratio = 'auto', lazy = true, rounded = 'none', blur = false, containerClassName, className, alt = '', ...props }) {
+    const [error, setError] = useState(false);
+    const [usedFallback, setUsedFallback] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+    const handleError = () => {
+        if (!usedFallback && fallbackSrc) {
+            setUsedFallback(true);
+        }
+        else {
+            setError(true);
+        }
+    };
+    const currentSrc = usedFallback && fallbackSrc ? fallbackSrc : src;
+    if (error) {
+        return (jsx("div", { className: cn('flex items-center justify-center bg-surface-hover text-text-muted', ratioClasses[ratio], roundedClasses[rounded], containerClassName), children: fallbackIcon ?? jsx(ImageOff, { size: 24 }) }));
+    }
+    return (jsx("div", { className: cn('overflow-hidden', ratioClasses[ratio], roundedClasses[rounded], ratio !== 'auto' && 'relative', containerClassName), children: jsx("img", { src: currentSrc, alt: alt, loading: lazy ? 'lazy' : 'eager', onError: handleError, onLoad: () => setLoaded(true), className: cn(ratio !== 'auto' ? 'absolute inset-0 w-full h-full' : 'w-full h-full', fitClasses[fit], roundedClasses[rounded], blur && !loaded && 'blur-sm', loaded && blur && 'blur-0', 'transition-[filter] duration-300', className), ...props }) }));
+}
+
+const sizeClasses$8 = {
+    xs: { container: 'w-6 h-6', text: 'text-xs', icon: 12 },
+    sm: { container: 'w-8 h-8', text: 'text-sm', icon: 14 },
+    md: { container: 'w-10 h-10', text: 'text-sm', icon: 16 },
+    lg: { container: 'w-12 h-12', text: 'text-base', icon: 20 },
+    xl: { container: 'w-16 h-16', text: 'text-lg', icon: 24 },
+    '2xl': { container: 'w-20 h-20', text: 'text-xl', icon: 28 },
+};
+const statusColors = {
+    online: 'bg-success',
+    offline: 'bg-text-muted',
+    away: 'bg-warning',
+    busy: 'bg-error',
+};
+function getInitials(name) {
+    return name
+        .split(' ')
+        .slice(0, 2)
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase();
+}
+function stringToColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const colors = [
+        '#6366f1', '#8b5cf6', '#ec4899', '#ef4444',
+        '#f59e0b', '#10b981', '#3b82f6', '#06b6d4',
+    ];
+    return colors[Math.abs(hash) % colors.length];
+}
+function Avatar({ src, alt, name, icon, size = 'md', status, rounded = true, className, }) {
+    const [imgError, setImgError] = useState(false);
+    const sz = sizeClasses$8[size];
+    const initials = name ? getInitials(name) : null;
+    const bgColor = name ? stringToColor(name) : undefined;
+    return (jsxs("div", { className: cn('relative inline-flex flex-shrink-0', className), children: [jsx("div", { className: cn('flex items-center justify-center overflow-hidden', sz.container, rounded ? 'rounded-full' : 'rounded-md', !src || imgError ? 'text-white' : ''), style: { backgroundColor: !src || imgError ? bgColor ?? 'var(--color-secondary)' : undefined }, "aria-label": alt ?? name, children: src && !imgError ? (jsx("img", { src: src, alt: alt ?? name ?? '', className: "w-full h-full object-cover", onError: () => setImgError(true) })) : initials ? (jsx("span", { className: cn('font-semibold select-none', sz.text), children: initials })) : icon ? (jsx("span", { children: icon })) : (jsx(User, { size: sz.icon })) }), status && (jsx("span", { className: cn('absolute bottom-0 right-0 block rounded-full ring-2 ring-surface', statusColors[status], size === 'xs' || size === 'sm' ? 'w-2 h-2' : 'w-2.5 h-2.5'), "aria-label": status }))] }));
+}
+function AvatarGroup({ avatars, max = 4, size = 'md', className }) {
+    const visible = avatars.slice(0, max);
+    const overflow = avatars.length - max;
+    const sz = sizeClasses$8[size];
+    return (jsxs("div", { className: cn('flex items-center', className), children: [visible.map((avatar, i) => (jsx("div", { className: "-ml-2 first:ml-0 ring-2 ring-surface rounded-full", children: jsx(Avatar, { ...avatar, size: size }) }, i))), overflow > 0 && (jsxs("div", { className: cn('-ml-2 flex items-center justify-center rounded-full bg-surface-hover border-2 border-surface text-text-muted font-medium', sz.container, sz.text), children: ["+", overflow] }))] }));
+}
+
+const badgeVariants = cva('inline-flex items-center justify-center font-medium rounded-full select-none', {
+    variants: {
+        variant: {
+            primary: 'bg-primary text-primary-foreground',
+            secondary: 'bg-secondary text-secondary-foreground',
+            outline: 'border border-border text-text bg-transparent',
+            success: 'bg-success-bg text-success',
+            error: 'bg-error-bg text-error',
+            warning: 'bg-warning-bg text-warning',
+            info: 'bg-info-bg text-info',
+            ghost: 'bg-surface-hover text-text-muted',
+        },
+        size: {
+            sm: 'text-xs px-1.5 py-0.5 min-w-[1.25rem] h-4',
+            md: 'text-xs px-2 py-0.5 min-w-[1.5rem] h-5',
+            lg: 'text-sm px-2.5 py-1 min-w-[1.75rem] h-6',
+        },
+        dot: {
+            true: 'w-2 h-2 p-0 min-w-0',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        dot: false,
+    },
+});
+function Badge({ variant, size, dot, children, className }) {
+    return (jsx("span", { className: cn(badgeVariants({ variant, size, dot }), className), children: !dot && children }));
+}
+const positionClasses$1 = {
+    'top-right': '-top-1 -right-1',
+    'top-left': '-top-1 -left-1',
+    'bottom-right': '-bottom-1 -right-1',
+    'bottom-left': '-bottom-1 -left-1',
+};
+function BadgeAnchor({ children, badge, position = 'top-right', className }) {
+    return (jsxs("div", { className: cn('relative inline-flex', className), children: [children, badge && (jsx("span", { className: cn('absolute', positionClasses$1[position]), children: badge }))] }));
+}
+
+const tagVariants = cva('inline-flex items-center gap-1 font-medium rounded-md select-none', {
+    variants: {
+        variant: {
+            default: 'bg-surface-hover text-text border border-border',
+            primary: 'bg-primary/10 text-primary border border-primary/20',
+            success: 'bg-success-bg text-success border border-success/20',
+            error: 'bg-error-bg text-error border border-error/20',
+            warning: 'bg-warning-bg text-warning border border-warning/20',
+            info: 'bg-info-bg text-info border border-info/20',
+        },
+        size: {
+            sm: 'text-xs px-1.5 py-0.5',
+            md: 'text-sm px-2 py-1',
+            lg: 'text-sm px-3 py-1.5',
+        },
+        rounded: {
+            true: 'rounded-full',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+        rounded: false,
+    },
+});
+function Tag({ variant, size, rounded, children, icon, removable, onRemove, className }) {
+    return (jsxs("span", { className: cn(tagVariants({ variant, size, rounded }), className), children: [icon && jsx("span", { className: "flex items-center w-3.5 h-3.5", children: icon }), children, removable && (jsx("button", { type: "button", onClick: onRemove, className: "flex items-center justify-center w-3.5 h-3.5 rounded-full hover:bg-black/10 transition-colors ml-0.5", "aria-label": "Remove tag", children: jsx(X, { size: 10 }) }))] }));
+}
+
+const sizeMap$1 = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 20,
+    xl: 24,
+};
+function Icon({ icon: LucideIconComponent, size = 'md', color, className, ...props }) {
+    const resolvedSize = typeof size === 'number' ? size : sizeMap$1[size];
+    return (jsx(LucideIconComponent, { size: resolvedSize, color: color, className: cn('flex-shrink-0', className), "aria-hidden": "true", ...props }));
+}
+
+function SVG({ src, children, width, height, size, color, className, title, role = 'img', viewBox = '0 0 24 24', fill = 'none', stroke = 'currentColor', ...props }) {
+    const resolvedWidth = size ?? width ?? 24;
+    const resolvedHeight = size ?? height ?? 24;
+    if (src) {
+        return (jsx("img", { src: src, width: resolvedWidth, height: resolvedHeight, className: cn('flex-shrink-0', className), alt: props['aria-label'] ?? title ?? '', "aria-hidden": props['aria-hidden'], style: { color } }));
+    }
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: resolvedWidth, height: resolvedHeight, viewBox: viewBox, fill: fill, stroke: stroke, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", role: role, className: cn('flex-shrink-0', className), style: { color }, "aria-label": props['aria-label'], "aria-hidden": props['aria-hidden'], children: [title && jsx("title", { children: title }), children] }));
+}
+
+function Table({ columns, data, keyExtractor, selectable = false, selectedKeys = [], onSelectionChange, sortKey, sortDirection, onSortChange, loading = false, emptyMessage = 'No data available', stickyHeader = false, striped = false, hoverable = true, bordered = false, compact = false, className, }) {
+    const [internalSort, setInternalSort] = useState({
+        key: '',
+        dir: null,
+    });
+    const effectiveSortKey = sortKey ?? internalSort.key;
+    const effectiveSortDir = sortDirection ?? internalSort.dir;
+    const handleSort = (key) => {
+        let next = 'asc';
+        if (effectiveSortKey === key) {
+            next = effectiveSortDir === 'asc' ? 'desc' : effectiveSortDir === 'desc' ? null : 'asc';
+        }
+        if (onSortChange) {
+            onSortChange(key, next);
+        }
+        else {
+            setInternalSort({ key, dir: next });
+        }
+    };
+    const sortedData = useMemo(() => {
+        if (!effectiveSortKey || !effectiveSortDir)
+            return data;
+        const col = columns.find((c) => c.key === effectiveSortKey);
+        if (!col)
+            return data;
+        return [...data].sort((a, b) => {
+            const aVal = col.accessor ? String(col.accessor(a) ?? '') : String(a[effectiveSortKey] ?? '');
+            const bVal = col.accessor ? String(col.accessor(b) ?? '') : String(b[effectiveSortKey] ?? '');
+            const cmp = aVal.localeCompare(bVal, undefined, { numeric: true });
+            return effectiveSortDir === 'asc' ? cmp : -cmp;
+        });
+    }, [data, effectiveSortKey, effectiveSortDir, columns]);
+    const allKeys = sortedData.map(keyExtractor);
+    const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedKeys.includes(k));
+    const someSelected = allKeys.some((k) => selectedKeys.includes(k)) && !allSelected;
+    const toggleAll = () => {
+        if (allSelected) {
+            onSelectionChange?.(selectedKeys.filter((k) => !allKeys.includes(k)));
+        }
+        else {
+            onSelectionChange?.([...new Set([...selectedKeys, ...allKeys])]);
+        }
+    };
+    const toggleRow = (key) => {
+        if (selectedKeys.includes(key)) {
+            onSelectionChange?.(selectedKeys.filter((k) => k !== key));
+        }
+        else {
+            onSelectionChange?.([...selectedKeys, key]);
+        }
+    };
+    const cellPad = compact ? 'px-3 py-2' : 'px-4 py-3';
+    return (jsx("div", { className: cn('w-full overflow-auto rounded-lg', bordered && 'border border-border', className), children: jsxs("table", { className: "w-full text-sm border-collapse", children: [jsx("thead", { className: cn(stickyHeader && 'sticky top-0 z-10'), children: jsxs("tr", { className: "bg-surface-hover border-b border-border", children: [selectable && (jsx("th", { className: cn('w-10', cellPad), children: jsx(Checkbox, { checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: toggleAll, "aria-label": "Select all rows" }) })), columns.map((col) => (jsx("th", { className: cn('text-left font-semibold text-text-muted whitespace-nowrap', cellPad, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.sortable && 'cursor-pointer select-none hover:text-text', col.className), style: { width: col.width }, onClick: col.sortable ? () => handleSort(col.key) : undefined, children: jsxs("span", { className: "inline-flex items-center gap-1", children: [col.header, col.sortable && (jsx("span", { className: "flex-shrink-0", children: effectiveSortKey === col.key ? (effectiveSortDir === 'asc' ? (jsx(ChevronUp, { size: 14 })) : effectiveSortDir === 'desc' ? (jsx(ChevronDown, { size: 14 })) : (jsx(ChevronsUpDown, { size: 14, className: "opacity-40" }))) : (jsx(ChevronsUpDown, { size: 14, className: "opacity-40" })) }))] }) }, col.key)))] }) }), jsx("tbody", { children: loading ? (Array.from({ length: 5 }).map((_, i) => (jsxs("tr", { className: "border-b border-border", children: [selectable && jsx("td", { className: cellPad, children: jsx("div", { className: "h-4 w-4 rounded bg-surface-hover animate-pulse" }) }), columns.map((col) => (jsx("td", { className: cellPad, children: jsx("div", { className: "h-4 rounded bg-surface-hover animate-pulse", style: { width: `${60 + Math.random() * 40}%` } }) }, col.key)))] }, i)))) : sortedData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "text-center py-12 text-text-muted", children: emptyMessage }) })) : (sortedData.map((row, i) => {
+                        const key = keyExtractor(row, i);
+                        const isSelected = selectedKeys.includes(key);
+                        return (jsxs("tr", { className: cn('border-b border-border transition-colors', striped && i % 2 === 1 && 'bg-surface-hover/50', hoverable && 'hover:bg-surface-hover', isSelected && 'bg-primary/5'), children: [selectable && (jsx("td", { className: cellPad, children: jsx(Checkbox, { checked: isSelected, onCheckedChange: () => toggleRow(key), "aria-label": `Select row ${i + 1}` }) })), columns.map((col) => (jsx("td", { className: cn('text-text', cellPad, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.className), children: col.accessor
+                                        ? col.accessor(row)
+                                        : String(row[col.key] ?? '') }, col.key)))] }, key));
+                    })) })] }) }));
+}
+
+const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+function DataTable({ columns, data, keyExtractor, selectable = false, selectedKeys = [], onSelectionChange, sortKey, sortDirection, onSortChange, loading = false, emptyMessage = 'No data available', stickyHeader = false, striped = false, hoverable = true, bordered = false, compact = false, className, pagination, toolbar, rowActions, caption, }) {
+    const [internalSort, setInternalSort] = useState({ key: '', dir: null });
+    const [internalPage, setInternalPage] = useState(1);
+    const [internalPageSize, setInternalPageSize] = useState(pagination?.pageSize ?? 10);
+    const effectiveSortKey = sortKey ?? internalSort.key;
+    const effectiveSortDir = sortDirection ?? internalSort.dir;
+    const handleSort = (key) => {
+        let next = 'asc';
+        if (effectiveSortKey === key) {
+            next = effectiveSortDir === 'asc' ? 'desc' : effectiveSortDir === 'desc' ? null : 'asc';
+        }
+        if (onSortChange) {
+            onSortChange(key, next);
+        }
+        else {
+            setInternalSort({ key, dir: next });
+        }
+    };
+    const sortedData = useMemo(() => {
+        if (!effectiveSortKey || !effectiveSortDir)
+            return data;
+        const col = columns.find((c) => c.key === effectiveSortKey);
+        if (!col)
+            return data;
+        return [...data].sort((a, b) => {
+            // Priority: explicit sortValue fn > raw row field (never stringify React elements from accessor)
+            const getRaw = (row) => {
+                if (col.sortValue)
+                    return col.sortValue(row);
+                const raw = row[effectiveSortKey];
+                return typeof raw === 'number' ? raw : String(raw ?? '');
+            };
+            const aVal = getRaw(a);
+            const bVal = getRaw(b);
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                return effectiveSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+            }
+            const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+            return effectiveSortDir === 'asc' ? cmp : -cmp;
+        });
+    }, [data, effectiveSortKey, effectiveSortDir, columns]);
+    // Pagination
+    pagination?.mode === 'client';
+    const isServerPagination = pagination?.mode === 'server';
+    const hasPagination = !!pagination;
+    const currentPage = isServerPagination && pagination.page !== undefined ? pagination.page : internalPage;
+    const pageSize = internalPageSize;
+    const pageSizeOptions = pagination?.pageSizeOptions ?? PAGE_SIZE_OPTIONS;
+    const totalRows = isServerPagination ? (pagination.totalRows ?? data.length) : sortedData.length;
+    const totalPages = Math.max(1, Math.ceil(totalRows / pageSize));
+    const pagedData = useMemo(() => {
+        if (!hasPagination || isServerPagination)
+            return sortedData;
+        const start = (currentPage - 1) * pageSize;
+        return sortedData.slice(start, start + pageSize);
+    }, [sortedData, hasPagination, isServerPagination, currentPage, pageSize]);
+    const displayData = hasPagination ? pagedData : sortedData;
+    const goToPage = (page) => {
+        const clamped = Math.max(1, Math.min(page, totalPages));
+        if (isServerPagination) {
+            pagination.onPageChange?.(clamped);
+        }
+        else {
+            setInternalPage(clamped);
+        }
+    };
+    const changePageSize = (size) => {
+        setInternalPageSize(size);
+        setInternalPage(1);
+        if (isServerPagination) {
+            pagination.onPageSizeChange?.(size);
+            pagination.onPageChange?.(1);
+        }
+    };
+    // Selection
+    const allKeys = displayData.map(keyExtractor);
+    const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedKeys.includes(k));
+    const someSelected = allKeys.some((k) => selectedKeys.includes(k)) && !allSelected;
+    const toggleAll = () => {
+        if (allSelected) {
+            onSelectionChange?.(selectedKeys.filter((k) => !allKeys.includes(k)));
+        }
+        else {
+            onSelectionChange?.([...new Set([...selectedKeys, ...allKeys])]);
+        }
+    };
+    const toggleRow = (key) => {
+        if (selectedKeys.includes(key)) {
+            onSelectionChange?.(selectedKeys.filter((k) => k !== key));
+        }
+        else {
+            onSelectionChange?.([...selectedKeys, key]);
+        }
+    };
+    const cellPad = compact ? 'px-3 py-2' : 'px-4 py-3';
+    const startRow = hasPagination ? (currentPage - 1) * pageSize + 1 : 1;
+    const endRow = hasPagination ? Math.min(currentPage * pageSize, totalRows) : totalRows;
+    return (jsxs("div", { className: cn('flex flex-col gap-0 w-full', className), children: [toolbar && (jsx("div", { className: "flex items-center justify-between gap-3 px-1 pb-3", children: toolbar })), jsx("div", { className: cn('w-full overflow-auto rounded-lg', bordered && 'border border-border'), children: jsxs("table", { className: "w-full text-sm border-collapse", children: [caption && jsx("caption", { className: "text-xs text-text-muted pb-2 text-left", children: caption }), jsx("thead", { className: cn(stickyHeader && 'sticky top-0 z-10'), children: jsxs("tr", { className: "bg-surface-hover border-b border-border", children: [selectable && (jsx("th", { className: cn('w-10', cellPad), children: jsx(Checkbox, { checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: toggleAll, "aria-label": "Select all rows" }) })), columns.map((col) => (jsx("th", { className: cn('text-left font-semibold text-text-muted whitespace-nowrap', cellPad, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.sortable && 'cursor-pointer select-none hover:text-text', col.className), style: { width: col.width }, onClick: col.sortable ? () => handleSort(col.key) : undefined, children: jsxs("span", { className: "inline-flex items-center gap-1", children: [col.header, col.sortable && (jsx("span", { className: "flex-shrink-0", children: effectiveSortKey === col.key ? (effectiveSortDir === 'asc' ? (jsx(ChevronUp, { size: 14 })) : effectiveSortDir === 'desc' ? (jsx(ChevronDown, { size: 14 })) : (jsx(ChevronsUpDown, { size: 14, className: "opacity-40" }))) : (jsx(ChevronsUpDown, { size: 14, className: "opacity-40" })) }))] }) }, col.key))), rowActions && (jsx("th", { className: cn('text-right font-semibold text-text-muted whitespace-nowrap', cellPad), children: "Actions" }))] }) }), jsx("tbody", { children: loading ? (Array.from({ length: pageSize > 5 ? 5 : pageSize }).map((_, i) => (jsxs("tr", { className: "border-b border-border", children: [selectable && jsx("td", { className: cellPad, children: jsx("div", { className: "h-4 w-4 rounded bg-surface-hover animate-pulse" }) }), columns.map((col) => (jsx("td", { className: cellPad, children: jsx("div", { className: "h-4 rounded bg-surface-hover animate-pulse", style: { width: `${60 + (col.key.length * 7) % 40}%` } }) }, col.key))), rowActions && jsx("td", { className: cellPad, children: jsx("div", { className: "h-4 w-16 rounded bg-surface-hover animate-pulse ml-auto" }) })] }, i)))) : displayData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0), className: "text-center py-12 text-text-muted", children: emptyMessage }) })) : (displayData.map((row, i) => {
+                                const key = keyExtractor(row, i);
+                                const isSelected = selectedKeys.includes(key);
+                                return (jsxs("tr", { className: cn('border-b border-border transition-colors', striped && i % 2 === 1 && 'bg-surface-hover/50', hoverable && 'hover:bg-surface-hover', isSelected && 'bg-primary/5'), children: [selectable && (jsx("td", { className: cellPad, children: jsx(Checkbox, { checked: isSelected, onCheckedChange: () => toggleRow(key), "aria-label": `Select row ${i + 1}` }) })), columns.map((col) => (jsx("td", { className: cn('text-text', cellPad, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.className), children: col.accessor
+                                                ? col.accessor(row)
+                                                : String(row[col.key] ?? '') }, col.key))), rowActions && (jsx("td", { className: cn(cellPad, 'text-right'), children: rowActions(row) }))] }, key));
+                            })) })] }) }), hasPagination && (jsxs("div", { className: "flex items-center justify-between gap-4 px-1 pt-3 flex-wrap", children: [jsxs("div", { className: "flex items-center gap-2 text-sm text-text-muted", children: [jsx("span", { children: "Rows per page:" }), jsx("select", { value: pageSize, onChange: (e) => changePageSize(Number(e.target.value)), className: "h-7 px-2 rounded-md border border-border bg-surface text-text text-xs outline-none focus:border-border-focus", children: pageSizeOptions.map((s) => (jsx("option", { value: s, children: s }, s))) })] }), jsxs("div", { className: "flex items-center gap-1 text-sm text-text-muted", children: [jsx("span", { className: "mr-2", children: loading ? '…' : `${startRow}–${endRow} of ${totalRows}` }), jsx("button", { onClick: () => goToPage(1), disabled: currentPage === 1 || loading, className: "p-1 rounded hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "First page", children: jsx(ChevronsLeft, { size: 16 }) }), jsx("button", { onClick: () => goToPage(currentPage - 1), disabled: currentPage === 1 || loading, className: "p-1 rounded hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Previous page", children: jsx(ChevronLeft, { size: 16 }) }), jsx("div", { className: "flex items-center gap-0.5", children: Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                                    let page;
+                                    if (totalPages <= 5) {
+                                        page = i + 1;
+                                    }
+                                    else if (currentPage <= 3) {
+                                        page = i + 1;
+                                    }
+                                    else if (currentPage >= totalPages - 2) {
+                                        page = totalPages - 4 + i;
+                                    }
+                                    else {
+                                        page = currentPage - 2 + i;
+                                    }
+                                    return (jsx("button", { onClick: () => goToPage(page), disabled: loading, className: cn('w-7 h-7 rounded text-xs font-medium transition-colors', page === currentPage
+                                            ? 'bg-primary text-primary-foreground'
+                                            : 'hover:bg-surface-hover text-text-muted'), children: page }, page));
+                                }) }), jsx("button", { onClick: () => goToPage(currentPage + 1), disabled: currentPage === totalPages || loading, className: "p-1 rounded hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Next page", children: jsx(ChevronRight, { size: 16 }) }), jsx("button", { onClick: () => goToPage(totalPages), disabled: currentPage === totalPages || loading, className: "p-1 rounded hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Last page", children: jsx(ChevronsRight, { size: 16 }) })] })] }))] }));
+}
+
+function ListItem({ primary, secondary, leading, trailing, onClick, active, disabled, divider, className, }) {
+    return (jsxs("li", { className: cn('flex items-center gap-3 px-3 py-2.5', onClick && !disabled && 'cursor-pointer hover:bg-surface-hover transition-colors', active && 'bg-primary/5 text-primary', disabled && 'opacity-50 cursor-not-allowed', divider && 'border-b border-border', className), onClick: !disabled ? onClick : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, children: [leading && (jsx("div", { className: "flex-shrink-0 flex items-center", children: leading })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-medium text-text truncate", children: primary }), secondary && (jsx("p", { className: "text-xs text-text-muted truncate mt-0.5", children: secondary }))] }), trailing && (jsx("div", { className: "flex-shrink-0 flex items-center", children: trailing }))] }));
+}
+function List({ items, ordered = false, divided = false, hoverable = true, compact = false, children, className, }) {
+    const Tag = ordered ? 'ol' : 'ul';
+    return (jsx(Tag, { className: cn('rounded-lg bg-surface border border-border overflow-hidden', divided && '[&>li]:border-b [&>li]:border-border [&>li:last-child]:border-0', compact && '[&>li]:py-1.5', className), children: items
+            ? items.map((item, i) => (jsx(ListItem, { ...item, className: cn(!hoverable && 'cursor-default hover:bg-transparent', item.className) }, item.id ?? i)))
+            : children }));
+}
+
+const variantClasses$3 = {
+    default: 'bg-surface-hover text-text-muted border-border',
+    success: 'bg-success-bg text-success border-success/30',
+    error: 'bg-error-bg text-error border-error/30',
+    warning: 'bg-warning-bg text-warning border-warning/30',
+    info: 'bg-info-bg text-info border-info/30',
+};
+const connectorVariant = {
+    default: 'bg-border',
+    success: 'bg-success/30',
+    error: 'bg-error/30',
+    warning: 'bg-warning/30',
+    info: 'bg-info/30',
+};
+function Timeline({ items, orientation = 'vertical', className }) {
+    return (jsx("ol", { className: cn('flex', orientation === 'vertical' ? 'flex-col' : 'flex-row', className), children: items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            const variant = item.variant ?? 'default';
+            return (jsxs("li", { className: cn('flex', orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col items-center flex-1'), children: [jsxs("div", { className: cn('flex flex-shrink-0', orientation === 'vertical' ? 'flex-col items-center' : 'flex-row items-center w-full'), children: [jsx("div", { className: cn('flex items-center justify-center w-8 h-8 rounded-full border flex-shrink-0', variantClasses$3[variant]), children: item.icon ?? (jsx("span", { className: "w-2 h-2 rounded-full bg-current" })) }), !isLast && (jsx("div", { className: cn(connectorVariant[variant], orientation === 'vertical' ? 'w-0.5 flex-1 my-1 min-h-[1.5rem]' : 'h-0.5 flex-1 mx-1') }))] }), jsxs("div", { className: cn('pb-6', isLast && 'pb-0', orientation === 'horizontal' && 'text-center mt-2 px-2'), children: [jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [jsx("p", { className: "text-sm font-medium text-text", children: item.title }), item.timestamp && (jsx("span", { className: "text-xs text-text-muted", children: item.timestamp }))] }), item.description && (jsx("p", { className: "text-sm text-text-muted mt-0.5", children: item.description }))] })] }, item.id));
+        }) }));
+}
+
+const iconBgClasses = {
+    primary: 'bg-primary/10 text-primary',
+    success: 'bg-success-bg text-success',
+    error: 'bg-error-bg text-error',
+    warning: 'bg-warning-bg text-warning',
+    info: 'bg-info-bg text-info',
+};
+function Stat({ label, value, delta, deltaLabel, icon, iconBg = 'primary', description, loading = false, className, }) {
+    const isPositive = delta !== undefined && delta > 0;
+    const isNegative = delta !== undefined && delta < 0;
+    return (jsxs("div", { className: cn('flex flex-col gap-3 p-4 rounded-lg bg-surface border border-border shadow-sm', className), children: [jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsx("p", { className: "text-sm font-medium text-text-muted", children: label }), icon && (jsx("div", { className: cn('flex items-center justify-center w-10 h-10 rounded-lg flex-shrink-0', iconBgClasses[iconBg]), children: icon }))] }), loading ? (jsxs("div", { className: "space-y-2", children: [jsx("div", { className: "h-8 w-24 rounded bg-surface-hover animate-pulse" }), jsx("div", { className: "h-4 w-16 rounded bg-surface-hover animate-pulse" })] })) : (jsxs(Fragment, { children: [jsx("p", { className: "text-2xl font-bold text-text", children: value }), delta !== undefined && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("span", { className: cn('flex items-center gap-0.5 text-xs font-medium', isPositive && 'text-success', isNegative && 'text-error', !isPositive && !isNegative && 'text-text-muted'), children: [isPositive ? (jsx(TrendingUp, { size: 12 })) : isNegative ? (jsx(TrendingDown, { size: 12 })) : (jsx(Minus, { size: 12 })), Math.abs(delta), "%"] }), deltaLabel && (jsx("span", { className: "text-xs text-text-muted", children: deltaLabel }))] })), description && (jsx("p", { className: "text-xs text-text-muted", children: description }))] }))] }));
+}
+
+function EmptyState({ title = 'No data found', description, illustration, icon, action, className, }) {
+    return (jsxs("div", { className: cn('flex flex-col items-center justify-center gap-4 py-16 px-6 text-center', className), children: [illustration ? (jsx("div", { className: "mb-2", children: illustration })) : (jsx("div", { className: "flex items-center justify-center w-16 h-16 rounded-full bg-surface-hover text-text-muted", children: icon ?? jsx(Inbox, { size: 28 }) })), jsxs("div", { className: "flex flex-col gap-1.5 max-w-sm", children: [jsx("h3", { className: "text-base font-semibold text-text", children: title }), description && jsx("p", { className: "text-sm text-text-muted", children: description })] }), action && jsx("div", { className: "mt-2", children: action })] }));
+}
+
+function MarkdownReader({ children, className, codeTheme = 'dark', showLineNumbers = false, }) {
+    const prismTheme = codeTheme === 'dark' ? themes.oneDark : themes.oneLight;
+    return (jsx("div", { className: cn('markdown-reader w-full', className), children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
+                // Headings
+                h1: ({ children: c }) => (jsx("h1", { className: "text-3xl font-bold text-text mt-8 mb-4 pb-2 border-b border-border first:mt-0", children: c })),
+                h2: ({ children: c }) => (jsx("h2", { className: "text-2xl font-semibold text-text mt-7 mb-3 pb-2 border-b border-border", children: c })),
+                h3: ({ children: c }) => (jsx("h3", { className: "text-xl font-semibold text-text mt-6 mb-2", children: c })),
+                h4: ({ children: c }) => (jsx("h4", { className: "text-lg font-semibold text-text mt-5 mb-2", children: c })),
+                h5: ({ children: c }) => (jsx("h5", { className: "text-base font-semibold text-text mt-4 mb-1", children: c })),
+                h6: ({ children: c }) => (jsx("h6", { className: "text-sm font-semibold text-text-muted mt-4 mb-1", children: c })),
+                // Paragraph
+                p: ({ children: c }) => (jsx("p", { className: "text-text leading-7 mb-4 last:mb-0", children: c })),
+                // Links
+                a: ({ href, children: c }) => (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-4 hover:opacity-80 transition-opacity", children: c })),
+                // Lists
+                ul: ({ children: c }) => (jsx("ul", { className: "list-disc list-outside pl-6 mb-4 space-y-1 text-text", children: c })),
+                ol: ({ children: c }) => (jsx("ol", { className: "list-decimal list-outside pl-6 mb-4 space-y-1 text-text", children: c })),
+                li: ({ children: c }) => (jsx("li", { className: "leading-7", children: c })),
+                // Blockquote
+                blockquote: ({ children: c }) => (jsx("blockquote", { className: "border-l-4 border-primary/40 pl-4 py-1 my-4 bg-primary/5 rounded-r-md text-text-muted italic", children: c })),
+                // Inline code
+                code: ({ children: c, className: cls }) => {
+                    const match = /language-(\w+)/.exec(cls ?? '');
+                    const language = match ? match[1] : null;
+                    const code = String(c).trimEnd();
+                    if (language) {
+                        return (jsxs("div", { className: "my-4 rounded-lg border border-border overflow-hidden", children: [jsx("div", { className: "flex items-center px-4 py-2 bg-surface border-b border-border", children: jsx("span", { className: "text-xs font-mono text-text-muted uppercase tracking-wide", children: language }) }), jsx(Highlight, { theme: prismTheme, code: code, language: language, children: ({ className: hlClass, style, tokens, getLineProps, getTokenProps }) => (jsx("pre", { className: cn('overflow-x-auto p-4 text-sm leading-relaxed m-0', hlClass), style: style, children: tokens.map((line, i) => (jsxs("div", { ...getLineProps({ line }), children: [showLineNumbers && (jsx("span", { className: "select-none pr-4 text-right inline-block w-8 opacity-40 text-xs", children: i + 1 })), line.map((token, key) => (jsx("span", { ...getTokenProps({ token }) }, key)))] }, i))) })) })] }));
+                    }
+                    return (jsx("code", { className: "inline rounded px-1.5 py-0.5 bg-surface-hover border border-border text-sm font-mono text-text", children: c }));
+                },
+                // Pre — handled by code above, suppress default pre wrapper
+                pre: ({ children: c }) => jsx(Fragment, { children: c }),
+                // Horizontal rule
+                hr: () => jsx("hr", { className: "my-6 border-border" }),
+                // Strong / em
+                strong: ({ children: c }) => jsx("strong", { className: "font-semibold text-text", children: c }),
+                em: ({ children: c }) => jsx("em", { className: "italic text-text", children: c }),
+                del: ({ children: c }) => jsx("del", { className: "line-through text-text-muted", children: c }),
+                // Table (GFM)
+                table: ({ children: c }) => (jsx("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border", children: jsx("table", { className: "w-full text-sm border-collapse", children: c }) })),
+                thead: ({ children: c }) => (jsx("thead", { className: "bg-surface-hover border-b border-border", children: c })),
+                tbody: ({ children: c }) => jsx("tbody", { children: c }),
+                tr: ({ children: c }) => (jsx("tr", { className: "border-b border-border last:border-0 hover:bg-surface-hover/50 transition-colors", children: c })),
+                th: ({ children: c }) => (jsx("th", { className: "px-4 py-2.5 text-left font-semibold text-text-muted whitespace-nowrap", children: c })),
+                td: ({ children: c }) => (jsx("td", { className: "px-4 py-2.5 text-text", children: c })),
+                // Task list items (GFM checkboxes)
+                input: ({ type, checked }) => {
+                    if (type === 'checkbox') {
+                        return (jsx("input", { type: "checkbox", checked: checked, readOnly: true, className: "mr-2 accent-primary" }));
+                    }
+                    return null;
+                },
+                // Image
+                img: ({ src, alt }) => (jsx("img", { src: src, alt: alt ?? '', className: "my-4 max-w-full rounded-lg border border-border" })),
+            }, children: children }) }));
+}
+
+function Collapsible({ title, children, defaultOpen = false, open: controlledOpen, onOpenChange, disabled = false, icon, variant = 'default', className, triggerClassName, contentClassName, }) {
+    const id = useId();
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const toggle = () => {
+        if (disabled)
+            return;
+        const next = !open;
+        setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    const variantClasses = {
+        default: '',
+        bordered: 'border border-border rounded-lg overflow-hidden',
+        filled: 'bg-surface rounded-lg overflow-hidden',
+    };
+    const triggerVariant = {
+        default: 'hover:bg-surface-hover rounded-md',
+        bordered: 'border-b border-border bg-surface-hover hover:bg-surface-active',
+        filled: 'hover:bg-surface-active',
+    };
+    return (jsxs("div", { className: cn(variantClasses[variant], className), children: [jsxs("button", { type: "button", id: `${id}-trigger`, "aria-expanded": open, "aria-controls": `${id}-content`, onClick: toggle, disabled: disabled, className: cn('w-full flex items-center justify-between gap-3 px-3 py-2.5 text-left', 'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus/40', 'disabled:opacity-50 disabled:cursor-not-allowed', triggerVariant[variant], triggerClassName), children: [jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [icon && jsx("span", { className: "flex-shrink-0 text-text-muted", children: icon }), jsx("span", { className: "text-sm font-medium text-text truncate", children: title })] }), jsx(ChevronDown, { size: 16, className: cn('flex-shrink-0 text-text-muted transition-transform duration-200', open && 'rotate-180') })] }), jsx("div", { id: `${id}-content`, role: "region", "aria-labelledby": `${id}-trigger`, className: cn('overflow-hidden transition-all duration-200', open ? 'max-h-[9999px] opacity-100' : 'max-h-0 opacity-0'), children: jsx("div", { className: cn('px-3 py-3', contentClassName), children: children }) })] }));
+}
+
+function TreeNode({ item, depth, indent, selectedId, selectedIds, expandedIds, onSelect, onToggle, multiSelect, }) {
+    const hasChildren = item.children && item.children.length > 0;
+    const isExpanded = expandedIds.includes(item.id);
+    const isSelected = multiSelect
+        ? (selectedIds ?? []).includes(item.id)
+        : selectedId === item.id;
+    return (jsxs("li", { role: "treeitem", "aria-expanded": hasChildren ? isExpanded : undefined, "aria-selected": isSelected, children: [jsxs("div", { className: cn('flex items-center gap-1.5 px-2 py-1 rounded-md cursor-pointer select-none', 'transition-colors text-sm', isSelected
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-text hover:bg-surface-hover', item.disabled && 'opacity-50 cursor-not-allowed pointer-events-none'), style: { paddingLeft: `${depth * indent + 8}px` }, onClick: () => {
+                    if (item.disabled)
+                        return;
+                    if (hasChildren)
+                        onToggle(item.id);
+                    onSelect?.(item.id, item);
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        if (item.disabled)
+                            return;
+                        if (hasChildren)
+                            onToggle(item.id);
+                        onSelect?.(item.id, item);
+                    }
+                }, tabIndex: item.disabled ? -1 : 0, role: "button", children: [hasChildren ? (jsx("span", { className: "flex-shrink-0 text-text-muted", children: isExpanded ? jsx(ChevronDown, { size: 14 }) : jsx(ChevronRight, { size: 14 }) })) : (jsx("span", { className: "w-3.5 flex-shrink-0" })), item.icon && (jsx("span", { className: cn('flex-shrink-0', isSelected ? 'text-primary-foreground' : 'text-text-muted'), children: item.icon })), jsx("span", { className: "flex-1 truncate", children: item.label }), item.badge && jsx("span", { className: "flex-shrink-0", children: item.badge })] }), hasChildren && isExpanded && (jsx("ul", { role: "group", className: "mt-0.5", children: item.children.map((child) => (jsx(TreeNode, { item: child, depth: depth + 1, indent: indent, selectedId: selectedId, selectedIds: selectedIds, expandedIds: expandedIds, onSelect: onSelect, onToggle: onToggle, multiSelect: multiSelect }, child.id))) }))] }));
+}
+function TreeView({ items, selectedId, onSelect, defaultExpandedIds = [], expandedIds: controlledExpandedIds, onExpandedChange, multiSelect = false, selectedIds, onMultiSelect, indent = 16, className, }) {
+    const [internalExpandedIds, setInternalExpandedIds] = useState(defaultExpandedIds);
+    const expandedIds = controlledExpandedIds ?? internalExpandedIds;
+    const handleToggle = (id) => {
+        const next = expandedIds.includes(id)
+            ? expandedIds.filter((e) => e !== id)
+            : [...expandedIds, id];
+        setInternalExpandedIds(next);
+        onExpandedChange?.(next);
+    };
+    const handleSelect = (id, item) => {
+        if (multiSelect && onMultiSelect) {
+            const current = selectedIds ?? [];
+            const next = current.includes(id)
+                ? current.filter((s) => s !== id)
+                : [...current, id];
+            onMultiSelect(next);
+        }
+        else {
+            onSelect?.(id, item);
+        }
+    };
+    return (jsx("ul", { role: "tree", className: cn('space-y-0.5', className), children: items.map((item) => (jsx(TreeNode, { item: item, depth: 0, indent: indent, selectedId: selectedId, selectedIds: selectedIds, expandedIds: expandedIds, onSelect: handleSelect, onToggle: handleToggle, multiSelect: multiSelect }, item.id))) }));
+}
+
+const alertVariants = cva('flex gap-3 rounded-lg border p-4 text-sm', {
+    variants: {
+        variant: {
+            info: 'bg-info-bg border-info/30 text-info',
+            success: 'bg-success-bg border-success/30 text-success',
+            warning: 'bg-warning-bg border-warning/30 text-warning',
+            error: 'bg-error-bg border-error/30 text-error',
+        },
+    },
+    defaultVariants: { variant: 'info' },
+});
+const icons$1 = {
+    info: Info,
+    success: CheckCircle,
+    warning: AlertTriangle,
+    error: AlertCircle,
+};
+function Alert({ variant = 'info', title, children, dismissible = false, onDismiss, icon, className, }) {
+    const [dismissed, setDismissed] = useState(false);
+    if (dismissed)
+        return null;
+    const IconComponent = icons$1[variant ?? 'info'];
+    const handleDismiss = () => {
+        setDismissed(true);
+        onDismiss?.();
+    };
+    return (jsxs("div", { role: "alert", className: cn(alertVariants({ variant }), className), children: [jsx("span", { className: "flex-shrink-0 mt-0.5", children: icon ?? jsx(IconComponent, { size: 16 }) }), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("p", { className: "font-semibold mb-0.5", children: title }), children && jsx("div", { className: "opacity-90", children: children })] }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "flex-shrink-0 flex items-center justify-center w-5 h-5 rounded hover:opacity-70 transition-opacity mt-0.5", "aria-label": "Dismiss alert", children: jsx(X, { size: 14 }) }))] }));
+}
+
+const variantClasses$2 = {
+    info: 'border-info/30 bg-info-bg text-info',
+    success: 'border-success/30 bg-success-bg text-success',
+    warning: 'border-warning/30 bg-warning-bg text-warning',
+    error: 'border-error/30 bg-error-bg text-error',
+};
+const icons = {
+    info: Info,
+    success: CheckCircle,
+    warning: AlertTriangle,
+    error: AlertCircle,
+};
+const positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4',
+};
+function ToastProvider({ toasts, onDismiss, position = 'bottom-right' }) {
+    return (jsxs(RadixToast.Provider, { swipeDirection: "right", children: [toasts.map((toast) => {
+                const variant = toast.variant ?? 'info';
+                const IconComponent = icons[variant];
+                return (jsxs(RadixToast.Root, { open: true, onOpenChange: (open) => { if (!open)
+                        onDismiss(toast.id); }, duration: toast.duration, className: cn('flex items-start gap-3 p-4 rounded-lg border shadow-lg w-80 max-w-[calc(100vw-2rem)]', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-right-full', variantClasses$2[variant]), children: [jsx("span", { className: "flex-shrink-0 mt-0.5", children: jsx(IconComponent, { size: 16 }) }), jsxs("div", { className: "flex-1 min-w-0", children: [toast.title && (jsx(RadixToast.Title, { className: "font-semibold text-sm", children: toast.title })), toast.description && (jsx(RadixToast.Description, { className: "text-sm opacity-90 mt-0.5", children: toast.description }))] }), jsx(RadixToast.Close, { asChild: true, children: jsx("button", { type: "button", className: "flex-shrink-0 flex items-center justify-center w-5 h-5 rounded hover:opacity-70 transition-opacity", "aria-label": "Close notification", children: jsx(X, { size: 14 }) }) })] }, toast.id));
+            }), jsx(RadixToast.Viewport, { className: cn('fixed flex flex-col gap-2 z-toast', positionClasses[position]) })] }));
+}
+
+const sizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+};
+const colorClasses$3 = {
+    primary: 'text-primary',
+    secondary: 'text-secondary',
+    white: 'text-white',
+    current: 'text-current',
+};
+function Spinner({ size = 'md', color = 'primary', label = 'Loading...', overlay = false, className }) {
+    const spinner = (jsxs("div", { role: "status", "aria-label": label, className: cn('inline-flex items-center justify-center', colorClasses$3[color], className), children: [jsx(Loader2, { size: sizeMap[size], className: "animate-spin" }), jsx("span", { className: "sr-only", children: label })] }));
+    if (overlay) {
+        return (jsx("div", { className: "fixed inset-0 flex items-center justify-center bg-overlay z-modal", children: spinner }));
+    }
+    return spinner;
+}
+
+function Skeleton({ variant = 'rect', width, height, lines = 1, className, animated = true, }) {
+    const base = cn('bg-surface-hover', animated && 'animate-pulse', variant === 'circle' && 'rounded-full', variant === 'text' && 'rounded', variant === 'rect' && 'rounded-md', className);
+    const style = {
+        width: width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : undefined,
+        height: height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : undefined,
+    };
+    if (variant === 'text' && lines > 1) {
+        return (jsx("div", { className: "flex flex-col gap-2", children: Array.from({ length: lines }).map((_, i) => (jsx("div", { className: cn(base, 'h-4'), style: { ...style, width: i === lines - 1 ? '75%' : '100%' } }, i))) }));
+    }
+    return (jsx("div", { className: cn(base, variant === 'text' && 'h-4', variant === 'circle' && 'w-10 h-10'), style: style }));
+}
+function SkeletonCard({ showAvatar = true, lines = 3, className }) {
+    return (jsxs("div", { className: cn('p-4 rounded-lg border border-border bg-surface space-y-3', className), children: [showAvatar && (jsxs("div", { className: "flex items-center gap-3", children: [jsx(Skeleton, { variant: "circle", width: 40, height: 40 }), jsxs("div", { className: "flex-1 space-y-2", children: [jsx(Skeleton, { variant: "text", width: "60%" }), jsx(Skeleton, { variant: "text", width: "40%" })] })] })), jsx(Skeleton, { variant: "text", lines: lines })] }));
+}
+
+const variantClasses$1 = {
+    primary: 'bg-primary',
+    success: 'bg-success',
+    error: 'bg-error',
+    warning: 'bg-warning',
+    info: 'bg-info',
+};
+const sizeClasses$7 = {
+    xs: 'h-1',
+    sm: 'h-1.5',
+    md: 'h-2.5',
+    lg: 'h-4',
+};
+function ProgressBar({ value = 0, max = 100, variant = 'primary', size = 'md', label, showValue = false, striped = false, animated = false, indeterminate = false, className, }) {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    return (jsxs("div", { className: cn('flex flex-col gap-1', className), children: [(label || showValue) && (jsxs("div", { className: "flex items-center justify-between", children: [label && jsx("span", { className: "text-sm font-medium text-text", children: label }), showValue && !indeterminate && (jsxs("span", { className: "text-xs text-text-muted", children: [Math.round(percentage), "%"] }))] })), jsx("div", { className: cn('w-full bg-surface-hover rounded-full overflow-hidden', sizeClasses$7[size]), role: "progressbar", "aria-valuenow": indeterminate ? undefined : value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label, children: jsx("div", { className: cn('h-full rounded-full transition-all duration-300', variantClasses$1[variant], striped && 'bg-stripes', indeterminate && 'animate-indeterminate w-1/3', !indeterminate && 'transition-[width]'), style: indeterminate ? undefined : { width: `${percentage}%` } }) })] }));
+}
+
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "reset", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ hasError: false, error: null });
+            }
+        });
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            if (this.props.fallback) {
+                if (typeof this.props.fallback === 'function') {
+                    return this.props.fallback(this.state.error, this.reset);
+                }
+                return this.props.fallback;
+            }
+            return (jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 rounded-lg border border-error/30 bg-error-bg text-error", children: [jsx(AlertCircle, { size: 32 }), jsxs("div", { className: "text-center", children: [jsx("h3", { className: "font-semibold text-base mb-1", children: "Something went wrong" }), jsx("p", { className: "text-sm opacity-80 max-w-sm", children: this.state.error.message })] }), jsxs("button", { type: "button", onClick: this.reset, className: "flex items-center gap-2 px-4 py-2 rounded-md border border-error/30 text-sm font-medium hover:bg-error/10 transition-colors", children: [jsx(RefreshCw, { size: 14 }), "Try again"] })] }));
+        }
+        return this.props.children;
+    }
+}
+
+const FullScreenLoaderContext = createContext(null);
+function FullScreenLoaderProvider({ children, defaultText = 'Loading…', defaultBlur = true, }) {
+    const [state, setState] = useState({
+        visible: false,
+        text: defaultText,
+        blur: defaultBlur,
+    });
+    const show = useCallback((options) => {
+        setState((prev) => ({
+            ...prev,
+            ...options,
+            text: options?.text ?? defaultText,
+            blur: options?.blur ?? defaultBlur,
+            visible: true,
+        }));
+    }, [defaultText, defaultBlur]);
+    const hide = useCallback(() => {
+        setState((prev) => ({ ...prev, visible: false }));
+    }, []);
+    const update = useCallback((options) => {
+        setState((prev) => ({ ...prev, ...options }));
+    }, []);
+    return (jsxs(FullScreenLoaderContext.Provider, { value: { show, hide, update }, children: [children, jsx(FullScreenLoader, { ...state })] }));
+}
+function useFullScreenLoader() {
+    const ctx = useContext(FullScreenLoaderContext);
+    if (!ctx) {
+        throw new Error('useFullScreenLoader must be used within a FullScreenLoaderProvider');
+    }
+    return ctx;
+}
+function FullScreenLoader({ visible = false, text = 'Loading…', icon, blur = true, className, }) {
+    if (!visible)
+        return null;
+    const content = (jsx("div", { className: cn('fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-4', blur ? 'backdrop-blur-sm bg-background/70' : 'bg-background/80', className), role: "status", "aria-live": "polite", "aria-label": text, children: jsxs("div", { className: "flex flex-col items-center gap-4 p-8 rounded-2xl bg-surface shadow-xl border border-border", children: [jsx("div", { className: "text-primary", children: icon ?? jsx(Spinner, { size: "xl" }) }), text && (jsx("p", { className: "text-sm font-medium text-text-muted animate-pulse", children: text }))] }) }));
+    return createPortal(content, document.body);
+}
+
+const sizeClasses$6 = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    full: 'max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]',
+};
+function Modal({ open, defaultOpen, onOpenChange, title, description, footer, size = 'md', showClose = true, closeOnOverlayClick = true, children, trigger, className, }) {
+    return (jsxs(RadixDialog.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [trigger && jsx(RadixDialog.Trigger, { asChild: true, children: trigger }), jsxs(RadixDialog.Portal, { children: [jsx(RadixDialog.Overlay, { className: cn('fixed inset-0 bg-overlay z-modal', 'data-[state=open]:animate-in data-[state=open]:fade-in-0', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0'), onClick: closeOnOverlayClick ? undefined : (e) => e.stopPropagation() }), jsxs(RadixDialog.Content, { className: cn('fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', 'w-full bg-surface rounded-lg shadow-xl border border-border', 'flex flex-col z-modal', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'focus:outline-none', sizeClasses$6[size], className), children: [(title || showClose) && (jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-border flex-shrink-0", children: [jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx(RadixDialog.Title, { className: "text-base font-semibold text-text", children: title })), description && (jsx(RadixDialog.Description, { className: "text-sm text-text-muted mt-0.5", children: description }))] }), showClose && (jsx(RadixDialog.Close, { asChild: true, children: jsx("button", { type: "button", className: "flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-md text-text-muted hover:text-text hover:bg-surface-hover transition-colors", "aria-label": "Close modal", children: jsx(X, { size: 16 }) }) }))] })), jsx("div", { className: "flex-1 overflow-auto px-6 py-4", children: children }), footer && (jsx("div", { className: "flex-shrink-0 px-6 py-4 border-t border-border", children: footer }))] })] })] }));
+}
+
+const sideClasses = {
+    left: 'left-0 top-0 bottom-0 h-full data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
+    right: 'right-0 top-0 bottom-0 h-full data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
+    top: 'top-0 left-0 right-0 w-full data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top',
+    bottom: 'bottom-0 left-0 right-0 w-full data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',
+};
+const sizeClasses$5 = {
+    left: { sm: 'w-64', md: 'w-80', lg: 'w-96', xl: 'w-[32rem]' },
+    right: { sm: 'w-64', md: 'w-80', lg: 'w-96', xl: 'w-[32rem]' },
+    top: { sm: 'h-48', md: 'h-64', lg: 'h-80', xl: 'h-96' },
+    bottom: { sm: 'h-48', md: 'h-64', lg: 'h-80', xl: 'h-96' },
+};
+function Drawer({ open, defaultOpen, onOpenChange, side = 'right', size = 'md', title, description, footer, showClose = true, children, trigger, className, }) {
+    return (jsxs(RadixDialog.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [trigger && jsx(RadixDialog.Trigger, { asChild: true, children: trigger }), jsxs(RadixDialog.Portal, { children: [jsx(RadixDialog.Overlay, { className: cn('fixed inset-0 bg-overlay z-sidebar', 'data-[state=open]:animate-in data-[state=open]:fade-in-0', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0') }), jsxs(RadixDialog.Content, { className: cn('fixed bg-surface shadow-xl border-border flex flex-col z-sidebar', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=open]:duration-300 data-[state=closed]:duration-200', 'focus:outline-none', sideClasses[side], sizeClasses$5[side][size], side === 'left' && 'border-r', side === 'right' && 'border-l', side === 'top' && 'border-b', side === 'bottom' && 'border-t', className), children: [(title || showClose) && (jsxs("div", { className: "flex items-start justify-between gap-4 px-5 py-4 border-b border-border flex-shrink-0", children: [jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx(RadixDialog.Title, { className: "text-base font-semibold text-text", children: title })), description && (jsx(RadixDialog.Description, { className: "text-sm text-text-muted mt-0.5", children: description }))] }), showClose && (jsx(RadixDialog.Close, { asChild: true, children: jsx("button", { type: "button", className: "flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-md text-text-muted hover:text-text hover:bg-surface-hover transition-colors", "aria-label": "Close drawer", children: jsx(X, { size: 16 }) }) }))] })), jsx("div", { className: cn('flex-1 overflow-auto p-5'), children: children }), footer && (jsx("div", { className: "flex-shrink-0 px-5 py-4 border-t border-border", children: footer }))] })] })] }));
+}
+
+function Tooltip({ content, children, placement = 'top', delay = 200, arrow = true, className, contentClassName, disabled = false, }) {
+    if (disabled)
+        return jsx(Fragment, { children: children });
+    return (jsx(RadixTooltip.Provider, { delayDuration: delay, children: jsxs(RadixTooltip.Root, { children: [jsx(RadixTooltip.Trigger, { asChild: true, className: className, children: children }), jsx(RadixTooltip.Portal, { children: jsxs(RadixTooltip.Content, { side: placement, sideOffset: 6, className: cn('z-tooltip px-2.5 py-1.5 rounded-md text-xs font-medium', 'bg-text text-surface shadow-md max-w-xs', 'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', contentClassName), children: [content, arrow && (jsx(RadixTooltip.Arrow, { className: "fill-text" }))] }) })] }) }));
+}
+
+function Popover({ content, children, placement = 'bottom', open, defaultOpen, onOpenChange, showClose = false, arrow = true, className, contentClassName, }) {
+    const [side, align] = placement.split('-');
+    return (jsxs(RadixPopover.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [jsx(RadixPopover.Trigger, { asChild: true, className: className, children: children }), jsx(RadixPopover.Portal, { children: jsxs(RadixPopover.Content, { side: side, align: align ?? 'center', sideOffset: 8, className: cn('z-dropdown bg-surface border border-border rounded-lg shadow-lg p-4 max-w-sm', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'focus:outline-none', contentClassName), children: [showClose && (jsx(RadixPopover.Close, { asChild: true, children: jsx("button", { type: "button", className: "absolute top-2 right-2 flex items-center justify-center w-6 h-6 rounded text-text-muted hover:text-text hover:bg-surface-hover transition-colors", "aria-label": "Close popover", children: jsx(X, { size: 14 }) }) })), content, arrow && jsx(RadixPopover.Arrow, { className: "fill-border" })] }) })] }));
+}
+
+const itemBase = cn('flex items-center gap-2 px-2 py-1.5 text-sm rounded-md cursor-pointer outline-none select-none', 'transition-colors', 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-text', 'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none');
+function renderItems(items) {
+    return items.map((item, i) => {
+        if (item.type === 'separator') {
+            return jsx(RadixContextMenu.Separator, { className: "my-1 h-px bg-border" }, i);
+        }
+        if (item.type === 'label') {
+            return (jsx(RadixContextMenu.Label, { className: "px-2 py-1 text-xs font-semibold text-text-muted uppercase tracking-wide", children: item.label }, i));
+        }
+        if (item.type === 'checkbox') {
+            return (jsxs(RadixContextMenu.CheckboxItem, { checked: item.checked, onCheckedChange: item.onCheckedChange, disabled: item.disabled, className: cn(itemBase, 'pl-7 relative', item.destructive && 'text-error'), children: [jsx(RadixContextMenu.ItemIndicator, { className: "absolute left-2", children: jsx(Check, { size: 12 }) }), item.label] }, i));
+        }
+        if (item.children && item.children.length > 0) {
+            return (jsxs(RadixContextMenu.Sub, { children: [jsxs(RadixContextMenu.SubTrigger, { disabled: item.disabled, className: cn(itemBase, item.destructive && 'text-error'), children: [item.icon && jsx("span", { className: "w-4 h-4 flex items-center", children: item.icon }), jsx("span", { className: "flex-1", children: item.label }), jsx(ChevronRight, { size: 12, className: "ml-auto text-text-muted" })] }), jsx(RadixContextMenu.Portal, { children: jsx(RadixContextMenu.SubContent, { className: "z-dropdown bg-surface border border-border rounded-lg shadow-lg p-1 min-w-[10rem]", sideOffset: 2, alignOffset: -4, children: renderItems(item.children) }) })] }, i));
+        }
+        return (jsxs(RadixContextMenu.Item, { disabled: item.disabled, onSelect: item.onClick, className: cn(itemBase, item.destructive ? 'text-error' : 'text-text'), children: [item.icon && jsx("span", { className: "w-4 h-4 flex items-center", children: item.icon }), jsx("span", { className: "flex-1", children: item.label }), item.shortcut && (jsx("span", { className: "ml-auto text-xs text-text-muted", children: item.shortcut }))] }, i));
+    });
+}
+function ContextMenu({ items, children, className }) {
+    return (jsxs(RadixContextMenu.Root, { children: [jsx(RadixContextMenu.Trigger, { asChild: true, className: className, children: children }), jsx(RadixContextMenu.Portal, { children: jsx(RadixContextMenu.Content, { className: cn('z-dropdown bg-surface border border-border rounded-lg shadow-lg p-1 min-w-[10rem]', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0'), children: renderItems(items) }) })] }));
+}
+
+const ConfirmDialogContext = createContext(null);
+function useConfirm() {
+    const ctx = useContext(ConfirmDialogContext);
+    if (!ctx) {
+        throw new Error('useConfirm must be used within a ConfirmDialogProvider');
+    }
+    return ctx.confirm;
+}
+const variantConfig = {
+    default: {
+        icon: jsx(Info, { size: 20 }),
+        iconBg: 'bg-primary/10 text-primary',
+        confirmVariant: 'primary',
+        defaultTitle: 'Are you sure?',
+        defaultConfirm: 'Confirm',
+    },
+    danger: {
+        icon: jsx(Trash2, { size: 20 }),
+        iconBg: 'bg-error/10 text-error',
+        confirmVariant: 'danger',
+        defaultTitle: 'Delete this item?',
+        defaultConfirm: 'Delete',
+    },
+    warning: {
+        icon: jsx(AlertTriangle, { size: 20 }),
+        iconBg: 'bg-warning/10 text-warning',
+        confirmVariant: 'primary',
+        confirmClassName: 'bg-warning hover:bg-warning/90 text-white',
+        defaultTitle: 'Are you sure?',
+        defaultConfirm: 'Proceed',
+    },
+};
+function ConfirmDialogProvider({ children }) {
+    const [state, setState] = useState({
+        open: false,
+        resolve: null,
+    });
+    const confirm = useCallback((options) => {
+        return new Promise((resolve) => {
+            setState({
+                open: true,
+                resolve,
+                ...options,
+            });
+        });
+    }, []);
+    const handleResponse = (value) => {
+        state.resolve?.(value);
+        setState((prev) => ({ ...prev, open: false, resolve: null }));
+    };
+    const variant = state.variant ?? 'default';
+    const config = variantConfig[variant];
+    const title = state.title ?? config.defaultTitle;
+    const description = state.description;
+    const confirmLabel = state.confirmLabel ?? config.defaultConfirm;
+    const cancelLabel = state.cancelLabel ?? 'Cancel';
+    return (jsxs(ConfirmDialogContext.Provider, { value: { confirm }, children: [children, jsx(RadixDialog.Root, { open: state.open, onOpenChange: (open) => { if (!open)
+                    handleResponse(false); }, children: jsxs(RadixDialog.Portal, { children: [jsx(RadixDialog.Overlay, { className: "fixed inset-0 z-[1000] bg-black/40 backdrop-blur-sm animate-in fade-in-0" }), jsxs(RadixDialog.Content, { className: cn('fixed z-[1001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'w-full max-w-md bg-surface rounded-xl shadow-2xl border border-border p-6', 'animate-in fade-in-0 zoom-in-95'), "aria-describedby": description ? 'confirm-desc' : undefined, children: [jsxs("div", { className: "flex items-start gap-4", children: [jsx("div", { className: cn('flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center', config.iconBg), children: config.icon }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx(RadixDialog.Title, { className: "text-base font-semibold text-text", children: title }), description && (jsx("p", { id: "confirm-desc", className: "mt-1 text-sm text-text-muted", children: description }))] }), jsx("button", { onClick: () => handleResponse(false), className: "flex-shrink-0 text-text-muted hover:text-text transition-colors focus:outline-none", "aria-label": "Close", children: jsx(X, { size: 16 }) })] }), jsxs("div", { className: "flex items-center justify-end gap-3 mt-6", children: [jsx(Button, { variant: "outline", size: "sm", onClick: () => handleResponse(false), children: cancelLabel }), jsx(Button, { variant: config.confirmVariant, size: "sm", className: config.confirmClassName, onClick: () => handleResponse(true), children: confirmLabel })] })] })] }) })] }));
+}
+function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel, cancelLabel, variant = 'default', }) {
+    const config = variantConfig[variant];
+    return (jsx(RadixDialog.Root, { open: open, onOpenChange: (o) => { if (!o)
+            onCancel(); }, children: jsxs(RadixDialog.Portal, { children: [jsx(RadixDialog.Overlay, { className: "fixed inset-0 z-[1000] bg-black/40 backdrop-blur-sm animate-in fade-in-0" }), jsxs(RadixDialog.Content, { className: cn('fixed z-[1001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'w-full max-w-md bg-surface rounded-xl shadow-2xl border border-border p-6', 'animate-in fade-in-0 zoom-in-95'), "aria-describedby": description ? 'confirm-desc-static' : undefined, children: [jsxs("div", { className: "flex items-start gap-4", children: [jsx("div", { className: cn('flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center', config.iconBg), children: config.icon }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx(RadixDialog.Title, { className: "text-base font-semibold text-text", children: title ?? config.defaultTitle }), description && (jsx("p", { id: "confirm-desc-static", className: "mt-1 text-sm text-text-muted", children: description }))] }), jsx("button", { onClick: onCancel, className: "flex-shrink-0 text-text-muted hover:text-text transition-colors focus:outline-none", "aria-label": "Close", children: jsx(X, { size: 16 }) })] }), jsxs("div", { className: "flex items-center justify-end gap-3 mt-6", children: [jsx(Button, { variant: "outline", size: "sm", onClick: onCancel, children: cancelLabel ?? 'Cancel' }), jsx(Button, { variant: config.confirmVariant, size: "sm", className: config.confirmClassName, onClick: onConfirm, children: confirmLabel ?? config.defaultConfirm })] })] })] }) }));
+}
+
+const sizeClasses$4 = {
+    sm: 'text-[10px] px-1 py-0.5 min-w-[18px]',
+    md: 'text-xs px-1.5 py-0.5 min-w-[22px]',
+    lg: 'text-sm px-2 py-1 min-w-[28px]',
+};
+function Kbd({ children, size = 'md', className }) {
+    return (jsx("kbd", { className: cn('inline-flex items-center justify-center rounded border font-mono font-medium', 'bg-surface-hover border-border text-text-muted', 'shadow-[0_1px_0_1px_var(--color-border)]', sizeClasses$4[size], className), children: children }));
+}
+
+function highlight(text, query) {
+    if (!query.trim())
+        return jsx(Fragment, { children: text });
+    const idx = text.toLowerCase().indexOf(query.toLowerCase());
+    if (idx === -1)
+        return jsx(Fragment, { children: text });
+    return (jsxs(Fragment, { children: [text.slice(0, idx), jsx("mark", { className: "bg-primary/20 text-primary rounded-sm", children: text.slice(idx, idx + query.length) }), text.slice(idx + query.length)] }));
+}
+function CommandPalette({ open, onClose, items = [], groups = [], placeholder = 'Search commands…', emptyMessage = 'No results found.', loading = false, onSearch, maxHeight = 400, className, }) {
+    const id = useId();
+    const [query, setQuery] = useState('');
+    const [activeIndex, setActiveIndex] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    // Flatten all items for keyboard nav
+    const allItems = React.useMemo(() => {
+        const flatGroups = groups.flatMap((g) => g.items.filter((item) => !item.disabled &&
+            (item.label.toLowerCase().includes(query.toLowerCase()) ||
+                item.description?.toLowerCase().includes(query.toLowerCase()))));
+        const flatItems = items.filter((item) => !item.disabled &&
+            (item.label.toLowerCase().includes(query.toLowerCase()) ||
+                item.description?.toLowerCase().includes(query.toLowerCase())));
+        return [...flatItems, ...flatGroups];
+    }, [items, groups, query]);
+    const filteredGroups = React.useMemo(() => {
+        if (groups.length === 0)
+            return [];
+        return groups
+            .map((g) => ({
+            ...g,
+            items: g.items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) ||
+                item.description?.toLowerCase().includes(query.toLowerCase())),
+        }))
+            .filter((g) => g.items.length > 0);
+    }, [groups, query]);
+    const filteredItems = React.useMemo(() => {
+        return items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) ||
+            item.description?.toLowerCase().includes(query.toLowerCase()));
+    }, [items, query]);
+    const hasResults = filteredItems.length > 0 || filteredGroups.length > 0;
+    useEffect(() => {
+        if (open) {
+            setQuery('');
+            setActiveIndex(0);
+            setTimeout(() => inputRef.current?.focus(), 10);
+        }
+    }, [open]);
+    useEffect(() => {
+        setActiveIndex(0);
+    }, [query]);
+    useEffect(() => {
+        onSearch?.(query);
+    }, [query, onSearch]);
+    const handleSelect = useCallback((item) => {
+        if (item.disabled)
+            return;
+        item.onSelect();
+        onClose();
+    }, [onClose]);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            onClose();
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveIndex((i) => Math.min(i + 1, allItems.length - 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIndex((i) => Math.max(i - 1, 0));
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const item = allItems[activeIndex];
+            if (item)
+                handleSelect(item);
+        }
+    };
+    // Scroll active item into view
+    useEffect(() => {
+        const el = listRef.current?.querySelector(`[data-active="true"]`);
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [activeIndex]);
+    if (!open)
+        return null;
+    if (typeof document === 'undefined')
+        return null;
+    let globalIndex = 0;
+    const renderItem = (item) => {
+        const idx = globalIndex++;
+        const isActive = idx === activeIndex;
+        return (jsxs("div", { "data-active": isActive, role: "option", "aria-selected": isActive, "aria-disabled": item.disabled, onClick: () => !item.disabled && handleSelect(item), onMouseEnter: () => setActiveIndex(idx), className: cn('flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer transition-colors', isActive ? 'bg-primary text-primary-foreground' : 'text-text hover:bg-surface-hover', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none'), children: [item.icon && (jsx("span", { className: cn('flex-shrink-0', isActive ? 'text-primary-foreground' : 'text-text-muted'), children: item.icon })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium truncate", children: highlight(item.label, query) }), item.description && (jsx("div", { className: cn('text-xs truncate', isActive ? 'text-primary-foreground/70' : 'text-text-muted'), children: highlight(item.description, query) }))] }), item.shortcut && (jsx("div", { className: "flex items-center gap-1 flex-shrink-0", children: item.shortcut.map((k, i) => (jsx(Kbd, { size: "sm", children: k }, i))) })), jsx(ChevronRight, { size: 14, className: cn('flex-shrink-0', isActive ? 'text-primary-foreground/70' : 'text-text-muted') })] }, item.id));
+    };
+    return createPortal(jsxs("div", { className: "fixed inset-0 z-[9999] flex items-start justify-center pt-[15vh] px-4", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: (e) => e.target === e.currentTarget && onClose(), children: [jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }), jsxs("div", { className: cn('relative w-full max-w-lg bg-surface rounded-xl shadow-2xl border border-border overflow-hidden', className), onKeyDown: handleKeyDown, children: [jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-border", children: [loading ? (jsx(Loader2, { size: 18, className: "text-text-muted animate-spin flex-shrink-0" })) : (jsx(Search, { size: 18, className: "text-text-muted flex-shrink-0" })), jsx("input", { ref: inputRef, id: `${id}-input`, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": `${id}-list`, "aria-autocomplete": "list", value: query, onChange: (e) => setQuery(e.target.value), placeholder: placeholder, className: "flex-1 bg-transparent text-text placeholder:text-text-muted outline-none text-sm" }), query && (jsx("button", { type: "button", onClick: () => setQuery(''), className: "text-text-muted hover:text-text transition-colors", "aria-label": "Clear search", children: jsx(X, { size: 16 }) })), jsx(Kbd, { size: "sm", children: "Esc" })] }), jsx("div", { ref: listRef, id: `${id}-list`, role: "listbox", className: "overflow-y-auto p-2", style: { maxHeight }, children: loading && !hasResults ? (jsxs("div", { className: "flex items-center justify-center py-8 text-text-muted text-sm gap-2", children: [jsx(Loader2, { size: 16, className: "animate-spin" }), "Searching\u2026"] })) : !hasResults ? (jsx("div", { className: "py-8 text-center text-text-muted text-sm", children: emptyMessage })) : (jsxs(Fragment, { children: [filteredItems.map(renderItem), filteredGroups.map((group) => (jsxs("div", { children: [jsx("div", { className: "px-3 py-1.5 text-xs font-semibold text-text-muted uppercase tracking-wider", children: group.label }), group.items.map(renderItem)] }, group.id)))] })) }), jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-t border-border text-xs text-text-muted", children: [jsxs("span", { className: "flex items-center gap-1", children: [jsx(Kbd, { size: "sm", children: "\u2191" }), jsx(Kbd, { size: "sm", children: "\u2193" }), " Navigate"] }), jsxs("span", { className: "flex items-center gap-1", children: [jsx(Kbd, { size: "sm", children: "\u21B5" }), " Select"] }), jsxs("span", { className: "flex items-center gap-1", children: [jsx(Kbd, { size: "sm", children: "Esc" }), " Close"] })] })] })] }), document.body);
+}
+function useCommandPalette() {
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        const handler = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault();
+                setOpen((v) => !v);
+            }
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, []);
+    return { open, setOpen, toggle: () => setOpen((v) => !v) };
+}
+
+const defaultSizeByLevel = {
+    1: '4xl',
+    2: '3xl',
+    3: '2xl',
+    4: 'xl',
+    5: 'lg',
+    6: 'md',
+};
+const sizeClasses$3 = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+};
+const weightClasses$1 = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
+const colorClasses$2 = {
+    default: 'text-text',
+    muted: 'text-text-muted',
+    primary: 'text-primary',
+    error: 'text-error',
+    success: 'text-success',
+    warning: 'text-warning',
+};
+function Heading({ level = 2, size, weight = 'bold', truncate = false, color = 'default', className, children, ...props }) {
+    const Tag = `h${level}`;
+    const resolvedSize = size ?? defaultSizeByLevel[level];
+    return (jsx(Tag, { className: cn('font-base leading-tight', sizeClasses$3[resolvedSize], weightClasses$1[weight], colorClasses$2[color], truncate && 'truncate', className), ...props, children: children }));
+}
+
+const sizeClasses$2 = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+};
+const weightClasses = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
+const colorClasses$1 = {
+    default: 'text-text',
+    muted: 'text-text-muted',
+    disabled: 'text-text-disabled',
+    primary: 'text-primary',
+    error: 'text-error',
+    success: 'text-success',
+    warning: 'text-warning',
+    inherit: 'text-inherit',
+};
+const clampClasses = {
+    1: 'line-clamp-1',
+    2: 'line-clamp-2',
+    3: 'line-clamp-3',
+    4: 'line-clamp-4',
+    5: 'line-clamp-5',
+};
+function Text({ as: Tag = 'p', size = 'base', weight = 'normal', color = 'default', truncate = false, clamp, italic = false, underline = false, className, children, ...props }) {
+    return (jsx(Tag, { className: cn('font-base leading-normal', sizeClasses$2[size], weightClasses[weight], colorClasses$1[color], truncate && 'truncate', clamp && clampClasses[clamp], italic && 'italic', underline && 'underline underline-offset-2', className), ...props, children: children }));
+}
+
+const sizeClasses$1 = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+};
+function Label({ required, optional, size = 'md', className, children, ...props }) {
+    return (jsxs(RadixLabel.Root, { className: cn('font-medium text-text leading-none cursor-default', sizeClasses$1[size], className), ...props, children: [children, required && jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" }), optional && jsx("span", { className: "text-text-muted ml-1 font-normal", children: "(optional)" })] }));
+}
+
+function Code({ block = false, language = 'tsx', theme = 'dark', showLineNumbers = false, copyable = true, filename, className, children, ...props }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = () => {
+        const text = typeof children === 'string' ? children : String(children ?? '');
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    };
+    if (block) {
+        const code = typeof children === 'string' ? children : String(children ?? '');
+        const prismTheme = theme === 'dark' ? themes.oneDark : themes.oneLight;
+        return (jsxs("div", { className: cn('w-full rounded-lg border border-border overflow-hidden', className), children: [(filename || copyable) && (jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-surface border-b border-border", children: [filename ? (jsx("span", { className: "text-xs font-mono text-text-muted", children: filename })) : (jsx("span", { className: "text-xs font-mono text-text-muted uppercase tracking-wide", children: language })), copyable && (jsxs("button", { type: "button", onClick: handleCopy, className: "flex items-center gap-1.5 text-xs text-text-muted hover:text-text transition-colors", "aria-label": "Copy code", children: [copied ? jsx(Check, { size: 13, className: "text-success" }) : jsx(Copy, { size: 13 }), copied ? 'Copied!' : 'Copy'] }))] })), jsx(Highlight, { theme: prismTheme, code: code.trimEnd(), language: language, children: ({ className: hlClass, style, tokens, getLineProps, getTokenProps }) => (jsx("pre", { className: cn('overflow-x-auto p-4 text-sm leading-relaxed m-0', hlClass), style: style, children: tokens.map((line, i) => (jsxs("div", { ...getLineProps({ line }), children: [showLineNumbers && (jsx("span", { className: "select-none pr-4 text-right inline-block w-8 opacity-40 text-xs", children: i + 1 })), line.map((token, key) => (jsx("span", { ...getTokenProps({ token }) }, key)))] }, i))) })) })] }));
+    }
+    return (jsx("code", { className: cn('inline rounded px-1.5 py-0.5 bg-surface-hover border border-border', 'text-sm font-mono text-text', className), ...props, children: children }));
+}
+
+const underlineClasses = {
+    always: 'underline underline-offset-2',
+    hover: 'hover:underline underline-offset-2',
+    none: 'no-underline',
+};
+const colorClasses = {
+    primary: 'text-primary hover:text-primary-hover',
+    text: 'text-text hover:text-text-muted',
+    muted: 'text-text-muted hover:text-text',
+    inherit: 'text-inherit',
+};
+function Link({ external = false, underline = 'hover', color = 'primary', showExternalIcon = true, className, children, target, rel, ...props }) {
+    const isExternal = external || target === '_blank';
+    return (jsxs("a", { target: isExternal ? '_blank' : target, rel: isExternal ? 'noopener noreferrer' : rel, className: cn('inline-flex items-center gap-1 transition-colors cursor-pointer', colorClasses[color], underlineClasses[underline], className), ...props, children: [children, isExternal && showExternalIcon && (jsx(ExternalLink, { size: 12, className: "flex-shrink-0 opacity-70", "aria-hidden": "true" }))] }));
+}
+
+const sizeClasses = {
+    sm: 'h-7 px-2 text-xs gap-1',
+    md: 'h-8 px-2.5 text-sm gap-1.5',
+    lg: 'h-10 px-3 text-sm gap-2',
+};
+const iconSize = { sm: 12, md: 14, lg: 16 };
+const variantClasses = {
+    ghost: 'bg-transparent hover:bg-surface-hover text-text-muted hover:text-text',
+    outline: 'border border-border bg-transparent hover:bg-surface-hover text-text-muted hover:text-text',
+    solid: 'bg-surface-hover hover:bg-surface-active text-text border border-border',
+};
+function CopyButton({ value, size = 'md', variant = 'ghost', label, copiedLabel = 'Copied!', timeout = 2000, onCopy, className, disabled = false, }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+        if (disabled || copied)
+            return;
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopy?.(value);
+            setTimeout(() => setCopied(false), timeout);
+        }
+        catch {
+            // fallback for older browsers
+            const el = document.createElement('textarea');
+            el.value = value;
+            document.body.appendChild(el);
+            el.select();
+            document.execCommand('copy');
+            document.body.removeChild(el);
+            setCopied(true);
+            onCopy?.(value);
+            setTimeout(() => setCopied(false), timeout);
+        }
+    };
+    return (jsx("button", { type: "button", onClick: handleCopy, disabled: disabled, "aria-label": copied ? copiedLabel : (label ?? 'Copy to clipboard'), className: cn('inline-flex items-center justify-center rounded-md font-medium transition-all', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus/40', 'disabled:opacity-50 disabled:cursor-not-allowed', sizeClasses[size], variantClasses[variant], copied && 'text-success', className), children: copied ? (jsxs(Fragment, { children: [jsx(Check, { size: iconSize[size] }), label && jsx("span", { children: copiedLabel })] })) : (jsxs(Fragment, { children: [jsx(Copy, { size: iconSize[size] }), label && jsx("span", { children: label })] })) }));
+}
+
+export { Alert, AppShell, Avatar, AvatarGroup, Badge, BadgeAnchor, Box, Breadcrumb, Button, Card, Checkbox, ChipSelect, Code, Collapsible, CommandPalette, ConfirmDialog, ConfirmDialogProvider, Container, ContextMenu, CopyButton, DEFAULT_COUNTRY_CODES, DataTable, DatePicker, Divider, Drawer, EmptyState, ErrorBoundary, FileUpload, FormField, FullScreenLoader, FullScreenLoaderProvider, Grid, Heading, Icon, IconButton, Image, JSONForm, Kbd, Label, Link, List, ListItem, MarkdownReader, Modal, MultiSelect, Navbar, NumberInput, OTPInput, Pagination, PhoneInput, Popover, ProgressBar, RadioGroup, Rating, SVG, SearchSelect, Select, Sidebar, Skeleton, SkeletonCard, Slider, Spacer, Spinner, Stack, Stat, StepIndicator, Switch, Table, Tabs, TabsContent, Tag, TagInput, Text, TextArea, TextField, ThemeProvider, Timeline, ToastProvider, Tooltip, TreeView, buttonVariants, cn, useClickOutside, useClipboard, useCommandPalette, useConfirm, useDebounce, useFullScreenLoader, useIntersectionObserver, useKeyboard, useLocalStorage, useMediaQuery, useTheme, useToast, useWindowSize, v };
+//# sourceMappingURL=index.esm.js.map