@elabs-ai/components-ui 4.2.0 → 5.0.0

package/dist/chunk-PP7POY7C.js

@@ -0,0 +1,110 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/drawer/drawer.tsx
+import {
+  forwardRef
+} from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Drawer({
+  shouldScaleBackground = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Root, { shouldScaleBackground, ...props });
+}
+var DrawerTrigger = DrawerPrimitive.Trigger;
+var DrawerPortal = DrawerPrimitive.Portal;
+var DrawerClose = DrawerPrimitive.Close;
+var DrawerOverlay = forwardRef(function DrawerOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Overlay,
+    {
+      ref,
+      "data-slot": "drawer-overlay",
+      className: cn("fixed inset-0 z-50 bg-overlay", className),
+      ...props
+    }
+  );
+});
+var DrawerContent = forwardRef(function DrawerContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DrawerPrimitive.Content,
+      {
+        ref,
+        "data-slot": "drawer-content",
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overscroll-contain rounded-t-xl border bg-card text-card-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "drawer-handle", className: "mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" }),
+          children
+        ]
+      }
+    )
+  ] });
+});
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("grid gap-1.5 p-4 text-center sm:text-start", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+var DrawerTitle = forwardRef(function DrawerTitle2({ className, ...props }, ref) {
+  return (
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.
+    /* @__PURE__ */ jsx(
+      DrawerPrimitive.Title,
+      {
+        ref,
+        "data-slot": "drawer-title",
+        className: cn("text-title leading-none", className),
+        ...props
+      }
+    )
+  );
+});
+var DrawerDescription = forwardRef(function DrawerDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Description,
+    {
+      ref,
+      "data-slot": "drawer-description",
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription
+};
+//# sourceMappingURL=chunk-PP7POY7C.js.map

package/dist/chunk-PP7POY7C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/drawer/drawer.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\nimport { cn } from \"../../lib/cn\";\n\nexport function Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;\n}\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nconst DrawerOverlay = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(function DrawerOverlay({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Overlay\n      ref={ref}\n      data-slot=\"drawer-overlay\"\n      className={cn(\"fixed inset-0 z-50 bg-overlay\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(function DrawerContent({ className, children, ...props }, ref) {\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={ref}\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overscroll-contain rounded-t-xl border bg-card text-card-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <div data-slot=\"drawer-handle\" className=\"mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n});\n\nexport function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"grid gap-1.5 p-4 text-center sm:text-start\", className)}\n      {...props}\n    />\n  );\n}\nexport function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(function DrawerTitle({ className, ...props }, ref) {\n  return (\n    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.\n    <DrawerPrimitive.Title\n      ref={ref}\n      data-slot=\"drawer-title\"\n      className={cn(\"text-title leading-none\", className)}\n      {...props}\n    />\n  );\n});\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(function DrawerDescription({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      data-slot=\"drawer-description\"\n      className={cn(\"text-body text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,OAKK;AACP,SAAS,UAAU,uBAAuB;AAOjC,cA2BH,YA3BG;AAJF,SAAS,OAAO;AAAA,EACrB,wBAAwB;AAAA,EACxB,GAAG;AACL,GAAgD;AAC9C,SAAO,oBAAC,gBAAgB,MAAhB,EAAqB,uBAA+C,GAAG,OAAO;AACxF;AACO,IAAM,gBAAgB,gBAAgB;AACtC,IAAM,eAAe,gBAAgB;AACrC,IAAM,cAAc,gBAAgB;AAE3C,IAAM,gBAAgB,WAGpB,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACrD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,gBAAgB,WAG3B,SAASC,eAAc,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/D,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,SAAI,aAAU,iBAAgB,WAAU,iDAAgD;AAAA,UACxF;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;AAEM,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAmC;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8CAA8C,SAAS;AAAA,MACpE,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAmC;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,IAAM,cAAc,WAGzB,SAASC,aAAY,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD;AAAA;AAAA,IAEE;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,QACjD,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ,CAAC;AACM,IAAM,oBAAoB,WAG/B,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["DrawerOverlay","DrawerContent","DrawerTitle","DrawerDescription"]}

package/dist/chunk-PSBNQZB4.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-PSBNQZB4.js.map

package/dist/chunk-PSBNQZB4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-PYPNGKRD.js

@@ -0,0 +1,355 @@
+"use client";
+import {
+  mergeRefs
+} from "./chunk-L37QZALU.js";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from "./chunk-LMO3QK7Q.js";
+import {
+  useIsMobile
+} from "./chunk-YCFOFNQF.js";
+import {
+  useCollapsiblePanel
+} from "./chunk-YIVL6HWS.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/side-dock/side-dock.tsx
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_WIDTH = 400;
+var DEFAULT_MIN_WIDTH = 320;
+var DEFAULT_MAX_WIDTH = 640;
+var DEFAULT_MIN_CONTENT_WIDTH = 480;
+var DEFAULT_OVERLAY_BREAKPOINT = 1100;
+var KEY_STEP = 16;
+var KEY_STEP_SHIFT_MULTIPLIER = 4;
+var FALLBACK_VIEWPORT_WIDTH = 1024;
+function clampWidth(requested, viewportWidth, minWidth, maxWidth, minContentWidth) {
+  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);
+  return Math.max(minWidth, Math.min(requested, upperBound));
+}
+var SideDock = forwardRef(function SideDock2({
+  title,
+  description,
+  headerActions,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  side = "right",
+  containerPosition = "viewport",
+  width,
+  defaultWidth = DEFAULT_WIDTH,
+  onWidthChange,
+  onWidthCommit,
+  minWidth = DEFAULT_MIN_WIDTH,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  minContentWidth = DEFAULT_MIN_CONTENT_WIDTH,
+  resizable = true,
+  overlayBreakpoint = DEFAULT_OVERLAY_BREAKPOINT,
+  className,
+  style,
+  children,
+  ...props
+}, ref) {
+  const { t, formatNumber } = useLocale();
+  const titleId = useId();
+  const resizeLabelId = useId();
+  const panel = useCollapsiblePanel({ side, open, defaultOpen, onOpenChange, containerPosition });
+  const isOverlay = useIsMobile(overlayBreakpoint);
+  const containerRef = useRef(null);
+  const mergedContainerRef = useMemo(() => mergeRefs(ref, containerRef), [ref]);
+  const groupRef = useRef(null);
+  const openerRef = useRef(null);
+  const wasOpenRef = useRef(panel.open);
+  useEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    const isOpen = panel.open;
+    wasOpenRef.current = isOpen;
+    if (isOpen && !wasOpen) {
+      openerRef.current = document.activeElement;
+      return;
+    }
+    if (!isOpen && wasOpen) {
+      const container = containerRef.current;
+      const active = document.activeElement;
+      const focusWasInside = container != null && active != null && container.contains(active);
+      if (!focusWasInside) return;
+      const opener = openerRef.current;
+      if (opener instanceof HTMLElement && opener.isConnected && opener !== document.body) {
+        opener.focus();
+      } else {
+        groupRef.current?.focus();
+      }
+    }
+  }, [panel.open]);
+  const [viewportWidth, setViewportWidth] = useState(FALLBACK_VIEWPORT_WIDTH);
+  useEffect(() => {
+    setViewportWidth(window.innerWidth);
+    let rafId = null;
+    const onResize = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        setViewportWidth(window.innerWidth);
+      });
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, []);
+  const isWidthControlled = width !== void 0;
+  const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultWidth);
+  const requestedWidth = isWidthControlled ? width : uncontrolledWidth;
+  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);
+  const clampedWidth = clampWidth(
+    requestedWidth,
+    viewportWidth,
+    minWidth,
+    maxWidth,
+    minContentWidth
+  );
+  const latestWidthRef = useRef(clampedWidth);
+  latestWidthRef.current = clampedWidth;
+  useEffect(() => {
+    if (!isWidthControlled) return;
+    if (clampedWidth === width) return;
+    onWidthChange?.(clampedWidth);
+    onWidthCommit?.(clampedWidth);
+  }, [isWidthControlled, clampedWidth, width]);
+  function requestWidth(next) {
+    if (next === latestWidthRef.current) return false;
+    latestWidthRef.current = next;
+    if (!isWidthControlled) setUncontrolledWidth(next);
+    onWidthChange?.(next);
+    return true;
+  }
+  const gestureChangedRef = useRef(false);
+  function handleResizeKeyDown(event) {
+    const widenKey = side === "right" ? "ArrowLeft" : "ArrowRight";
+    const narrowKey = side === "right" ? "ArrowRight" : "ArrowLeft";
+    const step = event.shiftKey ? KEY_STEP * KEY_STEP_SHIFT_MULTIPLIER : KEY_STEP;
+    let requested;
+    if (event.key === widenKey) requested = latestWidthRef.current + step;
+    else if (event.key === narrowKey) requested = latestWidthRef.current - step;
+    else if (event.key === "Home") requested = minWidth;
+    else if (event.key === "End") requested = upperBound;
+    else return;
+    event.preventDefault();
+    const next = clampWidth(requested, viewportWidth, minWidth, maxWidth, minContentWidth);
+    if (requestWidth(next)) gestureChangedRef.current = true;
+  }
+  function handleResizeKeyUp() {
+    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);
+    gestureChangedRef.current = false;
+  }
+  const pointerStartRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  function handleResizePointerDown(event) {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    gestureChangedRef.current = false;
+    pointerStartRef.current = { x: event.clientX, width: latestWidthRef.current };
+    setIsDragging(true);
+  }
+  function handleResizePointerMove(event) {
+    const start = pointerStartRef.current;
+    if (!start) return;
+    const delta = event.clientX - start.x;
+    const signedDelta = side === "right" ? -delta : delta;
+    const next = clampWidth(
+      start.width + signedDelta,
+      viewportWidth,
+      minWidth,
+      maxWidth,
+      minContentWidth
+    );
+    if (requestWidth(next)) gestureChangedRef.current = true;
+  }
+  function endPointerGesture(event) {
+    if (!pointerStartRef.current) return;
+    pointerStartRef.current = null;
+    setIsDragging(false);
+    event.currentTarget.releasePointerCapture?.(event.pointerId);
+    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);
+    gestureChangedRef.current = false;
+  }
+  const closeLabel = t("close");
+  const resizeValueText = t("ui.sideDock.widthValue", {
+    count: Math.round(clampedWidth),
+    size: formatNumber(Math.round(clampedWidth))
+  });
+  const resizeHandle = resizable && /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-labelledby": `${resizeLabelId} ${titleId}`,
+      "aria-valuenow": Math.round(clampedWidth),
+      "aria-valuemin": minWidth,
+      "aria-valuemax": Math.round(upperBound),
+      "aria-valuetext": resizeValueText,
+      tabIndex: 0,
+      "data-slot": "side-dock-resize-handle",
+      onPointerDown: handleResizePointerDown,
+      onPointerMove: handleResizePointerMove,
+      onPointerUp: endPointerGesture,
+      onPointerCancel: endPointerGesture,
+      onKeyDown: handleResizeKeyDown,
+      onKeyUp: handleResizeKeyUp,
+      className: cn(
+        // A literal px hit box, not a `w-*` spacing utility — `--spacing` is
+        // what `data-density="compact"` rescales (Mechanism §3).
+        "absolute inset-y-0 w-[min(24px,50%)] cursor-col-resize touch-none select-none",
+        side === "right" ? "left-0" : "right-0",
+        "focus-visible:outline-none",
+        isDragging ? cn(
+          "after:absolute after:inset-y-0 after:w-1 after:bg-primary after:content-['']",
+          side === "right" ? "after:left-0" : "after:right-0"
+        ) : cn(
+          "after:absolute after:inset-y-0 after:w-px after:bg-muted-foreground after:content-['']",
+          "hover:after:w-1 focus-visible:after:w-1",
+          side === "right" ? "after:left-0" : "after:right-0"
+        ),
+        "focus-visible:after:focus-ring-static"
+      ),
+      children: /* @__PURE__ */ jsx("span", { id: resizeLabelId, className: "sr-only", children: t("ui.sideDock.resize") })
+    }
+  );
+  if (isOverlay) {
+    return /* @__PURE__ */ jsx(Sheet, { open: panel.open, onOpenChange: panel.setOpen, children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        ref,
+        side,
+        "data-slot": "side-dock",
+        className: cn("flex flex-col bg-card p-0", className),
+        style,
+        ...description ? {} : { "aria-describedby": void 0 },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            SheetHeader,
+            {
+              "data-slot": "side-dock-header",
+              className: "h-header flex-row items-center gap-2 space-y-0 border-b border-border px-4",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(SheetTitle, { "data-slot": "side-dock-title", className: "text-title", children: title }) }),
+                headerActions
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: description }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "side-dock-body",
+              tabIndex: 0,
+              className: "min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset",
+              children
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "side-dock",
+      ref: groupRef,
+      tabIndex: -1,
+      className: cn("group", containerPosition === "inset" && "relative"),
+      ...panel.attrs,
+      style: { "--collapsible-panel-width": `${clampedWidth}px` },
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "side-dock-spacer", className: panel.spacerClassName }),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            ref: mergedContainerRef,
+            "data-slot": "side-dock-container",
+            "aria-labelledby": titleId,
+            inert: !panel.open,
+            className: cn(
+              panel.containerClassName,
+              "flex-col bg-card",
+              side === "right" ? "border-l" : "border-r",
+              className
+            ),
+            style,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "side-dock-header",
+                  className: "flex h-header shrink-0 items-center gap-2 border-b border-border px-4",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        id: titleId,
+                        "data-slot": "side-dock-title",
+                        className: "min-w-0 flex-1 truncate text-title",
+                        children: title
+                      }
+                    ),
+                    headerActions,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "data-slot": "side-dock-close",
+                        "aria-label": closeLabel,
+                        onClick: () => panel.setOpen(false),
+                        className: "shrink-0 rounded-sm p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring",
+                        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "side-dock-body",
+                  tabIndex: 0,
+                  className: "min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset",
+                  children: [
+                    description && /* @__PURE__ */ jsx("p", { "data-slot": "side-dock-description", className: "mb-4 text-body text-muted-foreground", children: description }),
+                    children
+                  ]
+                }
+              ),
+              resizeHandle
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  SideDock
+};
+//# sourceMappingURL=chunk-PYPNGKRD.js.map

