@slipstream-ui/core 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -48,11 +48,269 @@ function usePresence(open, animate, exitMs = 200) {
   return { present, exiting: present && !open };
 }
 
-// src/components/button/Button.tsx
+// src/components/app-shell/AppShell.tsx
+import * as React3 from "react";
+
+// src/components/drawer/Drawer.tsx
 import * as React2 from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var sideClasses = {
+  right: "inset-y-0 right-0 border-l",
+  left: "inset-y-0 left-0 border-r",
+  top: "inset-x-0 top-0 border-b",
+  bottom: "inset-x-0 bottom-0 border-t"
+};
+var sideWidths = {
+  sm: "w-72",
+  md: "w-96",
+  lg: "w-[32rem]",
+  xl: "w-[40rem]",
+  "2xl": "w-[48rem]"
+};
+var sideHeights = {
+  sm: "h-48",
+  md: "h-80",
+  lg: "h-[32rem]",
+  xl: "h-[40rem]",
+  "2xl": "h-[48rem]"
+};
+var sizeClasses = {
+  right: sideWidths,
+  left: sideWidths,
+  top: sideHeights,
+  bottom: sideHeights
+};
+function extentStyle(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var slideIn = {
+  right: "slide-in-from-right",
+  left: "slide-in-from-left",
+  top: "slide-in-from-top",
+  bottom: "slide-in-from-bottom"
+};
+var slideOut = {
+  right: "slide-out-to-right",
+  left: "slide-out-to-left",
+  top: "slide-out-to-top",
+  bottom: "slide-out-to-bottom"
+};
+function Drawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  side = "right",
+  size = "md",
+  width,
+  height,
+  closeOnBackdrop = true,
+  showClose = true,
+  initialFocusRef,
+  ariaLabel,
+  animate = false
+}) {
+  const drawerRef = React2.useRef(null);
+  const previouslyFocused = React2.useRef(null);
+  const titleId = React2.useId();
+  const descriptionId = React2.useId();
+  const { present, exiting } = usePresence(open, animate);
+  React2.useEffect(() => {
+    if (open) {
+      previouslyFocused.current = document.activeElement;
+      return;
+    }
+    previouslyFocused.current?.focus?.();
+    previouslyFocused.current = null;
+  }, [open]);
+  React2.useEffect(() => {
+    if (!open || !present) return;
+    const node = drawerRef.current;
+    const target = initialFocusRef?.current ?? node?.querySelector(FOCUSABLE) ?? node;
+    target?.focus();
+  }, [open, present, initialFocusRef]);
+  React2.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onOpenChange(false);
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const node = drawerRef.current;
+      if (!node) return;
+      const focusable = Array.from(node.querySelectorAll(FOCUSABLE));
+      if (focusable.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || !node.contains(active))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+  if (!present || typeof document === "undefined") return null;
+  const isVerticalSide = side === "top" || side === "bottom";
+  const customExtent = isVerticalSide ? extentStyle(height) : extentStyle(width);
+  const motion = animate ? cn(
+    "duration-200 motion-reduce:animate-none",
+    exiting ? `animate-out ${slideOut[side]}` : `animate-in ${slideIn[side]}`
+  ) : void 0;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50",
+        onMouseDown: (event) => {
+          if (closeOnBackdrop && event.target === event.currentTarget) onOpenChange(false);
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: drawerRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": ariaLabel ?? title,
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": description ? descriptionId : void 0,
+            tabIndex: -1,
+            className: cn(
+              "fixed flex flex-col bg-background shadow-xl border-border",
+              sideClasses[side],
+              sizeClasses[side][size],
+              motion
+            ),
+            style: customExtent ? { [isVerticalSide ? "height" : "width"]: customExtent } : void 0,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border px-5 py-4", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-semibold leading-tight", children: title }),
+                  description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-1 text-sm text-muted-foreground", children: description })
+                ] }),
+                showClose && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onOpenChange(false),
+                    "aria-label": "Close drawer",
+                    className: "-mr-1 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: "\u2715"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/app-shell/AppShell.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Sidebar({
+  sections,
+  heading,
+  footer,
+  activeHref,
+  linkComponent,
+  label = "Primary",
+  className,
+  ...props
+}) {
+  const Link = linkComponent ?? "a";
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex h-full min-h-0 flex-col gap-6 p-4", className), ...props, children: [
+    heading && /* @__PURE__ */ jsx2("div", { className: "px-2", children: heading }),
+    /* @__PURE__ */ jsx2("nav", { "aria-label": label, className: "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto", children: sections.map((section, index) => /* @__PURE__ */ jsxs2("div", { children: [
+      section.title && /* @__PURE__ */ jsx2("p", { className: "mb-1.5 px-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: section.title }),
+      /* @__PURE__ */ jsx2("ul", { className: "space-y-0.5", children: section.items.map((item) => {
+        const active = item.active ?? (activeHref !== void 0 && item.href === activeHref);
+        return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+          Link,
+          {
+            href: item.href,
+            "aria-current": active ? "page" : void 0,
+            className: cn(
+              "flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              active ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            ),
+            children: [
+              item.icon && /* @__PURE__ */ jsx2("span", { className: "shrink-0 [&_svg]:size-4", children: item.icon }),
+              /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+              item.badge && /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-xs", children: item.badge })
+            ]
+          }
+        ) }, item.href);
+      }) })
+    ] }, section.title ?? `section-${index}`)) }),
+    footer && /* @__PURE__ */ jsx2("div", { className: "border-t border-border pt-4", children: footer })
+  ] });
+}
+function AppShell({
+  sidebar,
+  header,
+  hideMobileMenu = false,
+  sidebarWidth = "w-64",
+  className,
+  children,
+  ...props
+}) {
+  const [mobileOpen, setMobileOpen] = React3.useState(false);
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-screen bg-background text-foreground", className), ...props, children: [
+    sidebar && /* @__PURE__ */ jsx2("aside", { className: cn("hidden shrink-0 border-r border-border md:block", sidebarWidth), children: sidebar }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      (header || sidebar && !hideMobileMenu) && /* @__PURE__ */ jsxs2("header", { className: "sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-background/80 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: [
+        sidebar && !hideMobileMenu && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMobileOpen(true),
+            "aria-label": "Open navigation",
+            className: "rounded-md border border-border p-2 text-muted-foreground hover:bg-muted md:hidden",
+            children: /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\u2630" })
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: header })
+      ] }),
+      /* @__PURE__ */ jsx2("main", { className: "min-w-0 flex-1", children })
+    ] }),
+    sidebar && /* @__PURE__ */ jsx2(
+      Drawer,
+      {
+        open: mobileOpen,
+        onOpenChange: setMobileOpen,
+        title: "Navigation",
+        side: "left",
+        size: "sm",
+        animate: true,
+        children: sidebar
+      }
+    )
+  ] });
+}
+
+// src/components/button/Button.tsx
+import * as React4 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -66,6 +324,12 @@ var buttonVariants = cva(
         warning: "bg-warning text-warning-foreground hover:bg-warning/90",
         info: "bg-info text-info-foreground hover:bg-info/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        // Colored outlines: semantic border + label on the page surface, with
+        // a faint tint on hover — mirrors the Alert variant recipe.
+        "outline-destructive": "border border-destructive/50 bg-background text-destructive hover:border-destructive hover:bg-destructive/10",
+        "outline-success": "border border-success/50 bg-background text-success hover:border-success hover:bg-success/10",
+        "outline-warning": "border border-warning/50 bg-background text-warning hover:border-warning hover:bg-warning/10",
+        "outline-info": "border border-info/50 bg-background text-info hover:border-info hover:bg-info/10",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
@@ -83,10 +347,10 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React2.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx3(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -99,19 +363,22 @@ var Button = React2.forwardRef(
 Button.displayName = "Button";
 
 // src/components/button-group/ButtonGroup.tsx
-import * as React3 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ButtonGroup = React3.forwardRef(
-  ({ orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx2(
+import * as React5 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ButtonGroup = React5.forwardRef(
+  ({ orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx4(
     "div",
     {
       ref,
       "data-slot": "button-group",
       role: "group",
       className: cn(
-        "inline-flex",
-        orientation === "horizontal" ? "-space-x-px [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md" : "-space-y-px [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md",
-        "[&>*]:rounded-none [&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+        "inline-flex overflow-hidden rounded-md border border-border bg-background",
+        "[&>*]:rounded-none [&>*]:border-0",
+        "[&>*:focus-visible]:ring-inset [&>*:focus-visible]:ring-offset-0",
+        // divide-* compiles to `.group > * ~ * { border-left/top }` — higher
+        // specificity than the lead-strip above, so seams stay exact.
+        orientation === "horizontal" ? "divide-x divide-border" : "flex-col divide-y divide-border",
         className
       ),
       ...props
@@ -121,11 +388,11 @@ var ButtonGroup = React3.forwardRef(
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/input/Input.tsx
-import * as React4 from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Input = React4.forwardRef(
+import * as React6 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Input = React6.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       "input",
       {
         type,
@@ -146,13 +413,13 @@ var Input = React4.forwardRef(
 Input.displayName = "Input";
 
 // src/components/input-group/InputGroup.tsx
-import * as React7 from "react";
+import * as React9 from "react";
 
 // src/components/textarea/Textarea.tsx
-import * as React5 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Textarea = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+import * as React7 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Textarea = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
     "textarea",
     {
       ref,
@@ -170,47 +437,61 @@ var Textarea = React5.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/select/Select.tsx
-import * as React6 from "react";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-var Select = React6.forwardRef(function Select2({ options, label, value, defaultValue, onChange, id, className, ...props }, ref) {
-  const generatedId = React6.useId();
+import * as React8 from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Select = React8.forwardRef(function Select2({ options, groups, label, placeholder, multiple = false, value, defaultValue, onChange, id, className, ...props }, ref) {
+  const generatedId = React8.useId();
   const selectId = id ?? generatedId;
   const labelId = `${selectId}-label`;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-    label && /* @__PURE__ */ jsx5("label", { id: labelId, htmlFor: selectId, className: "text-sm font-medium", children: label }),
-    /* @__PURE__ */ jsx5(
+  const renderOption = (option) => /* @__PURE__ */ jsx7("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value);
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsx7("label", { id: labelId, htmlFor: selectId, className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs3(
       "select",
       {
         ref,
         id: selectId,
+        multiple,
         "aria-labelledby": label ? labelId : void 0,
         className: cn(
           "rounded-md border border-input bg-background px-3 py-2 text-sm",
+          multiple && "min-h-32",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          "disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         value,
         defaultValue,
-        onChange: (event) => onChange?.(event.target.value),
+        onChange: (event) => {
+          if (!onChange) return;
+          if (multiple) {
+            onChange(Array.from(event.target.selectedOptions, (option) => option.value));
+            return;
+          }
+          onChange(event.target.value);
+        },
         ...props,
-        children: options.map((option) => /* @__PURE__ */ jsx5("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        children: [
+          placeholder && /* @__PURE__ */ jsx7("option", { value: "", disabled: true, children: placeholder }),
+          groups ? groups.map((group) => /* @__PURE__ */ jsx7("optgroup", { label: group.label, children: group.options.map(renderOption) }, group.label)) : (options ?? []).map(renderOption)
+        ]
       }
     )
   ] });
 });
 
 // src/components/input-group/InputGroup.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var isNestedField = (child) => React7.isValidElement(child) && (child.type === Input || child.type === Textarea || child.type === Select);
-var InputGroup = React7.forwardRef(
+import { jsx as jsx8 } from "react/jsx-runtime";
+var isNestedField = (child) => React9.isValidElement(child) && (child.type === Input || child.type === Textarea || child.type === Select);
+var InputGroup = React9.forwardRef(
   ({ id, "aria-describedby": describedBy, "aria-invalid": invalid, className, children, ...props }, ref) => {
     let wiredChildren = children;
     if (id !== void 0 || describedBy !== void 0 || invalid !== void 0) {
-      const items = React7.Children.toArray(children);
+      const items = React9.Children.toArray(children);
       const fieldIndex = items.findIndex(isNestedField);
       if (fieldIndex !== -1) {
         const field = items[fieldIndex];
-        items[fieldIndex] = isNestedField(field) ? React7.cloneElement(field, {
+        items[fieldIndex] = isNestedField(field) ? React9.cloneElement(field, {
           ...id !== void 0 && { id },
           ...describedBy !== void 0 && { "aria-describedby": describedBy },
           ...invalid !== void 0 && { "aria-invalid": invalid }
@@ -225,7 +506,7 @@ var InputGroup = React7.forwardRef(
         };
       }
     }
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         ref,
@@ -233,12 +514,15 @@ var InputGroup = React7.forwardRef(
         className: cn(
           "flex h-10 w-full items-center overflow-hidden rounded-md border border-input bg-background",
           "ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-          // The group is the control: strip chrome from nested fields so
-          // only the outer border shows. Literal variants survive purging.
-          "[&_input]:min-w-0 [&_input]:flex-1 [&_input]:border-0 [&_input]:bg-transparent [&_input]:px-3 [&_input]:py-2 [&_input]:shadow-none",
-          "[&_input]:focus-visible:ring-0 [&_input]:focus-visible:ring-offset-0",
-          "[&_textarea]:border-0 [&_textarea]:bg-transparent [&_textarea]:shadow-none [&_textarea]:focus-visible:ring-0",
-          "[&_select]:border-0 [&_select]:bg-transparent [&_select]:shadow-none [&_select]:focus-visible:ring-0",
+          // The group's outline is the only outline: force-strip every
+          // nested field's border, radius, ring, shadow and UA focus outline.
+          // Important flags defeat both the component's own utilities
+          // (Input ships `border` + `focus-visible:ring-2`) and browser
+          // defaults — no seams appear where an addon sits flush.
+          "[&_input]:h-full [&_input]:min-w-0 [&_input]:flex-1 [&_input]:rounded-none [&_input]:px-3 [&_input]:py-2",
+          "[&_input]:!border-0 [&_input]:!bg-transparent [&_input]:!shadow-none [&_input]:!outline-none [&_input]:!ring-0 [&_input]:!ring-offset-0",
+          "[&_textarea]:!border-0 [&_textarea]:!rounded-none [&_textarea]:!bg-transparent [&_textarea]:!shadow-none [&_textarea]:!outline-none [&_textarea]:!ring-0 [&_textarea]:!ring-offset-0",
+          "[&_select]:!border-0 [&_select]:!rounded-none [&_select]:!bg-transparent [&_select]:!shadow-none [&_select]:!outline-none [&_select]:!ring-0 [&_select]:!ring-offset-0",
           "[&_input:disabled]:cursor-not-allowed",
           className
         ),
@@ -249,8 +533,8 @@ var InputGroup = React7.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-var InputGroupAddon = React7.forwardRef(
-  ({ side = "left", variant = "ghost", className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var InputGroupAddon = React9.forwardRef(
+  ({ side = "left", variant = "ghost", className, ...props }, ref) => /* @__PURE__ */ jsx8(
     "div",
     {
       ref,
@@ -268,9 +552,10 @@ var InputGroupAddon = React7.forwardRef(
 InputGroupAddon.displayName = "InputGroupAddon";
 
 // src/components/badge/Badge.tsx
-import * as React8 from "react";
+import * as React10 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var badgeVariants = cva2(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -287,16 +572,19 @@ var badgeVariants = cva2(
     }
   }
 );
-var Badge = React8.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx7("div", { ref, className: cn(badgeVariants({ variant }), className), ...props })
+var Badge = React10.forwardRef(
+  ({ className, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot2 : "div";
+    return /* @__PURE__ */ jsx9(Comp, { ref, className: cn(badgeVariants({ variant }), className), ...props });
+  }
 );
 Badge.displayName = "Badge";
 
 // src/components/avatar/Avatar.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   AvatarPrimitive.Root,
   {
     ref,
@@ -308,7 +596,7 @@ var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   AvatarPrimitive.Image,
   {
     ref,
@@ -317,7 +605,7 @@ var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -332,7 +620,7 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/spinner/Spinner.tsx
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var spinnerVariants = cva3(
   "inline-block animate-spin rounded-full border-2 border-current border-t-transparent text-muted-foreground motion-reduce:animate-none",
   {
@@ -349,83 +637,83 @@ var spinnerVariants = cva3(
   }
 );
 function Spinner({ className, size, label = "Loading...", ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       role: "status",
       className: cn(spinnerVariants({ size }), className),
       ...props,
-      children: /* @__PURE__ */ jsx9("span", { className: "sr-only", children: label })
+      children: /* @__PURE__ */ jsx11("span", { className: "sr-only", children: label })
     }
   );
 }
 
 // src/components/toast/Toast.tsx
-import * as React10 from "react";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var ToastContext = React10.createContext(null);
+import * as React12 from "react";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var ToastContext = React12.createContext(null);
 var DEFAULT_DURATION = 5e3;
 function ToastProvider({ children, label = "Notifications" }) {
-  const [toasts, setToasts] = React10.useState([]);
-  const timers = React10.useRef(/* @__PURE__ */ new Map());
-  const dismiss = React10.useCallback((id) => {
-    const timer = timers.current.get(id);
+  const [toasts2, setToasts] = React12.useState([]);
+  const timers2 = React12.useRef(/* @__PURE__ */ new Map());
+  const dismiss2 = React12.useCallback((id) => {
+    const timer = timers2.current.get(id);
     if (timer) {
       clearTimeout(timer);
-      timers.current.delete(id);
+      timers2.current.delete(id);
     }
     setToasts((current) => current.filter((entry) => entry.id !== id));
   }, []);
-  const toast = React10.useCallback(
+  const toast2 = React12.useCallback(
     (options) => {
       const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
       setToasts((current) => [...current, { ...options, id }]);
       const duration = options.duration ?? DEFAULT_DURATION;
       if (duration > 0) {
-        timers.current.set(
+        timers2.current.set(
           id,
-          setTimeout(() => dismiss(id), duration)
+          setTimeout(() => dismiss2(id), duration)
         );
       }
       return id;
     },
-    [dismiss]
+    [dismiss2]
   );
-  React10.useEffect(() => {
-    const pending = timers.current;
+  React12.useEffect(() => {
+    const pending = timers2.current;
     return () => {
       for (const timer of pending.values()) clearTimeout(timer);
       pending.clear();
     };
   }, []);
-  const value = React10.useMemo(() => ({ toasts, toast, dismiss }), [toasts, toast, dismiss]);
-  return /* @__PURE__ */ jsxs2(ToastContext.Provider, { value, children: [
+  const value = React12.useMemo(() => ({ toasts: toasts2, toast: toast2, dismiss: dismiss2 }), [toasts2, toast2, dismiss2]);
+  return /* @__PURE__ */ jsxs4(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx10(ToastRegion, { toasts, onDismiss: dismiss, label })
+    /* @__PURE__ */ jsx12(ToastRegion, { toasts: toasts2, onDismiss: dismiss2, label })
   ] });
 }
 function useToast() {
-  const context = React10.useContext(ToastContext);
+  const context = React12.useContext(ToastContext);
   if (!context) throw new Error("useToast must be used within a <ToastProvider>.");
   return context;
 }
 function ToastRegion({
-  toasts,
+  toasts: toasts2,
   onDismiss,
   label
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "ol",
     {
       "aria-label": label,
       className: "fixed bottom-4 right-4 z-50 flex w-full max-w-sm flex-col gap-2",
-      children: toasts.map((entry) => /* @__PURE__ */ jsxs2("li", { className: "rounded-lg border border-border bg-card p-4 shadow-lg", children: [
-        /* @__PURE__ */ jsxs2("div", { role: "status", className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx10("p", { className: "text-sm font-semibold", children: entry.title }),
-            entry.description && /* @__PURE__ */ jsx10("p", { className: "mt-1 text-sm text-muted-foreground", children: entry.description })
+      children: toasts2.map((entry) => /* @__PURE__ */ jsxs4("li", { className: "rounded-lg border border-border bg-card p-4 shadow-lg", children: [
+        /* @__PURE__ */ jsxs4("div", { role: "status", className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-sm font-semibold", children: entry.title }),
+            entry.description && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-sm text-muted-foreground", children: entry.description })
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -436,7 +724,7 @@ function ToastRegion({
             }
           )
         ] }),
-        entry.action && /* @__PURE__ */ jsx10(
+        entry.action && /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -453,165 +741,200 @@ function ToastRegion({
   );
 }
 
-// src/components/dialog/Dialog.tsx
-import * as React11 from "react";
-import { createPortal } from "react-dom";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function Dialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  closeOnBackdrop = true,
-  showClose = true,
-  initialFocusRef,
-  animate = false
-}) {
-  const dialogRef = React11.useRef(null);
-  const previouslyFocused = React11.useRef(null);
-  const titleId = React11.useId();
-  const descriptionId = React11.useId();
-  const { present, exiting } = usePresence(open, animate);
-  React11.useEffect(() => {
-    if (open) {
-      previouslyFocused.current = document.activeElement;
-      return;
-    }
-    previouslyFocused.current?.focus?.();
-    previouslyFocused.current = null;
-  }, [open]);
-  React11.useEffect(() => {
-    if (!open || !present) return;
-    const node = dialogRef.current;
-    const target = initialFocusRef?.current ?? node?.querySelector(FOCUSABLE) ?? node;
-    target?.focus();
-  }, [open, present, initialFocusRef]);
-  React11.useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        onOpenChange(false);
+// src/components/toast/Toaster.tsx
+import * as React13 from "react";
+
+// src/components/toast/toast-store.ts
+var DEFAULT_DURATION2 = 5e3;
+var toasts = [];
+var EMPTY = [];
+var listeners = /* @__PURE__ */ new Set();
+var timers = /* @__PURE__ */ new Map();
+function emit() {
+  for (const listener of listeners) listener(toasts);
+}
+function dismiss(id) {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  toasts = toasts.filter((entry) => entry.id !== id);
+  emit();
+}
+function show(options) {
+  const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  toasts = [...toasts, { ...options, id }];
+  emit();
+  const duration = options.duration ?? DEFAULT_DURATION2;
+  if (duration > 0) {
+    timers.set(
+      id,
+      setTimeout(() => dismiss(id), duration)
+    );
+  }
+  return id;
+}
+var toast = Object.assign(
+  (options) => show({ ...options, variant: options.variant ?? "default" }),
+  {
+    success: (title, description) => show({ title, description, variant: "success" }),
+    error: (title, description) => show({ title, description, variant: "error" }),
+    warning: (title, description) => show({ title, description, variant: "warning" }),
+    info: (title, description) => show({ title, description, variant: "info" }),
+    dismiss: (id) => {
+      if (id) {
+        dismiss(id);
         return;
       }
-      if (event.key !== "Tab") return;
-      const node = dialogRef.current;
-      if (!node) return;
-      const focusable = Array.from(node.querySelectorAll(FOCUSABLE));
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      const active = document.activeElement;
-      if (event.shiftKey && (active === first || active === node)) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener("keydown", onKeyDown, true);
-    return () => document.removeEventListener("keydown", onKeyDown, true);
-  }, [open, onOpenChange]);
-  if (!present || typeof document === "undefined") return null;
-  const motion = animate ? cn(
-    "duration-200 motion-reduce:animate-none",
-    exiting ? "animate-out fade-out-0 zoom-out-95" : "animate-in fade-in-0 zoom-in-95"
-  ) : void 0;
-  return createPortal(
-    /* @__PURE__ */ jsx11(
-      "div",
-      {
-        className: cn("fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4", motion),
-        onMouseDown: (event) => {
-          if (closeOnBackdrop && event.target === event.currentTarget) onOpenChange(false);
-        },
-        children: /* @__PURE__ */ jsxs3(
-          "div",
+      for (const entry of [...toasts]) dismiss(entry.id);
+    },
+    clear: () => {
+      for (const entry of [...toasts]) dismiss(entry.id);
+    }
+  }
+);
+function subscribeToToasts(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getToastSnapshot() {
+  return toasts;
+}
+function getToastServerSnapshot() {
+  return EMPTY;
+}
+
+// src/components/toast/Toaster.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var positionClasses = {
+  "top-left": "left-4 top-4 items-start",
+  "top-center": "left-1/2 top-4 -translate-x-1/2 items-center",
+  "top-right": "right-4 top-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end"
+};
+var richClasses = {
+  default: "border-border bg-card",
+  success: "border-success/50 bg-success/10",
+  error: "border-destructive/50 bg-destructive/10",
+  warning: "border-warning/50 bg-warning/10",
+  info: "border-info/50 bg-info/10"
+};
+var dotClasses = {
+  default: "bg-muted-foreground",
+  success: "bg-success",
+  error: "bg-destructive",
+  warning: "bg-warning",
+  info: "bg-info"
+};
+function Toaster({ position = "bottom-right", label = "Notifications", richColors = false }) {
+  const entries = React13.useSyncExternalStore(subscribeToToasts, getToastSnapshot, getToastServerSnapshot);
+  return /* @__PURE__ */ jsx13(
+    "ol",
+    {
+      "aria-label": label,
+      className: cn("fixed z-[60] flex w-full max-w-sm flex-col gap-2", positionClasses[position]),
+      children: entries.map((entry) => {
+        const variant = entry.variant ?? "default";
+        return /* @__PURE__ */ jsx13(
+          "li",
           {
-            ref: dialogRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": titleId,
-            "aria-describedby": description ? descriptionId : void 0,
-            tabIndex: -1,
-            className: cn("w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl", motion),
-            children: [
-              /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between gap-4", children: [
-                /* @__PURE__ */ jsx11("h2", { id: titleId, className: "text-lg font-semibold", children: title }),
-                showClose && /* @__PURE__ */ jsx11(
+            className: cn(
+              "rounded-lg border p-4 shadow-lg",
+              richColors ? richClasses[variant] : "border-border bg-card"
+            ),
+            children: /* @__PURE__ */ jsxs5("div", { role: "status", className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: cn("mt-1 h-2 w-2 shrink-0 rounded-full", dotClasses[variant]) }),
+              /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx13("p", { className: "text-sm font-semibold", children: entry.title }),
+                entry.description && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-muted-foreground", children: entry.description }),
+                entry.action && /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
-                    onClick: () => onOpenChange(false),
-                    "aria-label": "Close dialog",
-                    className: "rounded p-1 text-muted-foreground hover:text-foreground",
-                    children: "\u2715"
+                    onClick: () => {
+                      entry.action?.onClick();
+                      toast.dismiss(entry.id);
+                    },
+                    className: "mt-2 text-sm font-medium text-primary hover:underline",
+                    children: entry.action.label
                   }
                 )
               ] }),
-              description && /* @__PURE__ */ jsx11("p", { id: descriptionId, className: "mt-2 text-sm text-muted-foreground", children: description }),
-              children && /* @__PURE__ */ jsx11("div", { className: "mt-4", children })
-            ]
-          }
-        )
-      }
-    ),
-    document.body
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toast.dismiss(entry.id),
+                  "aria-label": `Dismiss ${entry.title}`,
+                  className: "rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: "\u2715"
+                }
+              )
+            ] })
+          },
+          entry.id
+        );
+      })
+    }
   );
 }
-
-// src/components/drawer/Drawer.tsx
-import * as React12 from "react";
+
+// src/components/dialog/Dialog.tsx
+import * as React14 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var FOCUSABLE2 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-var sideClasses = {
-  right: "inset-y-0 right-0 border-l",
-  left: "inset-y-0 left-0 border-r",
-  top: "inset-x-0 top-0 border-b",
-  bottom: "inset-x-0 bottom-0 border-t"
-};
-var sizeClasses = {
-  right: { sm: "w-72", md: "w-96", lg: "w-[32rem]" },
-  left: { sm: "w-72", md: "w-96", lg: "w-[32rem]" },
-  top: { sm: "h-48", md: "h-80", lg: "h-[32rem]" },
-  bottom: { sm: "h-48", md: "h-80", lg: "h-[32rem]" }
-};
-var slideIn = {
-  right: "slide-in-from-right",
-  left: "slide-in-from-left",
-  top: "slide-in-from-top",
-  bottom: "slide-in-from-bottom"
-};
-var slideOut = {
-  right: "slide-out-to-right",
-  left: "slide-out-to-left",
-  top: "slide-out-to-top",
-  bottom: "slide-out-to-bottom"
+var sizeClasses2 = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl"
 };
-function Drawer({
+var DialogIdsContext = React14.createContext(null);
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx14("div", { className: cn("flex items-start justify-between gap-4", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  const ids = React14.useContext(DialogIdsContext);
+  return /* @__PURE__ */ jsx14("h2", { id: ids?.titleId, className: cn("text-lg font-semibold", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  const ids = React14.useContext(DialogIdsContext);
+  return /* @__PURE__ */ jsx14("p", { id: ids?.descriptionId, className: cn("mt-2 text-sm text-muted-foreground", className), ...props });
+}
+function DialogBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx14("div", { className: cn("mt-4", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx14("div", { className: cn("mt-6 flex items-center justify-end gap-2", className), ...props });
+}
+function Dialog({
   open,
   onOpenChange,
   title,
   description,
   children,
-  side = "right",
   size = "md",
+  header,
+  footer,
+  scrollable = false,
+  bodyClassName,
   closeOnBackdrop = true,
   showClose = true,
   initialFocusRef,
   ariaLabel,
   animate = false
 }) {
-  const drawerRef = React12.useRef(null);
-  const previouslyFocused = React12.useRef(null);
-  const titleId = React12.useId();
-  const descriptionId = React12.useId();
+  const dialogRef = React14.useRef(null);
+  const previouslyFocused = React14.useRef(null);
+  const titleId = React14.useId();
+  const descriptionId = React14.useId();
   const { present, exiting } = usePresence(open, animate);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     if (open) {
       previouslyFocused.current = document.activeElement;
       return;
@@ -619,13 +942,13 @@ function Drawer({
     previouslyFocused.current?.focus?.();
     previouslyFocused.current = null;
   }, [open]);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     if (!open || !present) return;
-    const node = drawerRef.current;
+    const node = dialogRef.current;
     const target = initialFocusRef?.current ?? node?.querySelector(FOCUSABLE2) ?? node;
     target?.focus();
   }, [open, present, initialFocusRef]);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -634,17 +957,14 @@ function Drawer({
         return;
       }
       if (event.key !== "Tab") return;
-      const node = drawerRef.current;
+      const node = dialogRef.current;
       if (!node) return;
       const focusable = Array.from(node.querySelectorAll(FOCUSABLE2));
-      if (focusable.length === 0) {
-        event.preventDefault();
-        return;
-      }
+      if (focusable.length === 0) return;
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
       const active = document.activeElement;
-      if (event.shiftKey && (active === first || !node.contains(active))) {
+      if (event.shiftKey && (active === first || active === node)) {
         event.preventDefault();
         last.focus();
       } else if (!event.shiftKey && active === last) {
@@ -652,57 +972,67 @@ function Drawer({
         first.focus();
       }
     };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
   }, [open, onOpenChange]);
   if (!present || typeof document === "undefined") return null;
   const motion = animate ? cn(
     "duration-200 motion-reduce:animate-none",
-    exiting ? `animate-out ${slideOut[side]}` : `animate-in ${slideIn[side]}`
+    exiting ? "animate-out fade-out-0 zoom-out-95" : "animate-in fade-in-0 zoom-in-95"
   ) : void 0;
   return createPortal2(
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       "div",
       {
-        className: "fixed inset-0 z-50",
+        className: cn("fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4", motion),
         onMouseDown: (event) => {
           if (closeOnBackdrop && event.target === event.currentTarget) onOpenChange(false);
         },
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsx14(
           "div",
           {
-            ref: drawerRef,
+            ref: dialogRef,
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": ariaLabel ?? title,
-            "aria-labelledby": title ? titleId : void 0,
+            "aria-labelledby": ariaLabel ? void 0 : titleId,
+            "aria-label": ariaLabel,
             "aria-describedby": description ? descriptionId : void 0,
             tabIndex: -1,
             className: cn(
-              "fixed flex flex-col bg-background shadow-xl border-border",
-              sideClasses[side],
-              sizeClasses[side][size],
+              "flex w-full flex-col rounded-xl border border-border bg-card p-6 shadow-xl",
+              sizeClasses2[size],
               motion
             ),
-            children: [
-              /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4 border-b border-border px-5 py-4", children: [
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx12("h2", { id: titleId, className: "text-base font-semibold leading-tight", children: title }),
-                  description && /* @__PURE__ */ jsx12("p", { id: descriptionId, className: "mt-1 text-sm text-muted-foreground", children: description })
+            children: /* @__PURE__ */ jsxs6(DialogIdsContext.Provider, { value: { titleId, descriptionId }, children: [
+              header ?? /* @__PURE__ */ jsxs6(DialogHeader, { children: [
+                /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
+                  title && /* @__PURE__ */ jsx14(DialogTitle, { children: title }),
+                  description && /* @__PURE__ */ jsx14(DialogDescription, { children: description })
                 ] }),
-                showClose && /* @__PURE__ */ jsx12(
+                showClose && /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
                     onClick: () => onOpenChange(false),
-                    "aria-label": "Close drawer",
-                    className: "-mr-1 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "aria-label": "Close dialog",
+                    className: "rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                     children: "\u2715"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx12("div", { className: "flex-1 overflow-y-auto px-5 py-4", children })
-            ]
+              /* @__PURE__ */ jsx14(
+                "div",
+                {
+                  className: cn(
+                    "mt-4 min-h-0",
+                    scrollable && "max-h-[60vh] overflow-y-auto pr-1",
+                    bodyClassName
+                  ),
+                  children
+                }
+              ),
+              footer && /* @__PURE__ */ jsx14(DialogFooter, { children: footer })
+            ] })
           }
         )
       }
@@ -711,12 +1041,308 @@ function Drawer({
   );
 }
 
-// src/components/search/Search.tsx
-import * as React14 from "react";
+// src/components/table-card/TableCard.tsx
+import * as React15 from "react";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var TableCard = React15.forwardRef(function TableCard2({ title, description, actions, toolbar, children, footer, flush = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref,
+      className: cn("overflow-hidden rounded-xl border border-border bg-card text-card-foreground", className),
+      ...props,
+      children: [
+        (title || description || actions) && /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+            title && /* @__PURE__ */ jsx15("h2", { className: "text-sm font-semibold", children: title }),
+            description && /* @__PURE__ */ jsx15("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+        ] }),
+        toolbar && /* @__PURE__ */ jsx15("div", { className: "border-b border-border px-4 py-2", children: toolbar }),
+        /* @__PURE__ */ jsx15("div", { className: cn(flush ? "overflow-x-auto" : "p-4"), children }),
+        footer && /* @__PURE__ */ jsx15("div", { className: "border-t border-border px-4 py-3", children: footer })
+      ]
+    }
+  );
+});
+
+// src/components/select-menu/SelectMenu.tsx
+import * as React16 from "react";
 import { createPortal as createPortal3 } from "react-dom";
+import { Fragment, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function useOutsideClose(open, close, refs) {
+  React16.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (refs.some((ref) => ref.current?.contains(target))) return;
+      close();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open, close, refs]);
+}
+var SelectMenu = React16.forwardRef(function SelectMenu2({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  placeholder = "Select\u2026",
+  name,
+  renderValue,
+  renderItem,
+  emptyText = "No options",
+  className,
+  disabled,
+  onKeyDown,
+  ...buttonProps
+}, ref) {
+  const [internal, setInternal] = React16.useState(() => {
+    if (defaultValue === void 0) return [];
+    return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+  });
+  const selectedValues = React16.useMemo(() => {
+    if (value === void 0) return internal;
+    return Array.isArray(value) ? value : [value];
+  }, [value, internal]);
+  const [open, setOpen] = React16.useState(false);
+  const [activeIndex, setActiveIndex] = React16.useState(-1);
+  const [position, setPosition] = React16.useState(null);
+  const triggerRef = React16.useRef(null);
+  const listRef = React16.useRef(null);
+  const listboxId = React16.useId();
+  const labelId = React16.useId();
+  const typeahead = React16.useRef({ query: "", at: 0 });
+  const setTriggerRef = React16.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const close = React16.useCallback(() => setOpen(false), []);
+  useOutsideClose(open, close, [triggerRef, listRef]);
+  const measure = React16.useCallback(() => {
+    const node = triggerRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    setPosition({ top: rect.bottom + 4, left: rect.left, width: Math.max(rect.width, 200) });
+  }, []);
+  React16.useEffect(() => {
+    if (!open) return;
+    measure();
+    const onScroll = () => measure();
+    window.addEventListener("resize", onScroll);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open, measure]);
+  const firstEnabled = React16.useMemo(() => items.findIndex((item) => !item.disabled), [items]);
+  const openMenu = () => {
+    if (disabled) return;
+    setOpen(true);
+    const selectedIndex = items.findIndex((item) => selectedValues.includes(item.value) && !item.disabled);
+    setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabled);
+  };
+  const commit = (next) => {
+    if (value === void 0) setInternal(next);
+    onValueChange?.(multiple ? next : next[0] ?? "");
+  };
+  const select = (item) => {
+    if (item.disabled) return;
+    if (multiple) {
+      const next = selectedValues.includes(item.value) ? selectedValues.filter((entry) => entry !== item.value) : [...selectedValues, item.value];
+      commit(next);
+      return;
+    }
+    commit([item.value]);
+    setOpen(false);
+  };
+  const move = (direction) => {
+    if (items.length === 0) return;
+    let index = activeIndex;
+    for (let step = 0; step < items.length; step += 1) {
+      index = (index + direction + items.length) % items.length;
+      if (!items[index]?.disabled) {
+        setActiveIndex(index);
+        return;
+      }
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (!open) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        openMenu();
+      }
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        move(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        move(-1);
+        break;
+      case "Home":
+        event.preventDefault();
+        setActiveIndex(firstEnabled);
+        break;
+      case "End": {
+        event.preventDefault();
+        for (let i = items.length - 1; i >= 0; i -= 1) {
+          if (!items[i]?.disabled) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+        break;
+      }
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (activeIndex >= 0 && items[activeIndex]) select(items[activeIndex]);
+        break;
+      case "Escape":
+        event.preventDefault();
+        setOpen(false);
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+      default: {
+        if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) return;
+        const now = Date.now();
+        const buffer = now - typeahead.current.at > 600 ? event.key : typeahead.current.query + event.key;
+        typeahead.current = { query: buffer, at: now };
+        const query = buffer.toLowerCase();
+        const index = items.findIndex((item) => !item.disabled && item.label.toLowerCase().startsWith(query));
+        if (index >= 0) setActiveIndex(index);
+      }
+    }
+  };
+  const selectedItems = items.filter((item) => selectedValues.includes(item.value));
+  const triggerContent = renderValue ? renderValue(selectedItems) : selectedItems.length === 0 ? /* @__PURE__ */ jsx16("span", { className: "text-muted-foreground", children: placeholder }) : multiple ? /* @__PURE__ */ jsx16("span", { className: "truncate", children: selectedItems.length === 1 ? selectedItems[0].label : `${selectedItems.length} selected` }) : /* @__PURE__ */ jsx16("span", { className: "truncate", children: selectedItems[0].label });
+  const activeOptionId = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  const rows = React16.useMemo(() => {
+    const out = [];
+    let lastGroup;
+    items.forEach((item, index) => {
+      if (item.group && item.group !== lastGroup) {
+        out.push({ heading: item.group, index: -1 });
+        lastGroup = item.group;
+      }
+      out.push({ item, index });
+    });
+    return out;
+  }, [items]);
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsx16("span", { id: labelId, className: "sr-only", children: typeof buttonProps["aria-label"] === "string" ? buttonProps["aria-label"] : "Select" }),
+    name && selectedValues.map((selected) => /* @__PURE__ */ jsx16("input", { type: "hidden", name, value: selected }, selected)),
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        ref: setTriggerRef,
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open ? activeOptionId : void 0,
+        "aria-labelledby": labelId,
+        disabled,
+        onClick: () => open ? setOpen(false) : openMenu(),
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...buttonProps,
+        children: [
+          /* @__PURE__ */ jsx16("span", { className: "min-w-0 flex-1", children: triggerContent }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u25BE" })
+        ]
+      }
+    ),
+    open && position && createPortal3(
+      /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ref: listRef,
+          id: listboxId,
+          role: "listbox",
+          "aria-labelledby": labelId,
+          "aria-multiselectable": multiple || void 0,
+          style: {
+            position: "fixed",
+            top: position.top,
+            left: position.left,
+            width: position.width,
+            zIndex: 50
+          },
+          className: "max-h-64 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+          children: items.length === 0 ? /* @__PURE__ */ jsx16("p", { role: "presentation", className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText }) : rows.map(
+            (row, rowIndex) => row.heading ? /* @__PURE__ */ jsx16(
+              "p",
+              {
+                role: "presentation",
+                className: "px-3 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+                children: row.heading
+              },
+              `heading-${row.heading}-${rowIndex}`
+            ) : /* @__PURE__ */ jsx16(
+              "div",
+              {
+                id: `${listboxId}-option-${row.index}`,
+                role: "option",
+                "aria-selected": selectedValues.includes(row.item.value),
+                "aria-disabled": row.item.disabled || void 0,
+                onMouseDown: (event) => event.preventDefault(),
+                onMouseEnter: () => !row.item.disabled && setActiveIndex(row.index),
+                onClick: () => select(row.item),
+                className: cn(
+                  "flex cursor-pointer items-start gap-2 rounded-sm px-3 py-2 text-sm outline-none",
+                  row.index === activeIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent/60",
+                  row.item.disabled && "pointer-events-none opacity-50"
+                ),
+                children: renderItem ? renderItem(row.item, {
+                  selected: selectedValues.includes(row.item.value),
+                  active: row.index === activeIndex
+                }) : /* @__PURE__ */ jsxs8(Fragment, { children: [
+                  row.item.icon && /* @__PURE__ */ jsx16("span", { className: "mt-0.5 shrink-0 [&_svg]:size-4", children: row.item.icon }),
+                  /* @__PURE__ */ jsxs8("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx16("span", { className: "block", children: row.item.label }),
+                    row.item.description && /* @__PURE__ */ jsx16("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: row.item.description })
+                  ] }),
+                  multiple && selectedValues.includes(row.item.value) && /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "ml-auto text-primary", children: "\u2713" })
+                ] })
+              },
+              row.item.value
+            )
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+
+// src/components/search/Search.tsx
+import * as React18 from "react";
+import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/search/use-combobox.ts
-import * as React13 from "react";
+import * as React17 from "react";
 var searchUid = 0;
 function useCombobox({
   items,
@@ -724,12 +1350,12 @@ function useCombobox({
   onOpenChange,
   closeOnSubmit = true
 }) {
-  const [open, setOpenState] = React13.useState(false);
-  const [activeIndex, setActiveIndex] = React13.useState(-1);
-  const [pos, setPos] = React13.useState(null);
-  const anchorRef = React13.useRef(null);
-  const listboxId = React13.useRef(`slipstream-combobox-${++searchUid}`).current;
-  const setOpen = React13.useCallback(
+  const [open, setOpenState] = React17.useState(false);
+  const [activeIndex, setActiveIndex] = React17.useState(-1);
+  const [pos, setPos] = React17.useState(null);
+  const anchorRef = React17.useRef(null);
+  const listboxId = React17.useRef(`slipstream-combobox-${++searchUid}`).current;
+  const setOpen = React17.useCallback(
     (next) => {
       setOpenState(next);
       if (!next) setActiveIndex(-1);
@@ -737,10 +1363,10 @@ function useCombobox({
     },
     [onOpenChange]
   );
-  React13.useEffect(() => {
+  React17.useEffect(() => {
     setActiveIndex(-1);
   }, [items]);
-  React13.useLayoutEffect(() => {
+  React17.useLayoutEffect(() => {
     if (!open) {
       setPos(null);
       return;
@@ -760,7 +1386,7 @@ function useCombobox({
       window.removeEventListener("resize", measure);
     };
   }, [open, setOpen]);
-  React13.useEffect(() => {
+  React17.useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (!anchorRef.current?.contains(event.target)) setOpen(false);
@@ -768,7 +1394,7 @@ function useCombobox({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [open, setOpen]);
-  const onInputKeyDown = React13.useCallback(
+  const onInputKeyDown = React17.useCallback(
     (event) => {
       if (event.key === "Escape") {
         if (open) {
@@ -836,7 +1462,7 @@ function useCombobox({
 }
 
 // src/components/search/Search.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function Search({
   options,
   defaultValue,
@@ -849,12 +1475,12 @@ function Search({
   className,
   "aria-label": ariaLabel
 }) {
-  const selected = React14.useMemo(
+  const selected = React18.useMemo(
     () => options.find((option) => option.value === defaultValue),
     [options, defaultValue]
   );
-  const [query, setQuery] = React14.useState(selected?.label ?? "");
-  const filtered = React14.useMemo(() => {
+  const [query, setQuery] = React18.useState(selected?.label ?? "");
+  const filtered = React18.useMemo(() => {
     if (!query.trim()) return options;
     const q = query.trim().toLowerCase();
     return options.filter(
@@ -873,8 +1499,8 @@ function Search({
     onValueChange?.(item.value);
     combobox.setOpen(false);
   };
-  return /* @__PURE__ */ jsxs5("div", { ref: combobox.anchorRef, className: cn("relative w-full", className), children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { ref: combobox.anchorRef, className: cn("relative w-full", className), children: [
+    /* @__PURE__ */ jsx17(
       Input,
       {
         id,
@@ -897,8 +1523,8 @@ function Search({
         ...combobox.inputProps
       }
     ),
-    combobox.ready && createPortal3(
-      /* @__PURE__ */ jsx13(
+    combobox.ready && createPortal4(
+      /* @__PURE__ */ jsx17(
         "ul",
         {
           id: combobox.listboxId,
@@ -912,7 +1538,7 @@ function Search({
             zIndex: 50
           },
           className: "max-h-64 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
-          children: filtered.length === 0 ? /* @__PURE__ */ jsx13("li", { role: "presentation", className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText }) : filtered.map((option, index) => /* @__PURE__ */ jsxs5(
+          children: filtered.length === 0 ? /* @__PURE__ */ jsx17("li", { role: "presentation", className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText }) : filtered.map((option, index) => /* @__PURE__ */ jsxs9(
             "li",
             {
               id: combobox.optionId(index),
@@ -926,8 +1552,8 @@ function Search({
                 combobox.activeIndex === index ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"
               ),
               children: [
-                /* @__PURE__ */ jsx13("span", { className: "block", children: option.label }),
-                option.description && /* @__PURE__ */ jsx13("span", { className: "block text-xs text-muted-foreground", children: option.description })
+                /* @__PURE__ */ jsx17("span", { className: "block", children: option.label }),
+                option.description && /* @__PURE__ */ jsx17("span", { className: "block text-xs text-muted-foreground", children: option.description })
               ]
             },
             option.value
@@ -940,15 +1566,25 @@ function Search({
 }
 
 // src/components/autocomplete/Autocomplete.tsx
-import * as React15 from "react";
-import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import * as React19 from "react";
+import { createPortal as createPortal5 } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function normalize(entry) {
+  if (typeof entry === "string") return { value: entry, label: entry };
+  return { value: entry.value, label: entry.label ?? entry.value, group: entry.group, description: entry.description };
+}
 function Autocomplete({
   value,
   defaultValue = "",
   onValueChange,
+  options,
   suggestions,
+  loadOptions,
+  renderOption,
+  clearable = false,
   emptyText,
+  loadingText,
+  debounceMs = 200,
   placeholder,
   id,
   name,
@@ -957,27 +1593,62 @@ function Autocomplete({
   onFocus,
   ...inputProps
 }) {
-  const [internalValue, setInternalValue] = React15.useState(defaultValue);
+  const [internalValue, setInternalValue] = React19.useState(defaultValue);
   const current = value ?? internalValue;
-  const items = React15.useMemo(() => {
+  const [asyncOptions, setAsyncOptions] = React19.useState([]);
+  const [loading, setLoading] = React19.useState(false);
+  const requestId = React19.useRef(0);
+  const source = React19.useMemo(() => {
+    const list = options ?? (suggestions ?? []).map(normalize);
+    return list.map(normalize);
+  }, [options, suggestions]);
+  React19.useEffect(() => {
+    if (!loadOptions) return;
+    const id2 = ++requestId.current;
+    setLoading(true);
+    const timer = setTimeout(async () => {
+      try {
+        const result = await loadOptions(current);
+        if (requestId.current === id2) setAsyncOptions(result.map(normalize));
+      } catch {
+        if (requestId.current === id2) setAsyncOptions([]);
+      } finally {
+        if (requestId.current === id2) setLoading(false);
+      }
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [loadOptions, current, debounceMs]);
+  const pool = loadOptions ? asyncOptions : source;
+  const items = React19.useMemo(() => {
     const q = current.trim().toLowerCase();
-    const list = q ? suggestions.filter((suggestion) => suggestion.toLowerCase().includes(q)) : suggestions;
-    return list.filter((suggestion) => suggestion !== current).map((suggestion) => ({ value: suggestion, label: suggestion }));
-  }, [suggestions, current]);
+    return pool.filter((option) => !q || option.label.toLowerCase().includes(q) || option.value.toLowerCase().includes(q)).filter((option) => option.value !== current);
+  }, [pool, current]);
   const combobox = useCombobox({
-    items,
+    items: items.map((item) => ({ value: item.value, label: item.label })),
     onSelect: (item) => {
       if (value === void 0) setInternalValue(item.label);
       onValueChange?.(item.label);
     }
   });
-  const select = (label) => {
-    if (value === void 0) setInternalValue(label);
-    onValueChange?.(label);
+  const select = (option) => {
+    if (value === void 0) setInternalValue(option.label);
+    onValueChange?.(option.label);
     combobox.setOpen(false);
   };
-  return /* @__PURE__ */ jsxs6("div", { ref: combobox.anchorRef, className: cn("relative w-full", className), children: [
-    /* @__PURE__ */ jsx14(
+  const grouped = React19.useMemo(() => {
+    const out = [];
+    let lastGroup;
+    items.forEach((option, index) => {
+      if (option.group && option.group !== lastGroup) {
+        out.push({ heading: option.group, index: -1 });
+        lastGroup = option.group;
+      }
+      out.push({ option, index });
+    });
+    return out;
+  }, [items]);
+  return /* @__PURE__ */ jsxs10("div", { ref: combobox.anchorRef, className: cn("relative w-full", className), children: [
+    /* @__PURE__ */ jsx18(
       Input,
       {
         id,
@@ -985,6 +1656,7 @@ function Autocomplete({
         placeholder,
         autoComplete: "off",
         value: current,
+        className: clearable && current ? "pr-9" : void 0,
         onChange: (event) => {
           if (value === void 0) setInternalValue(event.target.value);
           onValueChange?.(event.target.value);
@@ -1002,13 +1674,28 @@ function Autocomplete({
         ...combobox.inputProps
       }
     ),
-    combobox.ready && createPortal4(
-      /* @__PURE__ */ jsx14(
+    clearable && current && /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          if (value === void 0) setInternalValue("");
+          onValueChange?.("");
+          combobox.setOpen(true);
+        },
+        "aria-label": "Clear input",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: "\u2715"
+      }
+    ),
+    combobox.ready && createPortal5(
+      /* @__PURE__ */ jsx18(
         "ul",
         {
           id: combobox.listboxId,
           role: "listbox",
           "aria-label": "Suggestions",
+          "aria-busy": loading || void 0,
           style: {
             position: "fixed",
             top: combobox.pos.top,
@@ -1017,23 +1704,36 @@ function Autocomplete({
             zIndex: 50
           },
           className: "max-h-60 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
-          children: items.length === 0 ? /* @__PURE__ */ jsx14("li", { role: "presentation", className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText ?? "No suggestions" }) : items.map((item, index) => /* @__PURE__ */ jsx14(
-            "li",
-            {
-              id: combobox.optionId(index),
-              role: "option",
-              "aria-selected": combobox.activeIndex === index,
-              onMouseDown: (event) => event.preventDefault(),
-              onMouseEnter: () => combobox.setActiveIndex(index),
-              onClick: () => select(item.label),
-              className: cn(
-                "cursor-pointer rounded-sm px-3 py-1.5 text-sm outline-none",
-                combobox.activeIndex === index ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"
-              ),
-              children: item.label
-            },
-            item.value
-          ))
+          children: loading && items.length === 0 ? /* @__PURE__ */ jsx18("li", { role: "presentation", className: "px-3 py-2 text-sm text-muted-foreground", children: loadingText ?? "Loading\u2026" }) : items.length === 0 ? /* @__PURE__ */ jsx18("li", { role: "presentation", className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText ?? "No suggestions" }) : grouped.map(
+            (entry, rowIndex) => entry.heading ? /* @__PURE__ */ jsx18(
+              "li",
+              {
+                role: "presentation",
+                className: "px-3 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+                children: entry.heading
+              },
+              `group-${entry.heading}-${rowIndex}`
+            ) : /* @__PURE__ */ jsx18(
+              "li",
+              {
+                id: combobox.optionId(entry.index),
+                role: "option",
+                "aria-selected": combobox.activeIndex === entry.index,
+                onMouseDown: (event) => event.preventDefault(),
+                onMouseEnter: () => combobox.setActiveIndex(entry.index),
+                onClick: () => select(entry.option),
+                className: cn(
+                  "cursor-pointer rounded-sm px-3 py-1.5 text-sm outline-none",
+                  combobox.activeIndex === entry.index ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"
+                ),
+                children: renderOption ? renderOption(entry.option, { active: combobox.activeIndex === entry.index }) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
+                  /* @__PURE__ */ jsx18("span", { className: "block", children: entry.option.label }),
+                  entry.option.description && /* @__PURE__ */ jsx18("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: entry.option.description })
+                ] })
+              },
+              entry.option.value
+            )
+          )
         }
       ),
       document.body
@@ -1042,10 +1742,10 @@ function Autocomplete({
 }
 
 // src/components/checkbox/Checkbox.tsx
-import * as React16 from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Checkbox = React16.forwardRef(
-  ({ className, checked, onCheckedChange, ...props }, ref) => /* @__PURE__ */ jsx15(
+import * as React20 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Checkbox = React20.forwardRef(
+  ({ className, checked, onCheckedChange, ...props }, ref) => /* @__PURE__ */ jsx19(
     "input",
     {
       type: "checkbox",
@@ -1066,38 +1766,38 @@ var Checkbox = React16.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // src/components/checkbox/CheckboxGroup.tsx
-import * as React17 from "react";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
-var CheckboxGroupContext = React17.createContext({
+import * as React21 from "react";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var CheckboxGroupContext = React21.createContext({
   name: "",
   values: [],
   toggle: () => {
   }
 });
-var CheckboxGroup = React17.forwardRef(
+var CheckboxGroup = React21.forwardRef(
   ({ name, legend, value, defaultValue, onValueChange, orientation = "vertical", error, className, children }, ref) => {
-    const [internalValue, setInternalValue] = React17.useState(defaultValue ?? []);
+    const [internalValue, setInternalValue] = React21.useState(defaultValue ?? []);
     const currentValue = value ?? internalValue;
     const toggle = (next) => {
       const updated = currentValue.includes(next) ? currentValue.filter((item) => item !== next) : [...currentValue, next];
       if (value === void 0) setInternalValue(updated);
       onValueChange?.(updated);
     };
-    return /* @__PURE__ */ jsxs7("fieldset", { ref, className: cn(orientation === "vertical" ? "space-y-2" : "flex flex-row flex-wrap gap-x-4 gap-y-2", className), children: [
-      legend && /* @__PURE__ */ jsx16("legend", { className: "text-sm font-medium", children: legend }),
-      /* @__PURE__ */ jsx16(CheckboxGroupContext.Provider, { value: { name, values: currentValue, toggle }, children }),
-      error && /* @__PURE__ */ jsx16("p", { role: "alert", className: "text-xs text-destructive", children: error })
+    return /* @__PURE__ */ jsxs11("fieldset", { ref, className: cn(orientation === "vertical" ? "space-y-2" : "flex flex-row flex-wrap gap-x-4 gap-y-2", className), children: [
+      legend && /* @__PURE__ */ jsx20("legend", { className: "text-sm font-medium", children: legend }),
+      /* @__PURE__ */ jsx20(CheckboxGroupContext.Provider, { value: { name, values: currentValue, toggle }, children }),
+      error && /* @__PURE__ */ jsx20("p", { role: "alert", className: "text-xs text-destructive", children: error })
     ] });
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var CheckboxGroupItem = React17.forwardRef(
+var CheckboxGroupItem = React21.forwardRef(
   ({ value, label, className, id, ...props }, ref) => {
-    const group = React17.useContext(CheckboxGroupContext);
-    const generatedId = React17.useId();
+    const group = React21.useContext(CheckboxGroupContext);
+    const generatedId = React21.useId();
     const inputId = id ?? generatedId;
-    return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx20(
         Checkbox,
         {
           ref,
@@ -1110,7 +1810,7 @@ var CheckboxGroupItem = React17.forwardRef(
           ...props
         }
       ),
-      label && /* @__PURE__ */ jsx16(
+      label && /* @__PURE__ */ jsx20(
         "label",
         {
           htmlFor: inputId,
@@ -1124,10 +1824,10 @@ var CheckboxGroupItem = React17.forwardRef(
 CheckboxGroupItem.displayName = "CheckboxGroupItem";
 
 // src/components/radio/Radio.tsx
-import * as React18 from "react";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
-var Radio = React18.forwardRef(
-  ({ className, checked, onCheckedChange, ...props }, ref) => /* @__PURE__ */ jsx17(
+import * as React22 from "react";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var Radio = React22.forwardRef(
+  ({ className, checked, onCheckedChange, ...props }, ref) => /* @__PURE__ */ jsx21(
     "input",
     {
       type: "radio",
@@ -1146,15 +1846,15 @@ var Radio = React18.forwardRef(
   )
 );
 Radio.displayName = "Radio";
-var RadioGroup = React18.forwardRef(
+var RadioGroup = React22.forwardRef(
   ({ name, legend, value, defaultValue, onValueChange, orientation = "vertical", error, className, children }, ref) => {
-    const [internalValue, setInternalValue] = React18.useState(defaultValue ?? "");
+    const [internalValue, setInternalValue] = React22.useState(defaultValue ?? "");
     const currentValue = value ?? internalValue;
     const handleChange = (next) => {
       if (value === void 0) setInternalValue(next);
       onValueChange?.(next);
     };
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs12(
       "fieldset",
       {
         ref,
@@ -1163,28 +1863,28 @@ var RadioGroup = React18.forwardRef(
           className
         ),
         children: [
-          legend && /* @__PURE__ */ jsx17("legend", { className: "text-sm font-medium", children: legend }),
-          /* @__PURE__ */ jsx17(RadioGroupContext.Provider, { value: { name, value: currentValue, onChange: handleChange }, children }),
-          error && /* @__PURE__ */ jsx17("p", { role: "alert", className: "text-xs text-destructive", children: error })
+          legend && /* @__PURE__ */ jsx21("legend", { className: "text-sm font-medium", children: legend }),
+          /* @__PURE__ */ jsx21(RadioGroupContext.Provider, { value: { name, value: currentValue, onChange: handleChange }, children }),
+          error && /* @__PURE__ */ jsx21("p", { role: "alert", className: "text-xs text-destructive", children: error })
         ]
       }
     );
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var RadioGroupContext = React18.createContext({
+var RadioGroupContext = React22.createContext({
   name: "",
   value: "",
   onChange: () => {
   }
 });
-var RadioGroupItem = React18.forwardRef(
+var RadioGroupItem = React22.forwardRef(
   ({ value, label, className, id, ...props }, ref) => {
-    const group = React18.useContext(RadioGroupContext);
-    const generatedId = React18.useId();
+    const group = React22.useContext(RadioGroupContext);
+    const generatedId = React22.useId();
     const inputId = id ?? generatedId;
-    return /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx21(
         Radio,
         {
           ref,
@@ -1197,21 +1897,21 @@ var RadioGroupItem = React18.forwardRef(
           ...props
         }
       ),
-      label && /* @__PURE__ */ jsx17("label", { htmlFor: inputId, className: "text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label })
+      label && /* @__PURE__ */ jsx21("label", { htmlFor: inputId, className: "text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label })
     ] });
   }
 );
 RadioGroupItem.displayName = "RadioGroupItem";
 
 // src/components/radio/RadioCard.tsx
-import * as React19 from "react";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
-var RadioCard = React19.forwardRef(
+import * as React23 from "react";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+var RadioCard = React23.forwardRef(
   ({ value, title, description, children, rounded = true, disabled, className, id }, ref) => {
-    const group = React19.useContext(RadioGroupContext);
-    const generatedId = React19.useId();
+    const group = React23.useContext(RadioGroupContext);
+    const generatedId = React23.useId();
     const inputId = id ?? generatedId;
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs13(
       "label",
       {
         ref,
@@ -1227,7 +1927,7 @@ var RadioCard = React19.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx22(
             Radio,
             {
               id: inputId,
@@ -1238,8 +1938,8 @@ var RadioCard = React19.forwardRef(
               className: "sr-only"
             }
           ),
-          title && /* @__PURE__ */ jsx18("span", { className: "text-sm font-medium leading-none", children: title }),
-          description && /* @__PURE__ */ jsx18("span", { className: "text-sm text-muted-foreground", children: description }),
+          title && /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium leading-none", children: title }),
+          description && /* @__PURE__ */ jsx22("span", { className: "text-sm text-muted-foreground", children: description }),
           children
         ]
       }
@@ -1249,10 +1949,10 @@ var RadioCard = React19.forwardRef(
 RadioCard.displayName = "RadioCard";
 
 // src/components/label/Label.tsx
-import * as React20 from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Label = React20.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+import * as React24 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Label = React24.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
     "label",
     {
       ref,
@@ -1267,20 +1967,20 @@ var Label = React20.forwardRef(
 Label.displayName = "Label";
 
 // src/components/fieldset/Fieldset.tsx
-import * as React21 from "react";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
-var Fieldset = React21.forwardRef(
-  ({ legend, description, error, className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
+import * as React25 from "react";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+var Fieldset = React25.forwardRef(
+  ({ legend, description, error, className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
     "fieldset",
     {
       ref,
       className: cn("m-0 flex min-w-0 flex-col gap-1.5 border-0 p-0", className),
       ...props,
       children: [
-        legend && /* @__PURE__ */ jsx20("legend", { className: "p-0 text-sm font-medium leading-none", children: legend }),
-        description && /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground", children: description }),
+        legend && /* @__PURE__ */ jsx24("legend", { className: "p-0 text-sm font-medium leading-none", children: legend }),
+        description && /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: description }),
         children,
-        error && /* @__PURE__ */ jsx20("p", { role: "alert", className: "text-xs text-destructive", children: error })
+        error && /* @__PURE__ */ jsx24("p", { role: "alert", className: "text-xs text-destructive", children: error })
       ]
     }
   )
@@ -1288,36 +1988,36 @@ var Fieldset = React21.forwardRef(
 Fieldset.displayName = "Fieldset";
 
 // src/components/form-field/FormField.tsx
-import * as React23 from "react";
+import * as React27 from "react";
 
 // src/components/tooltip/Tooltip.tsx
-import * as React22 from "react";
-import { createPortal as createPortal5 } from "react-dom";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import * as React26 from "react";
+import { createPortal as createPortal6 } from "react-dom";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var GAP = 8;
-var Tooltip = React22.forwardRef(
+var Tooltip = React26.forwardRef(
   ({ content, side = "top", delay = 300, className, children }, ref) => {
-    const [open, setOpen] = React22.useState(false);
-    const [pos, setPos] = React22.useState(null);
-    const anchorRef = React22.useRef(null);
-    const timerRef = React22.useRef(null);
-    const id = React22.useId();
-    const show = React22.useCallback(() => {
+    const [open, setOpen] = React26.useState(false);
+    const [pos, setPos] = React26.useState(null);
+    const anchorRef = React26.useRef(null);
+    const timerRef = React26.useRef(null);
+    const id = React26.useId();
+    const show2 = React26.useCallback(() => {
       if (timerRef.current) clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => setOpen(true), delay);
     }, [delay]);
-    const hide = React22.useCallback(() => {
+    const hide = React26.useCallback(() => {
       if (timerRef.current) clearTimeout(timerRef.current);
       setOpen(false);
       setPos(null);
     }, []);
-    React22.useEffect(
+    React26.useEffect(
       () => () => {
         if (timerRef.current) clearTimeout(timerRef.current);
       },
       []
     );
-    React22.useLayoutEffect(() => {
+    React26.useLayoutEffect(() => {
       if (!open) return;
       const rect = anchorRef.current?.getBoundingClientRect();
       if (!rect) return;
@@ -1331,10 +2031,10 @@ var Tooltip = React22.forwardRef(
         window.removeEventListener("resize", onScrollOrResize);
       };
     }, [open, side, hide]);
-    const trigger = React22.cloneElement(children, {
+    const trigger = React26.cloneElement(children, {
       "aria-describedby": open ? id : void 0
     });
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         ref: (node) => {
@@ -1343,9 +2043,9 @@ var Tooltip = React22.forwardRef(
           else if (ref) ref.current = node;
         },
         className: cn("relative inline-flex", className),
-        onMouseEnter: show,
+        onMouseEnter: show2,
         onMouseLeave: hide,
-        onFocusCapture: show,
+        onFocusCapture: show2,
         onBlurCapture: hide,
         onKeyDown: (event) => {
           if (event.key === "Escape" && open) {
@@ -1355,8 +2055,8 @@ var Tooltip = React22.forwardRef(
         },
         children: [
           trigger,
-          open && pos && typeof document !== "undefined" && createPortal5(
-            /* @__PURE__ */ jsx21(
+          open && pos && typeof document !== "undefined" && createPortal6(
+            /* @__PURE__ */ jsx25(
               "div",
               {
                 id,
@@ -1376,7 +2076,7 @@ var Tooltip = React22.forwardRef(
 Tooltip.displayName = "Tooltip";
 
 // src/components/form-field/FormField.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormField = ({
   id,
   label,
@@ -1394,48 +2094,48 @@ var FormField = ({
   const errorId = `${id}-error`;
   const describedBy = error ? errorId : hint ? hintId : void 0;
   let control = children;
-  if (React23.isValidElement(children) && children.type !== React23.Fragment) {
-    control = React23.cloneElement(children, {
+  if (React27.isValidElement(children) && children.type !== React27.Fragment) {
+    control = React27.cloneElement(children, {
       id,
       "aria-describedby": describedBy,
       ...error ? { "aria-invalid": true } : {}
     });
   }
-  const labelNode = /* @__PURE__ */ jsxs12(Label, { htmlFor: id, className: labelHidden ? "sr-only" : void 0, children: [
+  const labelNode = /* @__PURE__ */ jsxs16(Label, { htmlFor: id, className: labelHidden ? "sr-only" : void 0, children: [
     label,
-    required && /* @__PURE__ */ jsxs12(Fragment2, { children: [
+    required && /* @__PURE__ */ jsxs16(Fragment4, { children: [
       " ",
-      /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+      /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
     ] })
   ] });
-  const tooltipNode = tooltip ? /* @__PURE__ */ jsx22(Tooltip, { content: tooltip, side: "top", children: /* @__PURE__ */ jsx22(
+  const tooltipNode = tooltip ? /* @__PURE__ */ jsx26(Tooltip, { content: tooltip, side: "top", children: /* @__PURE__ */ jsx26(
     "button",
     {
       type: "button",
       "aria-label": `${label} information`,
       className: "ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-      children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 16 16", className: "h-3.5 w-3.5", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx22("path", { d: "M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM8 7a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 7Zm0-2.25a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Z" }) })
+      children: /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 16 16", className: "h-3.5 w-3.5", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx26("path", { d: "M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM8 7a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 7Zm0-2.25a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Z" }) })
     }
   ) }) : null;
-  const hintOrError = error ? /* @__PURE__ */ jsx22("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: error }) : hint ? /* @__PURE__ */ jsx22("p", { id: hintId, className: "text-xs text-muted-foreground", children: hint }) : null;
+  const hintOrError = error ? /* @__PURE__ */ jsx26("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: error }) : hint ? /* @__PURE__ */ jsx26("p", { id: hintId, className: "text-xs text-muted-foreground", children: hint }) : null;
   if (labelPlacement === "left") {
-    return /* @__PURE__ */ jsx22("div", { className: cn("flex min-w-0 flex-col gap-1.5", className), children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex w-40 shrink-0 items-center gap-1 pt-2", children: [
+    return /* @__PURE__ */ jsx26("div", { className: cn("flex min-w-0 flex-col gap-1.5", className), children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex w-40 shrink-0 items-center gap-1 pt-2", children: [
         labelNode,
         tooltipNode
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 items-center gap-2", children: [
-          /* @__PURE__ */ jsx22("div", { className: "min-w-0 flex-1", children: control }),
-          trailing && /* @__PURE__ */ jsx22("span", { className: "shrink-0 text-xs text-muted-foreground", children: trailing })
+      /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx26("div", { className: "min-w-0 flex-1", children: control }),
+          trailing && /* @__PURE__ */ jsx26("span", { className: "shrink-0 text-xs text-muted-foreground", children: trailing })
         ] }),
         hintOrError
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs12("div", { className: cn("flex min-w-0 flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs12("span", { className: "flex min-w-0 items-center", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: cn("flex min-w-0 flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs16("span", { className: "flex min-w-0 items-center", children: [
         labelNode,
         tooltipNode
       ] }),
@@ -1448,12 +2148,12 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/form/Form.tsx
-import * as React24 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var Form = React24.forwardRef(
+import * as React28 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Form = React28.forwardRef(
   ({ variant = "default", gap, className, style, ...props }, ref) => {
     const gapResolved = resolveGap(gap ?? "md");
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx27(
       "form",
       {
         ref,
@@ -1473,15 +2173,15 @@ var Form = React24.forwardRef(
 Form.displayName = "Form";
 
 // src/components/form-layout/FormLayout.tsx
-import * as React25 from "react";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var GRID_COLUMNS = {
   1: "grid-cols-1",
   2: "grid-cols-2",
   3: "grid-cols-3",
   4: "grid-cols-4"
 };
-var FormLayout = React25.forwardRef(
+var FormLayout = React29.forwardRef(
   ({
     layout = "stack",
     columns = 2,
@@ -1496,7 +2196,7 @@ var FormLayout = React25.forwardRef(
   }, ref) => {
     const Tag = as;
     const gapResolved = resolveGap(gap ?? "md");
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs17(
       Tag,
       {
         ref,
@@ -1511,8 +2211,8 @@ var FormLayout = React25.forwardRef(
         style: { ...gapResolved.style, ...style },
         ...props,
         children: [
-          legend && as === "fieldset" && /* @__PURE__ */ jsx24("legend", { className: "col-span-full p-0 text-sm font-medium leading-none", children: legend }),
-          description && as === "fieldset" && /* @__PURE__ */ jsx24("p", { className: "col-span-full text-xs text-muted-foreground", children: description }),
+          legend && as === "fieldset" && /* @__PURE__ */ jsx28("legend", { className: "col-span-full p-0 text-sm font-medium leading-none", children: legend }),
+          description && as === "fieldset" && /* @__PURE__ */ jsx28("p", { className: "col-span-full text-xs text-muted-foreground", children: description }),
           children
         ]
       }
@@ -1522,17 +2222,17 @@ var FormLayout = React25.forwardRef(
 FormLayout.displayName = "FormLayout";
 
 // src/components/switch/Switch.tsx
-import * as React26 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var Switch = React26.forwardRef(
+import * as React30 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Switch = React30.forwardRef(
   ({ className, checked, defaultChecked, onCheckedChange, disabled, ...props }, ref) => {
-    const [internalChecked, setInternalChecked] = React26.useState(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = React30.useState(defaultChecked ?? false);
     const isOn = checked ?? internalChecked;
     const toggle = () => {
       if (checked === void 0) setInternalChecked((prev) => !prev);
       onCheckedChange?.(!isOn);
     };
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx29(
       "button",
       {
         type: "button",
@@ -1549,7 +2249,7 @@ var Switch = React26.forwardRef(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsx29(
           "span",
           {
             "aria-hidden": "true",
@@ -1566,9 +2266,9 @@ var Switch = React26.forwardRef(
 Switch.displayName = "Switch";
 
 // src/components/separator/Separator.tsx
-import * as React27 from "react";
+import * as React31 from "react";
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var separatorVariants = cva4("shrink-0 bg-border", {
   variants: {
     orientation: {
@@ -1580,8 +2280,8 @@ var separatorVariants = cva4("shrink-0 bg-border", {
     orientation: "horizontal"
   }
 });
-var Separator = React27.forwardRef(
-  ({ className, orientation, label, ...props }, ref) => /* @__PURE__ */ jsx26(
+var Separator = React31.forwardRef(
+  ({ className, orientation, label, ...props }, ref) => /* @__PURE__ */ jsx30(
     "div",
     {
       ref,
@@ -1597,8 +2297,8 @@ Separator.displayName = "Separator";
 var Divider = Separator;
 
 // src/components/skeleton/Skeleton.tsx
-import * as React28 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import * as React32 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var roundedClasses = {
   none: "rounded-none",
   sm: "rounded-sm",
@@ -1606,8 +2306,8 @@ var roundedClasses = {
   lg: "rounded-lg",
   full: "rounded-full"
 };
-var Skeleton = React28.forwardRef(
-  ({ className, height, width, rounded = "md", ...props }, ref) => /* @__PURE__ */ jsx27(
+var Skeleton = React32.forwardRef(
+  ({ className, height, width, rounded = "md", ...props }, ref) => /* @__PURE__ */ jsx31(
     "div",
     {
       ref,
@@ -1626,13 +2326,13 @@ var Skeleton = React28.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 // src/components/progress/Progress.tsx
-import * as React29 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var Progress = React29.forwardRef(
+import * as React33 from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Progress = React33.forwardRef(
   ({ className, value = 0, max = 100, label, ...props }, ref) => {
     const clamped = Math.min(Math.max(value, 0), max);
     const percent = max > 0 ? clamped / max * 100 : 0;
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx32(
       "div",
       {
         ref,
@@ -1643,7 +2343,7 @@ var Progress = React29.forwardRef(
         "aria-label": label,
         className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
         ...props,
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx32(
           "div",
           {
             className: "h-full bg-primary transition-all duration-300 motion-reduce:transition-none",
@@ -1657,10 +2357,10 @@ var Progress = React29.forwardRef(
 Progress.displayName = "Progress";
 
 // src/components/tabs/Tabs.tsx
-import * as React30 from "react";
+import * as React34 from "react";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var TabsContext = React30.createContext({
+import { jsx as jsx33 } from "react/jsx-runtime";
+var TabsContext = React34.createContext({
   value: "",
   setValue: () => {
   },
@@ -1668,19 +2368,19 @@ var TabsContext = React30.createContext({
   variant: "default",
   size: "md"
 });
-var Tabs = React30.forwardRef(
+var Tabs = React34.forwardRef(
   ({ value, defaultValue, onValueChange, variant = "default", size = "md", className, children }, ref) => {
-    const [internalValue, setInternalValue] = React30.useState(defaultValue ?? "");
+    const [internalValue, setInternalValue] = React34.useState(defaultValue ?? "");
     const current = value ?? internalValue;
-    const baseId = React30.useId();
-    const setValue = React30.useCallback(
+    const baseId = React34.useId();
+    const setValue = React34.useCallback(
       (next) => {
         if (value === void 0) setInternalValue(next);
         onValueChange?.(next);
       },
       [value, onValueChange]
     );
-    return /* @__PURE__ */ jsx29("div", { ref, className, "data-value": current, "data-variant": variant, children: /* @__PURE__ */ jsx29(TabsContext.Provider, { value: { value: current, setValue, baseId, variant, size }, children }) });
+    return /* @__PURE__ */ jsx33("div", { ref, className, "data-value": current, "data-variant": variant, children: /* @__PURE__ */ jsx33(TabsContext.Provider, { value: { value: current, setValue, baseId, variant, size }, children }) });
   }
 );
 Tabs.displayName = "Tabs";
@@ -1702,10 +2402,10 @@ var tabsListVariants = cva5("inline-flex items-center justify-center text-muted-
   },
   defaultVariants: { variant: "default", size: "md" }
 });
-var TabsList = React30.forwardRef(
+var TabsList = React34.forwardRef(
   ({ className, ...props }, ref) => {
-    const ctx = React30.useContext(TabsContext);
-    return /* @__PURE__ */ jsx29(
+    const ctx = React34.useContext(TabsContext);
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         ref,
@@ -1745,9 +2445,9 @@ var triggerInactiveByVariant = {
   underline: "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
   rounded: "hover:text-foreground"
 };
-var TabsTrigger = React30.forwardRef(
+var TabsTrigger = React34.forwardRef(
   ({ value, className, onKeyDown, ...props }, ref) => {
-    const ctx = React30.useContext(TabsContext);
+    const ctx = React34.useContext(TabsContext);
     const active = ctx.value === value;
     const focusAt = (tabs, index) => {
       if (tabs.length === 0) return;
@@ -1757,7 +2457,7 @@ var TabsTrigger = React30.forwardRef(
       target.click();
     };
     const siblingTabs = (button) => Array.from(button.parentElement?.querySelectorAll('[role="tab"]') ?? []);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx33(
       "button",
       {
         ref,
@@ -1803,11 +2503,11 @@ var TabsTrigger = React30.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React30.forwardRef(
+var TabsContent = React34.forwardRef(
   ({ value, className, ...props }, ref) => {
-    const ctx = React30.useContext(TabsContext);
+    const ctx = React34.useContext(TabsContext);
     const active = ctx.value === value;
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         ref,
@@ -1829,25 +2529,29 @@ var TabsContent = React30.forwardRef(
 TabsContent.displayName = "TabsContent";
 
 // src/components/card/Card.tsx
-import * as React31 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Card = React31.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
-    "div",
-    {
-      ref,
-      className: cn("rounded-xl border border-border bg-card text-card-foreground shadow-sm", className),
-      ...props
-    }
-  )
+import * as React35 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Card = React35.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot3 : "div";
+    return /* @__PURE__ */ jsx34(
+      Comp,
+      {
+        ref,
+        className: cn("rounded-xl border border-border bg-card text-card-foreground shadow-sm", className),
+        ...props
+      }
+    );
+  }
 );
 Card.displayName = "Card";
-var CardHeader = React31.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+var CardHeader = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React31.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var CardTitle = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
     "h3",
     {
       ref,
@@ -1857,29 +2561,29 @@ var CardTitle = React31.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React31.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+var CardDescription = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React31.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn("p-6 pt-0", className), ...props })
+var CardContent = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React31.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+var CardFooter = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
 
 // src/components/accordion/Accordion.tsx
-import * as React32 from "react";
-import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
-var AccordionContext = React32.createContext({
+import * as React36 from "react";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+var AccordionContext = React36.createContext({
   openItems: /* @__PURE__ */ new Set(),
   toggle: () => {
   },
   collapsible: true
 });
-var Accordion = React32.forwardRef(
+var Accordion = React36.forwardRef(
   ({
     value,
     defaultValue = [],
@@ -1891,9 +2595,9 @@ var Accordion = React32.forwardRef(
     style,
     children
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React32.useState(defaultValue);
+    const [internalOpen, setInternalOpen] = React36.useState(defaultValue);
     const current = value ?? internalOpen;
-    const toggle = React32.useCallback(
+    const toggle = React36.useCallback(
       (id) => {
         const next = current.includes(id) ? current.filter((item) => item !== id) : collapsible ? [id] : [...current, id];
         if (value === void 0) setInternalOpen(next);
@@ -1902,7 +2606,7 @@ var Accordion = React32.forwardRef(
       [current, collapsible, value, onValueChange]
     );
     const gapResolved = resolveGap(gap);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx35(
       "div",
       {
         ref,
@@ -1915,25 +2619,25 @@ var Accordion = React32.forwardRef(
           className
         ),
         style: { ...gapResolved.style, ...style },
-        children: /* @__PURE__ */ jsx31(AccordionContext.Provider, { value: { openItems: new Set(current), toggle, collapsible }, children })
+        children: /* @__PURE__ */ jsx35(AccordionContext.Provider, { value: { openItems: new Set(current), toggle, collapsible }, children })
       }
     );
   }
 );
 Accordion.displayName = "Accordion";
-var AccordionItem = React32.forwardRef(
-  ({ id, className, children }, ref) => /* @__PURE__ */ jsx31("div", { ref, "data-accordion-item": id, className, children: /* @__PURE__ */ jsx31(AccordionItemContext.Provider, { value: { id }, children }) })
+var AccordionItem = React36.forwardRef(
+  ({ id, className, children }, ref) => /* @__PURE__ */ jsx35("div", { ref, "data-accordion-item": id, className, children: /* @__PURE__ */ jsx35(AccordionItemContext.Provider, { value: { id }, children }) })
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionItemContext = React32.createContext({ id: "" });
-var AccordionTrigger = React32.forwardRef(
+var AccordionItemContext = React36.createContext({ id: "" });
+var AccordionTrigger = React36.forwardRef(
   ({ className, children, icon, ...props }, ref) => {
-    const { id } = React32.useContext(AccordionItemContext);
-    const { openItems, toggle } = React32.useContext(AccordionContext);
+    const { id } = React36.useContext(AccordionItemContext);
+    const { openItems, toggle } = React36.useContext(AccordionContext);
     const open = openItems.has(id);
     const panelId = `${id}-panel`;
     const triggerId = `${id}-trigger`;
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs18(
       "button",
       {
         ref,
@@ -1952,7 +2656,7 @@ var AccordionTrigger = React32.forwardRef(
         ...props,
         children: [
           children,
-          icon ?? /* @__PURE__ */ jsx31(
+          icon ?? /* @__PURE__ */ jsx35(
             "svg",
             {
               "aria-hidden": "true",
@@ -1962,7 +2666,7 @@ var AccordionTrigger = React32.forwardRef(
               strokeWidth: "2",
               strokeLinecap: "round",
               className: cn("h-4 w-4 shrink-0 transition-transform duration-200", open && "rotate-180"),
-              children: /* @__PURE__ */ jsx31("polyline", { points: "6 9 12 15 18 9" })
+              children: /* @__PURE__ */ jsx35("polyline", { points: "6 9 12 15 18 9" })
             }
           )
         ]
@@ -1971,13 +2675,13 @@ var AccordionTrigger = React32.forwardRef(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React32.forwardRef(
+var AccordionContent = React36.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { id } = React32.useContext(AccordionItemContext);
-    const { openItems } = React32.useContext(AccordionContext);
+    const { id } = React36.useContext(AccordionItemContext);
+    const { openItems } = React36.useContext(AccordionContext);
     const open = openItems.has(id);
-    const [expanded, setExpanded] = React32.useState(open);
-    React32.useEffect(() => {
+    const [expanded, setExpanded] = React36.useState(open);
+    React36.useEffect(() => {
       if (!open) {
         setExpanded(false);
         return;
@@ -1996,7 +2700,7 @@ var AccordionContent = React32.forwardRef(
         cancelAnimationFrame(second);
       };
     }, [open]);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx35(
       "div",
       {
         ref,
@@ -2015,7 +2719,7 @@ var AccordionContent = React32.forwardRef(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx31("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx31("div", { className: "px-4 pb-3 text-sm text-muted-foreground", children }) })
+        children: /* @__PURE__ */ jsx35("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx35("div", { className: "px-4 pb-3 text-sm text-muted-foreground", children }) })
       }
     );
   }
@@ -2023,10 +2727,10 @@ var AccordionContent = React32.forwardRef(
 AccordionContent.displayName = "AccordionContent";
 
 // src/components/table/Table.tsx
-import * as React33 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var Table = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx32(
+import * as React37 from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Table = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx36(
     "table",
     {
       ref,
@@ -2036,16 +2740,16 @@ var Table = React33.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+var TableHeader = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+var TableBody = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var TableFooter = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
     "tfoot",
     {
       ref,
@@ -2055,8 +2759,8 @@ var TableFooter = React33.forwardRef(
   )
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var TableRow = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
     "tr",
     {
       ref,
@@ -2069,8 +2773,8 @@ var TableRow = React33.forwardRef(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var TableHead = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
     "th",
     {
       ref,
@@ -2084,26 +2788,32 @@ var TableHead = React33.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("td", { ref, className: cn("px-3 py-2 align-middle", className), ...props })
+var TableCell = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36("td", { ref, className: cn("px-3 py-2 align-middle", className), ...props })
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React33.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("caption", { ref, className: cn("mt-3 text-xs text-muted-foreground", className), ...props })
+var TableCaption = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36("caption", { ref, className: cn("mt-3 text-xs text-muted-foreground", className), ...props })
 );
 TableCaption.displayName = "TableCaption";
 
 // src/components/data-table/DataTable.tsx
-import * as React35 from "react";
+import * as React39 from "react";
 
 // src/components/pagination/Pagination.tsx
-import * as React34 from "react";
-import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+import * as React38 from "react";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var controlClass = "inline-flex h-8 items-center rounded-md border border-border px-2.5 text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
-var Pagination = React34.forwardRef(
+var Pagination = React38.forwardRef(
   ({
-    page,
-    pageCount,
+    page: pageProp,
+    pageCount: pageCountProp,
+    currentPage,
+    totalPages,
+    pageSize,
+    total,
+    itemLabel = "items",
+    showSummary,
     onPageChange,
     siblings = 1,
     showBoundaries = false,
@@ -2113,6 +2823,9 @@ var Pagination = React34.forwardRef(
     className,
     ...props
   }, ref) => {
+    const page = pageProp ?? currentPage ?? 1;
+    const derivedPageCount = total !== void 0 && pageSize !== void 0 && pageSize > 0 ? Math.ceil(total / pageSize) : void 0;
+    const pageCount = Math.max(1, pageCountProp ?? totalPages ?? derivedPageCount ?? 1);
     const pages = [];
     const start = Math.max(2, page - siblings);
     const end = Math.min(pageCount - 1, page + siblings);
@@ -2123,15 +2836,18 @@ var Pagination = React34.forwardRef(
     if (pageCount > 1) pages.push(pageCount);
     const withFirst = showFirst ?? showBoundaries;
     const withLast = showLast ?? showBoundaries;
-    return /* @__PURE__ */ jsxs15(
+    const summaryEnabled = showSummary ?? (total !== void 0 && pageSize !== void 0);
+    const rangeStart = pageSize !== void 0 ? (page - 1) * pageSize + 1 : void 0;
+    const rangeEnd = pageSize !== void 0 && total !== void 0 ? Math.min(total, page * pageSize) : void 0;
+    const nav = /* @__PURE__ */ jsxs19(
       "nav",
       {
         ref,
         "aria-label": "Pagination",
-        className: cn("flex items-center justify-center gap-1", className),
+        className: cn("flex items-center justify-center gap-1", summaryEnabled ? void 0 : className),
         ...props,
         children: [
-          withFirst && /* @__PURE__ */ jsx33(
+          withFirst && /* @__PURE__ */ jsx37(
             "button",
             {
               type: "button",
@@ -2142,7 +2858,7 @@ var Pagination = React34.forwardRef(
               children: icons?.first ?? "\xAB"
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx37(
             "button",
             {
               type: "button",
@@ -2154,7 +2870,7 @@ var Pagination = React34.forwardRef(
             }
           ),
           pages.map(
-            (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx33(
+            (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx37(
               "span",
               {
                 "aria-hidden": "true",
@@ -2162,7 +2878,7 @@ var Pagination = React34.forwardRef(
                 children: "\u2026"
               },
               `ellipsis-${index}`
-            ) : /* @__PURE__ */ jsx33(
+            ) : /* @__PURE__ */ jsx37(
               "button",
               {
                 type: "button",
@@ -2179,7 +2895,7 @@ var Pagination = React34.forwardRef(
               entry
             )
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx37(
             "button",
             {
               type: "button",
@@ -2190,7 +2906,7 @@ var Pagination = React34.forwardRef(
               children: icons?.next ?? "\u203A"
             }
           ),
-          withLast && /* @__PURE__ */ jsx33(
+          withLast && /* @__PURE__ */ jsx37(
             "button",
             {
               type: "button",
@@ -2204,12 +2920,17 @@ var Pagination = React34.forwardRef(
         ]
       }
     );
+    if (!summaryEnabled) return nav;
+    return /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-wrap items-center justify-between gap-3", className), children: [
+      /* @__PURE__ */ jsx37("p", { className: "text-sm text-muted-foreground", children: rangeStart !== void 0 && rangeEnd !== void 0 && total !== void 0 ? `Showing ${rangeStart}\u2013${rangeEnd} of ${total} ${itemLabel}` : `Page ${page} of ${pageCount}` }),
+      nav
+    ] });
   }
 );
 Pagination.displayName = "Pagination";
 
 // src/components/data-table/DataTable.tsx
-import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 function compareValues(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
   if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
@@ -2239,9 +2960,9 @@ function DataTable({
   loadingRows,
   className
 }) {
-  const [internalSort, setInternalSort] = React35.useState(defaultSort);
-  const [internalPage, setInternalPage] = React35.useState(1);
-  const sort = React35.useMemo(() => {
+  const [internalSort, setInternalSort] = React39.useState(defaultSort);
+  const [internalPage, setInternalPage] = React39.useState(1);
+  const sort = React39.useMemo(() => {
     if (sortKey !== void 0) {
       return sortKey === null ? null : { key: sortKey, dir: sortDir ?? "asc" };
     }
@@ -2258,7 +2979,7 @@ function DataTable({
     if (page === void 0) setInternalPage(next);
     onPageChange?.(next);
   };
-  const sorted = React35.useMemo(() => {
+  const sorted = React39.useMemo(() => {
     if (!sort) return data;
     const column = columns.find((c) => c.key === sort.key);
     if (!column) return data;
@@ -2284,17 +3005,17 @@ function DataTable({
     return String(raw);
   };
   const alignClass = (align) => align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
-  return /* @__PURE__ */ jsxs16("div", { className: cn("w-full space-y-3", className), children: [
-    /* @__PURE__ */ jsx34("div", { className: "w-full overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs20("div", { className: cn("w-full space-y-3", className), children: [
+    /* @__PURE__ */ jsx38("div", { className: "w-full overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs20(
       "table",
       {
         className: cn("w-full caption-bottom", density === "compact" ? "text-xs" : "text-sm"),
         children: [
-          caption && /* @__PURE__ */ jsx34("caption", { className: "px-3 py-2 text-left text-xs text-muted-foreground", children: caption }),
-          /* @__PURE__ */ jsx34("thead", { className: cn("bg-muted/50", stickyHeader && "sticky top-0 z-10 bg-background"), children: /* @__PURE__ */ jsx34("tr", { children: columns.map((column) => {
+          caption && /* @__PURE__ */ jsx38("caption", { className: "px-3 py-2 text-left text-xs text-muted-foreground", children: caption }),
+          /* @__PURE__ */ jsx38("thead", { className: cn("bg-muted/50", stickyHeader && "sticky top-0 z-10 bg-background"), children: /* @__PURE__ */ jsx38("tr", { children: columns.map((column) => {
             const isSorted = sort?.key === column.key;
             const ariaSort = !column.sortable ? void 0 : isSorted ? sort.dir === "asc" ? "ascending" : "descending" : "none";
-            return /* @__PURE__ */ jsx34(
+            return /* @__PURE__ */ jsx38(
               "th",
               {
                 scope: "col",
@@ -2304,7 +3025,7 @@ function DataTable({
                   alignClass(column.align),
                   column.className
                 ),
-                children: column.sortable ? /* @__PURE__ */ jsxs16(
+                children: column.sortable ? /* @__PURE__ */ jsxs20(
                   "button",
                   {
                     type: "button",
@@ -2312,7 +3033,7 @@ function DataTable({
                     className: "inline-flex items-center gap-1 rounded px-1 py-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                     children: [
                       column.header,
-                      /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: "text-[10px] text-muted-foreground", children: renderSortIcon ? renderSortIcon(isSorted ? sort.dir === "asc" ? "asc" : "desc" : "none") : isSorted ? sort.dir === "asc" ? "\u25B2" : "\u25BC" : "\u2195" })
+                      /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "text-[10px] text-muted-foreground", children: renderSortIcon ? renderSortIcon(isSorted ? sort.dir === "asc" ? "asc" : "desc" : "none") : isSorted ? sort.dir === "asc" ? "\u25B2" : "\u25BC" : "\u2195" })
                     ]
                   }
                 ) : column.header
@@ -2320,17 +3041,17 @@ function DataTable({
               column.key
             );
           }) }) }),
-          /* @__PURE__ */ jsx34("tbody", { "aria-busy": loading || void 0, children: loading ? Array.from(
+          /* @__PURE__ */ jsx38("tbody", { "aria-busy": loading || void 0, children: loading ? Array.from(
             { length: (loadingRows ?? pageSize ?? Math.min(visible.length, 5)) || 5 },
-            (_, skeletonRow) => /* @__PURE__ */ jsx34("tr", { children: columns.map((column) => /* @__PURE__ */ jsx34("td", { className: cn("px-3 py-2", density === "compact" && "px-2 py-1"), children: /* @__PURE__ */ jsx34(Skeleton, { className: density === "compact" ? "h-3 w-full" : "h-4 w-full" }) }, column.key)) }, `skeleton-${skeletonRow}`)
-          ) : visible.length === 0 ? /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34(
+            (_, skeletonRow) => /* @__PURE__ */ jsx38("tr", { children: columns.map((column) => /* @__PURE__ */ jsx38("td", { className: cn("px-3 py-2", density === "compact" && "px-2 py-1"), children: /* @__PURE__ */ jsx38(Skeleton, { className: density === "compact" ? "h-3 w-full" : "h-4 w-full" }) }, column.key)) }, `skeleton-${skeletonRow}`)
+          ) : visible.length === 0 ? /* @__PURE__ */ jsx38("tr", { children: /* @__PURE__ */ jsx38(
             "td",
             {
               colSpan: columns.length,
               className: "px-3 py-8 text-center text-sm text-muted-foreground",
               children: emptyMessage
             }
-          ) }) : visible.map((row, index) => /* @__PURE__ */ jsx34(
+          ) }) : visible.map((row, index) => /* @__PURE__ */ jsx38(
             "tr",
             {
               tabIndex: onRowClick ? 0 : void 0,
@@ -2346,7 +3067,7 @@ function DataTable({
                 zebra && "[&:nth-child(odd)]:bg-muted/30",
                 onRowClick && "cursor-pointer transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
               ),
-              children: columns.map((column) => /* @__PURE__ */ jsx34(
+              children: columns.map((column) => /* @__PURE__ */ jsx38(
                 "td",
                 {
                   className: cn(
@@ -2355,7 +3076,7 @@ function DataTable({
                     alignClass(column.align),
                     column.className
                   ),
-                  children: column.onClick ? /* @__PURE__ */ jsx34(
+                  children: column.onClick ? /* @__PURE__ */ jsx38(
                     "button",
                     {
                       type: "button",
@@ -2373,8 +3094,8 @@ function DataTable({
         ]
       }
     ) }),
-    pageSize && pageCount > 1 && /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
-      /* @__PURE__ */ jsxs16(
+    pageSize && pageCount > 1 && /* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
+      /* @__PURE__ */ jsxs20(
         "p",
         {
           className: "min-h-8 leading-none text-xs text-muted-foreground",
@@ -2389,16 +3110,16 @@ function DataTable({
           ]
         }
       ),
-      /* @__PURE__ */ jsx34(Pagination, { page: safePage, pageCount, onPageChange: setPage })
+      /* @__PURE__ */ jsx38(Pagination, { page: safePage, pageCount, onPageChange: setPage })
     ] })
   ] });
 }
 
 // src/components/list/List.tsx
-import * as React36 from "react";
-import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
-var List = React36.forwardRef(
-  ({ divided, bordered, size = "default", className, ...props }, ref) => /* @__PURE__ */ jsx35(
+import * as React40 from "react";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+var List = React40.forwardRef(
+  ({ divided, bordered, size = "default", className, ...props }, ref) => /* @__PURE__ */ jsx39(
     "ul",
     {
       ref,
@@ -2414,7 +3135,7 @@ var List = React36.forwardRef(
   )
 );
 List.displayName = "List";
-var ListItem = React36.forwardRef(
+var ListItem = React40.forwardRef(
   ({ leading, trailing, selected, onClick, description, disabled, className, children, ...props }, ref) => {
     const padding = "px-3 py-2.5";
     const rowClass = cn(
@@ -2424,23 +3145,23 @@ var ListItem = React36.forwardRef(
       disabled && "opacity-50",
       className
     );
-    const body = /* @__PURE__ */ jsxs17(Fragment3, { children: [
-      leading && /* @__PURE__ */ jsx35("span", { className: "flex shrink-0 items-center", children: leading }),
-      /* @__PURE__ */ jsxs17("span", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx35("span", { className: "block truncate", children }),
-        description && /* @__PURE__ */ jsx35("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: description })
+    const body = /* @__PURE__ */ jsxs21(Fragment5, { children: [
+      leading && /* @__PURE__ */ jsx39("span", { className: "flex shrink-0 items-center", children: leading }),
+      /* @__PURE__ */ jsxs21("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx39("span", { className: "block truncate", children }),
+        description && /* @__PURE__ */ jsx39("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: description })
       ] }),
-      trailing && /* @__PURE__ */ jsx35("span", { className: "flex shrink-0 items-center text-xs text-muted-foreground", children: trailing })
+      trailing && /* @__PURE__ */ jsx39("span", { className: "flex shrink-0 items-center text-xs text-muted-foreground", children: trailing })
     ] });
-    return /* @__PURE__ */ jsx35("li", { ref, ...props, children: onClick ? /* @__PURE__ */ jsx35("button", { type: "button", onClick, disabled, className: cn(padding, rowClass), children: body }) : /* @__PURE__ */ jsx35("div", { className: cn(padding, rowClass), children: body }) });
+    return /* @__PURE__ */ jsx39("li", { ref, ...props, children: onClick ? /* @__PURE__ */ jsx39("button", { type: "button", onClick, disabled, className: cn(padding, rowClass), children: body }) : /* @__PURE__ */ jsx39("div", { className: cn(padding, rowClass), children: body }) });
   }
 );
 ListItem.displayName = "ListItem";
 
 // src/components/text/Text.tsx
-import * as React37 from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var sizeClasses2 = {
+import * as React41 from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var sizeClasses3 = {
   xs: "text-xs",
   sm: "text-sm",
   base: "text-base",
@@ -2453,15 +3174,15 @@ var weightClasses = {
   semibold: "font-semibold",
   bold: "font-bold"
 };
-var Text = React37.forwardRef(
+var Text = React41.forwardRef(
   ({ inline, size = "base", weight, muted, className, ...props }, ref) => {
     const Tag = inline ? "span" : "p";
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx40(
       Tag,
       {
         ref,
         className: cn(
-          sizeClasses2[size],
+          sizeClasses3[size],
           weight && weightClasses[weight],
           muted && "text-muted-foreground",
           inline ? "inline" : "block",
@@ -2475,8 +3196,8 @@ var Text = React37.forwardRef(
 Text.displayName = "Text";
 
 // src/components/heading/Heading.tsx
-import * as React38 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import * as React42 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var levelClasses = {
   1: "text-4xl",
   2: "text-3xl",
@@ -2485,7 +3206,7 @@ var levelClasses = {
   5: "text-lg",
   6: "text-base"
 };
-var sizeClasses3 = {
+var sizeClasses4 = {
   sm: "text-lg",
   md: "text-xl",
   lg: "text-2xl",
@@ -2493,16 +3214,16 @@ var sizeClasses3 = {
   "2xl": "text-4xl",
   "3xl": "text-5xl"
 };
-var Heading = React38.forwardRef(
+var Heading = React42.forwardRef(
   ({ level, size, muted, className, ...props }, ref) => {
     const Tag = `h${level}`;
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx41(
       Tag,
       {
         ref,
         className: cn(
           "font-semibold tracking-tight",
-          size ? sizeClasses3[size] : levelClasses[level],
+          size ? sizeClasses4[size] : levelClasses[level],
           muted && "text-muted-foreground",
           className
         ),
@@ -2513,13 +3234,448 @@ var Heading = React38.forwardRef(
 );
 Heading.displayName = "Heading";
 
+// src/components/empty-state/EmptyState.tsx
+import * as React43 from "react";
+import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+var EmptyState = React43.forwardRef(function EmptyState2({ icon, title, description, action, secondaryAction, size = "md", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center justify-center rounded-lg border border-dashed border-border text-center",
+        size === "md" ? "gap-3 px-6 py-12" : "gap-2 px-4 py-6",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx42("div", { className: "text-muted-foreground [&_svg]:size-8", children: icon }),
+        /* @__PURE__ */ jsx42("p", { className: cn("font-semibold", size === "md" ? "text-base" : "text-sm"), children: title }),
+        description && /* @__PURE__ */ jsx42("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }),
+        children,
+        (action || secondaryAction) && /* @__PURE__ */ jsxs22("div", { className: "mt-1 flex flex-wrap items-center justify-center gap-2", children: [
+          action,
+          secondaryAction
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/page-header/PageHeader.tsx
+import * as React44 from "react";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+var PageHeader = React44.forwardRef(function PageHeader2({ title, description, breadcrumbs, actions, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs23("div", { ref, className: cn("flex flex-col gap-2", className), ...props, children: [
+    breadcrumbs && /* @__PURE__ */ jsx43("div", { className: "text-sm text-muted-foreground", children: breadcrumbs }),
+    /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx43("h1", { className: "text-2xl font-semibold tracking-tight", children: title }),
+        description && /* @__PURE__ */ jsx43("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx43("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    ] }),
+    children && /* @__PURE__ */ jsx43("div", { className: "mt-2", children })
+  ] });
+});
+
+// src/components/metric-card/MetricCard.tsx
+import * as React45 from "react";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+var trendClasses = {
+  up: "text-success",
+  down: "text-destructive",
+  flat: "text-muted-foreground"
+};
+var trendGlyph = { up: "\u2191", down: "\u2193", flat: "\u2192" };
+var MetricCard = React45.forwardRef(function MetricCard2({ label, value, hint, delta, trend = "flat", icon, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs24("div", { ref, className: cn("rounded-xl border border-border bg-card p-5", className), ...props, children: [
+    /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx44("p", { className: "text-sm text-muted-foreground", children: label }),
+      icon && /* @__PURE__ */ jsx44("span", { className: "text-muted-foreground [&_svg]:size-4", children: icon })
+    ] }),
+    /* @__PURE__ */ jsx44("p", { className: "mt-2 text-2xl font-semibold tabular-nums", children: value }),
+    (delta || hint) && /* @__PURE__ */ jsxs24("p", { className: "mt-1 flex items-center gap-2 text-sm", children: [
+      delta && /* @__PURE__ */ jsxs24("span", { className: cn("font-medium tabular-nums", trendClasses[trend]), children: [
+        /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: trendGlyph[trend] }),
+        " ",
+        delta
+      ] }),
+      hint && /* @__PURE__ */ jsx44("span", { className: "text-muted-foreground", children: hint })
+    ] })
+  ] });
+});
+
+// src/components/password-input/PasswordInput.tsx
+import * as React46 from "react";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+var PasswordInput = React46.forwardRef(function PasswordInput2({ className, showLabel = "Show password", hideLabel = "Hide password", ...props }, ref) {
+  const [visible, setVisible] = React46.useState(false);
+  return /* @__PURE__ */ jsxs25("div", { className: cn("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsx45(Input, { ref, type: visible ? "text" : "password", className: "pr-24", ...props }),
+    /* @__PURE__ */ jsx45(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        "aria-pressed": visible,
+        "aria-label": visible ? hideLabel : showLabel,
+        onClick: () => setVisible((current) => !current),
+        className: "absolute right-1 h-8 px-2 text-xs text-muted-foreground hover:text-foreground",
+        children: visible ? "Hide" : "Show"
+      }
+    )
+  ] });
+});
+
+// src/components/auth-layout/AuthLayout.tsx
+import * as React47 from "react";
+import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+var sizeClasses5 = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg"
+};
+var AuthLayout = React47.forwardRef(function AuthLayout2({ title, description, brand, footer, children, size = "md", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs26(
+    "div",
+    {
+      ref,
+      className: cn("flex min-h-screen flex-col items-center justify-center bg-muted/30 px-4 py-12", className),
+      ...props,
+      children: [
+        brand && /* @__PURE__ */ jsx46("div", { className: "mb-6", children: brand }),
+        /* @__PURE__ */ jsxs26("div", { className: cn("w-full rounded-xl border border-border bg-card p-6 shadow-sm sm:p-8", sizeClasses5[size]), children: [
+          /* @__PURE__ */ jsx46("h1", { className: "text-xl font-semibold tracking-tight", children: title }),
+          description && /* @__PURE__ */ jsx46("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+          /* @__PURE__ */ jsx46("div", { className: "mt-6", children })
+        ] }),
+        footer && /* @__PURE__ */ jsx46("div", { className: "mt-6 text-center text-sm text-muted-foreground", children: footer })
+      ]
+    }
+  );
+});
+
+// src/components/filter-bar/FilterBar.tsx
+import * as React48 from "react";
+import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+var FilterBar = React48.forwardRef(function FilterBar2({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search\u2026",
+  onReset,
+  activeCount = 0,
+  trailing,
+  className,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs27(
+    "div",
+    {
+      ref,
+      role: "search",
+      className: cn(
+        "flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card p-2",
+        className
+      ),
+      ...props,
+      children: [
+        onSearchChange !== void 0 && /* @__PURE__ */ jsx47(
+          Input,
+          {
+            type: "search",
+            value: searchValue,
+            onChange: (event) => onSearchChange(event.target.value),
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            className: "h-9 w-full min-w-40 flex-1 sm:w-auto"
+          }
+        ),
+        /* @__PURE__ */ jsx47("div", { className: "flex flex-wrap items-center gap-2", children }),
+        onReset && /* @__PURE__ */ jsxs27(Button, { type: "button", variant: "ghost", size: "sm", onClick: onReset, children: [
+          "Reset",
+          activeCount > 0 ? ` (${activeCount})` : ""
+        ] }),
+        trailing && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+      ]
+    }
+  );
+});
+
+// src/components/date-picker/DatePicker.tsx
+import * as React49 from "react";
+import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
+var DatePicker = React49.forwardRef(function DatePicker2({ value, defaultValue, onValueChange, clearable = false, className, ...props }, ref) {
+  const [internal, setInternal] = React49.useState(defaultValue ?? "");
+  const current = value ?? internal;
+  const commit = (next) => {
+    if (value === void 0) setInternal(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs28("div", { className: cn("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsx48(
+      Input,
+      {
+        ref,
+        type: "date",
+        value: current,
+        onChange: (event) => commit(event.target.value),
+        className: clearable && current ? "pr-9" : void 0,
+        ...props
+      }
+    ),
+    clearable && current && /* @__PURE__ */ jsx48(
+      "button",
+      {
+        type: "button",
+        onClick: () => commit(""),
+        "aria-label": "Clear date",
+        className: "absolute right-2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: "\u2715"
+      }
+    )
+  ] });
+});
+
+// src/components/time-picker/TimePicker.tsx
+import * as React50 from "react";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+var TimePicker = React50.forwardRef(function TimePicker2({ value, defaultValue, onValueChange, clearable = false, className, ...props }, ref) {
+  const [internal, setInternal] = React50.useState(defaultValue ?? "");
+  const current = value ?? internal;
+  const commit = (next) => {
+    if (value === void 0) setInternal(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs29("div", { className: cn("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsx49(
+      Input,
+      {
+        ref,
+        type: "time",
+        value: current,
+        onChange: (event) => commit(event.target.value),
+        className: clearable && current ? "pr-9" : void 0,
+        ...props
+      }
+    ),
+    clearable && current && /* @__PURE__ */ jsx49(
+      "button",
+      {
+        type: "button",
+        onClick: () => commit(""),
+        "aria-label": "Clear time",
+        className: "absolute right-2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: "\u2715"
+      }
+    )
+  ] });
+});
+
+// src/components/stepper/Stepper.tsx
+import * as React51 from "react";
+import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
+var Stepper = React51.forwardRef(function Stepper2({ steps, current, orientation = "horizontal", onStepClick, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx50(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex gap-4",
+        orientation === "vertical" ? "flex-col" : "flex-wrap items-start",
+        className
+      ),
+      ...props,
+      children: steps.map((step, index) => {
+        const state = index < current ? "complete" : index === current ? "current" : "upcoming";
+        const interactive = Boolean(onStepClick);
+        const content = /* @__PURE__ */ jsxs30(Fragment6, { children: [
+          /* @__PURE__ */ jsx50(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium",
+                state === "complete" && "border-primary bg-primary text-primary-foreground",
+                state === "current" && "border-primary text-primary",
+                state === "upcoming" && "border-border text-muted-foreground"
+              ),
+              children: state === "complete" ? "\u2713" : index + 1
+            }
+          ),
+          /* @__PURE__ */ jsxs30("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx50("span", { className: cn("block text-sm", state === "upcoming" ? "text-muted-foreground" : "font-medium"), children: step.label }),
+            step.description && /* @__PURE__ */ jsx50("span", { className: "block text-xs text-muted-foreground", children: step.description }),
+            /* @__PURE__ */ jsx50("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "current" ? " (current step)" : " (upcoming)" })
+          ] })
+        ] });
+        return /* @__PURE__ */ jsxs30("li", { className: "flex min-w-0 items-start gap-2", children: [
+          interactive ? /* @__PURE__ */ jsx50(
+            "button",
+            {
+              type: "button",
+              onClick: () => onStepClick?.(index),
+              "aria-current": state === "current" ? "step" : void 0,
+              className: "flex items-start gap-2 rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx50("div", { "aria-current": state === "current" ? "step" : void 0, className: "flex items-start gap-2", children: content }),
+          orientation === "horizontal" && index < steps.length - 1 && /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "mt-3.5 hidden h-px w-8 bg-border sm:block" })
+        ] }, step.label);
+      })
+    }
+  );
+});
+
+// src/components/file-upload/FileUpload.tsx
+import * as React52 from "react";
+import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var FileUpload = React52.forwardRef(function FileUpload2({
+  files,
+  defaultFiles,
+  onFilesChange,
+  label = "Drop files here or click to browse",
+  hint,
+  progress,
+  multiple = true,
+  accept,
+  disabled,
+  className,
+  id,
+  ...props
+}, ref) {
+  const [internal, setInternal] = React52.useState(defaultFiles ?? []);
+  const [dragging, setDragging] = React52.useState(false);
+  const current = files ?? internal;
+  const generatedId = React52.useId();
+  const inputId = id ?? generatedId;
+  const commit = (next) => {
+    if (files === void 0) setInternal(next);
+    onFilesChange?.(next);
+  };
+  const add = (incoming) => {
+    if (!incoming || incoming.length === 0) return;
+    const list = Array.from(incoming);
+    commit(multiple ? [...current, ...list] : list.slice(0, 1));
+  };
+  return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        onDragOver: (event) => {
+          if (disabled) return;
+          event.preventDefault();
+          setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (event) => {
+          if (disabled) return;
+          event.preventDefault();
+          setDragging(false);
+          add(event.dataTransfer.files);
+        },
+        className: cn(
+          "rounded-lg border border-dashed border-border p-6 text-center transition-colors",
+          dragging && "border-primary bg-primary/5",
+          disabled && "opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs31("label", { htmlFor: inputId, className: cn("block text-sm", disabled ? "cursor-not-allowed" : "cursor-pointer"), children: [
+            label,
+            /* @__PURE__ */ jsx51(
+              "input",
+              {
+                ref,
+                id: inputId,
+                type: "file",
+                multiple,
+                accept,
+                disabled,
+                className: "sr-only",
+                onChange: (event) => {
+                  add(event.target.files);
+                  event.target.value = "";
+                },
+                ...props
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx51("p", { className: "mt-1 text-xs text-muted-foreground", children: hint ?? (accept ? `Accepted: ${accept}` : "Any file type") })
+        ]
+      }
+    ),
+    current.length > 0 && /* @__PURE__ */ jsx51("ul", { "aria-label": "Selected files", className: "space-y-2", children: current.map((file) => /* @__PURE__ */ jsxs31("li", { className: "flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx51("p", { className: "truncate text-sm", children: file.name }),
+        /* @__PURE__ */ jsx51("p", { className: "text-xs text-muted-foreground", children: formatSize(file.size) }),
+        progress?.[file.name] !== void 0 && /* @__PURE__ */ jsx51(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuenow": progress[file.name],
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": `Uploading ${file.name}`,
+            className: "mt-1 h-1.5 w-40 overflow-hidden rounded-full bg-muted",
+            children: /* @__PURE__ */ jsx51("div", { className: "h-full bg-primary", style: { width: `${progress[file.name]}%` } })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx51(
+        "button",
+        {
+          type: "button",
+          onClick: () => commit(current.filter((entry) => entry.name !== file.name)),
+          "aria-label": `Remove ${file.name}`,
+          className: "rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: "\u2715"
+        }
+      )
+    ] }, file.name)) })
+  ] });
+});
+
+// src/components/timeline/Timeline.tsx
+import * as React53 from "react";
+import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+var Timeline = React53.forwardRef(function Timeline2({ items, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx52("ol", { ref, className: cn("relative flex flex-col gap-6", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs32("li", { className: "relative flex gap-4", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx52(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "mt-1 flex h-3 w-3 shrink-0 items-center justify-center rounded-full border-2",
+            item.muted ? "border-border bg-background" : "border-primary bg-primary"
+          )
+        }
+      ),
+      index < items.length - 1 && /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "mt-1 w-px flex-1 bg-border" })
+    ] }),
+    /* @__PURE__ */ jsxs32("div", { className: cn("min-w-0 pb-1", item.muted && "opacity-60"), children: [
+      item.period && /* @__PURE__ */ jsx52("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: item.period }),
+      /* @__PURE__ */ jsx52("p", { className: "text-sm font-semibold", children: item.title }),
+      item.description && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-muted-foreground", children: item.description }),
+      item.icon && /* @__PURE__ */ jsx52("div", { className: "mt-1 text-muted-foreground [&_svg]:size-4", children: item.icon })
+    ] })
+  ] }, `${item.title}-${index}`)) });
+});
+
 // src/components/block/Block.tsx
-import * as React39 from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
-var Block = React39.forwardRef(
+import * as React54 from "react";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var Block = React54.forwardRef(
   ({ as = "div", inline, muted, className, ...props }, ref) => {
     const Tag = inline ? "span" : as;
-    return /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx53(
       Tag,
       {
         ref,
@@ -2532,8 +3688,8 @@ var Block = React39.forwardRef(
 Block.displayName = "Block";
 
 // src/components/flex/Flex.tsx
-import * as React40 from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import * as React55 from "react";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var justifyClasses = {
   start: "justify-start",
   center: "justify-center",
@@ -2549,11 +3705,11 @@ var alignClasses = {
   stretch: "items-stretch",
   baseline: "items-baseline"
 };
-var Flex = React40.forwardRef(
+var Flex = React55.forwardRef(
   ({ direction = "row", align, justify, wrap, gap = "md", as = "div", className, style, ...props }, ref) => {
     const Tag = as;
     const gapResolved = resolveGap(gap);
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx54(
       Tag,
       {
         ref,
@@ -2580,7 +3736,7 @@ var selfAlignClasses = {
   stretch: "self-stretch",
   baseline: "self-baseline"
 };
-var FlexItem = React40.forwardRef(
+var FlexItem = React55.forwardRef(
   ({ grow, shrink, basis, align, as = "div", className, ...props }, ref) => {
     const Tag = as;
     const style = {
@@ -2588,7 +3744,7 @@ var FlexItem = React40.forwardRef(
       ...shrink === false ? { flexShrink: 0 } : typeof shrink === "string" && shrink ? { flexShrink: Number(shrink) || shrink } : {},
       ...basis ? { flexBasis: basis } : {}
     };
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx54(
       Tag,
       {
         ref,
@@ -2602,8 +3758,8 @@ var FlexItem = React40.forwardRef(
 FlexItem.displayName = "FlexItem";
 
 // src/components/grid/Grid.tsx
-import * as React41 from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import * as React56 from "react";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var BASE_COLS = {
   1: "grid-cols-1",
   2: "grid-cols-2",
@@ -2668,11 +3824,11 @@ var LG_COL_SPAN = {
   5: "lg:col-span-5",
   6: "lg:col-span-6"
 };
-var Grid = React41.forwardRef(
+var Grid = React56.forwardRef(
   ({ cols, smCols, mdCols, lgCols, minCol, gap = "md", as = "div", className, style, ...props }, ref) => {
     const Tag = as;
     const gapResolved = resolveGap(gap);
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx55(
       Tag,
       {
         ref,
@@ -2696,10 +3852,10 @@ var Grid = React41.forwardRef(
   }
 );
 Grid.displayName = "Grid";
-var GridItem = React41.forwardRef(
+var GridItem = React56.forwardRef(
   ({ span, smSpan, mdSpan, lgSpan, as = "div", className, ...props }, ref) => {
     const Tag = as;
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx55(
       Tag,
       {
         ref,
@@ -2718,10 +3874,11 @@ var GridItem = React41.forwardRef(
 GridItem.displayName = "GridItem";
 
 // src/components/menu/Menu.tsx
-import * as React42 from "react";
-import { createPortal as createPortal6 } from "react-dom";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var MenuContext = React42.createContext({
+import * as React57 from "react";
+import { createPortal as createPortal7 } from "react-dom";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var MenuContext = React57.createContext({
   open: false,
   setOpen: () => {
   },
@@ -2730,13 +3887,13 @@ var MenuContext = React42.createContext({
   },
   wrapperRef: { current: null }
 });
-var Menu = React42.forwardRef(
+var Menu = React57.forwardRef(
   ({ open, onOpenChange, className, children }, ref) => {
-    const [internalOpen, setInternalOpen] = React42.useState(false);
-    const [activeIndex, setActiveIndex] = React42.useState(-1);
+    const [internalOpen, setInternalOpen] = React57.useState(false);
+    const [activeIndex, setActiveIndex] = React57.useState(-1);
     const current = open ?? internalOpen;
-    const wrapperRef = React42.useRef(null);
-    const setRefs = React42.useCallback(
+    const wrapperRef = React57.useRef(null);
+    const setRefs = React57.useCallback(
       (node) => {
         wrapperRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -2744,7 +3901,7 @@ var Menu = React42.forwardRef(
       },
       [ref]
     );
-    const setOpen = React42.useCallback(
+    const setOpen = React57.useCallback(
       (next) => {
         if (open === void 0) setInternalOpen(next);
         onOpenChange?.(next);
@@ -2752,7 +3909,7 @@ var Menu = React42.forwardRef(
       },
       [open, onOpenChange]
     );
-    return /* @__PURE__ */ jsx41("div", { ref: setRefs, className: cn("relative inline-block", className), children: /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx56("div", { ref: setRefs, className: cn("relative inline-block", className), children: /* @__PURE__ */ jsx56(
       MenuContext.Provider,
       {
         value: { open: current, setOpen, activeIndex, setActiveIndex, wrapperRef },
@@ -2762,10 +3919,10 @@ var Menu = React42.forwardRef(
   }
 );
 Menu.displayName = "Menu";
-var MenuTrigger = React42.forwardRef(
+var MenuTrigger = React57.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { open, setOpen } = React42.useContext(MenuContext);
-    return /* @__PURE__ */ jsx41(
+    const { open, setOpen } = React57.useContext(MenuContext);
+    return /* @__PURE__ */ jsx56(
       "button",
       {
         ref,
@@ -2785,13 +3942,13 @@ var MenuTrigger = React42.forwardRef(
   }
 );
 MenuTrigger.displayName = "MenuTrigger";
-var MenuContent = React42.forwardRef(
+var MenuContent = React57.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { open, setOpen, activeIndex, setActiveIndex, wrapperRef } = React42.useContext(MenuContext);
-    const contentRef = React42.useRef(null);
-    const [pos, setPos] = React42.useState(null);
-    const itemsRef = React42.useRef([]);
-    React42.useLayoutEffect(() => {
+    const { open, setOpen, activeIndex, setActiveIndex, wrapperRef } = React57.useContext(MenuContext);
+    const contentRef = React57.useRef(null);
+    const [pos, setPos] = React57.useState(null);
+    const itemsRef = React57.useRef([]);
+    React57.useLayoutEffect(() => {
       if (!open) {
         setPos(null);
         return;
@@ -2811,7 +3968,7 @@ var MenuContent = React42.forwardRef(
         window.removeEventListener("resize", measure);
       };
     }, [open, setOpen, wrapperRef]);
-    React42.useEffect(() => {
+    React57.useEffect(() => {
       if (!open) return;
       function onPointerDown(event) {
         if (!contentRef.current?.contains(event.target)) setOpen(false);
@@ -2819,7 +3976,7 @@ var MenuContent = React42.forwardRef(
       document.addEventListener("pointerdown", onPointerDown);
       return () => document.removeEventListener("pointerdown", onPointerDown);
     }, [open, setOpen]);
-    React42.useEffect(() => {
+    React57.useEffect(() => {
       if (open && pos && contentRef.current) {
         itemsRef.current = Array.from(
           contentRef.current.querySelectorAll('[role="menuitem"]:not([disabled])')
@@ -2854,8 +4011,8 @@ var MenuContent = React42.forwardRef(
       }
     };
     if (!open || !pos || typeof document === "undefined") return null;
-    return createPortal6(
-      /* @__PURE__ */ jsx41(
+    return createPortal7(
+      /* @__PURE__ */ jsx56(
         "div",
         {
           ref: (node) => {
@@ -2879,14 +4036,16 @@ var MenuContent = React42.forwardRef(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = React42.forwardRef(
-  ({ className, destructive, onClick, ...props }, ref) => {
-    const { setOpen } = React42.useContext(MenuContext);
-    return /* @__PURE__ */ jsx41(
-      "button",
+var MenuItem = React57.forwardRef(
+  ({ className, destructive, asChild = false, onClick, ...props }, ref) => {
+    const { setOpen } = React57.useContext(MenuContext);
+    const Comp = asChild ? Slot4 : "button";
+    const typeProp = asChild ? {} : { type: "button" };
+    return /* @__PURE__ */ jsx56(
+      Comp,
       {
         ref,
-        type: "button",
+        ...typeProp,
         role: "menuitem",
         onClick: (event) => {
           onClick?.(event);
@@ -2904,12 +4063,12 @@ var MenuItem = React42.forwardRef(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = React42.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41("div", { ref, role: "separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props })
+var MenuSeparator = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx56("div", { ref, role: "separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props })
 );
 MenuSeparator.displayName = "MenuSeparator";
-var MenuLabel = React42.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var MenuLabel = React57.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx56(
     "div",
     {
       ref,
@@ -2921,9 +4080,9 @@ var MenuLabel = React42.forwardRef(
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/alert/Alert.tsx
-import * as React43 from "react";
+import * as React58 from "react";
 import { cva as cva6 } from "class-variance-authority";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var alertVariants = cva6(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
@@ -2941,8 +4100,8 @@ var alertVariants = cva6(
     }
   }
 );
-var Alert = React43.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx42(
+var Alert = React58.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -2953,8 +4112,8 @@ var Alert = React43.forwardRef(
   )
 );
 Alert.displayName = "Alert";
-var AlertTitle = React43.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var AlertTitle = React58.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
     "h5",
     {
       ref,
@@ -2964,8 +4123,8 @@ var AlertTitle = React43.forwardRef(
   )
 );
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React43.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var AlertDescription = React58.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -2977,10 +4136,10 @@ var AlertDescription = React43.forwardRef(
 AlertDescription.displayName = "AlertDescription";
 
 // src/components/popover/Popover.tsx
-import * as React44 from "react";
-import { createPortal as createPortal7 } from "react-dom";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var PopoverContext = React44.createContext({
+import * as React59 from "react";
+import { createPortal as createPortal8 } from "react-dom";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var PopoverContext = React59.createContext({
   open: false,
   setOpen: () => {
   },
@@ -2988,14 +4147,14 @@ var PopoverContext = React44.createContext({
   contentId: "",
   wrapperRef: { current: null }
 });
-var Popover = React44.forwardRef(
+var Popover = React59.forwardRef(
   ({ open, onOpenChange, className, children }, ref) => {
-    const [internalOpen, setInternalOpen] = React44.useState(false);
+    const [internalOpen, setInternalOpen] = React59.useState(false);
     const current = open ?? internalOpen;
-    const triggerId = React44.useId();
-    const contentId = React44.useId();
-    const wrapperRef = React44.useRef(null);
-    const setRefs = React44.useCallback(
+    const triggerId = React59.useId();
+    const contentId = React59.useId();
+    const wrapperRef = React59.useRef(null);
+    const setRefs = React59.useCallback(
       (node) => {
         wrapperRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -3003,14 +4162,14 @@ var Popover = React44.forwardRef(
       },
       [ref]
     );
-    const setOpen = React44.useCallback(
+    const setOpen = React59.useCallback(
       (next) => {
         if (open === void 0) setInternalOpen(next);
         onOpenChange?.(next);
       },
       [open, onOpenChange]
     );
-    return /* @__PURE__ */ jsx43("div", { ref: setRefs, className: cn("relative inline-block", className), children: /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx58("div", { ref: setRefs, className: cn("relative inline-block", className), children: /* @__PURE__ */ jsx58(
       PopoverContext.Provider,
       {
         value: { open: current, setOpen, triggerId, contentId, wrapperRef },
@@ -3020,10 +4179,10 @@ var Popover = React44.forwardRef(
   }
 );
 Popover.displayName = "Popover";
-var PopoverTrigger = React44.forwardRef(
+var PopoverTrigger = React59.forwardRef(
   ({ className, children, onClick, ...props }, ref) => {
-    const { open, setOpen, triggerId, contentId } = React44.useContext(PopoverContext);
-    return /* @__PURE__ */ jsx43(
+    const { open, setOpen, triggerId, contentId } = React59.useContext(PopoverContext);
+    return /* @__PURE__ */ jsx58(
       "button",
       {
         ref,
@@ -3048,12 +4207,12 @@ var PopoverTrigger = React44.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React44.forwardRef(
+var PopoverContent = React59.forwardRef(
   ({ className, children, onKeyDown, ...props }, ref) => {
-    const { open, setOpen, triggerId, contentId, wrapperRef } = React44.useContext(PopoverContext);
-    const contentRef = React44.useRef(null);
-    const [pos, setPos] = React44.useState(null);
-    React44.useLayoutEffect(() => {
+    const { open, setOpen, triggerId, contentId, wrapperRef } = React59.useContext(PopoverContext);
+    const contentRef = React59.useRef(null);
+    const [pos, setPos] = React59.useState(null);
+    React59.useLayoutEffect(() => {
       if (!open) {
         setPos(null);
         return;
@@ -3073,7 +4232,7 @@ var PopoverContent = React44.forwardRef(
         window.removeEventListener("resize", measure);
       };
     }, [open, setOpen, wrapperRef]);
-    React44.useEffect(() => {
+    React59.useEffect(() => {
       if (!open) return;
       function onPointerDown(event) {
         if (!contentRef.current?.contains(event.target)) setOpen(false);
@@ -3081,14 +4240,14 @@ var PopoverContent = React44.forwardRef(
       document.addEventListener("pointerdown", onPointerDown);
       return () => document.removeEventListener("pointerdown", onPointerDown);
     }, [open, setOpen]);
-    React44.useEffect(() => {
+    React59.useEffect(() => {
       if (open && pos && contentRef.current) {
         contentRef.current.focus();
       }
     }, [open, pos]);
     if (!open || !pos || typeof document === "undefined") return null;
-    return createPortal7(
-      /* @__PURE__ */ jsx43(
+    return createPortal8(
+      /* @__PURE__ */ jsx58(
         "div",
         {
           ref: (node) => {
@@ -3123,21 +4282,21 @@ var PopoverContent = React44.forwardRef(
 PopoverContent.displayName = "PopoverContent";
 
 // src/components/breadcrumb/Breadcrumb.tsx
-import * as React45 from "react";
-import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
-var Breadcrumb = React45.forwardRef(
-  ({ items, separator = "/", onItemClick, className, ...props }, ref) => /* @__PURE__ */ jsx44(
+import * as React60 from "react";
+import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+var Breadcrumb = React60.forwardRef(
+  ({ items, separator = "/", onItemClick, className, ...props }, ref) => /* @__PURE__ */ jsx59(
     "nav",
     {
       ref,
       "aria-label": "Breadcrumb",
       className: cn("flex items-center space-x-1.5 text-sm text-muted-foreground", className),
       ...props,
-      children: /* @__PURE__ */ jsx44("ol", { className: "flex flex-wrap items-center space-x-1.5", children: items.map((item, index) => {
+      children: /* @__PURE__ */ jsx59("ol", { className: "flex flex-wrap items-center space-x-1.5", children: items.map((item, index) => {
         const isLast = index === items.length - 1;
-        return /* @__PURE__ */ jsxs18("li", { className: "flex items-center space-x-1.5", children: [
-          index > 0 && /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "text-muted-foreground/50", children: separator }),
-          item.href && !isLast ? /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsxs33("li", { className: "flex items-center space-x-1.5", children: [
+          index > 0 && /* @__PURE__ */ jsx59("span", { "aria-hidden": "true", className: "text-muted-foreground/50", children: separator }),
+          item.href && !isLast ? /* @__PURE__ */ jsx59(
             "a",
             {
               href: item.href,
@@ -3148,7 +4307,7 @@ var Breadcrumb = React45.forwardRef(
               } : void 0,
               children: item.label
             }
-          ) : /* @__PURE__ */ jsx44(
+          ) : /* @__PURE__ */ jsx59(
             "span",
             {
               "aria-current": isLast ? "page" : void 0,
@@ -3170,6 +4329,8 @@ export {
   Alert,
   AlertDescription,
   AlertTitle,
+  AppShell,
+  AuthLayout,
   Autocomplete,
   Avatar,
   AvatarFallback,
@@ -3189,10 +4350,19 @@ export {
   CheckboxGroup,
   CheckboxGroupItem,
   DataTable,
+  DatePicker,
   Dialog,
+  DialogBody,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
   Divider,
   Drawer,
+  EmptyState,
   Fieldset,
+  FileUpload,
+  FilterBar,
   Flex,
   FlexItem,
   Form,
@@ -3213,7 +4383,10 @@ export {
   MenuLabel,
   MenuSeparator,
   MenuTrigger,
+  MetricCard,
+  PageHeader,
   Pagination,
+  PasswordInput,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -3225,13 +4398,17 @@ export {
   RadioGroupItem,
   Search,
   Select,
+  SelectMenu,
   Separator,
+  Sidebar,
   Skeleton,
   Spinner,
+  Stepper,
   Switch,
   Table,
   TableBody,
   TableCaption,
+  TableCard,
   TableCell,
   TableFooter,
   TableHead,
@@ -3243,7 +4420,10 @@ export {
   TabsTrigger,
   Text,
   Textarea,
+  TimePicker,
+  Timeline,
   ToastProvider,
+  Toaster,
   Tooltip,
   alertVariants,
   badgeVariants,
@@ -3253,6 +4433,7 @@ export {
   resolveGap,
   separatorVariants,
   spinnerVariants,
+  toast,
   useCombobox,
   usePresence,
   useToast