@bmsuisse/ui 0.7.0 → 0.11.0

package/dist/index.js

@@ -625,7 +625,7 @@ DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 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 { forwardRef as forwardRef15, useEffect, useRef, useState } from "react";
 import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 var Sheet = DialogPrimitive2.Root;
 var SheetTrigger = DialogPrimitive2.Trigger;
@@ -641,7 +641,7 @@ var SheetOverlay = forwardRef15(({ className, ...props }, ref) => /* @__PURE__ *
 ));
 SheetOverlay.displayName = "SheetOverlay";
 var sheetVariants = cva3(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition-transform duration-300 ease-in-out",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition-[transform,box-shadow] duration-300 ease-in-out",
   {
     variants: {
       side: {
@@ -656,17 +656,84 @@ var sheetVariants = cva3(
     }
   }
 );
+var enterFromTransform = {
+  top: "translateY(-100%)",
+  bottom: "translateY(100%)",
+  left: "translateX(-100%)",
+  right: "translateX(100%)"
+};
 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" })
-      ] })
-    ] })
-  ] })
+  ({ side = "right", className, children, resizable = false, style: styleProp, ...props }, ref) => {
+    const [entered, setEntered] = useState(false);
+    useEffect(() => {
+      const id = requestAnimationFrame(() => setEntered(true));
+      return () => cancelAnimationFrame(id);
+    }, []);
+    const [dragHeight, setDragHeight] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStart = useRef(null);
+    const canResize = resizable && side === "bottom";
+    const onHandlePointerDown = (e) => {
+      const popup = e.currentTarget.closest('[data-slot="sheet-content"]');
+      if (!(popup instanceof HTMLElement)) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      dragStart.current = { y: e.clientY, height: popup.getBoundingClientRect().height };
+      setIsDragging(true);
+    };
+    const onHandlePointerMove = (e) => {
+      if (!dragStart.current) return;
+      const delta = dragStart.current.y - e.clientY;
+      const next = dragStart.current.height + delta;
+      const min = window.innerHeight * 0.3;
+      const max = window.innerHeight * 0.95;
+      setDragHeight(Math.min(max, Math.max(min, next)));
+    };
+    const onHandlePointerUp = () => {
+      dragStart.current = null;
+      setIsDragging(false);
+    };
+    const style = entered ? { ...styleProp, ...canResize && dragHeight != null ? { height: dragHeight, maxHeight: dragHeight } : null } : { ...styleProp, transform: enterFromTransform[side ?? "right"] };
+    return /* @__PURE__ */ jsxs5(SheetPortal, { children: [
+      /* @__PURE__ */ jsx18(SheetOverlay, {}),
+      /* @__PURE__ */ jsxs5(
+        DialogPrimitive2.Content,
+        {
+          ref,
+          "data-slot": "sheet-content",
+          style,
+          className: cn(sheetVariants({ side }), isDragging && "shadow-2xl", className),
+          ...props,
+          children: [
+            canResize && /* @__PURE__ */ jsx18(
+              "div",
+              {
+                "data-testid": "sheet-drag-handle",
+                className: "group -mb-2 flex shrink-0 cursor-grab touch-none justify-center py-2 active:cursor-grabbing",
+                onPointerDown: onHandlePointerDown,
+                onPointerMove: onHandlePointerMove,
+                onPointerUp: onHandlePointerUp,
+                onPointerCancel: onHandlePointerUp,
+                children: /* @__PURE__ */ jsx18(
+                  "div",
+                  {
+                    className: cn(
+                      "h-1 w-10 rounded-full bg-muted-foreground/30 transition-all duration-150 group-hover:w-14 group-hover:bg-muted-foreground/50",
+                      isDragging && "w-14 bg-primary/60"
+                    )
+                  }
+                )
+              }
+            ),
+            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 = ({
@@ -730,7 +797,7 @@ var Modal = ({
 ] }) });
 
 // src/patterns/modal/ConfirmDialog.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { Fragment, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 var ConfirmDialog = ({
   open,
@@ -744,7 +811,7 @@ var ConfirmDialog = ({
   confirmTestId,
   cancelTestId
 }) => {
-  const [pending, setPending] = useState(false);
+  const [pending, setPending] = useState2(false);
   const handleCancel = () => {
     onOpenChange(false);
   };
@@ -785,7 +852,7 @@ var ConfirmDialog = ({
 };
 
 // src/patterns/modal/FormModal.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormModal = ({
   open,
@@ -801,7 +868,7 @@ var FormModal = ({
   submitTestId,
   cancelTestId
 }) => {
-  const [pending, setPending] = useState2(false);
+  const [pending, setPending] = useState3(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     setPending(true);
@@ -837,9 +904,236 @@ var FormModal = ({
   ] }) }) });
 };
 
+// src/patterns/modal/ResponsivePanel.tsx
+import { useRef as useRef2, useState as useState5 } from "react";
+
+// src/lib/useMediaQuery.ts
+import { useEffect as useEffect2, useState as useState4 } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState4(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  useEffect2(() => {
+    const mq = window.matchMedia(query);
+    setMatches(mq.matches);
+    const handler = (e) => setMatches(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+
+// src/patterns/modal/ResponsivePanel.tsx
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+var desktopSizeClasses = {
+  sm: "max-w-md",
+  md: "max-w-xl",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl"
+};
+var drawerSizeClasses = {
+  sm: "max-h-[50vh]",
+  md: "max-h-[70vh]",
+  lg: "max-h-[90vh]",
+  xl: "max-h-[96vh]"
+};
+var MIN_PANEL_WIDTH = 320;
+var MIN_PANEL_HEIGHT = 240;
+var VIEWPORT_MARGIN = 16;
+var cornerCursor = {
+  "top-left": "cursor-nwse-resize",
+  "bottom-right": "cursor-nwse-resize",
+  "top-right": "cursor-nesw-resize",
+  "bottom-left": "cursor-nesw-resize"
+};
+var cornerPosition = {
+  "top-left": "left-0 top-0",
+  "top-right": "right-0 top-0",
+  "bottom-left": "left-0 bottom-0",
+  "bottom-right": "right-0 bottom-0"
+};
+var cornerGripPosition = {
+  "top-left": "left-1 top-1 border-l-2 border-t-2",
+  "top-right": "right-1 top-1 border-r-2 border-t-2",
+  "bottom-left": "left-1 bottom-1 border-l-2 border-b-2",
+  "bottom-right": "right-1 bottom-1 border-r-2 border-b-2"
+};
+function useDesktopPanelGeometry() {
+  const [style, setStyle] = useState5(void 0);
+  const [isDragging, setIsDragging] = useState5(false);
+  const drag = useRef2(null);
+  const lastRect = useRef2(null);
+  const beginDrag = (mode, corner) => (e) => {
+    const content = e.currentTarget.closest('[data-slot="dialog-content"]');
+    if (!(content instanceof HTMLElement)) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const domRect = content.getBoundingClientRect();
+    const rect = lastRect.current ?? {
+      left: domRect.left,
+      top: domRect.top,
+      width: domRect.width,
+      height: domRect.height
+    };
+    drag.current = { mode, corner, x: e.clientX, y: e.clientY, rect };
+    setIsDragging(true);
+  };
+  const onPointerMove = (e) => {
+    const state = drag.current;
+    if (!state) return;
+    const deltaX = e.clientX - state.x;
+    const deltaY = e.clientY - state.y;
+    if (state.mode === "move") {
+      const maxLeft = window.innerWidth - VIEWPORT_MARGIN - state.rect.width;
+      const maxTop = window.innerHeight - VIEWPORT_MARGIN - state.rect.height;
+      const next2 = {
+        left: Math.min(maxLeft, Math.max(VIEWPORT_MARGIN, state.rect.left + deltaX)),
+        top: Math.min(maxTop, Math.max(VIEWPORT_MARGIN, state.rect.top + deltaY)),
+        width: state.rect.width,
+        height: state.rect.height
+      };
+      lastRect.current = next2;
+      setStyle({ position: "fixed", transform: "none", translate: "none", maxWidth: "none", maxHeight: "none", ...next2 });
+      return;
+    }
+    const corner = state.corner ?? "top-left";
+    const growsLeft = corner === "top-left" || corner === "bottom-left";
+    const growsUp = corner === "top-left" || corner === "top-right";
+    const right = state.rect.left + state.rect.width;
+    const bottom = state.rect.top + state.rect.height;
+    const maxWidth = window.innerWidth - VIEWPORT_MARGIN * 2;
+    const maxHeight = window.innerHeight - VIEWPORT_MARGIN * 2;
+    let width = Math.max(
+      MIN_PANEL_WIDTH,
+      Math.min(maxWidth, growsLeft ? state.rect.width - deltaX : state.rect.width + deltaX)
+    );
+    let height = Math.max(
+      MIN_PANEL_HEIGHT,
+      Math.min(maxHeight, growsUp ? state.rect.height - deltaY : state.rect.height + deltaY)
+    );
+    const left = growsLeft ? right - Math.min(width, right - VIEWPORT_MARGIN) : state.rect.left;
+    width = growsLeft ? right - left : Math.min(width, window.innerWidth - VIEWPORT_MARGIN - state.rect.left);
+    const top = growsUp ? bottom - Math.min(height, bottom - VIEWPORT_MARGIN) : state.rect.top;
+    height = growsUp ? bottom - top : Math.min(height, window.innerHeight - VIEWPORT_MARGIN - state.rect.top);
+    const next = { left, top, width, height };
+    lastRect.current = next;
+    setStyle({ position: "fixed", transform: "none", translate: "none", maxWidth: "none", maxHeight: "none", ...next });
+  };
+  const onPointerUp = () => {
+    drag.current = null;
+    setIsDragging(false);
+  };
+  return {
+    style,
+    isDragging,
+    startMove: beginDrag("move"),
+    startResize: (corner) => beginDrag("resize", corner),
+    onPointerMove,
+    onPointerUp
+  };
+}
+var ResponsivePanel = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  className,
+  breakpoint = "(min-width: 1024px)",
+  size = "lg",
+  resizable = false,
+  draggable = false,
+  closeOnOutsideClick = true
+}) => {
+  const isDesktop = useMediaQuery(breakpoint);
+  const geometry = useDesktopPanelGeometry();
+  const onInteractOutside = closeOnOutsideClick ? void 0 : (e) => e.preventDefault();
+  if (isDesktop) {
+    const corners = ["top-left", "top-right", "bottom-left", "bottom-right"];
+    return /* @__PURE__ */ jsx23(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(
+      DialogContent,
+      {
+        "data-slot": "dialog-content",
+        onInteractOutside,
+        style: resizable || draggable ? geometry.style : void 0,
+        className: cn(
+          "max-h-[85vh] overflow-y-auto transition-shadow duration-150 ease-out",
+          geometry.isDragging && "shadow-2xl ring-2 ring-primary/30",
+          desktopSizeClasses[size],
+          className
+        ),
+        children: [
+          resizable && corners.map((corner) => /* @__PURE__ */ jsx23(
+            "div",
+            {
+              "data-testid": `panel-resize-handle-${corner}`,
+              className: cn(
+                "group absolute h-4 w-4 touch-none",
+                cornerPosition[corner],
+                cornerCursor[corner]
+              ),
+              onPointerDown: geometry.startResize(corner),
+              onPointerMove: geometry.onPointerMove,
+              onPointerUp: geometry.onPointerUp,
+              onPointerCancel: geometry.onPointerUp,
+              children: /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  className: cn(
+                    "absolute h-2 w-2 scale-100 border-muted-foreground/40 transition-transform duration-150 group-hover:scale-125 group-hover:border-primary/60",
+                    cornerGripPosition[corner]
+                  )
+                }
+              )
+            },
+            corner
+          )),
+          /* @__PURE__ */ jsxs9(
+            DialogHeader,
+            {
+              className: cn(draggable && "touch-none cursor-move select-none"),
+              onPointerDown: draggable ? geometry.startMove : void 0,
+              onPointerMove: draggable ? geometry.onPointerMove : void 0,
+              onPointerUp: draggable ? geometry.onPointerUp : void 0,
+              onPointerCancel: draggable ? geometry.onPointerUp : void 0,
+              children: [
+                /* @__PURE__ */ jsx23(DialogTitle, { children: title }),
+                description ? /* @__PURE__ */ jsx23(DialogDescription, { children: description }) : null
+              ]
+            }
+          ),
+          children,
+          footer ? /* @__PURE__ */ jsx23(DialogFooter, { children: footer }) : null
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx23(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(
+    SheetContent,
+    {
+      side: "bottom",
+      resizable,
+      onInteractOutside,
+      className: cn(
+        "flex flex-col overflow-y-auto rounded-t-2xl",
+        drawerSizeClasses[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9(SheetHeader, { children: [
+          /* @__PURE__ */ jsx23(SheetTitle, { children: title }),
+          description ? /* @__PURE__ */ jsx23(SheetDescription, { children: description }) : null
+        ] }),
+        children,
+        footer ? /* @__PURE__ */ jsx23(SheetFooter, { children: footer }) : null
+      ]
+    }
+  ) });
+};
+
 // src/patterns/form-field/FormField.tsx
 import { cloneElement, isValidElement, useId } from "react";
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
 function FormField({
   label,
   htmlFor,
@@ -864,23 +1158,24 @@ function FormField({
       ...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: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs10(Label, { htmlFor: effectiveId, children: [
       label,
-      required ? /* @__PURE__ */ jsxs9("span", { className: "text-destructive", "aria-hidden": "true", children: [
+      required ? /* @__PURE__ */ jsxs10("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
+    error ? /* @__PURE__ */ jsx24("p", { id: messageId, className: "text-sm text-destructive", children: error }) : description ? /* @__PURE__ */ jsx24("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";
+import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState6 } from "react";
+
+// src/lib/optionGrouping.ts
 function groupMembers(options, group) {
   return options.filter((o) => o.group === group && !o.disabled).map((o) => o.value);
 }
@@ -890,6 +1185,24 @@ function groupCheckState(options, selectedValues, group) {
   if (selectedCount === 0) return "unchecked";
   return selectedCount === members.length ? "checked" : "indeterminate";
 }
+function buildRenderChunks(visibleOptions) {
+  const chunks = [];
+  visibleOptions.forEach((option, index) => {
+    const row = { option, index };
+    const last = chunks[chunks.length - 1];
+    if (option.group && last?.kind === "group" && last.group === option.group) {
+      last.rows.push(row);
+    } else if (option.group) {
+      chunks.push({ kind: "group", group: option.group, rows: [row] });
+    } else {
+      chunks.push({ kind: "single", row });
+    }
+  });
+  return chunks;
+}
+
+// src/patterns/combobox/Combobox.tsx
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 function resolveGroupTriggerLabel(options, selectedValues, groupLabel) {
   const selectedSet = new Set(selectedValues);
   const groupsPresent = Array.from(
@@ -909,21 +1222,6 @@ function resolveGroupTriggerLabel(options, selectedValues, groupLabel) {
   if (fullyCoveredGroups.length === 0 || hasLeftover) return null;
   return fullyCoveredGroups.map(groupLabel).join(", ");
 }
-function buildRenderChunks(visibleOptions) {
-  const chunks = [];
-  visibleOptions.forEach((option, index) => {
-    const row = { option, index };
-    const last = chunks[chunks.length - 1];
-    if (option.group && last?.kind === "group" && last.group === option.group) {
-      last.rows.push(row);
-    } else if (option.group) {
-      chunks.push({ kind: "group", group: option.group, rows: [row] });
-    } else {
-      chunks.push({ kind: "single", row });
-    }
-  });
-  return chunks;
-}
 function Combobox(props) {
   const {
     options,
@@ -942,10 +1240,10 @@ function Combobox(props) {
     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 [open, setOpen] = useState6(false);
+  const [search, setSearch] = useState6("");
+  const [activeIndex, setActiveIndex] = useState6(0);
+  const inputRef = useRef3(null);
   const selectedValues = useMemo(
     () => props.multiple ? props.value : props.value ? [props.value] : [],
     [props.multiple, props.value]
@@ -960,7 +1258,7 @@ function Combobox(props) {
     if (!term) return options;
     return options.filter((option) => option.label.toLowerCase().includes(term));
   }, [options, search, onSearchChange]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!open) return;
     setSearch("");
     onSearchChange?.("");
@@ -969,7 +1267,7 @@ function Combobox(props) {
     setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
     inputRef.current?.focus();
   }, [open]);
-  useEffect(() => {
+  useEffect3(() => {
     setActiveIndex((i) => Math.min(i, Math.max(visibleOptions.length - 1, 0)));
   }, [visibleOptions.length]);
   function selectOption(option) {
@@ -1007,7 +1305,7 @@ function Combobox(props) {
   function renderOption({ option, index }) {
     const isSelected = selectedValues.includes(option.value);
     const isActive = index === activeIndex;
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "button",
       {
         type: "button",
@@ -1023,7 +1321,7 @@ function Combobox(props) {
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          props.multiple ? /* @__PURE__ */ jsx24(
+          props.multiple ? /* @__PURE__ */ jsx25(
             "input",
             {
               type: "checkbox",
@@ -1032,15 +1330,15 @@ function Combobox(props) {
               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 })
+          ) : /* @__PURE__ */ jsx25(Check4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
+          /* @__PURE__ */ jsx25("span", { className: "truncate", children: option.label })
         ]
       },
       option.value
     );
   }
-  return /* @__PURE__ */ jsxs10(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx24(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
       Button,
       {
         id,
@@ -1056,9 +1354,9 @@ function Combobox(props) {
           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(
+          /* @__PURE__ */ jsx25("span", { className: "truncate", children: triggerLabel }),
+          /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-1", children: [
+            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx25(
               "span",
               {
                 role: "button",
@@ -1073,23 +1371,23 @@ function Combobox(props) {
                     props.onChange(null);
                   }
                 },
-                children: /* @__PURE__ */ jsx24(X3, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx25(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__ */ jsx25(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       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(
+        children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx25(
             Input,
             {
               ref: inputRef,
@@ -1103,7 +1401,7 @@ function Combobox(props) {
               "aria-label": searchPlaceholder
             }
           ),
-          /* @__PURE__ */ jsx24("div", { role: "listbox", className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: renderChunks.length === 0 ? /* @__PURE__ */ jsx24("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : renderChunks.map((chunk) => {
+          /* @__PURE__ */ jsx25("div", { role: "listbox", className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: renderChunks.length === 0 ? /* @__PURE__ */ jsx25("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : renderChunks.map((chunk) => {
             if (chunk.kind === "single") return renderOption(chunk.row);
             const headerState = groupCheckState(options, selectedValues, chunk.group);
             return (
@@ -1114,14 +1412,14 @@ function Combobox(props) {
               // lives on this wrapper's `pt-1`, not on the header itself -- a margin on
               // the sticky element would travel with it once stuck, leaving a gap at the
               // scrollport's top that the row behind it shows through.
-              /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
-                /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
+                /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     "data-group-header": true,
                     className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
                     children: [
-                      props.multiple ? /* @__PURE__ */ jsx24(
+                      props.multiple ? /* @__PURE__ */ jsx25(
                         "input",
                         {
                           type: "checkbox",
@@ -1135,7 +1433,7 @@ function Combobox(props) {
                           "aria-label": `Select all of ${groupLabel(chunk.group)}`
                         }
                       ) : null,
-                      /* @__PURE__ */ jsx24("span", { className: "truncate", children: groupLabel(chunk.group) })
+                      /* @__PURE__ */ jsx25("span", { className: "truncate", children: groupLabel(chunk.group) })
                     ]
                   }
                 ),
@@ -1149,9 +1447,249 @@ function Combobox(props) {
   ] });
 }
 
+// src/patterns/tag-combobox/TagCombobox.tsx
+import { X as X4 } from "lucide-react";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState7 } from "react";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+function TagCombobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Select\u2026",
+  emptyMessage = "No matches.",
+  disabled,
+  loading = false,
+  loadingMessage = "Loading\u2026",
+  className,
+  id,
+  onSearchChange,
+  container,
+  groupLabels,
+  ...rest
+}) {
+  const testId = rest["data-testid"];
+  const [open, setOpen] = useState7(false);
+  const [search, setSearch] = useState7("");
+  const [activeIndex, setActiveIndex] = useState7(0);
+  const inputRef = useRef4(null);
+  const fieldRef = useRef4(null);
+  const selectedOptions = useMemo2(
+    () => value.map((v) => options.find((o) => o.value === v) ?? { value: v, label: v }),
+    [options, value]
+  );
+  const visibleOptions = useMemo2(() => {
+    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]);
+  useEffect4(() => {
+    setActiveIndex((i) => Math.min(Math.max(i, 0), Math.max(visibleOptions.length - 1, 0)));
+  }, [visibleOptions.length]);
+  const renderChunks = useMemo2(() => buildRenderChunks(visibleOptions), [visibleOptions]);
+  useEffect4(() => {
+    if (!open) return;
+    setSearch("");
+    onSearchChange?.("");
+    const firstSelected = value[0];
+    const selectedIdx = firstSelected ? options.findIndex((o) => o.value === firstSelected) : -1;
+    setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
+  }, [open]);
+  function updateSearch(next) {
+    setSearch(next);
+    onSearchChange?.(next);
+    if (!open) setOpen(true);
+  }
+  function toggleOption(option) {
+    if (option.disabled) return;
+    const next = value.includes(option.value) ? value.filter((v) => v !== option.value) : [...value, option.value];
+    onChange(next);
+    updateSearch("");
+    inputRef.current?.focus();
+  }
+  function removeValue(v) {
+    if (options.find((o) => o.value === v)?.disabled) return;
+    onChange(value.filter((existing) => existing !== v));
+  }
+  const groupLabel = (group) => groupLabels?.[group] ?? group;
+  function toggleGroup(group) {
+    const members = groupMembers(options, group);
+    const next = groupCheckState(options, value, group) === "checked" ? value.filter((v) => !members.includes(v)) : Array.from(/* @__PURE__ */ new Set([...value, ...members]));
+    onChange(next);
+    inputRef.current?.focus();
+  }
+  function handleKeyDown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((i) => Math.min(i + 1, Math.max(visibleOptions.length - 1, 0)));
+    } 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) toggleOption(option);
+    } else if (event.key === "Escape") {
+      setOpen(false);
+    } else if (event.key === "Backspace" && search === "") {
+      const last = value[value.length - 1];
+      if (last !== void 0) removeValue(last);
+    }
+  }
+  function renderOption({ option, index }) {
+    const isSelected = value.includes(option.value);
+    const isActive = index === activeIndex;
+    return /* @__PURE__ */ jsxs12(
+      "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: () => toggleOption(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: [
+          /* @__PURE__ */ jsx26(
+            "input",
+            {
+              type: "checkbox",
+              checked: isSelected,
+              readOnly: true,
+              tabIndex: -1,
+              className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
+            }
+          ),
+          /* @__PURE__ */ jsx26("span", { className: "truncate", children: option.label })
+        ]
+      },
+      option.value
+    );
+  }
+  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx26(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref: fieldRef,
+        "data-testid": testId,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-disabled": disabled,
+        className: cn(
+          "flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1.5 text-sm",
+          "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        onClick: () => {
+          if (!disabled) inputRef.current?.focus();
+        },
+        children: [
+          selectedOptions.map((option) => /* @__PURE__ */ jsxs12(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-full bg-muted py-0.5 pr-1 pl-2.5 text-xs font-medium text-muted-foreground",
+              children: [
+                /* @__PURE__ */ jsx26("span", { className: "max-w-48 truncate", children: option.label }),
+                !disabled && /* @__PURE__ */ jsx26(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${option.label}`,
+                    className: "rounded-full p-0.5 hover:bg-accent hover:text-accent-foreground",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      removeValue(option.value);
+                    },
+                    children: /* @__PURE__ */ jsx26(X4, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            option.value
+          )),
+          /* @__PURE__ */ jsx26(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              value: search,
+              disabled,
+              placeholder: selectedOptions.length === 0 ? placeholder : void 0,
+              "aria-label": placeholder,
+              className: "min-w-24 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+              onFocus: () => setOpen(true),
+              onChange: (event) => updateSearch(event.target.value),
+              onKeyDown: handleKeyDown
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx26(
+      PopoverContent,
+      {
+        align: "start",
+        container,
+        className: "w-[var(--radix-popover-trigger-width)] min-w-[10rem] p-2",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        onInteractOutside: (event) => {
+          if (fieldRef.current?.contains(event.target)) event.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx26("div", { role: "listbox", className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: loading ? /* @__PURE__ */ jsx26("p", { className: "py-2 text-center text-sm text-muted-foreground", children: loadingMessage }) : renderChunks.length === 0 ? /* @__PURE__ */ jsx26("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : renderChunks.map((chunk) => {
+          if (chunk.kind === "single") return renderOption(chunk.row);
+          const headerState = groupCheckState(options, value, chunk.group);
+          return (
+            // The header and every one of its group's rows share this wrapper -- its
+            // bounds are the sticky header's containing block, so `sticky top-0` keeps
+            // the header pinned for the group's whole scroll extent instead of just
+            // past its first row. Spacing above a group lives on this wrapper's
+            // `pt-1`/`first:pt-0`, not on the header itself -- see `Combobox`'s own
+            // identical structure for why both of these matter.
+            /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
+              /* @__PURE__ */ jsxs12(
+                "div",
+                {
+                  "data-group-header": true,
+                  className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx26(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: headerState === "checked",
+                        ref: (el) => {
+                          if (el) el.indeterminate = headerState === "indeterminate";
+                        },
+                        onChange: () => toggleGroup(chunk.group),
+                        onClick: (event) => event.stopPropagation(),
+                        className: "h-3.5 w-3.5 shrink-0 accent-primary",
+                        "aria-label": `Select all of ${groupLabel(chunk.group)}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsx26("span", { className: "truncate", children: groupLabel(chunk.group) })
+                  ]
+                }
+              ),
+              chunk.rows.map(renderOption)
+            ] }, `group-${chunk.group}`)
+          );
+        }) })
+      }
+    )
+  ] });
+}
+
 // 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";
+import { jsx as jsx27, jsxs as jsxs13 } 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",
@@ -1159,24 +1697,24 @@ var variantStyles = {
   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" })
+  error: /* @__PURE__ */ jsx27(AlertCircle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx27(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx27(Info, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx27(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 })
+  return /* @__PURE__ */ jsx27("div", { className: cn("rounded-md border p-3 text-sm", variantStyles[variant], className), children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-start gap-2", children: [
+    resolvedIcon != null && /* @__PURE__ */ jsx27("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1", children: [
+      title && /* @__PURE__ */ jsx27("p", { className: "font-bold", children: title }),
+      /* @__PURE__ */ jsx27("div", { children })
     ] })
   ] }) });
 };
 
 // src/patterns/status-badge/StatusBadge.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } 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",
@@ -1223,11 +1761,11 @@ function resolveTone(status, tone, toneMap) {
 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 });
+  return /* @__PURE__ */ jsx28(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
 };
 
 // src/patterns/button-group/ButtonGroup.tsx
-import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 function ButtonGroup({
   options,
   value,
@@ -1237,10 +1775,10 @@ function ButtonGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27("div", { role: "group", "aria-label": props["aria-label"], className: cn("inline-flex", className), "data-testid": props["data-testid"], children: options.map((option, index) => {
+  return /* @__PURE__ */ jsx29("div", { role: "group", "aria-label": props["aria-label"], className: cn("inline-flex", className), "data-testid": props["data-testid"], children: options.map((option, index) => {
     const selected = option.value === value;
     const Icon2 = option.icon;
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs14(
       Button,
       {
         type: "button",
@@ -1258,7 +1796,7 @@ function ButtonGroup({
           index > 0 && "-ml-px"
         ),
         children: [
-          Icon2 && /* @__PURE__ */ jsx27(Icon2, { className: "h-4 w-4" }),
+          Icon2 && /* @__PURE__ */ jsx29(Icon2, { className: "h-4 w-4" }),
           option.label
         ]
       },
@@ -1270,7 +1808,7 @@ function ButtonGroup({
 // src/patterns/loading-spinner/LoadingSpinner.tsx
 import { cva as cva4 } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var loadingSpinnerIconVariants = cva4("animate-spin text-muted-foreground", {
   variants: {
     size: {
@@ -1288,27 +1826,27 @@ var LoadingSpinner = ({
   label,
   className,
   ...props
-}) => /* @__PURE__ */ jsxs13("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
-  /* @__PURE__ */ jsx28(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
-  label ? /* @__PURE__ */ jsx28("span", { children: label }) : null
+}) => /* @__PURE__ */ jsxs15("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx30(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
+  label ? /* @__PURE__ */ jsx30("span", { children: label }) : null
 ] });
 var LoadingOverlay = ({
   size = "lg",
   label,
   className,
   ...props
-}) => /* @__PURE__ */ jsx28(
+}) => /* @__PURE__ */ jsx30(
   "div",
   {
     className: cn("flex h-full min-h-32 w-full items-center justify-center", className),
     ...props,
-    children: /* @__PURE__ */ jsx28(LoadingSpinner, { size, label })
+    children: /* @__PURE__ */ jsx30(LoadingSpinner, { size, label })
   }
 );
 
 // src/patterns/search-bar/SearchBar.tsx
-import { Search, X as X4 } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Search, X as X5 } from "lucide-react";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 function SearchBar({
   value,
   onChange,
@@ -1320,9 +1858,9 @@ function SearchBar({
   ...props
 }) {
   const showClear = onClear !== false && value.length > 0;
-  return /* @__PURE__ */ jsxs14("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx29("span", { className: "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsx29(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx29(Search, { className: "h-4 w-4", "aria-hidden": "true" }) }),
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs16("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx31("span", { className: "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsx31(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx31(Search, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx31(
       "input",
       {
         ref: inputRef,
@@ -1341,14 +1879,14 @@ function SearchBar({
         ...props
       }
     ),
-    showClear && /* @__PURE__ */ jsx29(
+    showClear && /* @__PURE__ */ jsx31(
       "button",
       {
         type: "button",
         onClick: () => onClear ? onClear() : onChange(""),
         "aria-label": clearLabel,
         className: "absolute top-1/2 right-2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground",
-        children: /* @__PURE__ */ jsx29(X4, { className: "h-4 w-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx31(X5, { className: "h-4 w-4", "aria-hidden": "true" })
       }
     )
   ] });
@@ -1363,7 +1901,7 @@ function useSidebarCollapsed() {
 }
 
 // src/patterns/sidebar/NavItem.tsx
-import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function NavItem({
   as,
   icon: Icon2,
@@ -1375,7 +1913,7 @@ function NavItem({
 }) {
   const collapsed = useSidebarCollapsed();
   const Comp = as ?? "a";
-  const row = /* @__PURE__ */ jsxs15(
+  const row = /* @__PURE__ */ jsxs17(
     Comp,
     {
       className: cn(
@@ -1387,7 +1925,7 @@ function NavItem({
       ),
       ...rest,
       children: [
-        Icon2 && /* @__PURE__ */ jsx30(
+        Icon2 && /* @__PURE__ */ jsx32(
           Icon2,
           {
             className: cn("h-[18px] w-[18px] shrink-0", active ? "text-nav-primary" : "text-muted-foreground"),
@@ -1395,7 +1933,7 @@ function NavItem({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(
           "span",
           {
             className: cn(
@@ -1410,9 +1948,9 @@ function NavItem({
     }
   );
   if (!collapsed) return row;
-  return /* @__PURE__ */ jsxs15(Tooltip, { children: [
-    /* @__PURE__ */ jsx30(TooltipTrigger, { asChild: true, children: row }),
-    /* @__PURE__ */ jsxs15(TooltipContent, { side: "right", className: "flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsxs17(Tooltip, { children: [
+    /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children: row }),
+    /* @__PURE__ */ jsxs17(TooltipContent, { side: "right", className: "flex items-center gap-1.5", children: [
       label,
       badge
     ] })
@@ -1421,8 +1959,8 @@ function NavItem({
 
 // src/patterns/sidebar/NavGroup.tsx
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { useState as useState4 } from "react";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 function NavGroup({
   label,
   defaultCollapsed = false,
@@ -1431,15 +1969,15 @@ function NavGroup({
   children,
   className
 }) {
-  const [internalCollapsed, setInternalCollapsed] = useState4(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = useState8(defaultCollapsed);
   const groupCollapsed = collapsed ?? internalCollapsed;
   const railCollapsed = useSidebarCollapsed();
   const setGroupCollapsed = (next) => {
     onCollapsedChange?.(next);
     if (collapsed === void 0) setInternalCollapsed(next);
   };
-  return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col gap-0.5", className), children: [
-    label && (railCollapsed ? /* @__PURE__ */ jsx31("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col gap-0.5", className), children: [
+    label && (railCollapsed ? /* @__PURE__ */ jsx33("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs18(
       "button",
       {
         type: "button",
@@ -1447,8 +1985,8 @@ function NavGroup({
         "aria-expanded": !groupCollapsed,
         className: "group flex w-full items-center justify-between px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground/80 hover:text-foreground",
         children: [
-          /* @__PURE__ */ jsx31("span", { children: label }),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx33("span", { children: label }),
+          /* @__PURE__ */ jsx33(
             ChevronDown2,
             {
               className: cn(
@@ -1461,7 +1999,7 @@ function NavGroup({
         ]
       }
     )),
-    !groupCollapsed && /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-0.5", children })
+    !groupCollapsed && /* @__PURE__ */ jsx33("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
 
@@ -1469,11 +2007,11 @@ function NavGroup({
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import {
   useCallback,
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useState as useState5
+  useEffect as useEffect5,
+  useRef as useRef5,
+  useState as useState9
 } from "react";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function resolve(value, collapsed) {
   return typeof value === "function" ? value(collapsed) : value;
 }
@@ -1492,9 +2030,9 @@ function Sidebar({
   children,
   className
 }) {
-  const [internalWidth, setInternalWidth] = useState5(defaultWidth);
+  const [internalWidth, setInternalWidth] = useState9(defaultWidth);
   const currentWidth = width ?? internalWidth;
-  const [isDragging, setIsDragging] = useState5(false);
+  const [isDragging, setIsDragging] = useState9(false);
   const setWidth = useCallback(
     (next) => {
       const clamped = Math.min(maxWidth, Math.max(minWidth, next));
@@ -1503,7 +2041,7 @@ function Sidebar({
     },
     [maxWidth, minWidth, onWidthChange, width]
   );
-  const dragStartRef = useRef2(null);
+  const dragStartRef = useRef5(null);
   const handlePointerDown = (event) => {
     event.currentTarget.setPointerCapture(event.pointerId);
     dragStartRef.current = { x: event.clientX, width: currentWidth };
@@ -1520,7 +2058,7 @@ function Sidebar({
     dragStartRef.current = null;
     setIsDragging(false);
   };
-  return /* @__PURE__ */ jsx32(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx32(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx34(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx34(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs19(
     "aside",
     {
       style: { width: collapsed ? railWidth : currentWidth },
@@ -1530,22 +2068,22 @@ function Sidebar({
         className
       ),
       children: [
-        (header || onCollapsedChange) && /* @__PURE__ */ jsxs17("div", { className: "flex h-16 items-center gap-2 border-b border-border px-3", children: [
-          header && /* @__PURE__ */ jsx32("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
-          onCollapsedChange && /* @__PURE__ */ jsx32(
+        (header || onCollapsedChange) && /* @__PURE__ */ jsxs19("div", { className: "flex h-16 items-center gap-2 border-b border-border px-3", children: [
+          header && /* @__PURE__ */ jsx34("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
+          onCollapsedChange && /* @__PURE__ */ jsx34(
             "button",
             {
               type: "button",
               onClick: () => onCollapsedChange(!collapsed),
               "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
               className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
-              children: collapsed ? /* @__PURE__ */ jsx32(PanelLeftOpen, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ jsx32(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true })
+              children: collapsed ? /* @__PURE__ */ jsx34(PanelLeftOpen, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ jsx34(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx32(SidebarNav, { children }),
-        footer && /* @__PURE__ */ jsx32("div", { className: "border-t border-border/50 px-2 py-2", children: resolve(footer, collapsed) }),
-        resizable && !collapsed && /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(SidebarNav, { children }),
+        footer && /* @__PURE__ */ jsx34("div", { className: "border-t border-border/50 px-2 py-2", children: resolve(footer, collapsed) }),
+        resizable && !collapsed && /* @__PURE__ */ jsx34(
           "div",
           {
             onPointerDown: handlePointerDown,
@@ -1560,9 +2098,9 @@ function Sidebar({
   ) }) });
 }
 function SidebarNav({ children, className, ...rest }) {
-  const ref = useRef2(null);
-  const [showFade, setShowFade] = useState5(false);
-  useEffect2(() => {
+  const ref = useRef5(null);
+  const [showFade, setShowFade] = useState9(false);
+  useEffect5(() => {
     const el = ref.current;
     if (!el) return;
     const update = () => setShowFade(el.scrollHeight - el.scrollTop - el.clientHeight > 1);
@@ -1575,8 +2113,8 @@ function SidebarNav({ children, className, ...rest }) {
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsxs17("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs19("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx34(
       "div",
       {
         ref,
@@ -1585,7 +2123,7 @@ function SidebarNav({ children, className, ...rest }) {
         children
       }
     ),
-    showFade && /* @__PURE__ */ jsx32(
+    showFade && /* @__PURE__ */ jsx34(
       "div",
       {
         className: "pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-sidebar to-transparent",
@@ -1643,6 +2181,7 @@ export {
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  ResponsivePanel,
   ScrollArea,
   ScrollBar,
   SearchBar,
@@ -1679,6 +2218,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  TagCombobox,
   Textarea,
   Tooltip,
   TooltipContent,
@@ -1689,6 +2229,7 @@ export {
   cn,
   loadingSpinnerIconVariants,
   sheetVariants,
+  useMediaQuery,
   useSidebarCollapsed
 };
 //# sourceMappingURL=index.js.map