package/dist/chunk-PYPNGKRD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/side-dock/side-dock.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * SideDock — a *summoned* panel that docks to one edge of the content area:\n * closed by default, opened by something the user does, resizable by\n * pointer AND keyboard, and — below a viewport threshold — presented as an\n * overlay `Sheet` instead of a column. See\n * `docs/ADR/0035-context-rail-and-side-dock.md` §5. `ContextRail` (the\n * sibling in this package) is a *persistent* rail with a 48px icon collapsed\n * state; SideDock is not persistent and has no icon state.\n *\n * Built on the mandatory `useCollapsiblePanel` mechanism (open/close tween)\n * and `useIsMobile(overlayBreakpoint)` (the column/overlay switch) — both\n * shared with `ContextRail`, never re-implemented here.\n */\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentProps,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\nimport { useIsMobile } from \"../../lib/use-mobile\";\nimport { useCollapsiblePanel, type CollapsiblePanelContainerPosition } from \"../collapsible-panel\";\nimport { useLocale } from \"../locale-provider/locale-provider\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"../sheet\";\n\nexport interface SideDockProps extends Omit<ComponentProps<\"aside\">, \"title\"> {\n  /**\n   * The dock's name. Rendered as its header heading, and as the `SheetTitle`\n   * of the overlay presentation. REQUIRED: the overlay cannot be accessible\n   * without it, and an optional prop with a generic default would ship a\n   * meaningless announced name into real apps.\n   */\n  title: ReactNode;\n  /**\n   * Optional longer description. Visible at the top of the body in the column\n   * presentation — never inside the header band, which is fixed at the app\n   * shell's header height; `sr-only` in the overlay presentation (the compact\n   * sheet header has no room for it, but it still reaches assistive tech).\n   */\n  description?: ReactNode;\n  /** Optional controls placed in the header row beside the built-in close button. */\n  headerActions?: ReactNode;\n\n  /** Controlled open state. Closed means zero width (content stays mounted, inert). */\n  open?: boolean;\n  /** Uncontrolled initial open state. Default `false` — a dock is summoned. */\n  defaultOpen?: boolean;\n  /** Called with the next open state. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Which edge it docks to. Default `\"right\"`. */\n  side?: \"left\" | \"right\";\n\n  /**\n   * Where the column presentation's fixed/absolute container positions\n   * itself. Default `\"viewport\"` (pins to the viewport edge — byte-identical\n   * pre-#432 behavior). `\"inset\"` pins to the dock's OWN position in the\n   * layout instead (`absolute` against a `relative` wrapper this component\n   * provides) — use this when the dock is nested inside another element that\n   * already pins itself to the same viewport edge (e.g. an app `Sidebar`),\n   * so the two never race for the same edge (#432). Has no effect on the\n   * overlay `Sheet` presentation below `overlayBreakpoint`.\n   */\n  containerPosition?: CollapsiblePanelContainerPosition;\n\n  /**\n   * `width`, `defaultWidth`, `minWidth`, `maxWidth`, `minContentWidth` and\n   * `resizable` (below) govern the COLUMN presentation only — viewport at or\n   * above `overlayBreakpoint`. Below that breakpoint the dock renders as an\n   * overlay `Sheet` sized by the viewport (`Sheet`'s own `w-3/4 max-w-sm`),\n   * so none of these props have any effect there.\n   */\n  /** Controlled width in px. */\n  width?: number;\n  /** Uncontrolled initial width in px. Default `400`. */\n  defaultWidth?: number;\n  /** Fires continuously during a resize — drive layout from this. */\n  onWidthChange?: (width: number) => void;\n  /** Fires once when an interaction ends — PERSIST from this. */\n  onWidthCommit?: (width: number) => void;\n\n  /** Lower bound in px. Default `320`. */\n  minWidth?: number;\n  /** Upper bound in px. Default `640`. */\n  maxWidth?: number;\n  /** Content width preserved when clamping against the live viewport, px. Default `480`. */\n  minContentWidth?: number;\n  /** Whether the resize handle renders. Default `true`. */\n  resizable?: boolean;\n\n  /**\n   * Viewport width in px below which the dock renders as an overlay `Sheet`\n   * instead of a column. Default `1100`. Deliberately ABOVE the library's\n   * 768px mobile breakpoint: a 400px dock at 768px leaves ~360px of content.\n   * This is the switch point for the column-only sizing props above — the\n   * overlay presentation ignores them entirely.\n   */\n  overlayBreakpoint?: number;\n}\n\nconst DEFAULT_WIDTH = 400;\nconst DEFAULT_MIN_WIDTH = 320;\nconst DEFAULT_MAX_WIDTH = 640;\nconst DEFAULT_MIN_CONTENT_WIDTH = 480;\nconst DEFAULT_OVERLAY_BREAKPOINT = 1100;\n// A single arrow-key step, and Shift's multiplier on it (Mechanism §3).\nconst KEY_STEP = 16;\nconst KEY_STEP_SHIFT_MULTIPLIER = 4;\n// SSR-only fallback — \"use client\" means this never actually renders on a\n// server, but a hook initializer still runs once during any non-browser\n// render pass (e.g. a framework's SSR pass before hydration).\nconst FALLBACK_VIEWPORT_WIDTH = 1024;\n\n/**\n * The clamp, written out exactly as specified (Ruling 26 §3):\n * `minWidth` wins last, so a hostile viewport can never render a\n * sub-minimum dock.\n */\nfunction clampWidth(\n  requested: number,\n  viewportWidth: number,\n  minWidth: number,\n  maxWidth: number,\n  minContentWidth: number,\n): number {\n  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);\n  return Math.max(minWidth, Math.min(requested, upperBound));\n}\n\nexport const SideDock = forwardRef<HTMLElement, SideDockProps>(function SideDock(\n  {\n    title,\n    description,\n    headerActions,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    side = \"right\",\n    containerPosition = \"viewport\",\n    width,\n    defaultWidth = DEFAULT_WIDTH,\n    onWidthChange,\n    onWidthCommit,\n    minWidth = DEFAULT_MIN_WIDTH,\n    maxWidth = DEFAULT_MAX_WIDTH,\n    minContentWidth = DEFAULT_MIN_CONTENT_WIDTH,\n    resizable = true,\n    overlayBreakpoint = DEFAULT_OVERLAY_BREAKPOINT,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const { t, formatNumber } = useLocale();\n  const titleId = useId();\n  const resizeLabelId = useId();\n\n  const panel = useCollapsiblePanel({ side, open, defaultOpen, onOpenChange, containerPosition });\n  const isOverlay = useIsMobile(overlayBreakpoint);\n\n  // Focus restoration for the COLUMN presentation only (Finding 2,\n  // task-11f-brief.md). The overlay presentation is a Radix `Dialog` and\n  // already restores focus to its opener on close; the column `<aside>`\n  // has no such mechanism, and marking it `inert` while closed makes the\n  // browser's own HTML focus-fixup rule drop focus to `<body>` the instant\n  // a focused descendant becomes inert — the exact stranding this repairs\n  // (see `.claude/rules/interaction-guidelines.md`'s identical note about\n  // the native `disabled` attribute).\n  //\n  // `containerRef` is an internal mirror of the forwarded `ref` (merged\n  // below) so this effect can ask \"was focus inside the dock?\" regardless\n  // of what the caller's own `ref` points at. `groupRef` targets the outer\n  // wrapper, which never becomes `inert`, as the in-page fallback when the\n  // recorded opener is no longer usable.\n  const containerRef = useRef<HTMLElement | null>(null);\n  const mergedContainerRef = useMemo(() => mergeRefs<HTMLElement>(ref, containerRef), [ref]);\n  const groupRef = useRef<HTMLDivElement>(null);\n  const openerRef = useRef<Element | null>(null);\n  const wasOpenRef = useRef(panel.open);\n\n  useEffect(() => {\n    const wasOpen = wasOpenRef.current;\n    const isOpen = panel.open;\n    wasOpenRef.current = isOpen;\n\n    if (isOpen && !wasOpen) {\n      // Closed → open: remember whatever summoned the dock, so a later\n      // close can hand focus back to it.\n      openerRef.current = document.activeElement;\n      return;\n    }\n\n    if (!isOpen && wasOpen) {\n      // Open → closed: only act if focus was actually inside the dock —\n      // never steal focus the user had already moved elsewhere.\n      const container = containerRef.current;\n      const active = document.activeElement;\n      const focusWasInside = container != null && active != null && container.contains(active);\n      if (!focusWasInside) return;\n\n      const opener = openerRef.current;\n      if (opener instanceof HTMLElement && opener.isConnected && opener !== document.body) {\n        opener.focus();\n      } else {\n        // The recorded opener unmounted (or there wasn't one) — land on\n        // the outer wrapper rather than let focus fall through to\n        // `<body>`. It never joins the tab order (`tabIndex={-1}`).\n        groupRef.current?.focus();\n      }\n    }\n  }, [panel.open]);\n\n  // The live viewport width the clamp reads — `useIsMobile` only exposes a\n  // boolean threshold, not the pixel value clamping needs.\n  // Starts at the fallback on the server AND on the client's first render, then reads the real\n  // width on mount: a lazy `window.innerWidth` initialiser made the first client render differ\n  // from the server HTML (`aria-valuemax`), which React reports as a hydration mismatch.\n  const [viewportWidth, setViewportWidth] = useState<number>(FALLBACK_VIEWPORT_WIDTH);\n  useEffect(() => {\n    setViewportWidth(window.innerWidth);\n    // `resize` can fire dozens of times per second while a window is being\n    // dragged — coalesce every event inside one frame into a single state\n    // update via rAF, instead of re-rendering on each raw event.\n    let rafId: number | null = null;\n    const onResize = () => {\n      if (rafId !== null) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = null;\n        setViewportWidth(window.innerWidth);\n      });\n    };\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n      if (rafId !== null) cancelAnimationFrame(rafId);\n    };\n  }, []);\n\n  const isWidthControlled = width !== undefined;\n  const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultWidth);\n  const requestedWidth = isWidthControlled ? (width as number) : uncontrolledWidth;\n  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);\n  const clampedWidth = clampWidth(\n    requestedWidth,\n    viewportWidth,\n    minWidth,\n    maxWidth,\n    minContentWidth,\n  );\n\n  // A ref mirror of the currently-rendered clamped width, refreshed on every\n  // render (not via an effect) so the keyboard/pointer handlers below can\n  // read and update it synchronously between two native browser events —\n  // React may not have committed a re-render from the previous event yet.\n  const latestWidthRef = useRef(clampedWidth);\n  latestWidthRef.current = clampedWidth;\n\n  // Convergence (fixed contract decision): a CONTROLLED width outside the\n  // clamp renders the clamped number and reports it back once — on mount,\n  // and again whenever a viewport resize moves the bound. Deps are scoped to\n  // the VALUES only (not the callback props), so an inline\n  // onWidthChange/onWidthCommit from the caller can't re-trigger this on\n  // every render — it fires only when what it reports actually changes.\n  useEffect(() => {\n    if (!isWidthControlled) return;\n    if (clampedWidth === width) return;\n    onWidthChange?.(clampedWidth);\n    onWidthCommit?.(clampedWidth);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isWidthControlled, clampedWidth, width]);\n\n  /** A no-op never emits (Ruling 26 §2). Returns whether it actually changed. */\n  function requestWidth(next: number): boolean {\n    if (next === latestWidthRef.current) return false;\n    latestWidthRef.current = next;\n    if (!isWidthControlled) setUncontrolledWidth(next);\n    onWidthChange?.(next);\n    return true;\n  }\n\n  // Shared across the keyboard and pointer gestures below: did THIS gesture\n  // (the run of keydowns between focus and keyup, or the pointerdown-to-\n  // pointerup drag) actually change the value? `onWidthCommit` is a\n  // persistence trigger — firing it for a no-op gesture is noise.\n  const gestureChangedRef = useRef(false);\n\n  function handleResizeKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {\n    // Physical, not logical/RTL-aware (Mechanism §3): on a right-hand dock\n    // ArrowLeft widens (the handle moves toward the content); a left-hand\n    // dock swaps the two.\n    const widenKey = side === \"right\" ? \"ArrowLeft\" : \"ArrowRight\";\n    const narrowKey = side === \"right\" ? \"ArrowRight\" : \"ArrowLeft\";\n    const step = event.shiftKey ? KEY_STEP * KEY_STEP_SHIFT_MULTIPLIER : KEY_STEP;\n    let requested: number | undefined;\n    if (event.key === widenKey) requested = latestWidthRef.current + step;\n    else if (event.key === narrowKey) requested = latestWidthRef.current - step;\n    else if (event.key === \"Home\") requested = minWidth;\n    else if (event.key === \"End\") requested = upperBound;\n    else return;\n    event.preventDefault();\n    const next = clampWidth(requested, viewportWidth, minWidth, maxWidth, minContentWidth);\n    if (requestWidth(next)) gestureChangedRef.current = true;\n  }\n\n  function handleResizeKeyUp() {\n    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);\n    gestureChangedRef.current = false;\n  }\n\n  const pointerStartRef = useRef<{ x: number; width: number } | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  function handleResizePointerDown(event: ReactPointerEvent<HTMLDivElement>) {\n    if (event.pointerType === \"mouse\" && event.button !== 0) return;\n    event.currentTarget.setPointerCapture?.(event.pointerId);\n    gestureChangedRef.current = false;\n    pointerStartRef.current = { x: event.clientX, width: latestWidthRef.current };\n    setIsDragging(true);\n  }\n\n  function handleResizePointerMove(event: ReactPointerEvent<HTMLDivElement>) {\n    const start = pointerStartRef.current;\n    if (!start) return;\n    const delta = event.clientX - start.x;\n    const signedDelta = side === \"right\" ? -delta : delta;\n    const next = clampWidth(\n      start.width + signedDelta,\n      viewportWidth,\n      minWidth,\n      maxWidth,\n      minContentWidth,\n    );\n    if (requestWidth(next)) gestureChangedRef.current = true;\n  }\n\n  function endPointerGesture(event: ReactPointerEvent<HTMLDivElement>) {\n    if (!pointerStartRef.current) return;\n    pointerStartRef.current = null;\n    setIsDragging(false);\n    event.currentTarget.releasePointerCapture?.(event.pointerId);\n    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);\n    gestureChangedRef.current = false;\n  }\n\n  // The generic `close` key (messages.ts \"Generic\" section) — reused per the\n  // brief rather than minting a new one.\n  const closeLabel = t(\"close\");\n  const resizeValueText = t(\"ui.sideDock.widthValue\", {\n    count: Math.round(clampedWidth),\n    size: formatNumber(Math.round(clampedWidth)),\n  });\n\n  const resizeHandle = resizable && (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-labelledby={`${resizeLabelId} ${titleId}`}\n      aria-valuenow={Math.round(clampedWidth)}\n      aria-valuemin={minWidth}\n      aria-valuemax={Math.round(upperBound)}\n      aria-valuetext={resizeValueText}\n      tabIndex={0}\n      data-slot=\"side-dock-resize-handle\"\n      onPointerDown={handleResizePointerDown}\n      onPointerMove={handleResizePointerMove}\n      onPointerUp={endPointerGesture}\n      onPointerCancel={endPointerGesture}\n      onKeyDown={handleResizeKeyDown}\n      onKeyUp={handleResizeKeyUp}\n      className={cn(\n        // A literal px hit box, not a `w-*` spacing utility — `--spacing` is\n        // what `data-density=\"compact\"` rescales (Mechanism §3).\n        \"absolute inset-y-0 w-[min(24px,50%)] cursor-col-resize touch-none select-none\",\n        side === \"right\" ? \"left-0\" : \"right-0\",\n        \"focus-visible:outline-none\",\n        isDragging\n          ? cn(\n              \"after:absolute after:inset-y-0 after:w-1 after:bg-primary after:content-['']\",\n              side === \"right\" ? \"after:left-0\" : \"after:right-0\",\n            )\n          : cn(\n              \"after:absolute after:inset-y-0 after:w-px after:bg-muted-foreground after:content-['']\",\n              \"hover:after:w-1 focus-visible:after:w-1\",\n              side === \"right\" ? \"after:left-0\" : \"after:right-0\",\n            ),\n        \"focus-visible:after:focus-ring-static\",\n      )}\n    >\n      <span id={resizeLabelId} className=\"sr-only\">\n        {t(\"ui.sideDock.resize\")}\n      </span>\n    </div>\n  );\n\n  if (isOverlay) {\n    return (\n      <Sheet open={panel.open} onOpenChange={panel.setOpen}>\n        <SheetContent\n          // Runtime-safe: Radix's Content ref resolves to a plain\n          // HTMLDivElement, same as the column branch's <aside> ref target\n          // at the type level (both extend HTMLElement).\n          ref={ref as unknown as Ref<HTMLDivElement>}\n          side={side}\n          data-slot=\"side-dock\"\n          className={cn(\"flex flex-col bg-card p-0\", className)}\n          style={style}\n          // With no description the dialog is still named by its title, so\n          // opt out of `aria-describedby` explicitly rather than let Radix\n          // warn about a missing description (mirrors ExpandDialogContent).\n          {...(description ? {} : { \"aria-describedby\": undefined })}\n          {...props}\n        >\n          <SheetHeader\n            data-slot=\"side-dock-header\"\n            // `h-header`, never padding: a dock's header band sits beside the app\n            // shell's top bar and MUST share its height in every theme (a theme\n            // retunes `--header-size`). See the column branch.\n            className=\"h-header flex-row items-center gap-2 space-y-0 border-b border-border px-4\"\n          >\n            <div className=\"min-w-0 flex-1\">\n              <SheetTitle data-slot=\"side-dock-title\" className=\"text-title\">\n                {title}\n              </SheetTitle>\n            </div>\n            {headerActions}\n          </SheetHeader>\n          {description && <SheetDescription className=\"sr-only\">{description}</SheetDescription>}\n          <div\n            data-slot=\"side-dock-body\"\n            // Focusable because it scrolls; `focus-ring-inset` because the Sheet\n            // panel clips anything drawn outside this box, and both layers of\n            // the plain rung are drawn outside it. A dock's children are\n            // caller-supplied and routinely have no focusable descendant (a\n            // change log, a read-only detail panel), so without a tab stop\n            // there is no keyboard route into the region once it overflows\n            // (WCAG 2.1.1, axe `scrollable-region-focusable`).\n            tabIndex={0}\n            className=\"min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset\"\n          >\n            {children}\n          </div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"side-dock\"\n      // `group`: the ancestor `group-data-[state=collapsed]:…` selectors in\n      // `panel.spacerClassName`/`panel.containerClassName` resolve against\n      // THIS element (Mechanism §1 — mirrors Sidebar's outer `group` div).\n      // `ref={groupRef}` + `tabIndex={-1}`: the focus-restoration fallback\n      // target (Finding 2) — this wrapper is never `inert`, unlike the\n      // `<aside>` below, so it is always a safe place to land focus. -1\n      // keeps it out of the normal tab order; it is only ever focused\n      // programmatically.\n      ref={groupRef}\n      tabIndex={-1}\n      // `relative`: only in \"inset\" mode, so the container's `absolute`\n      // positioning below resolves against THIS wrapper (its own slot in\n      // the layout) instead of the viewport (#432). No-op in \"viewport\"\n      // mode — the container stays `fixed`.\n      className={cn(\"group\", containerPosition === \"inset\" && \"relative\")}\n      {...panel.attrs}\n      style={{ \"--collapsible-panel-width\": `${clampedWidth}px` } as CSSProperties}\n    >\n      <div data-slot=\"side-dock-spacer\" className={panel.spacerClassName} />\n      <aside\n        ref={mergedContainerRef}\n        data-slot=\"side-dock-container\"\n        aria-labelledby={titleId}\n        // The collapsed container stays mounted (for the closing transition)\n        // but stops being interactive/reachable (fixed contract decision).\n        inert={!panel.open}\n        className={cn(\n          panel.containerClassName,\n          \"flex-col bg-card\",\n          side === \"right\" ? \"border-l\" : \"border-r\",\n          className,\n        )}\n        style={style}\n        {...props}\n      >\n        <div\n          data-slot=\"side-dock-header\"\n          // ONE fixed band at `h-header` — the same height the app shell's top\n          // bar takes, so the two rules under them sit on one line in every\n          // theme. Never size it from padding: a padded header grows with its\n          // content (a two-line description made it 73px beside a 56px bar).\n          // The description therefore lives UNDER the band, not inside it.\n          className=\"flex h-header shrink-0 items-center gap-2 border-b border-border px-4\"\n        >\n          <div\n            id={titleId}\n            data-slot=\"side-dock-title\"\n            className=\"min-w-0 flex-1 truncate text-title\"\n          >\n            {title}\n          </div>\n          {headerActions}\n          <button\n            type=\"button\"\n            data-slot=\"side-dock-close\"\n            aria-label={closeLabel}\n            onClick={() => panel.setOpen(false)}\n            className=\"shrink-0 rounded-sm p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring\"\n          >\n            <X className=\"size-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n        <div\n          data-slot=\"side-dock-body\"\n          // Focusable because it scrolls; `focus-ring-inset` because the dock's\n          // own container clips anything drawn outside this box (the collapse\n          // tween animates its width). Worse here than in the overlay branch:\n          // the column is user-resizable, so narrowing it re-wraps every child\n          // taller — overflow is one keyboard gesture on the resize handle\n          // away, not a hypothetical viewport (WCAG 2.1.1, axe\n          // `scrollable-region-focusable`).\n          tabIndex={0}\n          className=\"min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset\"\n        >\n          {description && (\n            <p data-slot=\"side-dock-description\" className=\"mb-4 text-body text-muted-foreground\">\n              {description}\n            </p>\n          )}\n          {children}\n        </div>\n        {resizeHandle}\n      </aside>\n    </div>\n  );\n});\n"],"mappings":"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","names":["SideDock"]}

