@bmsuisse/ui 0.4.5

package/dist/index.js

@@ -0,0 +1,1336 @@
+// src/primitives/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/primitives/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        secondary: "bg-muted text-muted-foreground hover:bg-muted/80",
+        link: "text-primary underline-offset-4 hover:underline",
+        // "Swiss design" red CTA, ported from akeneo_editor's old .btn-primary-swiss
+        // naive-ui override. Relies on --color-swiss-primary/-hover and
+        // --color-swiss-primary-foreground tokens defined by the consuming app's own
+        // Tailwind theme (this package doesn't define them) — same pattern as AlertBox's
+        // warning/info/success colors, which assume tokens the shared theme doesn't have.
+        "swiss-primary": "bg-swiss-primary text-swiss-primary-foreground font-semibold shadow-sm hover:bg-swiss-primary-hover hover:-translate-y-px active:translate-y-px",
+        "swiss-secondary": "border border-input bg-background font-semibold text-foreground shadow-sm hover:bg-accent hover:-translate-y-px active:translate-y-px"
+      },
+      size: {
+        default: "h-9 px-3",
+        xs: "h-7 px-2 text-xs",
+        sm: "h-8 px-2 text-xs",
+        lg: "h-10 px-4",
+        icon: "h-9 w-9",
+        "icon-xs": "h-7 w-7",
+        "icon-sm": "h-8 w-8",
+        "icon-lg": "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/input.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Input = forwardRef2(({ className, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Input.displayName = "Input";
+
+// src/primitives/label.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Label = forwardRef3(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+    "label",
+    {
+      ref,
+      className: cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+
+// src/primitives/textarea.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Textarea = forwardRef4(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+
+// src/primitives/card.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Card = ({ className, ...props }) => /* @__PURE__ */ jsx5("div", { className: cn("rounded-lg border bg-background text-foreground shadow-sm", className), ...props });
+var CardHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx5("div", { className: cn("flex flex-col gap-1.5 p-6", className), ...props });
+var CardTitle = ({ className, ...props }) => /* @__PURE__ */ jsx5("div", { className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props });
+var CardDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx5("div", { className: cn("text-sm text-muted-foreground", className), ...props });
+var CardContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx5("div", { className: cn("p-6 pt-0", className), ...props });
+var CardFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx5("div", { className: cn("flex items-center gap-2 p-6 pt-0", className), ...props });
+
+// src/primitives/badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-muted text-muted-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        outline: "border-input text-foreground",
+        // Amber warning tone — same fixed-palette choice as AlertBox/StatusBadge's
+        // warning tone, since the shared theme has no warning token yet.
+        warning: "border-transparent bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Badge = ({ className, variant, ...props }) => /* @__PURE__ */ jsx6("div", { className: cn(badgeVariants({ variant }), className), ...props });
+
+// src/primitives/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogOverlay = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = forwardRef5(({ className, children, showCloseButton = true, closeButtonTestId, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx7(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-1/2 top-1/2 z-50 max-h-[85vh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background p-6 shadow-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton ? /* @__PURE__ */ jsxs(
+          DialogPrimitive.Close,
+          {
+            "data-testid": closeButtonTestId,
+            className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100",
+            children: [
+              /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var DialogTitle = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7("div", { className: cn("flex justify-end gap-2", className), ...props });
+
+// src/primitives/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = forwardRef6(({ className, align = "start", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx8(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+
+// src/primitives/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = forwardRef7(
+  ({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        size === "sm" ? "h-8" : "h-9",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx9(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx9(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      ]
+    }
+  )
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = forwardRef7(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx9(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
+  SelectPrimitive.Content,
+  {
+    ref,
+    position,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+      position === "popper" && "translate-y-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx9(SelectPrimitive.Viewport, { className: "p-1", children })
+  }
+) }));
+SelectContent.displayName = "SelectContent";
+var SelectItem = forwardRef7(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx9("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx9(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx9(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+
+// src/primitives/skeleton.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Skeleton = ({ className, ...props }) => /* @__PURE__ */ jsx10("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+
+// src/primitives/checkbox.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check as Check2 } from "lucide-react";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Checkbox = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-input shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx11(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx11(Check2, { className: "h-3.5 w-3.5" }) })
+  }
+));
+Checkbox.displayName = "Checkbox";
+
+// src/primitives/switch.tsx
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Switch = forwardRef9(
+  ({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx12(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        size === "sm" ? "h-3.5 w-6" : "h-5 w-9",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx12(
+        SwitchPrimitive.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+            size === "sm" ? "h-3 w-3 data-[state=checked]:translate-x-2.5" : "h-4 w-4 data-[state=checked]:translate-x-4"
+          )
+        }
+      )
+    }
+  )
+);
+Switch.displayName = "Switch";
+
+// src/primitives/tabs.tsx
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium text-foreground/60 transition-all hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(TabsPrimitive.Content, { ref, className: cn("flex-1 outline-none", className), ...props }));
+TabsContent.displayName = "TabsContent";
+
+// src/primitives/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Separator = forwardRef11(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx14(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = "Separator";
+
+// src/primitives/scroll-area.tsx
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
+var ScrollBar = forwardRef12(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx15(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx15(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = "ScrollBar";
+var ScrollArea = forwardRef12(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+  /* @__PURE__ */ jsx15(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+  /* @__PURE__ */ jsx15(ScrollBar, {}),
+  /* @__PURE__ */ jsx15(ScrollAreaPrimitive.Corner, {})
+] }));
+ScrollArea.displayName = "ScrollArea";
+
+// src/primitives/table.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Table = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16("div", { className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsx16("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+    "tfoot",
+    {
+      ref,
+      className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  )
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+    "tr",
+    {
+      ref,
+      className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+    "td",
+    {
+      ref,
+      className: cn("whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0", className),
+      ...props
+    }
+  )
+);
+TableCell.displayName = "TableCell";
+var TableCaption = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx16("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+
+// src/primitives/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check as Check3, ChevronRight, Circle } from "lucide-react";
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuContent = forwardRef14(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = forwardRef14(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      danger && "text-destructive focus:bg-destructive/10 focus:text-destructive",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuCheckboxItem = forwardRef14(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    checked,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(Check3, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+var DropdownMenuRadioItem = forwardRef14(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuSeparator = forwardRef14(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = forwardRef14(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx17("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props });
+var DropdownMenuSubTrigger = forwardRef14(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx17(ChevronRight, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+var DropdownMenuSubContent = forwardRef14(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+// src/primitives/sheet.tsx
+import { cva as cva3 } from "class-variance-authority";
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import { X as X2 } from "lucide-react";
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var Sheet = DialogPrimitive2.Root;
+var SheetTrigger = DialogPrimitive2.Trigger;
+var SheetClose = DialogPrimitive2.Close;
+var SheetPortal = DialogPrimitive2.Portal;
+var SheetOverlay = forwardRef15(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  DialogPrimitive2.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  }
+));
+SheetOverlay.displayName = "SheetOverlay";
+var sheetVariants = cva3(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition-transform duration-300 ease-in-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = forwardRef15(
+  ({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(SheetPortal, { children: [
+    /* @__PURE__ */ jsx18(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs5(DialogPrimitive2.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
+      children,
+      /* @__PURE__ */ jsxs5(DialogPrimitive2.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
+        /* @__PURE__ */ jsx18(X2, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
+      ] })
+    ] })
+  ] })
+);
+SheetContent.displayName = "SheetContent";
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx18("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx18("div", { className: cn("flex justify-end gap-2", className), ...props });
+var SheetTitle = forwardRef15(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(DialogPrimitive2.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = forwardRef15(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  DialogPrimitive2.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = "SheetDescription";
+
+// src/primitives/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = forwardRef16(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx19(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx19(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = "TooltipContent";
+
+// src/patterns/modal/Modal.tsx
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+var Modal = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  className
+}) => /* @__PURE__ */ jsx20(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs6(DialogContent, { className, children: [
+  /* @__PURE__ */ jsxs6(DialogHeader, { children: [
+    /* @__PURE__ */ jsx20(DialogTitle, { children: title }),
+    description ? /* @__PURE__ */ jsx20(DialogDescription, { children: description }) : null
+  ] }),
+  children,
+  footer ? /* @__PURE__ */ jsx20(DialogFooter, { children: footer }) : null
+] }) });
+
+// src/patterns/modal/ConfirmDialog.tsx
+import { useState } from "react";
+import { Fragment, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+var ConfirmDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  variant = "default",
+  confirmTestId,
+  cancelTestId
+}) => {
+  const [pending, setPending] = useState(false);
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+  const handleConfirm = async () => {
+    setPending(true);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ jsx21(
+    Modal,
+    {
+      open,
+      onOpenChange,
+      title,
+      description,
+      footer: /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx21(Button, { variant: "outline", onClick: handleCancel, disabled: pending, "data-testid": cancelTestId, children: cancelLabel }),
+        /* @__PURE__ */ jsx21(
+          Button,
+          {
+            variant: variant === "destructive" ? "destructive" : "default",
+            onClick: handleConfirm,
+            disabled: pending,
+            "data-testid": confirmTestId,
+            children: pending ? `${confirmLabel}\u2026` : confirmLabel
+          }
+        )
+      ] }),
+      children: null
+    }
+  );
+};
+
+// src/patterns/modal/FormModal.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+var FormModal = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  onSubmit,
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  submitDisabled = false,
+  className,
+  submitTestId,
+  cancelTestId
+}) => {
+  const [pending, setPending] = useState2(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setPending(true);
+    try {
+      await onSubmit();
+    } finally {
+      setPending(false);
+    }
+  };
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx22(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx22(DialogContent, { className, children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs8(DialogHeader, { children: [
+      /* @__PURE__ */ jsx22(DialogTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx22(DialogDescription, { children: description }) : null
+    ] }),
+    children,
+    /* @__PURE__ */ jsxs8(DialogFooter, { children: [
+      /* @__PURE__ */ jsx22(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: handleCancel,
+          disabled: pending,
+          "data-testid": cancelTestId,
+          children: cancelLabel
+        }
+      ),
+      /* @__PURE__ */ jsx22(Button, { type: "submit", disabled: pending || submitDisabled, "data-testid": submitTestId, children: pending ? `${submitLabel}\u2026` : submitLabel })
+    ] })
+  ] }) }) });
+};
+
+// src/patterns/form-field/FormField.tsx
+import { cloneElement, isValidElement, useId } from "react";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+function FormField({
+  label,
+  htmlFor,
+  error,
+  description,
+  required,
+  children,
+  className
+}) {
+  const generatedId = useId();
+  const resolvedId = htmlFor ?? generatedId;
+  const isSingleElement = isValidElement(children);
+  const existingChildId = isSingleElement ? children.props.id : void 0;
+  const effectiveId = existingChildId ?? resolvedId;
+  const message = error ?? description;
+  const messageId = message ? `${effectiveId}-message` : void 0;
+  const child = isSingleElement ? cloneElement(
+    children,
+    {
+      id: effectiveId,
+      ...error ? { "aria-invalid": true } : {},
+      ...messageId ? { "aria-describedby": messageId } : {}
+    }
+  ) : children;
+  return /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs9(Label, { htmlFor: effectiveId, children: [
+      label,
+      required ? /* @__PURE__ */ jsxs9("span", { className: "text-destructive", "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] }) : null
+    ] }),
+    child,
+    error ? /* @__PURE__ */ jsx23("p", { id: messageId, className: "text-sm text-destructive", children: error }) : description ? /* @__PURE__ */ jsx23("p", { id: messageId, className: "text-sm text-muted-foreground", children: description }) : null
+  ] });
+}
+
+// src/patterns/combobox/Combobox.tsx
+import { Check as Check4, ChevronsUpDown, X as X3 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState as useState3 } from "react";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+function groupMembers(options, group) {
+  return options.filter((o) => o.group === group && !o.disabled).map((o) => o.value);
+}
+function groupCheckState(options, selectedValues, group) {
+  const members = groupMembers(options, group);
+  const selectedCount = members.filter((v) => selectedValues.includes(v)).length;
+  if (selectedCount === 0) return "unchecked";
+  return selectedCount === members.length ? "checked" : "indeterminate";
+}
+function resolveGroupTriggerLabel(options, selectedValues, groupLabel) {
+  const selectedSet = new Set(selectedValues);
+  const groupsPresent = Array.from(
+    new Set(options.filter((o) => selectedSet.has(o.value) && o.group).map((o) => o.group))
+  );
+  if (groupsPresent.length === 0) return null;
+  const coveredValues = /* @__PURE__ */ new Set();
+  const fullyCoveredGroups = [];
+  for (const group of groupsPresent) {
+    const members = groupMembers(options, group);
+    if (members.length > 0 && members.every((v) => selectedSet.has(v))) {
+      fullyCoveredGroups.push(group);
+      for (const v of members) coveredValues.add(v);
+    }
+  }
+  const hasLeftover = selectedValues.some((v) => !coveredValues.has(v));
+  if (fullyCoveredGroups.length === 0 || hasLeftover) return null;
+  return fullyCoveredGroups.map(groupLabel).join(", ");
+}
+function buildOptionRows(visibleOptions) {
+  let lastGroup;
+  return visibleOptions.map((option, index) => {
+    const headerGroup = option.group && option.group !== lastGroup ? option.group : void 0;
+    lastGroup = option.group ?? lastGroup;
+    return { option, index, headerGroup };
+  });
+}
+function Combobox(props) {
+  const {
+    options,
+    placeholder = "Select\u2026",
+    searchPlaceholder = "Search\u2026",
+    emptyMessage = "No matches.",
+    disabled,
+    loading = false,
+    loadingMessage = "Loading\u2026",
+    clearable = true,
+    className,
+    id,
+    groupLabels,
+    container,
+    onSearchChange,
+    selectedLabel
+  } = props;
+  const testId = props["data-testid"];
+  const [open, setOpen] = useState3(false);
+  const [search, setSearch] = useState3("");
+  const [activeIndex, setActiveIndex] = useState3(0);
+  const inputRef = useRef(null);
+  const selectedValues = useMemo(
+    () => props.multiple ? props.value : props.value ? [props.value] : [],
+    [props.multiple, props.value]
+  );
+  const selectedOptions = useMemo(
+    () => options.filter((option) => selectedValues.includes(option.value)),
+    [options, selectedValues]
+  );
+  const visibleOptions = useMemo(() => {
+    if (onSearchChange) return options;
+    const term = search.trim().toLowerCase();
+    if (!term) return options;
+    return options.filter((option) => option.label.toLowerCase().includes(term));
+  }, [options, search, onSearchChange]);
+  useEffect(() => {
+    if (!open) return;
+    setSearch("");
+    onSearchChange?.("");
+    const firstSelected = selectedValues[0];
+    const selectedIdx = firstSelected ? options.findIndex((option) => option.value === firstSelected) : -1;
+    setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
+    inputRef.current?.focus();
+  }, [open]);
+  useEffect(() => {
+    setActiveIndex((i) => Math.min(i, Math.max(visibleOptions.length - 1, 0)));
+  }, [visibleOptions.length]);
+  function selectOption(option) {
+    if (option.disabled) return;
+    if (props.multiple) {
+      const next = props.value.includes(option.value) ? props.value.filter((v) => v !== option.value) : [...props.value, option.value];
+      props.onChange(next);
+      return;
+    }
+    props.onChange(option.value);
+    setOpen(false);
+  }
+  function handleKeyDown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, visibleOptions.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const option = visibleOptions[activeIndex];
+      if (option) selectOption(option);
+    }
+  }
+  const groupLabel = (group) => groupLabels?.[group] ?? group;
+  function toggleGroup(group) {
+    if (!props.multiple) return;
+    const members = groupMembers(options, group);
+    const next = groupCheckState(options, selectedValues, group) === "checked" ? props.value.filter((v) => !members.includes(v)) : Array.from(/* @__PURE__ */ new Set([...props.value, ...members]));
+    props.onChange(next);
+  }
+  const triggerLabel = loading ? loadingMessage : selectedOptions.length === 0 ? selectedValues.length > 0 ? selectedLabel ?? placeholder : placeholder : selectedOptions.length === 1 ? selectedOptions[0]?.label ?? placeholder : (props.multiple ? resolveGroupTriggerLabel(options, selectedValues, groupLabel) : null) ?? `${selectedOptions.length} selected`;
+  const optionRows = useMemo(() => buildOptionRows(visibleOptions), [visibleOptions]);
+  return /* @__PURE__ */ jsxs10(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx24(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+      Button,
+      {
+        id,
+        "data-testid": testId,
+        type: "button",
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        disabled: disabled || loading,
+        className: cn(
+          "w-full justify-between font-normal",
+          (selectedOptions.length === 0 || loading) && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx24("span", { className: "truncate", children: triggerLabel }),
+          /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-1", children: [
+            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx24(
+              "span",
+              {
+                role: "button",
+                "aria-label": "Clear selection",
+                tabIndex: -1,
+                className: "rounded-sm p-0.5 opacity-60 hover:bg-accent hover:opacity-100",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  if (props.multiple) {
+                    props.onChange([]);
+                  } else {
+                    props.onChange(null);
+                  }
+                },
+                children: /* @__PURE__ */ jsx24(X3, { className: "h-3.5 w-3.5" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx24(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx24(
+      PopoverContent,
+      {
+        align: "start",
+        container,
+        className: "w-[var(--radix-popover-trigger-width)] min-w-[10rem] p-2",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx24(
+            Input,
+            {
+              ref: inputRef,
+              value: search,
+              onChange: (event) => {
+                setSearch(event.target.value);
+                onSearchChange?.(event.target.value);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: searchPlaceholder,
+              "aria-label": searchPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx24("div", { role: "listbox", className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: optionRows.length === 0 ? /* @__PURE__ */ jsx24("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : optionRows.map(({ option, index, headerGroup }) => {
+            const isSelected = selectedValues.includes(option.value);
+            const isActive = index === activeIndex;
+            const headerState = headerGroup ? groupCheckState(options, selectedValues, headerGroup) : void 0;
+            return /* @__PURE__ */ jsxs10("div", { children: [
+              headerGroup ? /* @__PURE__ */ jsxs10(
+                "div",
+                {
+                  "data-group-header": true,
+                  className: "mt-1 flex items-center gap-2 rounded-sm bg-muted/50 px-2 py-1.5 text-sm font-semibold text-foreground first:mt-0",
+                  children: [
+                    props.multiple ? /* @__PURE__ */ jsx24(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: headerState === "checked",
+                        ref: (el) => {
+                          if (el) el.indeterminate = headerState === "indeterminate";
+                        },
+                        onChange: () => toggleGroup(headerGroup),
+                        onClick: (event) => event.stopPropagation(),
+                        className: "h-3.5 w-3.5 shrink-0 accent-primary",
+                        "aria-label": `Select all of ${groupLabel(headerGroup)}`
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx24("span", { className: "truncate", children: groupLabel(headerGroup) })
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs10(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  disabled: option.disabled,
+                  "data-testid": testId ? `${testId}-option` : void 0,
+                  "data-option-value": option.value,
+                  onMouseEnter: () => setActiveIndex(index),
+                  onClick: () => selectOption(option),
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none disabled:pointer-events-none disabled:opacity-50",
+                    isActive && "bg-accent text-accent-foreground"
+                  ),
+                  children: [
+                    props.multiple ? /* @__PURE__ */ jsx24(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: isSelected,
+                        readOnly: true,
+                        tabIndex: -1,
+                        className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
+                      }
+                    ) : /* @__PURE__ */ jsx24(Check4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
+                    /* @__PURE__ */ jsx24("span", { className: "truncate", children: option.label })
+                  ]
+                }
+              )
+            ] }, option.value);
+          }) })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/patterns/alert-box/AlertBox.tsx
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+var variantStyles = {
+  error: "border-destructive bg-destructive/10 text-destructive",
+  warning: "border-amber-500 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  info: "border-sky-500 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  success: "border-emerald-500 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+};
+var defaultIcons = {
+  error: /* @__PURE__ */ jsx25(AlertCircle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx25(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx25(Info, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx25(CheckCircle2, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })
+};
+var AlertBox = ({ variant, title, children, className, icon }) => {
+  const resolvedIcon = icon === void 0 ? defaultIcons[variant] : icon;
+  return /* @__PURE__ */ jsx25("div", { className: cn("rounded-md border p-3 text-sm", variantStyles[variant], className), children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-row items-start gap-2", children: [
+    resolvedIcon != null && /* @__PURE__ */ jsx25("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
+      title && /* @__PURE__ */ jsx25("p", { className: "font-bold", children: title }),
+      /* @__PURE__ */ jsx25("div", { children })
+    ] })
+  ] }) });
+};
+
+// src/patterns/status-badge/StatusBadge.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var TONE_CLASSES = {
+  success: "border-transparent bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300",
+  warning: "border-transparent bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300",
+  info: "border-transparent bg-sky-500/15 text-sky-700 dark:bg-sky-500/20 dark:text-sky-300",
+  error: "border-transparent bg-destructive/15 text-destructive",
+  neutral: "border-transparent bg-muted text-muted-foreground"
+};
+var DEFAULT_TONE_MAP = {
+  active: "success",
+  approved: "success",
+  completed: "success",
+  paid: "success",
+  done: "success",
+  pending: "warning",
+  draft: "warning",
+  in_review: "warning",
+  inreview: "warning",
+  rejected: "error",
+  failed: "error",
+  cancelled: "error",
+  canceled: "error",
+  overdue: "error",
+  inactive: "neutral",
+  archived: "neutral",
+  new: "info"
+};
+function deriveLabel(status) {
+  return status.replace(/[_-]+/g, " ").trim().split(/\s+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function resolveTone(status, tone, toneMap) {
+  if (tone) {
+    return tone;
+  }
+  const key = status.toLowerCase();
+  if (toneMap) {
+    for (const [candidate, candidateTone] of Object.entries(toneMap)) {
+      if (candidate.toLowerCase() === key) {
+        return candidateTone;
+      }
+    }
+  }
+  return DEFAULT_TONE_MAP[key] ?? "neutral";
+}
+var StatusBadge = ({ status, label, tone, toneMap, className, ...props }) => {
+  const resolvedTone = resolveTone(status, tone, toneMap);
+  const displayLabel = label ?? deriveLabel(status);
+  return /* @__PURE__ */ jsx26(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
+};
+
+// src/patterns/loading-spinner/LoadingSpinner.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+var loadingSpinnerIconVariants = cva4("animate-spin text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "h-3.5 w-3.5",
+      default: "h-4 w-4",
+      lg: "h-6 w-6"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var LoadingSpinner = ({
+  size,
+  label,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs12("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx27(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
+  label ? /* @__PURE__ */ jsx27("span", { children: label }) : null
+] });
+var LoadingOverlay = ({
+  size = "lg",
+  label,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx27(
+  "div",
+  {
+    className: cn("flex h-full min-h-32 w-full items-center justify-center", className),
+    ...props,
+    children: /* @__PURE__ */ jsx27(LoadingSpinner, { size, label })
+  }
+);
+export {
+  AlertBox,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Combobox,
+  ConfirmDialog,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  FormField,
+  FormModal,
+  Input,
+  Label,
+  LoadingOverlay,
+  LoadingSpinner,
+  Modal,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollArea,
+  ScrollBar,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  Skeleton,
+  StatusBadge,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  loadingSpinnerIconVariants,
+  sheetVariants
+};
+//# sourceMappingURL=index.js.map