@matheusrizzati/ui 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,23 +1,96 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { forwardRef, createContext, useState, useCallback, useContext } from 'react';
+import React26, { createContext, forwardRef, useRef, useEffect, useState, useMemo, useCallback, useContext } from 'react';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as Dialog from '@radix-ui/react-dialog';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as PopoverPrimitive3 from '@radix-ui/react-popover';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
 // src/utils/cn.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var ThemeContext = createContext(void 0);
+function getSystemTheme() {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "rizhel-theme",
+  forcedTheme
+}) {
+  const [theme, setThemeState] = useState(() => {
+    if (forcedTheme) return forcedTheme;
+    if (typeof window === "undefined") return defaultTheme;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "light" || stored === "dark" || stored === "system") {
+        return stored;
+      }
+    } catch {
+    }
+    return defaultTheme;
+  });
+  const resolvedTheme = useMemo(() => {
+    if (forcedTheme) return forcedTheme;
+    if (theme === "system") return getSystemTheme();
+    return theme;
+  }, [theme, forcedTheme]);
+  const setTheme = useCallback(
+    (newTheme) => {
+      if (forcedTheme) return;
+      setThemeState(newTheme);
+      try {
+        localStorage.setItem(storageKey, newTheme);
+      } catch {
+      }
+    },
+    [forcedTheme, storageKey]
+  );
+  const toggleTheme = useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setTheme]);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (resolvedTheme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, [resolvedTheme]);
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => setThemeState("system");
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [theme]);
+  const value = useMemo(
+    () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
+    [theme, resolvedTheme, setTheme, toggleTheme]
+  );
+  return React26.createElement(ThemeContext.Provider, { value }, children);
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a <ThemeProvider>");
+  }
+  return context;
+}
 var buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2",
     "font-medium whitespace-nowrap select-none",
     "transition-all duration-[var(--transition-fast)]",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-[var(--ring-offset)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg)]",
     "disabled:pointer-events-none disabled:opacity-50",
-    "active:scale-[0.97]",
+    "active:scale-[0.98]",
     "cursor-pointer"
   ],
   {
@@ -26,28 +99,29 @@ var buttonVariants = cva(
         primary: [
           "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
           "hover:bg-[var(--color-primary-hover)]",
-          "shadow-[var(--shadow-sm)]"
+          "shadow-[0_1px_2px_0_rgba(0,0,0,0.4),0_0_0_1px_rgba(255,255,255,0.1)_inset]",
+          "hover:shadow-[0_0_20px_-5px_var(--color-primary-500),0_0_0_1px_rgba(255,255,255,0.1)_inset]",
+          "transition-all duration-300"
         ],
         secondary: [
           "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
-          "border border-[var(--color-border)]",
-          "hover:bg-[var(--color-surface-hover)] hover:border-[var(--color-border-hover)]"
+          "border border-[var(--color-slate-700)] shadow-sm",
+          "hover:bg-[var(--color-slate-800)] hover:border-[var(--color-slate-600)]"
         ],
         ghost: [
           "text-[var(--color-text-secondary)]",
-          "hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
+          "hover:bg-[var(--color-slate-800)/50] hover:text-[var(--color-text-primary)]"
         ],
         danger: [
-          "bg-[var(--color-danger)] text-white",
-          "hover:brightness-110",
-          "shadow-[var(--shadow-sm)]"
+          "bg-[var(--color-danger)] text-white shadow-sm",
+          "hover:brightness-110 hover:shadow-[0_0_15px_-3px_var(--color-danger)]"
         ]
       },
       size: {
         sm: "h-8 px-3 text-[var(--text-xs)] rounded-[var(--radius-sm)]",
-        md: "h-9 px-4 text-[var(--text-sm)] rounded-[var(--radius)]",
-        lg: "h-11 px-6 text-[var(--text-base)] rounded-[var(--radius-md)]",
-        icon: "h-9 w-9 rounded-[var(--radius)]"
+        md: "h-10 px-4 text-[var(--text-sm)] rounded-[var(--radius)]",
+        lg: "h-12 px-6 text-[var(--text-base)] rounded-[var(--radius-md)]",
+        icon: "h-10 w-10 rounded-[var(--radius)]"
       }
     },
     defaultVariants: {
@@ -107,11 +181,11 @@ Button.displayName = "Button";
 var inputVariants = cva(
   [
     "w-full bg-[var(--color-surface)] text-[var(--color-text-primary)]",
-    "border border-[var(--color-border)]",
+    "border border-[var(--color-slate-700)] shadow-sm",
     "placeholder:text-[var(--color-text-muted)]",
     "transition-all duration-[var(--transition-fast)]",
-    "focus:outline-none focus:ring-2 focus:ring-[var(--ring-color)] focus:border-[var(--color-primary)]",
-    "hover:border-[var(--color-border-hover)]",
+    "focus:outline-none focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)] focus:shadow-[0_0_0_1px_var(--color-primary),0_0_15px_-3px_var(--color-primary-500)]",
+    "hover:border-[var(--color-slate-600)]",
     "disabled:opacity-50 disabled:cursor-not-allowed",
     "font-[var(--font-sans)]"
   ],
@@ -119,12 +193,12 @@ var inputVariants = cva(
     variants: {
       inputSize: {
         sm: "h-8 px-3 text-[var(--text-xs)] rounded-[var(--radius-sm)]",
-        md: "h-9 px-3 text-[var(--text-sm)] rounded-[var(--radius)]",
-        lg: "h-11 px-4 text-[var(--text-base)] rounded-[var(--radius-md)]"
+        md: "h-10 px-3 text-[var(--text-sm)] rounded-[var(--radius)]",
+        lg: "h-12 px-4 text-[var(--text-base)] rounded-[var(--radius-md)]"
       },
       state: {
         default: "",
-        error: "border-[var(--color-danger)] focus:ring-[var(--color-danger)]/30"
+        error: "border-[var(--color-danger)] focus:ring-[var(--color-danger)] focus:shadow-[0_0_0_1px_var(--color-danger),0_0_15px_-3px_var(--color-danger)]"
       }
     },
     defaultVariants: {
@@ -146,6 +220,7 @@ var Input = forwardRef(
     error,
     startIcon,
     endIcon,
+    onClear,
     id,
     ...props
   }, ref) => {
@@ -163,13 +238,25 @@ var Input = forwardRef(
             className: cn(
               inputVariants({ inputSize, state: effectiveState }),
               startIcon && "pl-9",
-              endIcon && "pr-9",
+              (endIcon || onClear) && "pr-9",
               className
             ),
             ...props
           }
         ),
-        endIcon && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]", children: endIcon })
+        onClear && props.value ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: onClear,
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer p-0.5 rounded-[var(--radius-sm)]",
+            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        ) : endIcon ? /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]", children: endIcon }) : null
       ] }),
       error && /* @__PURE__ */ jsx("p", { className: errorStyles, children: error }),
       !error && helperText && /* @__PURE__ */ jsx("p", { className: helperStyles, children: helperText })
@@ -177,159 +264,1181 @@ var Input = forwardRef(
   }
 );
 Input.displayName = "Input";
-var cardVariants = cva(
+var textareaVariants = cva(
   [
-    "rounded-[var(--radius-lg)]",
-    "transition-all duration-[var(--transition-base)]"
+    "w-full bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+    "border border-[var(--color-border)]",
+    "placeholder:text-[var(--color-text-muted)]",
+    "transition-all duration-[var(--transition-fast)]",
+    "focus:outline-none focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)]",
+    "hover:border-[var(--color-border-hover)]",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "font-[var(--font-sans)]",
+    "resize-y min-h-[80px]"
   ],
   {
     variants: {
-      variant: {
-        elevated: [
-          "bg-[var(--color-surface)] border border-[var(--color-border)]",
-          "shadow-[var(--shadow-md)]"
-        ],
-        outlined: [
-          "bg-transparent border border-[var(--color-border)]"
-        ],
-        ghost: [
-          "bg-[var(--color-surface)]/50"
-        ]
+      inputSize: {
+        sm: "px-3 py-2 text-[var(--text-xs)] rounded-[var(--radius-sm)]",
+        md: "px-3 py-2.5 text-[var(--text-sm)] rounded-[var(--radius)]",
+        lg: "px-4 py-3 text-[var(--text-base)] rounded-[var(--radius-md)]"
       },
-      hoverable: {
-        true: "hover:border-[var(--color-border-hover)] hover:shadow-[var(--shadow-lg)] cursor-pointer",
-        false: ""
+      state: {
+        default: "",
+        error: "border-[var(--color-danger)] focus:ring-[var(--color-danger)]"
       }
     },
     defaultVariants: {
-      variant: "elevated",
-      hoverable: false
+      inputSize: "md",
+      state: "default"
     }
   }
 );
-var cardHeaderStyles = "px-[var(--space-lg)] pt-[var(--space-lg)] pb-[var(--space-sm)]";
-var cardBodyStyles = "px-[var(--space-lg)] py-[var(--space-md)]";
-var cardFooterStyles = "px-[var(--space-lg)] pt-[var(--space-sm)] pb-[var(--space-lg)] border-t border-[var(--color-border)]";
-var Card = forwardRef(
-  ({ className, variant, hoverable, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardVariants({ variant, hoverable }), className),
-      ...props
-    }
-  )
+var labelStyles2 = "block text-[var(--text-sm)] font-medium text-[var(--color-text-secondary)] mb-1.5";
+var helperStyles2 = "mt-1.5 text-[var(--text-xs)] text-[var(--color-text-muted)]";
+var errorStyles2 = "mt-1.5 text-[var(--text-xs)] text-[var(--color-danger)]";
+var counterStyles = "mt-1.5 text-[var(--text-xs)] text-[var(--color-text-muted)] text-right";
+var Textarea = forwardRef(
+  ({
+    className,
+    inputSize,
+    state,
+    label,
+    helperText,
+    error,
+    autoResize,
+    showCount,
+    maxLength,
+    id,
+    value,
+    defaultValue,
+    onChange,
+    ...props
+  }, ref) => {
+    const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+    const effectiveState = error ? "error" : state;
+    const internalRef = useRef(null);
+    const textareaRef = ref || internalRef;
+    useEffect(() => {
+      if (autoResize && textareaRef.current) {
+        const el = textareaRef.current;
+        el.style.height = "auto";
+        el.style.height = el.scrollHeight + "px";
+      }
+    }, [autoResize, value, defaultValue, textareaRef]);
+    const handleChange = (e) => {
+      if (autoResize) {
+        e.target.style.height = "auto";
+        e.target.style.height = e.target.scrollHeight + "px";
+      }
+      onChange?.(e);
+    };
+    const currentLength = typeof value === "string" ? value.length : 0;
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: labelStyles2, children: label }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          id: inputId,
+          className: cn(
+            textareaVariants({ inputSize, state: effectiveState }),
+            autoResize && "resize-none overflow-hidden",
+            className
+          ),
+          value,
+          defaultValue,
+          maxLength,
+          onChange: handleChange,
+          rows: props.rows || 3,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          error && /* @__PURE__ */ jsx("p", { className: errorStyles2, children: error }),
+          !error && helperText && /* @__PURE__ */ jsx("p", { className: helperStyles2, children: helperText })
+        ] }),
+        showCount && maxLength && /* @__PURE__ */ jsxs("p", { className: counterStyles, children: [
+          currentLength,
+          "/",
+          maxLength
+        ] })
+      ] })
+    ] });
+  }
 );