package/dist/chunk-QDJHUNBQ.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-QDJHUNBQ.js.map

package/dist/chunk-QDJHUNBQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-QDTGDYMM.js

@@ -0,0 +1,77 @@
+"use client";
+import {
+  Separator
+} from "./chunk-XAFRTZQF.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/button-group/button-group.tsx
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:relative [&>*]:focus-within:z-10 has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+var ButtonGroup = forwardRef(function ButtonGroup2({ className, orientation = "horizontal", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+});
+var ButtonGroupText = forwardRef(function ButtonGroupText2({ className, asChild = false, ...props }, ref) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-body font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ButtonGroupSeparator = forwardRef(
+  function ButtonGroupSeparator2({ className, orientation = "vertical", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Separator,
+      {
+        ref,
+        "data-slot": "button-group-separator",
+        orientation,
+        className: cn(
+          "relative !m-0 self-stretch bg-input data-[orientation=vertical]:h-auto",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+export {
+  buttonGroupVariants,
+  ButtonGroup,
+  ButtonGroupText,
+  ButtonGroupSeparator
+};
+//# sourceMappingURL=chunk-QDTGDYMM.js.map

package/dist/chunk-QDTGDYMM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button-group/button-group.tsx"],"sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { Separator } from \"../separator\";\n\nexport const buttonGroupVariants = cva(\n  \"flex w-fit items-stretch [&>*]:relative [&>*]:focus-within:z-10 has-[>[data-slot=button-group]]:gap-2\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: { orientation: \"horizontal\" },\n  },\n);\n\nexport const ButtonGroup = forwardRef<\n  HTMLDivElement,\n  ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>\n>(function ButtonGroup({ className, orientation = \"horizontal\", ...props }, ref) {\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n});\n\nexport const ButtonGroupText = forwardRef<\n  HTMLDivElement,\n  ComponentProps<\"div\"> & { asChild?: boolean }\n>(function ButtonGroupText({ className, asChild = false, ...props }, ref) {\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-4 text-body font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const ButtonGroupSeparator = forwardRef<HTMLDivElement, ComponentProps<typeof Separator>>(\n  function ButtonGroupSeparator({ className, orientation = \"vertical\", ...props }, ref) {\n    return (\n      <Separator\n        ref={ref}\n        data-slot=\"button-group-separator\"\n        orientation={orientation}\n        className={cn(\n          \"relative !m-0 self-stretch bg-input data-[orientation=vertical]:h-auto\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAAA,SAAS,kBAAuC;AAChD,SAAS,YAAY;AACrB,SAAS,WAA8B;AAwBnC;AApBG,IAAM,sBAAsB;AAAA,EACjC;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,YACE;AAAA,QACF,UACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,aAAa;AAAA,EAC/C;AACF;AAEO,IAAM,cAAc,WAGzB,SAASA,aAAY,EAAE,WAAW,cAAc,cAAc,GAAG,MAAM,GAAG,KAAK;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,kBAAkB,WAG7B,SAASC,iBAAgB,EAAE,WAAW,UAAU,OAAO,GAAG,MAAM,GAAG,KAAK;AACxE,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,uBAAuB;AAAA,EAClC,SAASC,sBAAqB,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAAG,KAAK;AACpF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["ButtonGroup","ButtonGroupText","ButtonGroupSeparator"]}