@astherix/ui 0.40.0 → 0.41.0

package/dist/index.js

@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var ModalContext = React.createContext(null);
 function useModalContext(component) {
   const ctx = React.useContext(ModalContext);
-  if (!ctx) throw new Error(`<${component}> must be used inside <Modal>.`);
+  if (!ctx) throw new Error(`<${component}> must be used inside <Modal> or <Drawer>.`);
   return ctx;
 }
 function Modal({ open: openProp, defaultOpen = false, onOpenChange, children }) {
@@ -153,10 +153,11 @@ var modalPanelVariants = cva(
   }
 );
 var XIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5.5 5.5l9 9M14.5 5.5l-9 9" }) });
-var ModalContent = React.forwardRef(
+var DialogSurface = React.forwardRef(
   ({
-    className,
-    size,
+    component,
+    dialogClassName,
+    panelClassName,
     backdrop = "default",
     dismissible = true,
     showCloseButton = true,
@@ -165,7 +166,7 @@ var ModalContent = React.forwardRef(
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
-    const { open, setOpen, titleId, descriptionId, hasDescription } = useModalContext("ModalContent");
+    const { open, setOpen, titleId, descriptionId, hasDescription } = useModalContext(component);
     const dialogRef = React.useRef(null);
     const returnFocusRef = React.useRef(null);
     const pressedBackdrop = React.useRef(false);
@@ -228,9 +229,8 @@ var ModalContent = React.forwardRef(
         "data-state": state,
         className: cn(
           // The dialog fills the viewport so clicks outside the panel land on it (= backdrop).
-          "fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none overflow-y-auto overscroll-contain",
-          "bg-transparent p-4 text-fg sm:p-6 open:flex open:flex-col open:items-center",
-          size === "full" && "p-0 sm:p-0",
+          "fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none overscroll-contain bg-transparent text-fg",
+          dialogClassName,
           backdropClasses[backdrop],
           "data-[state=open]:backdrop:animate-[ui-fade-in_200ms_ease-out]",
           "data-[state=closing]:backdrop:animate-[ui-fade-out_140ms_ease-in_forwards]"
@@ -253,24 +253,30 @@ var ModalContent = React.forwardRef(
           if (dismissible && pressedBackdrop.current && event.target === event.currentTarget) setOpen(false);
           pressedBackdrop.current = false;
         },
-        children: (state === "open" || state === "closing") && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: setPanelRef,
-            tabIndex: -1,
-            "data-state": state,
-            className: cn(modalPanelVariants({ size }), className),
-            ...props,
-            children: [
-              children,
-              showCloseButton && dismissible && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": closeLabel, onClick: () => setOpen(false), children: /* @__PURE__ */ jsx(XIcon, {}) }) })
-            ]
-          }
-        )
+        children: (state === "open" || state === "closing") && /* @__PURE__ */ jsxs("div", { ref: setPanelRef, tabIndex: -1, "data-state": state, className: panelClassName, ...props, children: [
+          children,
+          showCloseButton && dismissible && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": closeLabel, onClick: () => setOpen(false), children: /* @__PURE__ */ jsx(XIcon, {}) }) })
+        ] })
       }
     );
   }
 );
+DialogSurface.displayName = "DialogSurface";
+var ModalContent = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    DialogSurface,
+    {
+      ref,
+      component: "ModalContent",
+      dialogClassName: cn(
+        "overflow-y-auto p-4 sm:p-6 open:flex open:flex-col open:items-center",
+        size === "full" && "p-0 sm:p-0"
+      ),
+      panelClassName: cn(modalPanelVariants({ size }), className),
+      ...props
+    }
+  )
+);
 ModalContent.displayName = "ModalContent";
 var ModalHeader = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("grid gap-1.5 px-6 pb-2 pr-14 pt-6", className), ...props })