-Card.displayName = "Card";
-var CardHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardHeaderStyles, className), ...props }));
-CardHeader.displayName = "CardHeader";
-var CardBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardBodyStyles, className), ...props }));
-CardBody.displayName = "CardBody";
-var CardFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardFooterStyles, className), ...props }));
-CardFooter.displayName = "CardFooter";
+Textarea.displayName = "Textarea";
 
-// src/components/modal/modal.styles.ts
-var modalOverlayStyles = [
-  "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
-  "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+// src/components/select/select.styles.ts
+var selectTriggerStyles = [
+  "flex items-center justify-between w-full",
+  "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "border border-[var(--color-border)]",
+  "transition-all duration-[var(--transition-fast)]",
+  "focus:outline-none focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)]",
+  "hover:border-[var(--color-border-hover)]",
+  "disabled:opacity-50 disabled:cursor-not-allowed",
+  "font-[var(--font-sans)] cursor-pointer"
 ].join(" ");
-var modalContentStyles = [
-  "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
-  "w-full max-w-lg",
-  "bg-[var(--color-surface)] border border-[var(--color-border)]",
-  "rounded-[var(--radius-xl)] shadow-[var(--shadow-lg)]",
-  "p-[var(--space-lg)]",
-  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
-  "duration-200"
+var selectTriggerSizes = {
+  sm: "h-8 px-3 text-[var(--text-xs)] rounded-[var(--radius-sm)] gap-2",
+  md: "h-10 px-3 text-[var(--text-sm)] rounded-[var(--radius)] gap-2",
+  lg: "h-12 px-4 text-[var(--text-base)] rounded-[var(--radius-md)] gap-3"
+};
+var selectContentStyles = [
+  "z-[var(--z-popover)]",
+  "w-[var(--radix-popover-trigger-width)] overflow-hidden",
+  "rounded-[var(--radius-md)]",
+  "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "border border-[var(--color-border)]",
+  "shadow-lg",
+  "animate-in fade-in-0 zoom-in-[0.98]",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.98]"
 ].join(" ");
-var modalTitleStyles = "text-[var(--text-lg)] font-semibold text-[var(--color-text-primary)]";
-var modalDescriptionStyles = "text-[var(--text-sm)] text-[var(--color-text-secondary)] mt-2";
-var modalCloseStyles = [
-  "absolute right-4 top-4",
-  "rounded-[var(--radius-sm)] p-1",
-  "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
-  "hover:bg-[var(--color-surface-hover)]",
+var selectSearchStyles = [
+  "w-full bg-transparent text-[var(--color-text-primary)]",
+  "text-[var(--text-sm)] px-3 py-2.5",
+  "placeholder:text-[var(--color-text-muted)]",
+  "border-b border-[var(--color-border)]",
+  "focus:outline-none",
+  "font-[var(--font-sans)]"
+].join(" ");
+var selectItemStyles = [
+  "relative flex items-center gap-2 w-full",
+  "px-3 py-2 cursor-pointer select-none",
+  "text-[var(--text-sm)] text-[var(--color-text-secondary)]",
+  "rounded-[var(--radius-sm)]",
   "transition-colors duration-[var(--transition-fast)]",
-  "focus:outline-none focus:ring-2 focus:ring-[var(--ring-color)]"
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
+  "outline-none"
 ].join(" ");
-var Modal = Dialog.Root;
-var ModalTrigger = Dialog.Trigger;
-var ModalOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Overlay, { ref, className: cn(modalOverlayStyles, className), ...props }));
-ModalOverlay.displayName = "ModalOverlay";
-var ModalContent = forwardRef(({ className, children, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-  /* @__PURE__ */ jsx(ModalOverlay, {}),
-  /* @__PURE__ */ jsxs(Dialog.Content, { ref, className: cn(modalContentStyles, className), ...props, children: [
-    children,
-    showClose && /* @__PURE__ */ jsxs(Dialog.Close, { className: modalCloseStyles, children: [
-      /* @__PURE__ */ jsxs(
-        "svg",
+var selectItemActiveStyles = "bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]";
+var selectItemSelectedStyles = "text-[var(--color-primary-400)] font-medium";
+var selectGroupLabelStyles = [
+  "px-3 py-1.5",
+  "text-[var(--text-xs)] font-semibold uppercase tracking-wider",
+  "text-[var(--color-text-muted)]"
+].join(" ");
+var selectPlaceholderStyles = "text-[var(--color-text-muted)]";
+var selectClearStyles = [
+  "shrink-0 p-0.5 rounded-[var(--radius-sm)]",
+  "text-[var(--color-text-muted)]",
+  "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]",
+  "transition-colors duration-[var(--transition-fast)]"
+].join(" ");
+var selectLabelStyles = "block text-[var(--text-sm)] font-medium text-[var(--color-text-secondary)] mb-1.5";
+var selectHelperStyles = "mt-1.5 text-[var(--text-xs)] text-[var(--color-text-muted)]";
+var selectErrorStyles = "mt-1.5 text-[var(--text-xs)] text-[var(--color-danger)]";
+var selectErrorTriggerStyles = "border-[var(--color-danger)] focus:ring-[var(--color-danger)]";
+var Select = forwardRef(
+  ({
+    options = [],
+    groups,
+    value,
+    onChange,
+    placeholder = "Select an option...",
+    label,
+    helperText,
+    error,
+    emptyMessage = "No results found.",
+    searchable = false,
+    searchPlaceholder = "Search...",
+    clearable = false,
+    size = "md",
+    disabled,
+    className,
+    renderOption
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const searchRef = useRef(null);
+    const listRef = useRef(null);
+    const allOptions = useMemo(() => {
+      if (groups) {
+        return groups.flatMap((g) => g.options);
+      }
+      return options;
+    }, [groups, options]);
+    const filterOptions = useCallback(
+      (opts) => search ? opts.filter(
+        (o) => o.label.toLowerCase().includes(search.toLowerCase())
+      ) : opts,
+      [search]
+    );
+    const filteredAll = useMemo(() => filterOptions(allOptions), [filterOptions, allOptions]);
+    const filteredGroups = useMemo(() => {
+      if (!groups) return null;
+      return groups.map((g) => ({
+        ...g,
+        options: filterOptions(g.options)
+      })).filter((g) => g.options.length > 0);
+    }, [groups, filterOptions]);
+    const selectedOption = allOptions.find((o) => o.value === value);
+    const handleSelect = useCallback(
+      (optValue) => {
+        onChange?.(optValue);
+        setOpen(false);
+        setSearch("");
+      },
+      [onChange]
+    );
+    const handleClear = useCallback(
+      (e) => {
+        e.stopPropagation();
+        onChange?.("");
+        setSearch("");
+      },
+      [onChange]
+    );
+    const handleKeyDown = (e) => {
+      const items = filteredAll.filter((o) => !o.disabled);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        setActiveIndex((i) => Math.min(i + 1, items.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && activeIndex >= 0) {
+        e.preventDefault();
+        const opt = items[activeIndex];
+        if (opt) handleSelect(opt.value);
+      } else if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    useEffect(() => {
+      setActiveIndex(-1);
+    }, [search]);
+    useEffect(() => {
+      if (open && searchable) {
+        const timer = setTimeout(() => searchRef.current?.focus(), 50);
+        return () => clearTimeout(timer);
+      }
+    }, [open, searchable]);
+    const renderItem = (opt, flatIndex2) => {
+      const isSelected = opt.value === value;
+      return /* @__PURE__ */ jsx(
+        "div",
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: [
-            /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-          ]
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": opt.disabled,
+          className: cn(
+            selectItemStyles,
+            flatIndex2 === activeIndex && selectItemActiveStyles,
+            isSelected && selectItemSelectedStyles,
+            opt.disabled && "opacity-50 pointer-events-none"
+          ),
+          onClick: () => !opt.disabled && handleSelect(opt.value),
+          onMouseEnter: () => setActiveIndex(flatIndex2),
+          children: renderOption ? renderOption(opt, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            opt.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5 flex items-center justify-center", children: opt.icon }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "block truncate", children: opt.label }),
+              opt.description && /* @__PURE__ */ jsx("span", { className: "block text-[var(--text-xs)] text-[var(--color-text-muted)] truncate", children: opt.description })
+            ] }),
+            isSelected && /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "ml-auto shrink-0 text-[var(--color-primary)]",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+              }
+            )
+          ] })
+        },
+        opt.value
+      );
+    };
+    let flatIndex = 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+      label && /* @__PURE__ */ jsx("label", { className: selectLabelStyles, children: label }),
+      /* @__PURE__ */ jsxs(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": open,
+            disabled,
+            onKeyDown: !searchable ? handleKeyDown : void 0,
+            className: cn(
+              selectTriggerStyles,
+              selectTriggerSizes[size],
+              error && selectErrorTriggerStyles
+            ),
+            children: [
+              selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 min-w-0 truncate", children: [
+                selectedOption.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5 flex items-center justify-center", children: selectedOption.icon }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption.label })
+              ] }) : /* @__PURE__ */ jsx("span", { className: selectPlaceholderStyles, children: placeholder }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+                clearable && value && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "button",
+                    tabIndex: -1,
+                    onClick: handleClear,
+                    className: selectClearStyles,
+                    children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn(
+                      "shrink-0 text-[var(--color-text-muted)] transition-transform duration-200",
+                      open && "rotate-180"
+                    ),
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ jsxs(
+          PopoverPrimitive3.Content,
+          {
+            ref: listRef,
+            sideOffset: 4,
+            className: selectContentStyles,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            children: [
+              searchable && /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchRef,
+                  type: "text",
+                  placeholder: searchPlaceholder,
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  className: selectSearchStyles
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "p-1 max-h-60 overflow-auto", role: "listbox", children: filteredGroups ? filteredGroups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-[var(--text-sm)] text-[var(--color-text-muted)]", children: emptyMessage }) : filteredGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: selectGroupLabelStyles, children: group.label }),
+                group.options.map((opt) => {
+                  const item = renderItem(opt, flatIndex);
+                  flatIndex++;
+                  return item;
+                })
+              ] }, group.label)) : filteredAll.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-[var(--text-sm)] text-[var(--color-text-muted)]", children: emptyMessage }) : filteredAll.map((opt) => {
+                const item = renderItem(opt, flatIndex);
+                flatIndex++;
+                return item;
+              }) })
+            ]
+          }
+        ) })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: selectErrorStyles, children: error }),
+      !error && helperText && /* @__PURE__ */ jsx("p", { className: selectHelperStyles, children: helperText })
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/components/combobox/combobox.styles.ts
+var comboboxInputStyles = [
+  "w-full bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "border border-[var(--color-border)]",
+  "placeholder:text-[var(--color-text-muted)]",
+  "transition-all duration-[var(--transition-fast)]",
+  "focus:outline-none focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)]",
+  "hover:border-[var(--color-border-hover)]",
+  "disabled:opacity-50 disabled:cursor-not-allowed",
+  "font-[var(--font-sans)]",
+  "h-10 px-3 text-[var(--text-sm)] rounded-[var(--radius)]"
+].join(" ");
+var comboboxListStyles = [
+  "z-[var(--z-popover)]",
+  "w-[var(--radix-popover-trigger-width)] max-h-60 overflow-auto",
+  "rounded-[var(--radius-md)] p-1",
+  "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "border border-[var(--color-border)]",
+  "shadow-lg"
+].join(" ");
+var comboboxItemStyles = [
+  "flex items-center gap-2 w-full px-2.5 py-2",
+  "text-[var(--text-sm)] text-[var(--color-text-secondary)]",
+  "rounded-[var(--radius-sm)] cursor-pointer",
+  "transition-colors duration-[var(--transition-fast)]",
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
+  "outline-none"
+].join(" ");
+var comboboxItemActiveStyles = "bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]";
+var comboboxItemSelectedStyles = "text-[var(--color-primary-400)]";
+var comboboxEmptyStyles = "py-6 text-center text-[var(--text-sm)] text-[var(--color-text-muted)]";
+var comboboxLabelStyles = "block text-[var(--text-sm)] font-medium text-[var(--color-text-secondary)] mb-1.5";
+var comboboxChipStyles = [
+  "inline-flex items-center gap-1 px-2 py-0.5",
+  "text-[var(--text-xs)] font-medium",
+  "bg-[var(--color-surface-raised)] text-[var(--color-text-secondary)]",
+  "border border-[var(--color-border)] rounded-full",
+  "cursor-pointer hover:border-[var(--color-border-hover)]"
+].join(" ");
+var Combobox = forwardRef(
+  ({
+    options = [],
+    groups,
+    value,
+    onChange,
+    placeholder = "Search...",
+    label,
+    emptyMessage = "No results found.",
+    multiple = false,
+    creatable = false,
+    createLabel = (s) => `Create "${s}"`,
+    loading = false,
+    disabled,
+    className
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const listRef = useRef(null);
+    const allOptions = useMemo(() => {
+      if (groups) return groups.flatMap((g) => g.options);
+      return options;
+    }, [groups, options]);
+    const selectedValues = multiple ? Array.isArray(value) ? value : [] : typeof value === "string" ? [value] : [];
+    const filterOptions = useCallback(
+      (opts) => search ? opts.filter(
+        (o) => o.label.toLowerCase().includes(search.toLowerCase())
+      ) : opts,
+      [search]
+    );
+    const filtered = useMemo(() => filterOptions(allOptions), [filterOptions, allOptions]);
+    const filteredGroups = useMemo(() => {
+      if (!groups) return null;
+      return groups.map((g) => ({ ...g, options: filterOptions(g.options) })).filter((g) => g.options.length > 0);
+    }, [groups, filterOptions]);
+    const showCreate = creatable && search.trim().length > 0 && !allOptions.some((o) => o.label.toLowerCase() === search.toLowerCase());
+    const totalItems = filtered.filter((o) => !o.disabled).length + (showCreate ? 1 : 0);
+    const handleSelect = useCallback(
+      (optValue) => {
+        if (multiple) {
+          const current = Array.isArray(value) ? value : [];
+          const next = current.includes(optValue) ? current.filter((v) => v !== optValue) : [...current, optValue];
+          onChange?.(next);
+        } else {
+          onChange?.(optValue);
+          setSearch(allOptions.find((o) => o.value === optValue)?.label || optValue);
+          setOpen(false);
         }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-    ] })
-  ] })
-] }));
-ModalContent.displayName = "ModalContent";
-var ModalTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Title, { ref, className: cn(modalTitleStyles, className), ...props }));
-ModalTitle.displayName = "ModalTitle";
-var ModalDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Dialog.Description,
+      },
+      [multiple, value, onChange, allOptions]
+    );
+    const handleCreate = useCallback(() => {
+      const newValue = search.trim();
+      if (!newValue) return;
+      handleSelect(newValue);
+      if (!multiple) setSearch(newValue);
+    }, [search, handleSelect, multiple]);
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, totalItems - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && activeIndex >= 0) {
+        e.preventDefault();
+        const enabledItems = filtered.filter((o) => !o.disabled);
+        if (activeIndex < enabledItems.length) {
+          const opt = enabledItems[activeIndex];
+          if (opt) handleSelect(opt.value);
+        } else if (showCreate) {
+          handleCreate();
+        }
+      } else if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    useEffect(() => {
+      setActiveIndex(-1);
+    }, [search]);
+    const displayValue = multiple ? search : search || (typeof value === "string" ? allOptions.find((o) => o.value === value)?.label || "" : "");
+    let flatIndex = 0;
+    const renderItem = (opt, idx) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "option",
+        "aria-selected": selectedValues.includes(opt.value),
+        "aria-disabled": opt.disabled,
+        className: cn(
+          comboboxItemStyles,
+          idx === activeIndex && comboboxItemActiveStyles,
+          selectedValues.includes(opt.value) && comboboxItemSelectedStyles,
+          opt.disabled && "opacity-50 pointer-events-none"
+        ),
+        onClick: () => !opt.disabled && handleSelect(opt.value),
+        onMouseEnter: () => setActiveIndex(idx),
+        children: [
+          multiple && /* @__PURE__ */ jsx("div", { className: cn(
+            "h-4 w-4 rounded-[3px] border border-[var(--color-border)] flex items-center justify-center shrink-0",
+            selectedValues.includes(opt.value) && "bg-[var(--color-primary)] border-[var(--color-primary)]"
+          ), children: selectedValues.includes(opt.value) && /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+          opt.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5 flex items-center justify-center", children: opt.icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
+          !multiple && selectedValues.includes(opt.value) && /* @__PURE__ */ jsx("svg", { className: "ml-auto shrink-0", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) })
+        ]
+      },
+      opt.value
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+      label && /* @__PURE__ */ jsx("label", { className: comboboxLabelStyles, children: label }),
+      multiple && selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 mb-2", children: selectedValues.map((v) => {
+        const opt = allOptions.find((o) => o.value === v);
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: comboboxChipStyles,
+            onClick: () => handleSelect(v),
+            children: [
+              opt?.label || v,
+              /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            ]
+          },
+          v
+        );
+      }) }),
+      /* @__PURE__ */ jsxs(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": open,
+            disabled,
+            placeholder,
+            value: displayValue,
+            onChange: (e) => {
+              setSearch(e.target.value);
+              if (!open) setOpen(true);
+            },
+            onFocus: () => setOpen(true),
+            onKeyDown: handleKeyDown,
+            className: comboboxInputStyles
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ jsx(
+          PopoverPrimitive3.Content,
+          {
+            ref: listRef,
+            sideOffset: 4,
+            className: comboboxListStyles,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            children: loading ? /* @__PURE__ */ jsxs("div", { className: "py-6 flex items-center justify-center gap-2 text-[var(--text-sm)] text-[var(--color-text-muted)]", children: [
+              /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+              ] }),
+              "Loading..."
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              filteredGroups ? filteredGroups.length === 0 && !showCreate ? /* @__PURE__ */ jsx("div", { className: comboboxEmptyStyles, children: emptyMessage }) : filteredGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "px-2.5 py-1.5 text-[var(--text-xs)] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]", children: group.label }),
+                group.options.map((opt) => {
+                  const item = renderItem(opt, flatIndex);
+                  flatIndex++;
+                  return item;
+                })
+              ] }, group.label)) : filtered.length === 0 && !showCreate ? /* @__PURE__ */ jsx("div", { className: comboboxEmptyStyles, children: emptyMessage }) : filtered.map((opt) => {
+                const item = renderItem(opt, flatIndex);
+                flatIndex++;
+                return item;
+              }),
+              showCreate && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    comboboxItemStyles,
+                    flatIndex === activeIndex && comboboxItemActiveStyles,
+                    "text-[var(--color-primary)] font-medium"
+                  ),
+                  onClick: handleCreate,
+                  onMouseEnter: () => setActiveIndex(flatIndex),
+                  children: [
+                    /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                      /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                    ] }),
+                    createLabel(search.trim())
+                  ]
+                }
+              )
+            ] })
+          }
+        ) })
+      ] })
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+var checkboxVariants = cva(
+  [
+    "relative shrink-0 appearance-none cursor-pointer",
+    "border border-[var(--color-border)]",
+    "bg-[var(--color-surface)]",
+    "transition-all duration-[var(--transition-fast)]",
+    "hover:border-[var(--color-border-hover)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg)]",
+    "checked:bg-[var(--color-primary)] checked:border-[var(--color-primary)]",
+    "checked:hover:bg-[var(--color-primary-hover)]",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
   {
-    ref,
-    className: cn(modalDescriptionStyles, className),
-    ...props
+    variants: {
+      size: {
+        sm: "h-4 w-4 rounded-[3px]",
+        md: "h-[18px] w-[18px] rounded-[var(--radius-sm)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
   }
-));
-ModalDescription.displayName = "ModalDescription";
-var ModalFooter = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+);
+var checkboxWrapperStyles = "flex items-start gap-2.5";
+var checkboxLabelStyles = "text-[var(--text-sm)] text-[var(--color-text-primary)] cursor-pointer select-none leading-tight";
+var checkboxDescriptionStyles = "text-[var(--text-xs)] text-[var(--color-text-muted)] mt-0.5";
+var checkmarkStyles = "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-primary-foreground)]";
+var Checkbox = forwardRef(
+  ({ className, size, label, description, indeterminate, id, ...props }, ref) => {
+    const inputId = id || (label ? `cb-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+    const internalRef = useRef(null);
+    const inputRef = ref || internalRef;
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = !!indeterminate;
+      }
+    }, [indeterminate, inputRef]);
+    return /* @__PURE__ */ jsxs("div", { className: checkboxWrapperStyles, children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center mt-0.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            type: "checkbox",
+            className: cn(checkboxVariants({ size }), className),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: checkmarkStyles, children: indeterminate ? /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "1", y: "4", width: "8", height: "2", rx: "1", fill: "currentColor" }) }) : /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", className: "opacity-0 [input:checked~div>&]:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx("path", { d: "M2 5L4 7L8 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+      ] }),
+      (label || description) && /* @__PURE__ */ jsxs("div", { children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: checkboxLabelStyles, children: label }),
+        description && /* @__PURE__ */ jsx("p", { className: checkboxDescriptionStyles, children: description })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/radio/radio.styles.ts
+var radioGroupStyles = "flex flex-col gap-2.5";
+var radioGroupHorizontalStyles = "flex-row gap-4";
+var radioWrapperStyles = "flex items-start gap-2.5";
+var radioInputStyles = [
+  "relative shrink-0 appearance-none cursor-pointer",
+  "h-[18px] w-[18px] rounded-full",
+  "border border-[var(--color-border)]",
+  "bg-[var(--color-surface)]",
+  "transition-all duration-[var(--transition-fast)]",
+  "hover:border-[var(--color-border-hover)]",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg)]",
+  "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)]",
+  "checked:hover:bg-[var(--color-primary-hover)]",
+  "disabled:opacity-50 disabled:cursor-not-allowed"
+].join(" ");
+var radioDotStyles = "absolute inset-0 flex items-center justify-center pointer-events-none";
+var radioLabelStyles = "text-[var(--text-sm)] text-[var(--color-text-primary)] cursor-pointer select-none leading-tight";
+var radioDescriptionStyles = "text-[var(--text-xs)] text-[var(--color-text-muted)] mt-0.5";
+var RadioGroupContext = createContext({});
+var RadioGroup = forwardRef(
+  ({ className, name, value, onChange, orientation = "vertical", disabled, children, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { name, value, onChange, disabled }, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
+      role: "radiogroup",
       className: cn(
-        "flex justify-end gap-[var(--space-sm)] mt-[var(--space-lg)]",
+        radioGroupStyles,
+        orientation === "horizontal" && radioGroupHorizontalStyles,
         className
       ),
-      ...props
+      ...props,
+      children
     }
-  )
+  ) })
 );
-ModalFooter.displayName = "ModalFooter";
-
-// src/components/dropdown/dropdown.styles.ts
-var dropdownContentStyles = [
-  "z-50 min-w-[180px] overflow-hidden",
-  "bg-[var(--color-surface)] border border-[var(--color-border)]",
-  "rounded-[var(--radius-md)] shadow-[var(--shadow-lg)]",
-  "p-1",
-  "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",
-  "data-[side=top]:slide-in-from-bottom-2",
-  "data-[side=bottom]:slide-in-from-top-2",
-  "data-[side=left]:slide-in-from-right-2",
-  "data-[side=right]:slide-in-from-left-2"
-].join(" ");
-var dropdownItemStyles = [
-  "relative flex items-center gap-2",
-  "rounded-[var(--radius-sm)] px-2 py-1.5",
-  "text-[var(--text-sm)] text-[var(--color-text-secondary)]",
-  "cursor-pointer select-none outline-none",
+RadioGroup.displayName = "RadioGroup";
+var Radio = forwardRef(
+  ({ className, label, description, value, id, disabled: itemDisabled, ...props }, ref) => {
+    const ctx = useContext(RadioGroupContext);
+    const inputId = id || (label ? `radio-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+    const isDisabled = itemDisabled || ctx.disabled;
+    return /* @__PURE__ */ jsxs("div", { className: radioWrapperStyles, children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center mt-0.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            type: "radio",
+            name: ctx.name,
+            value,
+            checked: ctx.value !== void 0 ? ctx.value === value : void 0,
+            onChange: () => ctx.onChange?.(value),
+            disabled: isDisabled,
+            className: cn(radioInputStyles, className),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: radioDotStyles, children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-white scale-0 transition-transform duration-150 [input:checked~div>&]:scale-100" }) })
+      ] }),
+      (label || description) && /* @__PURE__ */ jsxs("div", { children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: radioLabelStyles, children: label }),
+        description && /* @__PURE__ */ jsx("p", { className: radioDescriptionStyles, children: description })
+      ] })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var switchTrackVariants = cva(
+  [
+    "relative inline-flex shrink-0 cursor-pointer",
+    "rounded-full border-2 border-transparent",
+    "transition-colors duration-[var(--transition-base)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg)]",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        md: "h-6 w-11"
+      },
+      checked: {
+        true: "bg-[var(--color-primary)]",
+        false: "bg-[var(--color-surface-raised)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      checked: false
+    }
+  }
+);
+var switchThumbVariants = cva(
+  [
+    "pointer-events-none inline-block rounded-full bg-white",
+    "shadow-sm transition-transform duration-[var(--transition-base)]",
+    "ring-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5"
+      },
+      checked: {
+        true: "",
+        false: "translate-x-0"
+      }
+    },
+    compoundVariants: [
+      { size: "sm", checked: true, className: "translate-x-4" },
+      { size: "md", checked: true, className: "translate-x-5" }
+    ],
+    defaultVariants: {
+      size: "md",
+      checked: false
+    }
+  }
+);
+var switchWrapperStyles = "flex items-center gap-3";
+var switchLabelStyles = "text-[var(--text-sm)] text-[var(--color-text-primary)] cursor-pointer select-none";
+var switchDescriptionStyles = "text-[var(--text-xs)] text-[var(--color-text-muted)]";
+var Switch = forwardRef(
+  ({ className, checked = false, onChange, label, description, size = "md", disabled, id, ...props }, ref) => {
+    const inputId = id || (label ? `switch-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+    return /* @__PURE__ */ jsxs("div", { className: switchWrapperStyles, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          id: inputId,
+          type: "button",
+          role: "switch",
+          "aria-checked": checked,
+          disabled,
+          onClick: () => onChange?.(!checked),
+          className: cn(
+            switchTrackVariants({ size, checked }),
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx("span", { className: switchThumbVariants({ size, checked }) })
+        }
+      ),
+      (label || description) && /* @__PURE__ */ jsxs("div", { children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: switchLabelStyles, onClick: () => !disabled && onChange?.(!checked), children: label }),
+        description && /* @__PURE__ */ jsx("p", { className: switchDescriptionStyles, children: description })
+      ] })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var Separator = forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": !decorative ? orientation : void 0,
+      className: cn(
+        "shrink-0 bg-[var(--color-border)]",
+        orientation === "horizontal" ? "h-px w-full" : "w-px h-full",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+var avatarVariants = cva(
+  [
+    "relative inline-flex items-center justify-center shrink-0",
+    "bg-[var(--color-surface-raised)] text-[var(--color-text-secondary)]",
+    "font-medium overflow-hidden",
+    "border border-[var(--color-border)]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-[10px]",
+        sm: "h-8 w-8 text-[var(--text-xs)]",
+        md: "h-10 w-10 text-[var(--text-sm)]",
+        lg: "h-12 w-12 text-[var(--text-base)]",
+        xl: "h-16 w-16 text-[var(--text-lg)]"
+      },
+      shape: {
+        circle: "rounded-full",
+        rounded: "rounded-[var(--radius-md)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle"
+    }
+  }
+);
+var avatarImageStyles = "h-full w-full object-cover";
+var avatarStatusVariants = cva(
+  [
+    "absolute bottom-0 right-0 block rounded-full ring-2 ring-[var(--color-bg)]"
+  ],
+  {
+    variants: {
+      status: {
+        online: "bg-[var(--color-success)]",
+        offline: "bg-[var(--color-text-muted)]",
+        busy: "bg-[var(--color-danger)]",
+        away: "bg-[var(--color-warning)]"
+      },
+      size: {
+        xs: "h-1.5 w-1.5",
+        sm: "h-2 w-2",
+        md: "h-2.5 w-2.5",
+        lg: "h-3 w-3",
+        xl: "h-3.5 w-3.5"
+      }
+    },
+    defaultVariants: {
+      status: "online",
+      size: "md"
+    }
+  }
+);
+function getInitials(name) {
+  return name.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase();
+}
+var Avatar = forwardRef(
+  ({ className, src, alt, name, size = "md", shape, status, ...props }, ref) => {
+    const [imgError, setImgError] = useState(false);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(avatarVariants({ size, shape }), className),
+        children: [
+          src && !imgError ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: alt || name || "Avatar",
+              className: avatarImageStyles,
+              onError: () => setImgError(true),
+              ...props
+            }
+          ) : /* @__PURE__ */ jsx("span", { children: name ? getInitials(name) : "?" }),
+          status && /* @__PURE__ */ jsx("span", { className: avatarStatusVariants({ status, size }) })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/tooltip/tooltip.styles.ts
+var tooltipContentStyles = [
+  "z-[var(--z-tooltip)]",
+  "overflow-hidden rounded-[var(--radius)] px-3 py-1.5",
+  "bg-[var(--color-slate-800)] text-[var(--color-text-primary)]",
+  "text-[var(--text-xs)] font-medium",
+  "border border-[var(--color-border)]",
+  "shadow-md",
+  "animate-in fade-in-0 zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+].join(" ");
+var TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  children,
+  content,
+  side = "top",
+  align = "center",
+  delayDuration = 300,
+  sideOffset = 6
+}) {
+  return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { delayDuration, children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      TooltipPrimitive.Content,
+      {
+        side,
+        align,
+        sideOffset,
+        className: cn(tooltipContentStyles),
+        children: content
+      }
+    ) })
+  ] });
+}
+Tooltip.displayName = "Tooltip";
+
+// src/components/popover/popover.styles.ts
+var popoverContentStyles = [
+  "z-[var(--z-popover)]",
+  "w-72 rounded-[var(--radius-md)] p-4",
+  "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "border border-[var(--color-border)]",
+  "shadow-lg",
+  "outline-none"
+].join(" ");
+var Popover = PopoverPrimitive3.Root;
+var PopoverTrigger = PopoverPrimitive3.Trigger;
+var PopoverAnchor = PopoverPrimitive3.Anchor;
+var PopoverClose = PopoverPrimitive3.Close;
+var PopoverContent = forwardRef(({ className, sideOffset = 6, align = "center", ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive3.Content,
+  {
+    ref,
+    sideOffset,
+    align,
+    className: cn(popoverContentStyles, className),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+var cardVariants = cva(
+  [
+    "rounded-[var(--radius-lg)]",
+    "transition-all duration-[var(--transition-base)]"
+  ],
+  {
+    variants: {
+      variant: {
+        elevated: [
+          "bg-[var(--color-surface)] border border-[var(--color-slate-800)]",
+          "shadow-[var(--shadow-sm)]"
+        ],
+        outlined: [
+          "bg-transparent border border-[var(--color-slate-700)]"
+        ],
+        ghost: [
+          "bg-[var(--color-surface)]/50 border border-transparent"
+        ],
+        glass: [
+          "bg-[var(--color-surface)]/70 backdrop-blur-md border border-[var(--color-overlay)]",
+          "shadow-lg"
+        ]
+      },
+      hoverable: {
+        true: "hover:border-[var(--color-border-hover)] hover:shadow-[var(--shadow-lg)] cursor-pointer",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "elevated",
+      hoverable: false
+    }
+  }
+);
+var cardHeaderStyles = "px-[var(--space-lg)] pt-[var(--space-lg)] pb-[var(--space-sm)]";
+var cardBodyStyles = "px-[var(--space-lg)] py-[var(--space-md)]";
+var cardFooterStyles = "px-[var(--space-lg)] pt-[var(--space-sm)] pb-[var(--space-lg)] border-t border-[var(--color-border)]";
+var Card = forwardRef(
+  ({ className, variant, hoverable, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ variant, hoverable }), className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardHeaderStyles, className), ...props }));
+CardHeader.displayName = "CardHeader";
+var CardBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardBodyStyles, className), ...props }));
+CardBody.displayName = "CardBody";
+var CardFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardFooterStyles, className), ...props }));
+CardFooter.displayName = "CardFooter";
+
+// src/components/modal/modal.styles.ts
+var modalOverlayStyles = [
+  "fixed inset-0 z-[var(--z-overlay)] bg-black/60 backdrop-blur-sm",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+].join(" ");
+var modalContentStyles = [
+  "fixed left-1/2 top-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2",
+  "w-full max-w-lg",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "rounded-[var(--radius-xl)] shadow-lg",
+  "p-[var(--space-lg)]",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+  "duration-200"
+].join(" ");
+var modalTitleStyles = "text-[var(--text-lg)] font-semibold text-[var(--color-text-primary)]";
+var modalDescriptionStyles = "text-[var(--text-sm)] text-[var(--color-text-secondary)] mt-2";
+var modalCloseStyles = [
+  "absolute right-4 top-4",
+  "rounded-[var(--radius-sm)] p-1",
+  "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
+  "hover:bg-[var(--color-surface-hover)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "focus:outline-none focus:ring-2 focus:ring-[var(--ring-color)]"
+].join(" ");
+var Modal = DialogPrimitive.Root;
+var ModalTrigger = DialogPrimitive.Trigger;
+var ModalOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ref, className: cn(modalOverlayStyles, className), ...props }));
+ModalOverlay.displayName = "ModalOverlay";
+var ModalContent = forwardRef(({ className, children, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx(ModalOverlay, {}),
+  /* @__PURE__ */ jsxs(DialogPrimitive.Content, { ref, className: cn(modalContentStyles, className), ...props, children: [
+    children,
+    showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: modalCloseStyles, children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ] })
+  ] })
+] }));
+ModalContent.displayName = "ModalContent";
+var ModalTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn(modalTitleStyles, className), ...props }));
+ModalTitle.displayName = "ModalTitle";
+var ModalDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn(modalDescriptionStyles, className),
+    ...props
+  }
+));
+ModalDescription.displayName = "ModalDescription";
+var ModalFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex justify-end gap-[var(--space-sm)] mt-[var(--space-lg)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ModalFooter.displayName = "ModalFooter";
+
+// src/components/dropdown/dropdown.styles.ts
+var dropdownContentStyles = [
+  "z-[var(--z-dropdown)] min-w-[180px] overflow-hidden",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "rounded-[var(--radius-md)] shadow-lg",
+  "p-1",
+  "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",
+  "data-[side=top]:slide-in-from-bottom-2",
+  "data-[side=bottom]:slide-in-from-top-2",
+  "data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2"
+].join(" ");
+var dropdownItemStyles = [
+  "relative flex items-center gap-2",
+  "rounded-[var(--radius-sm)] px-2 py-1.5",
+  "text-[var(--text-sm)] text-[var(--color-text-secondary)]",
+  "cursor-pointer select-none outline-none",
   "transition-colors duration-[var(--transition-fast)]",
   "data-[highlighted]:bg-[var(--color-surface-hover)] data-[highlighted]:text-[var(--color-text-primary)]",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
@@ -385,12 +1494,12 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-[var(--color-surface-raised)] text-[var(--color-text-secondary)] border border-[var(--color-border)]",
-        primary: "bg-[var(--color-primary)]/15 text-[var(--color-primary-hover)] border border-[var(--color-primary)]/25",
-        success: "bg-[var(--color-success)]/15 text-[var(--color-success)] border border-[var(--color-success)]/25",
-        warning: "bg-[var(--color-warning)]/15 text-[var(--color-warning)] border border-[var(--color-warning)]/25",
-        danger: "bg-[var(--color-danger)]/15 text-[var(--color-danger)] border border-[var(--color-danger)]/25",
-        info: "bg-[var(--color-info)]/15 text-[var(--color-info)] border border-[var(--color-info)]/25"
+        default: "bg-[var(--color-slate-800)] text-[var(--color-slate-300)] border border-[var(--color-slate-700)]",
+        primary: "bg-[var(--color-primary)]/10 text-[var(--color-primary-400)] border border-[var(--color-primary)]/20 shadow-[0_0_10px_-4px_var(--color-primary-500)]",
+        success: "bg-[var(--color-success)]/10 text-[var(--color-success)] border border-[var(--color-success)]/20",
+        warning: "bg-[var(--color-warning)]/10 text-[var(--color-warning)] border border-[var(--color-warning)]/20",
+        danger: "bg-[var(--color-danger)]/10 text-[var(--color-danger)] border border-[var(--color-danger)]/20",
+        info: "bg-[var(--color-info)]/10 text-[var(--color-info)] border border-[var(--color-info)]/20"
       },
       size: {
         sm: "px-2 py-0.5 text-[10px]",
@@ -435,7 +1544,7 @@ var tabsTriggerStyles = [
 ].join(" ");
 var tabsTriggerActiveStyles = [
   "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
-  "shadow-[var(--shadow-sm)]"
+  "shadow-sm"
 ].join(" ");
 var tabsContentStyles = [
   "mt-[var(--space-md)]",
@@ -590,17 +1699,17 @@ var sidebarItemStyles = [
   "rounded-[var(--radius)]",
   "cursor-pointer select-none",
   "transition-all duration-[var(--transition-fast)]",
-  "hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
 ].join(" ");
 var sidebarItemActiveStyles = [
-  "bg-[var(--color-primary)]/10 text-[var(--color-primary-hover)]",
+  "bg-[var(--color-primary)]/10 text-[var(--color-primary-400)]",
   "hover:bg-[var(--color-primary)]/15"
 ].join(" ");
 var sidebarToggleStyles = [
   "flex items-center justify-center",
   "h-7 w-7 rounded-[var(--radius)]",
   "text-[var(--color-text-muted)]",
-  "hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]",
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
   "transition-colors duration-[var(--transition-fast)]",
   "cursor-pointer"
 ].join(" ");
@@ -729,7 +1838,1355 @@ var SidebarToggle = forwardRef(
   }
 );
 SidebarToggle.displayName = "SidebarToggle";
+var statCardStyles = [
+  "rounded-[var(--radius-lg)] p-5",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "transition-all duration-[var(--transition-base)]",
+  "hover:border-[var(--color-border-hover)]"
+].join(" ");
+var statCardTitleStyles = "text-[var(--text-sm)] font-medium text-[var(--color-text-muted)]";
+var statCardValueStyles = "text-2xl font-semibold text-[var(--color-text-primary)] mt-1";
+var statCardChangeVariants = cva(
+  "inline-flex items-center gap-1 text-[var(--text-xs)] font-medium mt-2",
+  {
+    variants: {
+      changeType: {
+        positive: "text-[var(--color-success)]",
+        negative: "text-[var(--color-danger)]",
+        neutral: "text-[var(--color-text-muted)]"
+      }
+    },
+    defaultVariants: {
+      changeType: "neutral"
+    }
+  }
+);
+var statCardIconStyles = "h-10 w-10 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 text-[var(--color-primary-400)] flex items-center justify-center";
+var StatCard = forwardRef(
+  ({ className, title, value, change, changeType = "neutral", icon, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(statCardStyles, className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: statCardTitleStyles, children: title }),
+      /* @__PURE__ */ jsx("p", { className: statCardValueStyles, children: value }),
+      change && /* @__PURE__ */ jsxs("span", { className: statCardChangeVariants({ changeType }), children: [
+        changeType === "positive" && /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" }) }),
+        changeType === "negative" && /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }),
+        change
+      ] })
+    ] }),
+    icon && /* @__PURE__ */ jsx("div", { className: statCardIconStyles, children: icon })
+  ] }) })
+);
+StatCard.displayName = "StatCard";
+
+// src/components/empty-state/empty-state.styles.ts
+var emptyStateStyles = [
+  "flex flex-col items-center justify-center py-12 px-6 text-center"
+].join(" ");
+var emptyStateIconStyles = "h-12 w-12 text-[var(--color-text-muted)] mb-4";
+var emptyStateTitleStyles = "text-[var(--text-base)] font-medium text-[var(--color-text-primary)] mb-1";
+var emptyStateDescriptionStyles = "text-[var(--text-sm)] text-[var(--color-text-muted)] max-w-sm mb-4";
+var EmptyState = forwardRef(
+  ({ className, icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn(emptyStateStyles, className), ...props, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: emptyStateIconStyles, children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: emptyStateTitleStyles, children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: emptyStateDescriptionStyles, children: description }),
+    action && /* @__PURE__ */ jsx("div", { children: action })
+  ] })
+);
+EmptyState.displayName = "EmptyState";
+var alertVariants = cva(
+  [
+    "relative flex gap-3 p-4 rounded-[var(--radius-md)]",
+    "border text-[var(--text-sm)]"
+  ],
+  {
+    variants: {
+      variant: {
+        info: "bg-[var(--color-info)]/10 border-[var(--color-info)]/20 text-[var(--color-info)]",
+        success: "bg-[var(--color-success)]/10 border-[var(--color-success)]/20 text-[var(--color-success)]",
+        warning: "bg-[var(--color-warning)]/10 border-[var(--color-warning)]/20 text-[var(--color-warning)]",
+        danger: "bg-[var(--color-danger)]/10 border-[var(--color-danger)]/20 text-[var(--color-danger)]"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+var alertTitleStyles = "font-semibold leading-tight";
+var alertDescriptionStyles = "text-[var(--text-sm)] opacity-80 mt-0.5";
+var alertDismissStyles = "absolute top-3 right-3 p-1 rounded-[var(--radius-sm)] opacity-60 hover:opacity-100 transition-opacity cursor-pointer";
+var alertIconStyles = "shrink-0 mt-0.5";
+var defaultIcons = {
+  info: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] }),
+  success: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+  ] }),
+  warning: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] }),
+  danger: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] })
+};
+var Alert = forwardRef(
+  ({ className, variant = "info", title, description, icon, dismissible, onDismiss, action, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: alertIconStyles, children: icon || defaultIcons[variant || "info"] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      title && /* @__PURE__ */ jsx("p", { className: alertTitleStyles, children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: alertDescriptionStyles, children: description }),
+      children,
+      action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
+    ] }),
+    dismissible && /* @__PURE__ */ jsx("button", { onClick: onDismiss, className: alertDismissStyles, "aria-label": "Dismiss", children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ] }) })
+  ] })
+);
+Alert.displayName = "Alert";
+var skeletonVariants = cva(
+  "animate-pulse bg-[var(--color-surface-raised)]",
+  {
+    variants: {
+      variant: {
+        text: "h-4 w-full rounded-[var(--radius-sm)]",
+        circle: "rounded-full",
+        rect: "rounded-[var(--radius)]"
+      }
+    },
+    defaultVariants: {
+      variant: "rect"
+    }
+  }
+);
+var SkeletonBase = forwardRef(
+  ({ className, variant, width, height, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(skeletonVariants({ variant }), className),
+      style: { width, height, ...style },
+      ...props
+    }
+  )
+);
+SkeletonBase.displayName = "Skeleton";
+var SkeletonText = ({
+  lines = 3,
+  lastLineWidth = "60%",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("space-y-2.5", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "h-4 rounded-[var(--radius-sm)] animate-pulse bg-[var(--color-surface-raised)]",
+    style: { width: i === lines - 1 ? lastLineWidth : "100%" }
+  },
+  i
+)) });
+SkeletonText.displayName = "SkeletonText";
+var Skeleton = Object.assign(SkeletonBase, {
+  Text: SkeletonText
+});
+var progressTrackVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-[var(--color-surface-raised)]",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        md: "h-2.5",
+        lg: "h-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var progressBarVariants = cva(
+  "h-full rounded-full transition-all duration-500 ease-out",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--color-primary)]",
+        success: "bg-[var(--color-success)]",
+        warning: "bg-[var(--color-warning)]",
+        danger: "bg-[var(--color-danger)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var progressLabelStyles = "flex justify-between items-center mb-1.5 text-[var(--text-sm)] text-[var(--color-text-primary)]";
+var progressValueStyles = "text-[var(--text-xs)] font-medium text-[var(--color-text-secondary)]";
+var Progress = forwardRef(
+  ({
+    className,
+    value = 0,
+    max = 100,
+    size,
+    variant,
+    label,
+    showValue,
+    indeterminate,
+    ...props
+  }, ref) => {
+    const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), ...props, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: progressLabelStyles, children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-secondary)] font-medium", children: label }),
+        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: progressValueStyles, children: [
+          Math.round(percentage),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "progressbar",
+          "aria-valuenow": indeterminate ? void 0 : value,
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          className: progressTrackVariants({ size }),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                progressBarVariants({ variant }),
+                indeterminate && "w-1/3 animate-[progress-indeterminate_1.5s_ease-in-out_infinite]"
+              ),
+              style: !indeterminate ? { width: `${percentage}%` } : void 0
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Progress.displayName = "Progress";
+
+// src/components/pagination/pagination.styles.ts
+var paginationStyles = "flex items-center gap-1";
+var paginationButtonStyles = [
+  "inline-flex items-center justify-center",
+  "h-9 min-w-[36px] px-3",
+  "text-[var(--text-sm)] font-medium text-[var(--color-text-secondary)]",
+  "rounded-[var(--radius)] border border-transparent",
+  "transition-all duration-[var(--transition-fast)]",
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
+  "disabled:opacity-40 disabled:pointer-events-none",
+  "cursor-pointer"
+].join(" ");
+var paginationButtonActiveStyles = [
+  "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+  "hover:bg-[var(--color-primary-hover)] hover:text-[var(--color-primary-foreground)]",
+  "border-[var(--color-primary)]"
+].join(" ");
+var paginationEllipsisStyles = "flex items-center justify-center h-9 w-9 text-[var(--color-text-muted)]";
+var paginationInfoStyles = "text-[var(--text-sm)] text-[var(--color-text-muted)] mr-3";
+function getPages(page, totalPages, siblingCount) {
+  const totalNumbers = siblingCount * 2 + 5;
+  if (totalNumbers >= totalPages) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  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 = 3 + 2 * siblingCount;
+    const pages = Array.from({ length: leftRange }, (_, i) => i + 1);
+    return [...pages, "...", totalPages];
+  }
+  if (showLeftDots && !showRightDots) {
+    const rightRange = 3 + 2 * siblingCount;
+    const pages = Array.from({ length: rightRange }, (_, i) => totalPages - rightRange + i + 1);
+    return [1, "...", ...pages];
+  }
+  const middlePages = [];
+  for (let i = leftSibling; i <= rightSibling; i++) middlePages.push(i);
+  return [1, "...", ...middlePages, "...", totalPages];
+}
+var Pagination = forwardRef(
+  ({
+    className,
+    page,
+    totalPages,
+    onPageChange,
+    siblingCount = 1,
+    showInfo,
+    totalItems,
+    pageSize,
+    ...props
+  }, ref) => {
+    const pages = getPages(page, totalPages, siblingCount);
+    return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": "Pagination", className: cn("flex items-center gap-2", className), ...props, children: [
+      showInfo && totalItems !== void 0 && pageSize && /* @__PURE__ */ jsxs("span", { className: paginationInfoStyles, children: [
+        (page - 1) * pageSize + 1,
+        "-",
+        Math.min(page * pageSize, totalItems),
+        " of ",
+        totalItems
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: paginationStyles, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: paginationButtonStyles,
+            onClick: () => onPageChange(page - 1),
+            disabled: page <= 1,
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) })
+          }
+        ),
+        pages.map(
+          (p, i) => p === "..." ? /* @__PURE__ */ jsx("span", { className: paginationEllipsisStyles, children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                paginationButtonStyles,
+                p === page && paginationButtonActiveStyles
+              ),
+              onClick: () => onPageChange(p),
+              "aria-current": p === page ? "page" : void 0,
+              children: p
+            },
+            p
+          )
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: paginationButtonStyles,
+            onClick: () => onPageChange(page + 1),
+            disabled: page >= totalPages,
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+Pagination.displayName = "Pagination";
+
+// src/components/breadcrumb/breadcrumb.styles.ts
+var breadcrumbStyles = "flex items-center gap-1.5 text-[var(--text-sm)]";
+var breadcrumbItemStyles = "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-[var(--transition-fast)] cursor-pointer inline-flex items-center gap-1.5";
+var breadcrumbItemActiveStyles = "text-[var(--color-text-primary)] pointer-events-none font-medium";
+var breadcrumbSeparatorStyles = "text-[var(--color-text-muted)]/50 select-none";
+var Breadcrumb = forwardRef(
+  ({ className, separator = "/", children, ...props }, ref) => {
+    const items = React26.Children.toArray(children);
+    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn(breadcrumbStyles, className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+      child,
+      i < items.length - 1 && /* @__PURE__ */ jsx("span", { className: breadcrumbSeparatorStyles, "aria-hidden": "true", children: separator })
+    ] }, i)) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbItem = forwardRef(
+  ({ className, href, active, icon, children, ...props }, ref) => {
+    const Comp = href && !active ? "a" : "span";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        href: href && !active ? href : void 0,
+        "aria-current": active ? "page" : void 0,
+        className: cn(
+          breadcrumbItemStyles,
+          active && breadcrumbItemActiveStyles,
+          className
+        ),
+        ...props,
+        children: [
+          icon,
+          children
+        ]
+      }
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var ToastContext = createContext({
+  toast: () => {
+  },
+  dismiss: () => {
+  }
+});
+var useToast = () => useContext(ToastContext);
+var containerStyles = "fixed top-4 right-4 z-[var(--z-toast)] flex flex-col gap-2 w-[380px] max-w-[calc(100vw-2rem)]";
+var toastBase = [
+  "relative flex gap-3 items-start p-4 pr-10",
+  "rounded-[var(--radius-md)]",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "shadow-[var(--shadow-lg)]",
+  "text-[var(--text-sm)]",
+  "animate-[toast-in_0.3s_ease-out]"
+].join(" ");
+var variantMap = {
+  default: "border-[var(--color-border)]",
+  success: "border-[var(--color-success)]/30",
+  warning: "border-[var(--color-warning)]/30",
+  danger: "border-[var(--color-danger)]/30"
+};
+var variantIconMap = {
+  success: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--color-success)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 mt-0.5", children: [
+    /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+  ] }),
+  warning: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--color-warning)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 mt-0.5", children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] }),
+  danger: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--color-danger)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 mt-0.5", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] })
+};
+function ToastItem({ data, onDismiss }) {
+  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef();
+  useEffect(() => {
+    const dur = data.duration ?? 4e3;
+    if (dur > 0) {
+      timerRef.current = setTimeout(() => {
+        setExiting(true);
+        setTimeout(() => onDismiss(data.id), 200);
+      }, dur);
+    }
+    return () => clearTimeout(timerRef.current);
+  }, [data.duration, data.id, onDismiss]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        toastBase,
+        variantMap[data.variant || "default"],
+        exiting && "animate-[toast-out_0.2s_ease-in_forwards]"
+      ),
+      role: "alert",
+      children: [
+        data.variant && data.variant !== "default" && variantIconMap[data.variant],
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          data.title && /* @__PURE__ */ jsx("p", { className: "font-medium text-[var(--color-text-primary)]", children: data.title }),
+          data.description && /* @__PURE__ */ jsx("p", { className: "text-[var(--color-text-secondary)] mt-0.5", children: data.description }),
+          data.action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: data.action })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setExiting(true);
+              setTimeout(() => onDismiss(data.id), 200);
+            },
+            className: "absolute top-3 right-3 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors p-1",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const toast = useCallback((input) => {
+    const id = Math.random().toString(36).slice(2, 9);
+    setToasts((prev) => [...prev, { ...input, id }]);
+  }, []);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast, dismiss }, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ jsx("div", { className: containerStyles, children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { data: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+ToastProvider.displayName = "ToastProvider";
+var overlayStyles = "fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)] backdrop-blur-sm";
+var contentStyles = [
+  "fixed top-[20%] left-1/2 -translate-x-1/2 z-[var(--z-modal)]",
+  "w-full max-w-lg",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]",
+  "overflow-hidden"
+].join(" ");
+var inputStyles = [
+  "w-full bg-transparent text-[var(--color-text-primary)]",
+  "px-4 py-3 text-[var(--text-base)]",
+  "placeholder:text-[var(--color-text-muted)]",
+  "border-b border-[var(--color-border)]",
+  "focus:outline-none"
+].join(" ");
+var listStyles = "max-h-72 overflow-y-auto p-2";
+var groupLabelStyles = "px-2 py-1.5 text-[var(--text-xs)] font-medium text-[var(--color-text-muted)] uppercase tracking-wider";
+var itemStyles = [
+  "flex items-center gap-3 w-full px-3 py-2.5",
+  "text-[var(--text-sm)] text-[var(--color-text-secondary)]",
+  "rounded-[var(--radius)] cursor-pointer",
+  "transition-colors duration-[var(--transition-fast)]",
+  "outline-none"
+].join(" ");
+var itemActiveStyles = "bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]";
+var shortcutStyles = "ml-auto flex items-center gap-0.5 text-[10px] text-[var(--color-text-muted)]";
+var kbdStyles = "px-1.5 py-0.5 rounded-[3px] bg-[var(--color-surface-raised)] border border-[var(--color-border)] font-mono";
+var emptyStyles = "py-8 text-center text-[var(--text-sm)] text-[var(--color-text-muted)]";
+function CommandPalette({
+  commands,
+  placeholder = "Type a command or search\u2026",
+  open: controlledOpen,
+  onOpenChange,
+  emptyMessage = "No results found."
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef(null);
+  const isOpen = controlledOpen ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen(!isOpen);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, setOpen]);
+  const filtered = commands.filter(
+    (cmd) => cmd.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const groups = /* @__PURE__ */ new Map();
+  filtered.forEach((cmd) => {
+    const g = cmd.group || "";
+    if (!groups.has(g)) groups.set(g, []);
+    groups.get(g).push(cmd);
+  });
+  const flatItems = filtered;
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, flatItems.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && flatItems[activeIndex]) {
+        e.preventDefault();
+        flatItems[activeIndex].onAction();
+        setOpen(false);
+        setSearch("");
+      }
+    },
+    [activeIndex, flatItems, setOpen]
+  );
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [search]);
+  useEffect(() => {
+    if (!isOpen) setSearch("");
+  }, [isOpen]);
+  let itemIndex = -1;
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: isOpen, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: overlayStyles }),
+    /* @__PURE__ */ jsxs(DialogPrimitive.Content, { className: contentStyles, "aria-label": "Command palette", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4", children: [
+        /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--color-text-muted)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            className: inputStyles,
+            autoFocus: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { ref: listRef, className: listStyles, children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: emptyStyles, children: emptyMessage }) : Array.from(groups.entries()).map(([group, cmds]) => /* @__PURE__ */ jsxs("div", { children: [
+        group && /* @__PURE__ */ jsx("div", { className: groupLabelStyles, children: group }),
+        cmds.map((cmd) => {
+          itemIndex++;
+          const idx = itemIndex;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                itemStyles,
+                idx === activeIndex && itemActiveStyles
+              ),
+              onClick: () => {
+                cmd.onAction();
+                setOpen(false);
+                setSearch("");
+              },
+              onMouseEnter: () => setActiveIndex(idx),
+              children: [
+                cmd.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: cmd.icon }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: cmd.label }),
+                cmd.shortcut && /* @__PURE__ */ jsx("span", { className: shortcutStyles, children: cmd.shortcut.split("+").map((key, i) => /* @__PURE__ */ jsx("kbd", { className: kbdStyles, children: key }, i)) })
+              ]
+            },
+            cmd.id
+          );
+        })
+      ] }, group)) })
+    ] })
+  ] }) });
+}
+CommandPalette.displayName = "CommandPalette";
+var wrapperStyles = "w-full overflow-auto rounded-[var(--radius-lg)] border border-[var(--color-border)]";
+var tableStyles2 = "w-full border-collapse";
+var thStyles2 = [
+  "px-4 py-3 text-left text-[var(--text-xs)] font-medium text-[var(--color-text-muted)]",
+  "uppercase tracking-wider bg-[var(--color-bg-secondary)]",
+  "border-b border-[var(--color-border)]"
+].join(" ");
+var tdStyles2 = [
+  "px-4 py-3 text-[var(--text-sm)] text-[var(--color-text-secondary)]",
+  "border-b border-[var(--color-border)]"
+].join(" ");
+var trHoverStyles = "hover:bg-[var(--color-surface-hover)] transition-colors duration-[var(--transition-fast)]";
+var trSelectedStyles = "bg-[var(--color-primary)]/5";
+var sortButtonStyles = "inline-flex items-center gap-1 cursor-pointer hover:text-[var(--color-text-primary)] transition-colors";
+var checkboxStyles = [
+  "h-4 w-4 rounded-[3px] cursor-pointer appearance-none",
+  "border border-[var(--color-border)] bg-[var(--color-surface)]",
+  "checked:bg-[var(--color-primary)] checked:border-[var(--color-primary)]",
+  "transition-all duration-[var(--transition-fast)]"
+].join(" ");
+var emptyRowStyles = "px-4 py-12 text-center text-[var(--text-sm)] text-[var(--color-text-muted)]";
+function DataTableInner({
+  className,
+  columns,
+  data,
+  sortable = false,
+  onSort,
+  selectable = false,
+  selectedRows: controlledSelected,
+  onSelectionChange,
+  emptyMessage = "No data available.",
+  stickyHeader = false,
+  ...props
+}, ref) {
+  const [internalSort, setInternalSort] = useState(null);
+  const [internalSelected, setInternalSelected] = useState(/* @__PURE__ */ new Set());
+  const selected = controlledSelected ?? internalSelected;
+  const setSelected = onSelectionChange ?? setInternalSelected;
+  const sortedData = useMemo(() => {
+    if (!internalSort || onSort) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[internalSort.key];
+      const bVal = b[internalSort.key];
+      const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+      return internalSort.dir === "asc" ? cmp : -cmp;
+    });
+  }, [data, internalSort, onSort]);
+  const handleSort = (key) => {
+    const newDir = internalSort?.key === key && internalSort.dir === "asc" ? "desc" : "asc";
+    setInternalSort({ key, dir: newDir });
+    onSort?.(key, newDir);
+  };
+  const toggleRow = (i) => {
+    const next = new Set(selected);
+    if (next.has(i)) next.delete(i);
+    else next.add(i);
+    setSelected(next);
+  };
+  const toggleAll = () => {
+    if (selected.size === data.length) setSelected(/* @__PURE__ */ new Set());
+    else setSelected(new Set(data.map((_, i) => i)));
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(wrapperStyles, className), ...props, children: /* @__PURE__ */ jsxs("table", { className: tableStyles2, children: [
+    /* @__PURE__ */ jsx("thead", { className: stickyHeader ? "sticky top-0 z-10" : void 0, children: /* @__PURE__ */ jsxs("tr", { children: [
+      selectable && /* @__PURE__ */ jsx("th", { className: cn(thStyles2, "w-12"), children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: data.length > 0 && selected.size === data.length,
+          onChange: toggleAll,
+          className: checkboxStyles
+        }
+      ) }),
+      columns.map((col) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: cn(thStyles2, col.align === "center" && "text-center", col.align === "right" && "text-right"),
+          style: col.width ? { width: col.width } : void 0,
+          children: sortable || col.sortable ? /* @__PURE__ */ jsxs("button", { type: "button", className: sortButtonStyles, onClick: () => handleSort(col.key), children: [
+            col.header,
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col", children: [
+              /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", className: cn("opacity-30", internalSort?.key === col.key && internalSort.dir === "asc" && "opacity-100"), children: /* @__PURE__ */ jsx("path", { d: "M4 1L7 5H1L4 1Z", fill: "currentColor" }) }),
+              /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", className: cn("-mt-0.5 opacity-30", internalSort?.key === col.key && internalSort.dir === "desc" && "opacity-100"), children: /* @__PURE__ */ jsx("path", { d: "M4 7L1 3H7L4 7Z", fill: "currentColor" }) })
+            ] })
+          ] }) : col.header
+        },
+        col.key
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: sortedData.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: emptyRowStyles, children: emptyMessage }) }) : sortedData.map((row, i) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        className: cn(trHoverStyles, selected.has(i) && trSelectedStyles),
+        children: [
+          selectable && /* @__PURE__ */ jsx("td", { className: tdStyles2, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: selected.has(i),
+              onChange: () => toggleRow(i),
+              className: checkboxStyles
+            }
+          ) }),
+          columns.map((col) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn(tdStyles2, col.align === "center" && "text-center", col.align === "right" && "text-right"),
+              children: col.render ? col.render(row[col.key], row, i) : row[col.key]
+            },
+            col.key
+          ))
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+var DataTable = forwardRef(DataTableInner);
+DataTable.displayName = "DataTable";
+var stepsHorizontalStyles = "flex items-start gap-0";
+var stepsVerticalStyles = "flex flex-col gap-0";
+var stepWrapperVerticalStyles = "flex items-start gap-3";
+var stepCircleBase = [
+  "flex items-center justify-center shrink-0",
+  "h-8 w-8 rounded-full text-[var(--text-xs)] font-medium",
+  "border-2 transition-all duration-[var(--transition-base)]"
+].join(" ");
+var stepCircleComplete = "bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-foreground)]";
+var stepCircleCurrent = "border-[var(--color-primary)] text-[var(--color-primary)] bg-[var(--color-primary)]/10";
+var stepCircleUpcoming = "border-[var(--color-border)] text-[var(--color-text-muted)] bg-[var(--color-surface)]";
+var connectorHorizontalStyles = "flex-1 h-0.5 mx-2 transition-colors duration-[var(--transition-base)]";
+var connectorVerticalStyles = "w-0.5 ml-[15px] min-h-[24px] transition-colors duration-[var(--transition-base)]";
+var connectorComplete = "bg-[var(--color-primary)]";
+var connectorIncomplete = "bg-[var(--color-border)]";
+var stepTitleStyles = "text-[var(--text-sm)] font-medium text-[var(--color-text-primary)]";
+var stepDescriptionStyles = "text-[var(--text-xs)] text-[var(--color-text-muted)] mt-0.5";
+var Steps = forwardRef(
+  ({ className, steps, current, orientation = "horizontal", ...props }, ref) => {
+    const isHorizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          isHorizontal ? stepsHorizontalStyles : stepsVerticalStyles,
+          className
+        ),
+        ...props,
+        children: steps.map((step, i) => {
+          const status = i < current ? "complete" : i === current ? "current" : "upcoming";
+          const isLast = i === steps.length - 1;
+          if (isHorizontal) {
+            return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      stepCircleBase,
+                      status === "complete" && stepCircleComplete,
+                      status === "current" && stepCircleCurrent,
+                      status === "upcoming" && stepCircleUpcoming
+                    ),
+                    children: status === "complete" ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : step.icon || i + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                  /* @__PURE__ */ jsx("p", { className: stepTitleStyles, children: step.title }),
+                  step.description && /* @__PURE__ */ jsx("p", { className: stepDescriptionStyles, children: step.description })
+                ] })
+              ] }),
+              !isLast && /* @__PURE__ */ jsx("div", { className: cn(
+                connectorHorizontalStyles,
+                "mt-4",
+                i < current ? connectorComplete : connectorIncomplete
+              ) })
+            ] }, i);
+          }
+          return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: stepWrapperVerticalStyles, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    stepCircleBase,
+                    status === "complete" && stepCircleComplete,
+                    status === "current" && stepCircleCurrent,
+                    status === "upcoming" && stepCircleUpcoming
+                  ),
+                  children: status === "complete" ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : step.icon || i + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+                /* @__PURE__ */ jsx("p", { className: stepTitleStyles, children: step.title }),
+                step.description && /* @__PURE__ */ jsx("p", { className: stepDescriptionStyles, children: step.description })
+              ] })
+            ] }),
+            !isLast && /* @__PURE__ */ jsx("div", { className: cn(
+              connectorVerticalStyles,
+              i < current ? connectorComplete : connectorIncomplete
+            ) })
+          ] }, i);
+        })
+      }
+    );
+  }
+);
+Steps.displayName = "Steps";
+var shellStyles = "flex h-screen w-full overflow-hidden bg-[var(--color-bg)]";
+var mainStyles = "flex-1 flex flex-col overflow-hidden";
+var contentStyles2 = "flex-1 overflow-auto";
+var AppShell = forwardRef(
+  ({ className, sidebar, navbar, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn(shellStyles, className), ...props, children: [
+    sidebar,
+    /* @__PURE__ */ jsxs("div", { className: mainStyles, children: [
+      navbar,
+      /* @__PURE__ */ jsx("main", { className: contentStyles2, children })
+    ] })
+  ] })
+);
+AppShell.displayName = "AppShell";
+
+// src/components/page-header/page-header.styles.ts
+var pageHeaderStyles = [
+  "flex items-start justify-between gap-4 pb-6"
+].join(" ");
+var pageHeaderTitleStyles = "text-xl font-semibold text-[var(--color-text-primary)] tracking-tight";
+var pageHeaderDescriptionStyles = "text-[var(--text-sm)] text-[var(--color-text-muted)] mt-1";
+var PageHeader = forwardRef(
+  ({ className, title, description, breadcrumbs, actions, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), ...props, children: [
+    breadcrumbs && /* @__PURE__ */ jsx("div", { className: "mb-3", children: breadcrumbs }),
+    /* @__PURE__ */ jsxs("div", { className: pageHeaderStyles, children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h1", { className: pageHeaderTitleStyles, children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: pageHeaderDescriptionStyles, children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
+    ] })
+  ] })
+);
+PageHeader.displayName = "PageHeader";
+
+// src/components/navbar/navbar.styles.ts
+var navbarStyles = [
+  "flex items-center justify-between h-14 px-6",
+  "bg-[var(--color-surface)] border-b border-[var(--color-border)]",
+  "shrink-0"
+].join(" ");
+var Navbar = forwardRef(
+  ({ className, leftContent, centerContent, rightContent, children, ...props }, ref) => /* @__PURE__ */ jsxs("header", { ref, className: cn(navbarStyles, className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: leftContent }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: centerContent }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: rightContent })
+  ] })
+);
+Navbar.displayName = "Navbar";
+
+// src/components/drawer/drawer.styles.ts
+var drawerOverlayStyles = [
+  "fixed inset-0 z-[var(--z-overlay)]",
+  "bg-[var(--color-overlay)]",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+].join(" ");
+var drawerContentBase = [
+  "fixed z-[var(--z-modal)] bg-[var(--color-surface)]",
+  "border-[var(--color-border)]",
+  "shadow-lg flex flex-col",
+  "focus:outline-none"
+].join(" ");
+var drawerSides = {
+  right: "inset-y-0 right-0 border-l data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right",
+  left: "inset-y-0 left-0 border-r data-[state=open]:animate-in data-[state=open]:slide-in-from-left data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left",
+  top: "inset-x-0 top-0 border-b data-[state=open]:animate-in data-[state=open]:slide-in-from-top data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top",
+  bottom: "inset-x-0 bottom-0 border-t data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
+};
+var drawerSizes = {
+  right: { sm: "w-[320px]", md: "w-[420px]", lg: "w-[560px]", xl: "w-[720px]", full: "w-screen" },
+  left: { sm: "w-[320px]", md: "w-[420px]", lg: "w-[560px]", xl: "w-[720px]", full: "w-screen" },
+  top: { sm: "h-[200px]", md: "h-[320px]", lg: "h-[480px]", xl: "h-[640px]", full: "h-screen" },
+  bottom: { sm: "h-[200px]", md: "h-[320px]", lg: "h-[480px]", xl: "h-[640px]", full: "h-screen" }
+};
+var drawerHeaderStyles = [
+  "flex items-center justify-between px-6 py-4",
+  "border-b border-[var(--color-border)]",
+  "shrink-0"
+].join(" ");
+var drawerTitleStyles = "text-lg font-semibold text-[var(--color-text-primary)]";
+var drawerDescriptionStyles = "text-[var(--text-sm)] text-[var(--color-text-muted)] mt-1";
+var drawerBodyStyles = "flex-1 overflow-y-auto p-6";
+var drawerFooterStyles = [
+  "flex items-center justify-end gap-3 px-6 py-4",
+  "border-t border-[var(--color-border)]",
+  "shrink-0"
+].join(" ");
+var drawerCloseStyles = [
+  "p-1.5 rounded-[var(--radius)]",
+  "text-[var(--color-text-muted)]",
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "cursor-pointer"
+].join(" ");
+var Drawer = ({ children, ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props, children });
+var DrawerTrigger = DialogPrimitive.Trigger;
+var DrawerClose = DialogPrimitive.Close;
+var DrawerContent = forwardRef(
+  ({ children, side = "right", size = "md", className }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: drawerOverlayStyles }),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          drawerContentBase,
+          drawerSides[side],
+          drawerSizes[side]?.[size],
+          className
+        ),
+        children
+      }
+    )
+  ] })
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({
+  children,
+  className,
+  onClose
+}) => /* @__PURE__ */ jsxs("div", { className: cn(drawerHeaderStyles, className), children: [
+  /* @__PURE__ */ jsx("div", { children }),
+  onClose !== void 0 ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: drawerCloseStyles, children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] }) }) : /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: drawerCloseStyles, children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] }) })
+] });
+var DrawerTitle = ({ children, className }) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: cn(drawerTitleStyles, className), children });
+var DrawerDescription = ({ children, className }) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: cn(drawerDescriptionStyles, className), children });
+var DrawerBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: cn(drawerBodyStyles, className), children });
+var DrawerFooter = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: cn(drawerFooterStyles, className), children });
+Drawer.displayName = "Drawer";
+
+// src/components/accordion/accordion.styles.ts
+var accordionStyles = "divide-y divide-[var(--color-border)] border border-[var(--color-border)] rounded-[var(--radius-lg)] overflow-hidden";
+var accordionItemStyles = "bg-[var(--color-surface)]";
+var accordionTriggerStyles = [
+  "flex items-center justify-between w-full",
+  "px-4 py-3",
+  "text-[var(--text-sm)] font-medium text-[var(--color-text-primary)]",
+  "hover:bg-[var(--color-surface-hover)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "cursor-pointer select-none",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-inset"
+].join(" ");
+var accordionContentStyles = [
+  "px-4 pb-4 pt-0",
+  "text-[var(--text-sm)] text-[var(--color-text-secondary)]"
+].join(" ");
+var accordionChevronStyles = [
+  "shrink-0 text-[var(--color-text-muted)]",
+  "transition-transform duration-200"
+].join(" ");
+function Accordion({
+  items,
+  type = "single",
+  defaultValue,
+  className
+}) {
+  const [openItems, setOpenItems] = useState(() => {
+    if (!defaultValue) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
+  });
+  const toggle = useCallback(
+    (value) => {
+      setOpenItems((prev) => {
+        const next = new Set(prev);
+        if (next.has(value)) {
+          next.delete(value);
+        } else {
+          if (type === "single") {
+            next.clear();
+          }
+          next.add(value);
+        }
+        return next;
+      });
+    },
+    [type]
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn(accordionStyles, className), children: items.map((item) => {
+    const isOpen = openItems.has(item.value);
+    return /* @__PURE__ */ jsxs("div", { className: accordionItemStyles, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => !item.disabled && toggle(item.value),
+          disabled: item.disabled,
+          "aria-expanded": isOpen,
+          className: cn(
+            accordionTriggerStyles,
+            item.disabled && "opacity-50 cursor-not-allowed"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: item.trigger }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: cn(
+                  accordionChevronStyles,
+                  isOpen && "rotate-180"
+                ),
+                children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "overflow-hidden transition-all duration-200",
+          style: {
+            maxHeight: isOpen ? "1000px" : "0px",
+            opacity: isOpen ? 1 : 0
+          },
+          children: /* @__PURE__ */ jsx("div", { className: accordionContentStyles, children: item.content })
+        }
+      )
+    ] }, item.value);
+  }) });
+}
+Accordion.displayName = "Accordion";
+
+// src/components/slider/slider.styles.ts
+var sliderTrackStyles = [
+  "relative w-full rounded-full cursor-pointer",
+  "bg-[var(--color-surface-raised)]"
+].join(" ");
+var sliderTrackSizes = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+var sliderFillStyles = "absolute left-0 top-0 h-full rounded-full bg-[var(--color-primary)] transition-all duration-75";
+var sliderThumbStyles = [
+  "absolute top-1/2 -translate-y-1/2 -translate-x-1/2",
+  "rounded-full bg-white border-2 border-[var(--color-primary)]",
+  "shadow-sm cursor-grab active:cursor-grabbing",
+  "transition-shadow duration-[var(--transition-fast)]",
+  "hover:shadow-[0_0_0_4px_var(--color-primary)]/20",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg)]"
+].join(" ");
+var sliderThumbSizes = {
+  sm: "h-3.5 w-3.5",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var sliderLabelStyles = "flex justify-between items-center mb-2 text-[var(--text-sm)] text-[var(--color-text-primary)]";
+var sliderValueStyles = "text-[var(--text-xs)] font-medium text-[var(--color-text-secondary)] tabular-nums";
+function Slider({
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  formatValue = (v) => String(v),
+  size = "md",
+  disabled = false,
+  className
+}) {
+  const trackRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const clamp = (val) => Math.min(max, Math.max(min, val));
+  const snap = (val) => Math.round((val - min) / step) * step + min;
+  const percent = (clamp(value) - min) / (max - min) * 100;
+  const getValueFromPosition = useCallback(
+    (clientX) => {
+      const track = trackRef.current;
+      if (!track) return value;
+      const rect = track.getBoundingClientRect();
+      const fraction = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      return snap(clamp(min + fraction * (max - min)));
+    },
+    [min, max, step, value]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setIsDragging(true);
+      const newValue = getValueFromPosition(e.clientX);
+      if (newValue !== value) onChange?.(newValue);
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [disabled, getValueFromPosition, onChange, value]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isDragging || disabled) return;
+      const newValue = getValueFromPosition(e.clientX);
+      if (newValue !== value) onChange?.(newValue);
+    },
+    [isDragging, disabled, getValueFromPosition, onChange, value]
+  );
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      let newValue = value;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          newValue = clamp(value + step);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          newValue = clamp(value - step);
+          break;
+        case "Home":
+          newValue = min;
+          break;
+        case "End":
+          newValue = max;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      onChange?.(newValue);
+    },
+    [disabled, value, step, min, max, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", disabled && "opacity-50 pointer-events-none", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: sliderLabelStyles, children: [
+      label && /* @__PURE__ */ jsx("span", { children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: sliderValueStyles, children: formatValue(clamp(value)) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        className: cn(sliderTrackStyles, sliderTrackSizes[size]),
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: sliderFillStyles,
+              style: { width: `${percent}%` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": clamp(value),
+              "aria-label": label,
+              className: cn(sliderThumbStyles, sliderThumbSizes[size]),
+              style: { left: `${percent}%` },
+              onKeyDown: handleKeyDown
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+Slider.displayName = "Slider";
+var sizeMap = {
+  xs: { dimension: "h-6 w-6", text: "text-[10px]", overlap: "-ml-1.5" },
+  sm: { dimension: "h-8 w-8", text: "text-[var(--text-xs)]", overlap: "-ml-2" },
+  md: { dimension: "h-10 w-10", text: "text-[var(--text-sm)]", overlap: "-ml-2.5" },
+  lg: { dimension: "h-12 w-12", text: "text-[var(--text-sm)]", overlap: "-ml-3" },
+  xl: { dimension: "h-16 w-16", text: "text-[var(--text-base)]", overlap: "-ml-4" }
+};
+function AvatarGroup({ children, max = 5, size = "md", className }) {
+  const childArray = React26.Children.toArray(children);
+  const visible = childArray.slice(0, max);
+  const overflow = childArray.length - max;
+  const s = sizeMap[size] || sizeMap.md;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", className), children: [
+    visible.map((child, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          i > 0 && s.overlap,
+          "ring-2 ring-[var(--color-bg)] rounded-full"
+        ),
+        children: child
+      },
+      i
+    )),
+    overflow > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          s.overlap,
+          s.dimension,
+          s.text,
+          "inline-flex items-center justify-center",
+          "rounded-full font-medium",
+          "bg-[var(--color-surface-raised)] text-[var(--color-text-secondary)]",
+          "border-2 border-[var(--color-bg)]"
+        ),
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    )
+  ] });
+}
+AvatarGroup.displayName = "AvatarGroup";
+var overlayStyles2 = [
+  "fixed inset-0 z-[var(--z-overlay)]",
+  "bg-[var(--color-overlay)]",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+].join(" ");
+var contentStyles3 = [
+  "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
+  "-translate-x-1/2 -translate-y-1/2",
+  "w-full max-w-md p-6",
+  "rounded-[var(--radius-lg)]",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "shadow-lg",
+  "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"
+].join(" ");
+var titleStyles = "text-lg font-semibold text-[var(--color-text-primary)]";
+var descriptionStyles = "mt-2 text-[var(--text-sm)] text-[var(--color-text-muted)] leading-relaxed";
+var actionsStyles = "mt-6 flex items-center justify-end gap-3";
+var cancelBtnStyles = [
+  "inline-flex items-center justify-center h-9 px-4",
+  "text-[var(--text-sm)] font-medium",
+  "rounded-[var(--radius)]",
+  "bg-transparent border border-[var(--color-border)]",
+  "text-[var(--color-text-secondary)]",
+  "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "cursor-pointer"
+].join(" ");
+var confirmBtnBase = [
+  "inline-flex items-center justify-center h-9 px-4",
+  "text-[var(--text-sm)] font-medium",
+  "rounded-[var(--radius)]",
+  "text-white",
+  "transition-colors duration-[var(--transition-fast)]",
+  "disabled:opacity-50 disabled:pointer-events-none",
+  "cursor-pointer"
+].join(" ");
+var confirmBtnVariants = {
+  danger: "bg-[var(--color-danger)] hover:bg-[var(--color-danger)]/90",
+  primary: "bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)]"
+};
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  variant = "danger",
+  onConfirm,
+  onCancel,
+  trigger,
+  loading = false
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Root, { open, onOpenChange, children: [
+    trigger && /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, { className: overlayStyles2 }),
+      /* @__PURE__ */ jsxs(AlertDialogPrimitive.Content, { className: contentStyles3, children: [
+        /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { className: titleStyles, children: title }),
+        description && /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { className: descriptionStyles, children: description }),
+        /* @__PURE__ */ jsxs("div", { className: actionsStyles, children: [
+          /* @__PURE__ */ jsx(
+            AlertDialogPrimitive.Cancel,
+            {
+              className: cancelBtnStyles,
+              onClick: onCancel,
+              children: cancelText
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            AlertDialogPrimitive.Action,
+            {
+              className: cn(confirmBtnBase, confirmBtnVariants[variant]),
+              onClick: onConfirm,
+              disabled: loading,
+              children: [
+                loading && /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4 mr-2", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+                ] }),
+                confirmText
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+ConfirmDialog.displayName = "ConfirmDialog";
 
-export { Badge, Button, Card, CardBody, CardFooter, CardHeader, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownSeparator, DropdownTrigger, Input, Modal, ModalContent, ModalDescription, ModalFooter, ModalTitle, ModalTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarToggle, Table, TableWrapper, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Th, Thead, Tr, badgeVariants, buttonVariants, cardVariants, cn, inputVariants, useSidebar };
+export { Accordion, Alert, AppShell, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmDialog, DataTable, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownSeparator, DropdownTrigger, EmptyState, Input, Modal, ModalContent, ModalDescription, ModalFooter, ModalTitle, ModalTrigger, Navbar, PageHeader, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, Select, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarToggle, Skeleton, Slider, StatCard, Steps, Switch, Table, TableWrapper, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Textarea, Th, Thead, ThemeProvider, ToastProvider, Tooltip, TooltipProvider, Tr, badgeVariants, buttonVariants, cardVariants, cn, inputVariants, textareaVariants, useSidebar, useTheme, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map