@@ -3937,7 +3943,7 @@ function DataTable({
   onQueryChange,
   className
 }) {
-  const keyOf2 = React12.useCallback(
+  const keyOf3 = React12.useCallback(
     (row) => typeof rowKey === "function" ? rowKey(row) : row[rowKey],
     [rowKey]
   );
@@ -3996,10 +4002,10 @@ function DataTable({
     setSort((s) => !s || s.key !== key ? { key, direction: "asc" } : s.direction === "asc" ? { key, direction: "desc" } : null);
     setPage(1);
   };
-  const pageKeys = paged.map(keyOf2);
+  const pageKeys = paged.map(keyOf3);
   const selectedOnPage = pageKeys.filter((k) => selected.includes(k));
   const allOnPage = pageKeys.length > 0 && selectedOnPage.length === pageKeys.length;
-  const selectedRows = data.filter((r) => selected.includes(keyOf2(r)));
+  const selectedRows = data.filter((r) => selected.includes(keyOf3(r)));
   const refreshing = loading && paged.length > 0 || refreshingByButton;
   const [justRefreshed, setJustRefreshed] = React12.useState(false);
   const wasRefreshing = React12.useRef(false);
@@ -4225,7 +4231,7 @@ function DataTable({
             ] }) }),
             /* @__PURE__ */ jsxs12("tbody", { role: "rowgroup", className: cn(cardBody), children: [
               loading && paged.length === 0 ? Array.from({ length: Math.min(pageSize || 5, 5) }, (_, i) => /* @__PURE__ */ jsx12("tr", { role: "row", className: cn(cardRow), children: Array.from({ length: colCount }, (_2, j) => /* @__PURE__ */ jsx12("td", { role: "cell", className: cn("border-b border-border", pad, cards && "@max-[40rem]:border-0 @max-[40rem]:p-0"), children: /* @__PURE__ */ jsx12(Skeleton, { className: "h-3.5 w-full max-w-32 rounded-full" }) }, j)) }, `sk-${i}`)) : paged.map((row, ri) => {
-                const k = keyOf2(row);
+                const k = keyOf3(row);
                 const isSel = selected.includes(k);
                 return /* @__PURE__ */ jsxs12(
                   "tr",
@@ -10409,6 +10415,868 @@ function HeroMedia({ frame = false, url, float = false, tilt = false, className,
     }
   );
 }
+
+// src/components/drawer/Drawer.tsx
+import * as React35 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Drawer = Modal;
+var DrawerTrigger = ModalTrigger;
+var DrawerClose = ModalClose;
+var DrawerTitle = ModalTitle;
+var DrawerDescription = ModalDescription;
+function useDrawer(initialOpen = false) {
+  const { modalProps, ...rest } = useModal(initialOpen);
+  return { ...rest, drawerProps: modalProps };
+}
+var placement = {
+  left: "open:justify-start",
+  right: "open:justify-end",
+  top: "open:flex-col open:justify-start",
+  bottom: "open:flex-col open:justify-end"
+};
+var panelSide = {
+  left: "h-full border-r [--ui-drawer-from:translateX(-100%)]",
+  right: "h-full border-l [--ui-drawer-from:translateX(100%)]",
+  top: "w-full border-b [--ui-drawer-from:translateY(-100%)]",
+  bottom: "w-full border-t rounded-t-modal [--ui-drawer-from:translateY(100%)]"
+};
+var reach = {
+  x: { sm: "w-[min(18rem,calc(100%-3rem))]", md: "w-[min(24rem,calc(100%-3rem))]", lg: "w-[min(36rem,calc(100%-3rem))]" },
+  y: { sm: "max-h-[40dvh]", md: "max-h-[65dvh]", lg: "max-h-[85dvh]" }
+};
+var DrawerContent = React35.forwardRef(
+  ({ side = "right", size = "md", className, ...props }, ref) => /* @__PURE__ */ jsx34(
+    DialogSurface,
+    {
+      ref,
+      component: "DrawerContent",
+      dialogClassName: cn("overflow-hidden p-0 open:flex", placement[side]),
+      panelClassName: cn(
+        "relative flex flex-col overflow-y-auto overscroll-contain border-border bg-surface text-fg outline-none",
+        "shadow-[var(--ui-shadow-modal)]",
+        panelSide[side],
+        reach[side === "left" || side === "right" ? "x" : "y"][size],
+        "data-[state=open]:animate-[ui-drawer-in_260ms_cubic-bezier(0.2,0.9,0.3,1)]",
+        "data-[state=closing]:animate-[ui-drawer-out_140ms_ease-in_forwards]",
+        "motion-reduce:data-[state=open]:animate-[ui-fade-in_140ms_ease-out]",
+        "motion-reduce:data-[state=closing]:animate-[ui-fade-out_140ms_ease-in_forwards]",
+        // Keep content clear of notches and the home indicator.
+        "pb-[env(safe-area-inset-bottom)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: cn("grid gap-1.5 px-5 pb-2 pr-14 pt-5", className), ...props })
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerBody = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: cn("flex-1 px-5 py-3 text-[0.9375rem] leading-relaxed", className), ...props })
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+    "div",
+    {
+      ref,
+      className: cn("mt-auto flex flex-col-reverse gap-2 border-t border-border px-5 py-4 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  )
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+// src/components/tooltip/Tooltip.tsx
+import * as React36 from "react";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import { Fragment as Fragment20, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
+var openCount = 0;
+var lastHiddenAt = 0;
+var closeCurrent = null;
+var WARM_MS = 500;
+var GAP2 = 6;
+var supportsPopover = () => typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
+function Tooltip2({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  delay = 400,
+  disabled = false,
+  as = "description",
+  className
+}) {
+  const id = React36.useId();
+  const triggerRef = React36.useRef(null);
+  const tipRef = React36.useRef(null);
+  const timers = React36.useRef({ show: 0, hide: 0 });
+  const [open, setOpen] = React36.useState(false);
+  const [placed, setPlaced] = React36.useState({
+    side,
+    style: { visibility: "hidden" }
+  });
+  const clear = () => {
+    window.clearTimeout(timers.current.show);
+    window.clearTimeout(timers.current.hide);
+  };
+  const show = (wait) => {
+    if (disabled) return;
+    clear();
+    const instant = wait === 0 || openCount > 0 || Date.now() - lastHiddenAt < WARM_MS;
+    if (instant) setOpen(true);
+    else timers.current.show = window.setTimeout(() => setOpen(true), wait);
+  };
+  const hide = (wait = 0) => {
+    clear();
+    const done = () => setOpen(false);
+    if (wait) timers.current.hide = window.setTimeout(done, wait);
+    else done();
+  };
+  React36.useEffect(() => () => clear(), []);
+  React36.useEffect(() => {
+    if (!open) return;
+    const close = () => hide();
+    if (closeCurrent && closeCurrent !== close) closeCurrent();
+    closeCurrent = close;
+    openCount++;
+    return () => {
+      openCount--;
+      lastHiddenAt = Date.now();
+      if (closeCurrent === close) closeCurrent = null;
+    };
+  }, [open]);
+  React36.useEffect(() => {
+    if (disabled) hide();
+  }, [disabled]);
+  const place = React36.useCallback(() => {
+    const t = triggerRef.current;
+    const tip = tipRef.current;
+    if (!t || !tip) return;
+    const r = t.getBoundingClientRect();
+    const w = tip.offsetWidth;
+    const h = tip.offsetHeight;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const room = { top: r.top, bottom: vh - r.bottom, left: r.left, right: vw - r.right };
+    const need = side === "top" || side === "bottom" ? h + GAP2 : w + GAP2;
+    const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+    const s = room[side] >= need || room[side] >= room[opposite[side]] ? side : opposite[side];
+    let left;
+    let top;
+    if (s === "top" || s === "bottom") {
+      top = s === "top" ? r.top - h - GAP2 : r.bottom + GAP2;
+      left = align === "start" ? r.left : align === "end" ? r.right - w : r.left + r.width / 2 - w / 2;
+    } else {
+      left = s === "left" ? r.left - w - GAP2 : r.right + GAP2;
+      top = align === "start" ? r.top : align === "end" ? r.bottom - h : r.top + r.height / 2 - h / 2;
+    }
+    left = Math.max(8, Math.min(left, vw - w - 8));
+    top = Math.max(8, Math.min(top, vh - h - 8));
+    setPlaced({ side: s, style: { left, top } });
+  }, [side, align]);
+  React36.useLayoutEffect(() => {
+    const tip = tipRef.current;
+    if (!tip) return;
+    if (!open) {
+      if (supportsPopover() && tip.matches(":popover-open")) tip.hidePopover();
+      setPlaced((p) => ({ ...p, style: { visibility: "hidden" } }));
+      return;
+    }
+    if (supportsPopover() && !tip.matches(":popover-open")) tip.showPopover();
+    place();
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [open, place]);
+  const childProps = children.props;
+  const ariaKey = as === "label" ? "aria-labelledby" : "aria-describedby";
+  const ariaValue = [childProps[ariaKey], `${id}-tip`].filter(Boolean).join(" ");
+  const fromBySide = {
+    top: "translateY(3px)",
+    bottom: "translateY(-3px)",
+    left: "translateX(3px)",
+    right: "translateX(-3px)"
+  };
+  return /* @__PURE__ */ jsxs34(Fragment20, { children: [
+    /* @__PURE__ */ jsx35(
+      Slot6,
+      {
+        ref: triggerRef,
+        ...{ [ariaKey]: disabled && as === "description" ? childProps[ariaKey] : ariaValue },
+        onPointerEnter: (e) => {
+          if (e.pointerType !== "touch") show(delay);
+        },
+        onPointerLeave: (e) => {
+          if (e.pointerType !== "touch") hide(100);
+        },
+        onPointerDown: () => hide(),
+        onFocus: (e) => {
+          if (e.currentTarget.matches(":focus-visible")) show(0);
+        },
+        onBlur: () => hide(),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      "div",
+      {
+        ref: tipRef,
+        id: `${id}-tip`,
+        role: "tooltip",
+        popover: supportsPopover() ? "manual" : void 0,
+        hidden: !supportsPopover() && !open ? true : void 0,
+        "data-side": placed.side,
+        "data-state": open ? "open" : "closed",
+        onPointerEnter: () => open && clear(),
+        onPointerLeave: () => hide(100),
+        style: { ...placed.style, ["--ui-tooltip-from"]: fromBySide[placed.side] },
+        className: cn(
+          // Undo the browser's popover box (centered, bordered) and place it ourselves.
+          "fixed inset-auto m-0 overflow-visible border-0 p-0",
+          "z-[70] max-w-[min(18rem,calc(100vw-1rem))] rounded-control bg-ash-900 px-2.5 py-1.5 text-[0.8125rem] font-medium leading-snug text-white",
+          "shadow-[var(--ui-shadow-md)] dark:bg-ash-50 dark:text-ash-950",
+          "data-[state=open]:animate-[ui-tooltip-in_120ms_ease-out] motion-reduce:data-[state=open]:animate-[ui-fade-in_120ms_ease-out]",
+          className
+        ),
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/components/input/OtpInput.tsx
+import * as React37 from "react";
+import { jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
+var boxSize = {
+  sm: "h-8 w-7 text-sm",
+  md: "h-10 w-9 text-base",
+  lg: "h-12 w-11 text-lg"
+};
+var allowPattern = (allow) => allow instanceof RegExp ? allow : allow === "alphanumeric" ? /[0-9a-zA-Z]/ : /[0-9]/;
+var OtpInput = React37.forwardRef(function OtpInput2({
+  length = 6,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onComplete,
+  allow = "digits",
+  groupSize,
+  mask = false,
+  size = "md",
+  invalid: invalidProp,
+  id: idProp,
+  required: requiredProp,
+  disabled: disabledProp,
+  "aria-describedby": describedBy,
+  "aria-label": ariaLabel,
+  autoComplete = "one-time-code",
+  frameClassName,
+  className,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  ...props
+}, ref) {
+  const control = useFieldControlProps({
+    id: idProp,
+    invalid: invalidProp,
+    required: requiredProp,
+    disabled: disabledProp,
+    "aria-describedby": describedBy
+  });
+  const inputRef = React37.useRef(null);
+  const [inner, setInner] = React37.useState(() => defaultValue.slice(0, length));
+  const value = (valueProp ?? inner).slice(0, length);
+  const [focused, setFocused] = React37.useState(false);
+  const pattern = allowPattern(allow);
+  const commit = (next) => {
+    if (valueProp === void 0) setInner(next);
+    onValueChange?.(next);
+    if (next.length === length && value.length !== length) onComplete?.(next);
+  };
+  React37.useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form) return;
+    const onReset = () => {
+      if (valueProp === void 0) setInner(defaultValue.slice(0, length));
+      onValueChange?.(defaultValue.slice(0, length));
+    };
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  });
+  const caretToEnd = () => {
+    const el = inputRef.current;
+    if (el) requestAnimationFrame(() => el.setSelectionRange(el.value.length, el.value.length));
+  };
+  const active = focused ? Math.min(value.length, length - 1) : -1;
+  const full = value.length === length;
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: cn("relative inline-flex items-center gap-1.5", control.disabled && "opacity-70", frameClassName),
+      onPointerDown: (e) => {
+        if (e.target !== inputRef.current) {
+          e.preventDefault();
+          inputRef.current?.focus();
+        }
+      },
+      children: [
+        Array.from({ length }, (_, i) => {
+          const char = value[i];
+          const isActive2 = i === active;
+          return /* @__PURE__ */ jsxs35(React37.Fragment, { children: [
+            groupSize && i > 0 && i % groupSize === 0 && /* @__PURE__ */ jsx36("span", { "aria-hidden": "true", className: "mx-0.5 h-px w-2.5 bg-fg-muted/70" }),
+            /* @__PURE__ */ jsx36(
+              "div",
+              {
+                "aria-hidden": "true",
+                "data-active": isActive2 || void 0,
+                "data-filled": char !== void 0 || void 0,
+                className: cn(
+                  "relative grid shrink-0 place-items-center rounded-control border border-border-strong bg-surface font-medium tabular-nums text-fg",
+                  "shadow-[inset_0_1px_2px_rgb(var(--ui-shadow-color)/0.07)] transition-[border-color,box-shadow] duration-100",
+                  "data-[active]:border-ring data-[active]:ring-3 data-[active]:ring-ring/25",
+                  control.invalid && "border-danger data-[active]:border-danger data-[active]:ring-danger/25",
+                  control.disabled && "cursor-not-allowed bg-secondary-hover",
+                  "motion-reduce:transition-none",
+                  boxSize[size]
+                ),
+                children: char !== void 0 ? mask ? /* @__PURE__ */ jsx36("span", { className: "size-2 rounded-full bg-fg" }) : char : isActive2 && !full ? /* @__PURE__ */ jsx36("span", { className: "h-[1.1em] w-px animate-[ui-caret_1s_steps(1)_infinite] bg-fg motion-reduce:animate-none" }) : null
+              }
+            )
+          ] }, i);
+        }),
+        /* @__PURE__ */ jsx36(
+          "input",
+          {
+            ref: (node) => {
+              inputRef.current = node;
+              if (typeof ref === "function") ref(node);
+              else if (ref) ref.current = node;
+            },
+            type: "text",
+            inputMode: allow === "digits" ? "numeric" : "text",
+            autoComplete,
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            maxLength: length,
+            value,
+            "aria-label": ariaLabel ?? (control.id ? void 0 : `Verification code, ${length} characters`),
+            id: control.id,
+            required: control.required,
+            disabled: control.disabled,
+            "aria-invalid": control["aria-invalid"],
+            "aria-describedby": control["aria-describedby"],
+            className: cn(
+              // Invisible but real: it takes the taps, typing, pastes and autofill.
+              "absolute inset-0 h-full w-full cursor-text bg-transparent text-transparent caret-transparent outline-none",
+              "selection:bg-transparent [-webkit-text-fill-color:transparent] disabled:cursor-not-allowed",
+              className
+            ),
+            onChange: (e) => {
+              const next = Array.from(e.target.value).filter((c) => pattern.test(c)).join("").slice(0, length);
+              commit(allow === "alphanumeric" ? next.toUpperCase() : next);
+            },
+            onFocus: (e) => {
+              setFocused(true);
+              caretToEnd();
+              onFocus?.(e);
+            },
+            onBlur: (e) => {
+              setFocused(false);
+              onBlur?.(e);
+            },
+            onKeyDown: (e) => {
+              onKeyDown?.(e);
+              if (["ArrowLeft", "ArrowRight", "Home", "End", "ArrowUp", "ArrowDown"].includes(e.key)) e.preventDefault();
+            },
+            onSelect: caretToEnd,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/components/breadcrumbs/Breadcrumbs.tsx
+import * as React38 from "react";
+import { Fragment as Fragment23, jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
+var Chevron4 = () => /* @__PURE__ */ jsx37("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "size-3.5 rtl:-scale-x-100", children: /* @__PURE__ */ jsx37("path", { d: "M6 3.5l4.5 4.5L6 12.5" }) });
+function Breadcrumbs({
+  items,
+  maxItems = 4,
+  separator = "chevron",
+  linkComponent: LinkC = "a",
+  size = "sm",
+  className,
+  "aria-label": ariaLabel = "Breadcrumb",
+  ...props
+}) {
+  const [expanded, setExpanded] = React38.useState(false);
+  const firstHiddenRef = React38.useRef(null);
+  const fold = !expanded && maxItems > 0 && items.length > maxItems;
+  const tail = Math.max(1, maxItems - 2);
+  const hiddenFrom = 1;
+  const hiddenTo = items.length - tail;
+  React38.useEffect(() => {
+    if (expanded) firstHiddenRef.current?.focus();
+  }, [expanded]);
+  const sep = /* @__PURE__ */ jsx37("li", { role: "presentation", "aria-hidden": "true", className: "flex shrink-0 items-center text-fg-muted/70", children: separator === "chevron" ? /* @__PURE__ */ jsx37(Chevron4, {}) : separator === "slash" ? /* @__PURE__ */ jsx37("span", { className: "px-0.5", children: "/" }) : separator });
+  const crumb = (item, i) => {
+    const current = i === items.length - 1;
+    const content = /* @__PURE__ */ jsxs36(Fragment23, { children: [
+      renderIcon(item.icon),
+      /* @__PURE__ */ jsx37("span", { className: "truncate", children: item.label })
+    ] });
+    const base = "inline-flex min-w-0 max-w-[16rem] items-center gap-1.5 rounded-control-sm [&_svg]:size-[1.1em] [&_svg]:shrink-0";
+    return /* @__PURE__ */ jsx37("li", { className: "flex min-w-0 items-center", children: current || !item.href ? /* @__PURE__ */ jsx37("span", { "aria-current": current ? "page" : void 0, title: item.label, className: cn(base, current ? "font-medium text-fg" : "text-fg-muted"), children: content }) : /* @__PURE__ */ jsx37(
+      LinkC,
+      {
+        ref: i === hiddenFrom && expanded ? firstHiddenRef : void 0,
+        href: item.href,
+        title: item.label,
+        className: cn(
+          base,
+          "text-fg-muted underline-offset-4 transition-colors hover:text-fg hover:underline",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        ),
+        children: content
+      }
+    ) }, `${item.label}-${i}`);
+  };
+  const shown = [];
+  items.forEach((item, i) => {
+    if (fold && i >= hiddenFrom && i < hiddenTo) {
+      if (i === hiddenFrom) {
+        shown.push(sep);
+        shown.push(
+          /* @__PURE__ */ jsx37("li", { className: "flex items-center", children: /* @__PURE__ */ jsx37(
+            "button",
+            {
+              type: "button",
+              onClick: () => setExpanded(true),
+              "aria-label": `Show ${hiddenTo - hiddenFrom} more`,
+              className: "grid h-6 min-w-6 cursor-pointer place-items-center rounded-control-sm px-1 text-fg-muted hover:bg-secondary-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-ring",
+              children: "\u2026"
+            }
+          ) }, "more")
+        );
+      }
+      return;
+    }
+    if (i > 0) shown.push(sep);
+    shown.push(crumb(item, i));
+  });
+  return /* @__PURE__ */ jsx37("nav", { "aria-label": ariaLabel, className: cn("min-w-0", className), ...props, children: /* @__PURE__ */ jsx37(
+    "ol",
+    {
+      className: cn(
+        "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1",
+        size === "sm" ? "text-sm" : "text-[0.9375rem]"
+      ),
+      children: shown.map((node, i) => /* @__PURE__ */ jsx37(React38.Fragment, { children: node }, i))
+    }
+  ) });
+}
+
+// src/components/navigation/NavigationMenu.tsx
+import * as React39 from "react";
+import { jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
+var keyOf2 = (item, i) => item.id ?? `${item.label}-${i}`;
+function matches2(href, active, nested) {
+  if (!href || !active) return false;
+  if (href === active) return true;
+  return nested && href !== "/" && active.startsWith(href.endsWith("/") ? href : `${href}/`);
+}
+function bestMatch(items, active, nested) {
+  let found;
+  const walk = (list) => list.forEach((it) => {
+    if (matches2(it.href, active, nested) && (!found || (it.href?.length ?? 0) > found.length)) found = it.href;
+    if (it.children) walk(it.children);
+  });
+  walk(items);
+  return found;
+}
+var ExternalIcon = () => /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", "aria-hidden": "true", className: "size-3 shrink-0 opacity-60", children: /* @__PURE__ */ jsx38("path", { d: "M4 2.5h5.5V8M9.5 2.5L3 9" }) });
+var Chevron5 = ({ open, vertical }) => /* @__PURE__ */ jsx38(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.7,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    className: cn(
+      "size-3.5 shrink-0 opacity-70 transition-transform duration-200 motion-reduce:transition-none",
+      open && (vertical ? "rotate-90" : "rotate-180"),
+      vertical && !open && "rtl:-scale-x-100"
+    ),
+    children: /* @__PURE__ */ jsx38("path", { d: vertical ? "M6 3.5l4.5 4.5L6 12.5" : "M3.5 6l4.5 4.5L12.5 6" })
+  }
+);
+function ItemLink2({
+  item,
+  ctx,
+  className,
+  children,
+  ...rest
+}) {
+  const Comp = item.external ? "a" : ctx.linkComponent;
+  const active = !!item.href && item.href === ctx.best;
+  return /* @__PURE__ */ jsx38(
+    Comp,
+    {
+      href: item.href,
+      "aria-current": active ? "page" : void 0,
+      "data-active": active || void 0,
+      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      className,
+      onClick: () => {
+        ctx.close();
+        if (item.href) ctx.onNavigate?.(item.href);
+      },
+      ...rest,
+      children
+    }
+  );
+}
+var focusRing = "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+function NavigationMenu({
+  items,
+  activeHref,
+  matchNested = true,
+  orientation = "horizontal",
+  indicator = "pill",
+  linkComponent = "a",
+  onNavigate,
+  "aria-label": ariaLabel = "Main",
+  className
+}) {
+  const vertical = orientation === "vertical";
+  const best = React39.useMemo(() => bestMatch(items, activeHref, matchNested), [items, activeHref, matchNested]);
+  const [openKey, setOpenKey] = React39.useState(null);
+  const navRef = React39.useRef(null);
+  const hoverTimer = React39.useRef(0);
+  const focusFirstLink = React39.useRef(false);
+  const id = React39.useId();
+  const ctx = { linkComponent, best, onNavigate, close: () => !vertical && setOpenKey(null) };
+  React39.useEffect(() => {
+    if (vertical || openKey === null) return;
+    const onDown = (e) => {
+      if (!navRef.current?.contains(e.target)) setOpenKey(null);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [vertical, openKey]);
+  React39.useEffect(() => () => window.clearTimeout(hoverTimer.current), []);
+  React39.useEffect(() => {
+    if (!focusFirstLink.current || openKey === null) return;
+    focusFirstLink.current = false;
+    document.getElementById(`${id}-${openKey}`)?.querySelector("a,button")?.focus();
+  }, [openKey, id]);
+  React39.useLayoutEffect(() => {
+    if (vertical || openKey === null) return;
+    const panel = document.getElementById(`${id}-${openKey}`);
+    if (!panel) return;
+    const fit = () => {
+      panel.style.translate = "";
+      const r = panel.getBoundingClientRect();
+      const vw = document.documentElement.clientWidth;
+      let shift = 0;
+      if (r.right > vw - 8) shift = vw - 8 - r.right;
+      if (r.left + shift < 8) shift = 8 - r.left;
+      if (shift) panel.style.translate = `${shift}px 0`;
+    };
+    fit();
+    window.addEventListener("resize", fit);
+    return () => window.removeEventListener("resize", fit);
+  }, [vertical, openKey, id]);
+  const triggers = () => Array.from(navRef.current?.querySelectorAll("[data-nav-top]") ?? []);
+  const onTopKeyDown = (e, key, hasPanel) => {
+    if (vertical) return;
+    const list = triggers();
+    const i = list.indexOf(e.currentTarget);
+    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+    const next = rtl ? "ArrowLeft" : "ArrowRight";
+    const prev = rtl ? "ArrowRight" : "ArrowLeft";
+    if (e.key === "Escape" && openKey !== null) {
+      e.preventDefault();
+      setOpenKey(null);
+    } else if (e.key === next || e.key === prev) {
+      e.preventDefault();
+      const target = list[(i + (e.key === next ? 1 : -1) + list.length) % list.length];
+      target?.focus();
+      if (openKey !== null) setOpenKey(null);
+    } else if (e.key === "Home" || e.key === "End") {
+      e.preventDefault();
+      list[e.key === "Home" ? 0 : list.length - 1]?.focus();
+    } else if (e.key === "ArrowDown" && hasPanel) {
+      e.preventDefault();
+      if (openKey === key) {
+        document.getElementById(`${id}-${key}`)?.querySelector("a,button")?.focus();
+      } else {
+        focusFirstLink.current = true;
+        setOpenKey(key);
+      }
+    }
+  };
+  const onPanelKeyDown = (e, key) => {
+    const links = Array.from(e.currentTarget.querySelectorAll("a,button"));
+    const i = links.indexOf(document.activeElement);
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpenKey(null);
+      navRef.current?.querySelector(`[data-nav-key="${CSS.escape(key)}"]`)?.focus();
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      links[(i + (e.key === "ArrowDown" ? 1 : -1) + links.length) % links.length]?.focus();
+    }
+  };
+  const hoverOpen = (key, e) => {
+    if (vertical || e.pointerType !== "mouse") return;
+    window.clearTimeout(hoverTimer.current);
+    hoverTimer.current = window.setTimeout(() => setOpenKey(key), key === null ? 220 : openKey === null ? 120 : 0);
+  };
+  const topItemClass = cn(
+    "relative inline-flex h-9 shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-control px-3 text-sm font-medium text-fg-muted transition-colors duration-100",
+    "hover:text-fg [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+    focusRing,
+    indicator === "pill" ? "hover:bg-secondary-hover data-[active]:bg-secondary-hover data-[active]:text-fg" : "data-[active]:text-fg"
+  );
+  const underline = (on) => indicator === "underline" && on ? /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-3 bottom-0 h-0.5 rounded-full bg-fg" }) : null;
+  const rowClass = cn(
+    "flex min-h-9 w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-control px-3 py-1.5 text-start text-sm text-fg-muted transition-colors duration-100",
+    "hover:bg-secondary-hover hover:text-fg data-[active]:bg-[color:color-mix(in_srgb,var(--color-primary)_10%,transparent)] data-[active]:font-medium data-[active]:text-primary",
+    "[&_svg:not([class*='size-'])]:size-[1.125rem] [&_svg]:shrink-0",
+    focusRing
+  );
+  const panelLink = (child, j) => vertical ? (
+    // In a list, sub-links are quieter rows under their section, like SidebarNav.
+    /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsxs37(ItemLink2, { item: child, ctx, className: cn(rowClass, "min-h-8 py-1"), children: [
+      renderIcon(child.icon),
+      /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: child.label }),
+      child.badge,
+      child.external && /* @__PURE__ */ jsx38(ExternalIcon, {})
+    ] }) }, keyOf2(child, j))
+  ) : /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsxs37(
+    ItemLink2,
+    {
+      item: child,
+      ctx,
+      className: cn(
+        "group/link flex min-w-0 gap-3 rounded-control p-2.5 text-sm transition-colors duration-100 hover:bg-secondary-hover",
+        "data-[active]:bg-[color:color-mix(in_srgb,var(--color-primary)_10%,transparent)]",
+        "[&_svg]:mt-0.5 [&_svg]:size-[1.125rem] [&_svg]:shrink-0 [&_svg]:text-fg-muted data-[active]:[&_svg]:text-primary",
+        focusRing
+      ),
+      children: [
+        renderIcon(child.icon),
+        /* @__PURE__ */ jsxs37("span", { className: "grid min-w-0 gap-0.5", children: [
+          /* @__PURE__ */ jsxs37("span", { className: "flex items-center gap-1.5 font-medium text-fg group-data-[active]/link:text-primary", children: [
+            /* @__PURE__ */ jsx38("span", { className: "truncate", children: child.label }),
+            child.badge,
+            child.external && /* @__PURE__ */ jsx38(ExternalIcon, {})
+          ] }),
+          child.description && /* @__PURE__ */ jsx38("span", { className: "text-[0.8125rem] leading-snug text-fg-muted", children: child.description })
+        ] })
+      ]
+    }
+  ) }, keyOf2(child, j));
+  return /* @__PURE__ */ jsx38(
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": ariaLabel,
+      className: cn(vertical ? "grid" : "flex items-stretch", className),
+      onBlur: (e) => {
+        if (!vertical && !e.currentTarget.contains(e.relatedTarget)) setOpenKey(null);
+      },
+      children: /* @__PURE__ */ jsx38("ul", { role: "list", className: cn(vertical ? "grid gap-0.5" : "flex items-stretch gap-1"), children: items.map((item, i) => {
+        const key = keyOf2(item, i);
+        const hasPanel = !!item.children?.length;
+        const holdsActive = hasPanel && item.children.some((c) => !!c.href && c.href === best);
+        const active = !!item.href && item.href === best;
+        if (vertical) {
+          return /* @__PURE__ */ jsx38(VerticalItem, { item, ctx, rowClass, holdsActive, panelLink }, key);
+        }
+        const open = openKey === key;
+        return /* @__PURE__ */ jsxs37(
+          "li",
+          {
+            className: "relative flex items-center",
+            onPointerEnter: (e) => hasPanel && hoverOpen(key, e),
+            onPointerLeave: (e) => hasPanel && hoverOpen(null, e),
+            children: [
+              hasPanel ? /* @__PURE__ */ jsxs37(
+                "button",
+                {
+                  type: "button",
+                  "data-nav-top": "",
+                  "data-nav-key": key,
+                  "data-active": holdsActive || void 0,
+                  "aria-expanded": open,
+                  "aria-controls": `${id}-${key}`,
+                  onClick: () => setOpenKey(open ? null : key),
+                  onKeyDown: (e) => onTopKeyDown(e, key, true),
+                  className: topItemClass,
+                  children: [
+                    renderIcon(item.icon),
+                    item.label,
+                    item.badge,
+                    /* @__PURE__ */ jsx38(Chevron5, { open, vertical: false })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs37(ItemLink2, { item, ctx, "data-nav-top": "", onKeyDown: (e) => onTopKeyDown(e, key, false), className: topItemClass, children: [
+                renderIcon(item.icon),
+                item.label,
+                item.badge,
+                item.external && /* @__PURE__ */ jsx38(ExternalIcon, {})
+              ] }),
+              underline(active || holdsActive),
+              hasPanel && /* @__PURE__ */ jsx38(
+                "div",
+                {
+                  id: `${id}-${key}`,
+                  hidden: !open,
+                  onKeyDown: (e) => onPanelKeyDown(e, key),
+                  className: cn(
+                    "absolute left-0 top-full z-50 pt-2 rtl:left-auto rtl:right-0",
+                    "animate-[ui-menu-down_140ms_cubic-bezier(0.2,0.9,0.3,1)] motion-reduce:animate-none"
+                  ),
+                  children: /* @__PURE__ */ jsx38(
+                    "ul",
+                    {
+                      role: "list",
+                      className: cn(
+                        "grid w-max max-w-[min(36rem,calc(100vw-2rem))] gap-0.5 rounded-control-lg border border-border bg-surface p-1.5 shadow-[var(--ui-shadow-lg)]",
+                        item.children.length > 4 && item.children.some((c) => c.description) ? "sm:grid-cols-2" : "min-w-56"
+                      ),
+                      children: item.children.map(panelLink)
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          key
+        );
+      }) })
+    }
+  );
+}
+function VerticalItem({
+  item,
+  ctx,
+  rowClass,
+  holdsActive,
+  panelLink
+}) {
+  const [open, setOpen] = React39.useState(holdsActive);
+  const subId = React39.useId();
+  const subRef = React39.useRef(null);
+  React39.useEffect(() => {
+    if (holdsActive) setOpen(true);
+  }, [holdsActive]);
+  React39.useEffect(() => {
+    if (!subRef.current) return;
+    if (open) subRef.current.removeAttribute("inert");
+    else subRef.current.setAttribute("inert", "");
+  }, [open]);
+  if (!item.children?.length) {
+    return /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsxs37(ItemLink2, { item, ctx, className: rowClass, children: [
+      renderIcon(item.icon),
+      /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+      item.badge,
+      item.external && /* @__PURE__ */ jsx38(ExternalIcon, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs37("li", { className: "grid", children: [
+    /* @__PURE__ */ jsxs37(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": subId,
+        onClick: () => setOpen((o) => !o),
+        className: cn(rowClass, holdsActive && !open && "text-fg"),
+        children: [
+          renderIcon(item.icon),
+          /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+          item.badge,
+          /* @__PURE__ */ jsx38(Chevron5, { open, vertical: true })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx38(
+      "div",
+      {
+        ref: subRef,
+        id: subId,
+        className: cn(
+          "grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none",
+          open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+        ),
+        children: /* @__PURE__ */ jsx38("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx38("ul", { role: "list", className: "ms-4 grid gap-0.5 border-s border-border py-1 ps-2", children: item.children.map(panelLink) }) })
+      }
+    )
+  ] });
+}
+
+// src/components/placeholder/Placeholder.tsx
+import * as React40 from "react";
+import { jsx as jsx39, jsxs as jsxs38 } from "react/jsx-runtime";
+var patterns = {
+  stripes: {
+    backgroundImage: "repeating-linear-gradient(-45deg, color-mix(in srgb, currentColor 14%, transparent) 0 1px, transparent 1px 9px)"
+  },
+  dots: {
+    backgroundImage: "radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 1px, transparent 1.5px)",
+    backgroundSize: "12px 12px"
+  },
+  grid: {
+    backgroundImage: "linear-gradient(color-mix(in srgb, currentColor 11%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, currentColor 11%, transparent) 1px, transparent 1px)",
+    backgroundSize: "16px 16px",
+    backgroundPosition: "-1px -1px"
+  },
+  none: {}
+};
+var Placeholder = React40.forwardRef(function Placeholder2({ pattern = "stripes", label, ratio, border = "dashed", className, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs38(
+    "div",
+    {
+      ref,
+      "aria-hidden": label || children ? void 0 : true,
+      className: cn(
+        "relative grid min-h-24 place-items-center overflow-hidden rounded-card text-fg-muted",
+        border === "dashed" && "border border-dashed border-border-strong",
+        border === "solid" && "border border-border",
+        className
+      ),
+      style: { ...patterns[pattern], aspectRatio: ratio, ...style },
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsx39("span", { className: "rounded-control bg-surface px-2.5 py-1 text-[0.8125rem] font-medium text-fg-muted shadow-[0_0_0_6px_var(--color-surface)]", children: label }),
+        children
+      ]
+    }
+  );
+});
 export {
   Accordion,
   AccordionItem,
@@ -10426,6 +11294,7 @@ export {
   BarChart,
   BarList,
   Blockquote,
+  Breadcrumbs,
   Button,
   CalendarHeatmap,
   Card,
@@ -10450,6 +11319,15 @@ export {
   DataTable,
   Divider,
   DonutChart,
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -10499,10 +11377,13 @@ export {
   ModalHeader,
   ModalTitle,
   ModalTrigger,
+  NavigationMenu,
+  OtpInput,
   Pagination,
   Pill,
   PillGroup,
   PillOption,
+  Placeholder,
   ProgressBar,
   ProgressRing,
   Prose,
@@ -10551,6 +11432,7 @@ export {
   TimelineGroup,
   TimelineItem,
   Toaster,
+  Tooltip2 as Tooltip,
   WidgetCard,
   buttonVariants,
   cardVariants,
@@ -10572,6 +11454,7 @@ export {
   toast,
   useAccordion,
   useDelayedLoading,
+  useDrawer,
   useField,
   useFileUploads,
   useModal,