@xex/ui 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,1458 @@
+import {
+  Button,
+  LoadingDots,
+  Spinner,
+  ThemeProvider,
+  useTheme
+} from "./chunk-3M3PAPT3.js";
+
+// src/components/Badge.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variants = {
+  default: { pill: "bg-brand-100 text-brand-700", dot: "bg-brand-500" },
+  success: { pill: "bg-emerald-100 text-emerald-700", dot: "bg-emerald-500" },
+  warning: { pill: "bg-amber-100 text-amber-700", dot: "bg-amber-500" },
+  danger: { pill: "bg-red-100 text-red-700", dot: "bg-red-500" },
+  info: { pill: "bg-sky-100 text-sky-700", dot: "bg-sky-500" },
+  purple: { pill: "bg-purple-100 text-purple-700", dot: "bg-purple-500" },
+  gray: { pill: "bg-gray-100 text-gray-700", dot: "bg-gray-500" }
+};
+function Badge({ variant = "default", dot = false, className, children }) {
+  const v = variants[variant];
+  return /* @__PURE__ */ jsxs("span", { className: clsx("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold", v.pill, className), children: [
+    dot && /* @__PURE__ */ jsx("span", { className: clsx("h-1.5 w-1.5 rounded-full", v.dot), "aria-hidden": "true" }),
+    children
+  ] });
+}
+
+// src/components/Modal.tsx
+import { useEffect as useEffect2, useId, useRef } from "react";
+import clsx2 from "clsx";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+// src/components/keyboard.ts
+import { useEffect } from "react";
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var focusablesIn = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => el.getClientRects().length > 0);
+function radioGroupKeyDown(e) {
+  const keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"];
+  if (!keys.includes(e.key)) return;
+  const radios = Array.from(e.currentTarget.querySelectorAll('[role="radio"]:not([disabled])'));
+  const i = radios.findIndex((r) => r === document.activeElement || r.contains(document.activeElement));
+  if (i < 0) return;
+  e.preventDefault();
+  const last = radios.length - 1;
+  const next = e.key === "Home" ? 0 : e.key === "End" ? last : e.key === "ArrowRight" || e.key === "ArrowDown" ? i === last ? 0 : i + 1 : i === 0 ? last : i - 1;
+  radios[next].focus();
+  radios[next].click();
+}
+function useDialogFocus(open, panelRef, options = {}) {
+  const { initialFocus, lockScroll = true } = options;
+  useEffect(() => {
+    if (!open) return;
+    const opener = document.activeElement;
+    const { overflow, paddingRight } = document.body.style;
+    if (lockScroll) {
+      const scrollbar = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      if (scrollbar > 0) document.body.style.paddingRight = `${scrollbar}px`;
+    }
+    const panel = panelRef.current;
+    if (panel) {
+      const target = panel.querySelector("[data-autofocus]") ?? initialFocus?.() ?? focusablesIn(panel)[0] ?? panel;
+      target.focus();
+    }
+    return () => {
+      if (lockScroll) {
+        document.body.style.overflow = overflow;
+        document.body.style.paddingRight = paddingRight;
+      }
+      if (opener && document.contains(opener)) opener.focus();
+    };
+  }, [open]);
+  return (e) => {
+    const panel = panelRef.current;
+    if (e.key !== "Tab" || !panel) return;
+    const items = focusablesIn(panel);
+    if (items.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = document.activeElement;
+    if (e.shiftKey && (active === first || active === panel)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+}
+
+// src/components/Modal.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var sizes = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl"
+};
+function Modal({ open, onClose, title, footer, size = "md", ariaLabel, children }) {
+  const panelRef = useRef(null);
+  const bodyRef = useRef(null);
+  const titleId = useId();
+  const trapTab = useDialogFocus(open, panelRef, {
+    initialFocus: () => bodyRef.current && focusablesIn(bodyRef.current)[0]
+  });
+  useEffect2(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
+        tabIndex: -1,
+        onKeyDown: trapTab,
+        className: clsx2("relative flex max-h-[90vh] w-full flex-col rounded-2xl bg-white shadow-2xl focus:outline-none", sizes[size]),
+        children: [
+          title && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-gray-100 px-6 py-4", children: [
+            /* @__PURE__ */ jsx2("h2", { id: titleId, className: "text-lg font-semibold text-gray-900", children: title }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "Close",
+                className: "rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+                children: /* @__PURE__ */ jsx2(XMarkIcon, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("div", { ref: bodyRef, className: "flex-1 overflow-y-auto px-6 py-5", children }),
+          footer && /* @__PURE__ */ jsx2("div", { className: "flex justify-end gap-2 border-t border-gray-100 px-6 py-4", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ConfirmDialog.tsx
+import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = "Delete",
+  cancelLabel = "Cancel",
+  loading,
+  onConfirm,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxs3(Modal, { open, onClose: onCancel, size: "lg", ariaLabel: title, children: [
+    /* @__PURE__ */ jsxs3("div", { role: "alert", className: "flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4", children: [
+      /* @__PURE__ */ jsx3(ExclamationTriangleIcon, { className: "mt-0.5 h-6 w-6 shrink-0 text-red-600" }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("p", { className: "font-bold text-red-800", children: title }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-red-700", children: message })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "mt-5 flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx3(Button, { variant: "secondary", onClick: onCancel, "data-autofocus": true, children: cancelLabel }),
+      /* @__PURE__ */ jsx3(Button, { variant: "danger", loading, onClick: onConfirm, children: confirmLabel })
+    ] })
+  ] });
+}
+
+// src/components/Select.tsx
+import { useId as useId2 } from "react";
+import clsx3 from "clsx";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Select({ label, options, placeholder, error, hint, className, id, disabled, ...rest }) {
+  const autoId = useId2();
+  const selectId = id ?? autoId;
+  return /* @__PURE__ */ jsxs4("div", { className, children: [
+    label && /* @__PURE__ */ jsx4("label", { htmlFor: selectId, className: "mb-1 block text-sm font-medium text-gray-700", children: label }),
+    /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs4(
+        "select",
+        {
+          id: selectId,
+          disabled,
+          "aria-invalid": !!error || void 0,
+          className: clsx3(
+            "w-full appearance-none rounded-lg border bg-white px-3 py-2 pr-9 text-sm text-gray-900",
+            "focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+            "disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed",
+            error ? "border-red-400" : "border-gray-300"
+          ),
+          ...rest,
+          children: [
+            placeholder !== void 0 && /* @__PURE__ */ jsx4("option", { value: "", children: placeholder }),
+            options.map((o) => /* @__PURE__ */ jsx4("option", { value: o.value, children: o.label }, o.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" })
+    ] }),
+    error ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-gray-500", children: hint }) : null
+  ] });
+}
+
+// src/components/Input.tsx
+import { useId as useId3 } from "react";
+import clsx4 from "clsx";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Input({ label, error, hint, icon, className, id, ...rest }) {
+  const autoId = useId3();
+  const inputId = id ?? autoId;
+  return /* @__PURE__ */ jsxs5("div", { className, children: [
+    label && /* @__PURE__ */ jsx5("label", { htmlFor: inputId, className: "mb-1 block text-sm font-medium text-gray-700", children: label }),
+    /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+      icon && /* @__PURE__ */ jsx5("span", { className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-gray-400 [&>svg]:h-5 [&>svg]:w-5", children: icon }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          id: inputId,
+          "aria-invalid": !!error || void 0,
+          className: clsx4(
+            "w-full rounded-lg border bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400",
+            "focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400",
+            icon && "pl-9",
+            error ? "border-red-400" : "border-gray-300"
+          ),
+          ...rest
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-gray-500", children: hint }) : null
+  ] });
+}
+
+// src/components/Avatar.tsx
+import clsx5 from "clsx";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var sizes2 = {
+  xs: "h-6 w-6 text-[10px]",
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-12 w-12 text-base",
+  xl: "h-14 w-14 text-lg"
+};
+var AVATAR_COLORS = ["#6366f1", "#0ea5e9", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#14b8a6"];
+function initialsOf(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const first = parts[0][0];
+  const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+  return (first + last).toUpperCase();
+}
+function colorFor(seed) {
+  let h = 0;
+  for (const ch of seed) h = h * 31 + ch.charCodeAt(0) >>> 0;
+  return AVATAR_COLORS[h % AVATAR_COLORS.length];
+}
+function Avatar({ name, size = "md", color, className }) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      title: name,
+      style: { backgroundColor: color ?? colorFor(name) },
+      className: clsx5("inline-flex shrink-0 select-none items-center justify-center rounded-full font-bold text-white", sizes2[size], className),
+      children: initialsOf(name)
+    }
+  );
+}
+
+// src/components/PaginationBar.tsx
+import clsx6 from "clsx";
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function pageWindow(page, totalPages) {
+  if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
+  const out = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(totalPages - 1, page + 1);
+  if (start > 2) out.push(null);
+  for (let p = start; p <= end; p++) out.push(p);
+  if (end < totalPages - 1) out.push(null);
+  out.push(totalPages);
+  return out;
+}
+var navBtn = "rounded-md px-2.5 py-1 text-sm text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400 disabled:opacity-40 disabled:hover:bg-transparent";
+function PaginationBar({
+  page,
+  totalPages,
+  total,
+  pageSize,
+  onPageChange,
+  pageSizeOptions,
+  onPageSizeChange,
+  right,
+  placement
+}) {
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: clsx6(
+        "flex flex-wrap items-center justify-between gap-3 border-gray-100 px-4 py-2.5",
+        placement === "above" ? "border-b" : placement === "below" ? "border-t" : "border-y"
+      ),
+      children: [
+        /* @__PURE__ */ jsx7("div", { children: totalPages > 1 && /* @__PURE__ */ jsxs6("nav", { "aria-label": placement ? `Pagination, ${placement} table` : "Pagination", className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx7("button", { type: "button", className: navBtn, disabled: page <= 1, onClick: () => onPageChange(page - 1), children: "\xAB Prev" }),
+          pageWindow(page, totalPages).map(
+            (p, i) => p === null ? /* @__PURE__ */ jsx7("span", { className: "px-1 text-gray-400", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "aria-current": p === page ? "page" : void 0,
+                onClick: () => onPageChange(p),
+                className: clsx6(
+                  "min-w-[2rem] rounded-md px-2 py-1 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+                  p === page ? "bg-brand-600 font-semibold text-white" : "text-gray-600 hover:bg-gray-100"
+                ),
+                children: p
+              },
+              p
+            )
+          ),
+          /* @__PURE__ */ jsx7("button", { type: "button", className: navBtn, disabled: page >= totalPages, onClick: () => onPageChange(page + 1), children: "Next \xBB" })
+        ] }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "ml-auto flex items-center gap-3 text-sm text-gray-500", children: [
+          right && /* @__PURE__ */ jsxs6(Fragment, { children: [
+            right,
+            /* @__PURE__ */ jsx7("span", { className: "text-gray-300", "aria-hidden": "true", children: "|" })
+          ] }),
+          pageSizeOptions && onPageSizeChange && /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", children: [
+            "Rows per page",
+            /* @__PURE__ */ jsx7(
+              "select",
+              {
+                value: pageSize,
+                onChange: (e) => onPageSizeChange(Number(e.target.value)),
+                className: "rounded-md border border-gray-300 bg-white px-1.5 py-1 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+                children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx7("option", { value: n, children: n }, n))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs6("span", { className: "tabular-nums", children: [
+            from,
+            "\u2013",
+            to,
+            " of ",
+            total
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/SegmentedControl.tsx
+import clsx7 from "clsx";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SegmentedControl({ options, value, onChange, label, className }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      onKeyDown: radioGroupKeyDown,
+      className: clsx7("inline-flex rounded-lg bg-gray-100 p-0.5", className),
+      children: options.map((o) => {
+        const selected = o.value === value;
+        return /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            tabIndex: selected ? 0 : -1,
+            onClick: () => onChange(o.value),
+            className: clsx7(
+              "rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+              selected ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-800"
+            ),
+            children: o.label
+          },
+          o.value
+        );
+      })
+    }
+  );
+}
+
+// src/components/DataTable.tsx
+import { useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState2 } from "react";
+import clsx9 from "clsx";
+import { ArrowsRightLeftIcon, ArrowsUpDownIcon, ChevronDownIcon as ChevronDownIcon3, ChevronUpDownIcon, ChevronUpIcon } from "@heroicons/react/16/solid";
+import { MagnifyingGlassIcon, XMarkIcon as XMarkIcon2 } from "@heroicons/react/24/outline";
+
+// src/components/MultiSelect.tsx
+import { useEffect as useEffect3, useId as useId4, useRef as useRef2, useState } from "react";
+import clsx8 from "clsx";
+import { ChevronDownIcon as ChevronDownIcon2 } from "@heroicons/react/20/solid";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function MultiSelect({ options, value, onChange, label, className }) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const panelId = useId4();
+  useEffect3(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const labels = options.filter((o) => value.includes(o.value)).map((o) => o.label);
+  const summary = labels.length === 0 ? label : labels.length <= 2 ? labels.join(", ") : `${labels.length} selected`;
+  const toggle = (v) => onChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: rootRef,
+      className: clsx8("relative", className),
+      onBlur: (e) => {
+        if (open && e.relatedTarget && !rootRef.current?.contains(e.relatedTarget)) setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            "aria-haspopup": "true",
+            "aria-expanded": open,
+            "aria-controls": open ? panelId : void 0,
+            "aria-label": labels.length ? `${label}: ${labels.join(", ")}` : label,
+            onClick: () => setOpen((o) => !o),
+            className: clsx8(
+              "flex w-full items-center justify-between gap-2 rounded-lg border bg-white px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+              value.length ? "border-brand-500 text-gray-900" : "border-gray-300 text-gray-500"
+            ),
+            children: [
+              /* @__PURE__ */ jsx9("span", { className: "truncate", children: summary }),
+              /* @__PURE__ */ jsx9(ChevronDownIcon2, { className: "h-5 w-5 shrink-0 text-gray-400" })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            id: panelId,
+            role: "group",
+            "aria-label": label,
+            onMouseDown: (e) => {
+              if (!(e.target instanceof HTMLInputElement)) e.preventDefault();
+            },
+            className: "absolute left-0 z-20 mt-1 max-h-64 min-w-full overflow-y-auto rounded-xl border border-gray-200 bg-white p-1 shadow-xl",
+            children: [
+              options.map((o) => /* @__PURE__ */ jsxs7("label", { className: "flex cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-gray-800 hover:bg-gray-50", children: [
+                /* @__PURE__ */ jsx9("input", { type: "checkbox", className: "h-4 w-4 rounded", checked: value.includes(o.value), onChange: () => toggle(o.value) }),
+                /* @__PURE__ */ jsx9("span", { className: "flex-1 whitespace-nowrap", children: o.label }),
+                o.count !== void 0 && /* @__PURE__ */ jsx9("span", { className: "text-xs tabular-nums text-gray-400", children: o.count })
+              ] }, o.value)),
+              value.length > 0 && /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onChange([]),
+                  className: "mt-1 w-full rounded-md border-t border-gray-100 px-2.5 py-1.5 text-left text-xs font-medium text-brand-700 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+                  children: "Clear selection"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/DataTable.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var MIN_COL_PX = 64;
+var MIN_TABLE_COL_PX = 96;
+function applyResize(base, i, delta, tableWidth) {
+  const n = i + 1;
+  if (n >= base.length) return base;
+  const min = MIN_COL_PX / tableWidth;
+  const d = Math.min(Math.max(delta, min - base[i]), base[n] - min);
+  const next = [...base];
+  next[i] = base[i] + d;
+  next[n] = base[n] - d;
+  return next;
+}
+var collator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
+function DataTable({
+  columns,
+  rows,
+  rowKey,
+  label,
+  searchable = true,
+  searchPlaceholder = "Search\u2026",
+  pageSizeOptions = [5, 10, 25],
+  defaultPageSize = pageSizeOptions[0],
+  initialSort,
+  emptyMessage = "No rows match your filters."
+}) {
+  const [query, setQuery] = useState2("");
+  const [filters, setFilters] = useState2({});
+  const [sort, setSort] = useState2(initialSort ?? null);
+  const [page, setPage] = useState2(1);
+  const [pageSize, setPageSize] = useState2(defaultPageSize);
+  const [dense, setDense] = useState2(false);
+  const [custom, setCustom] = useState2(null);
+  const tableRef = useRef3(null);
+  const wrapperRef = useRef3(null);
+  const drag = useRef3(null);
+  const [grow, setGrow] = useState2(0);
+  const [overflowing, setOverflowing] = useState2(false);
+  const [resizing, setResizing] = useState2(null);
+  const weights = columns.map((c) => c.width ?? 1);
+  const weightSum = weights.reduce((a, b) => a + b, 0);
+  const defaults2 = weights.map((w) => w / weightSum);
+  const widths = custom && custom.length === columns.length ? custom : defaults2;
+  const customized = custom !== null && custom.length === columns.length || grow > 0;
+  useEffect4(() => {
+    const wrapper = wrapperRef.current;
+    const table = tableRef.current;
+    if (!wrapper || !table) return;
+    const check = () => setOverflowing(table.offsetWidth > wrapper.clientWidth + 1);
+    check();
+    const ro = new ResizeObserver(check);
+    ro.observe(wrapper);
+    ro.observe(table);
+    return () => ro.disconnect();
+  }, []);
+  const growLast = (base, tableWidth, startGrow, delta) => {
+    const last = base.length - 1;
+    const px = base.map((f) => f * tableWidth);
+    const d = Math.max(delta, MIN_COL_PX - px[last], -startGrow);
+    px[last] += d;
+    const total = tableWidth + d;
+    setCustom(px.map((p) => p / total));
+    setGrow(startGrow + d);
+  };
+  useEffect4(() => {
+    if (resizing === null) return;
+    const { cursor, userSelect } = document.body.style;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.cursor = cursor;
+      document.body.style.userSelect = userSelect;
+    };
+  }, [resizing]);
+  const onHandleDown = (e, i) => {
+    if (e.button !== 0 || !tableRef.current) return;
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    drag.current = { i, startX: e.clientX, base: widths, tableWidth: tableRef.current.getBoundingClientRect().width, grow };
+    setResizing(i);
+  };
+  const onHandleMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    if (d.i === d.base.length - 1) growLast(d.base, d.tableWidth, d.grow, e.clientX - d.startX);
+    else setCustom(applyResize(d.base, d.i, (e.clientX - d.startX) / d.tableWidth, d.tableWidth));
+  };
+  const onHandleUp = (e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+    drag.current = null;
+    setResizing(null);
+  };
+  const onHandleKey = (e, i) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    if (!tableRef.current) return;
+    e.preventDefault();
+    const tableWidth = tableRef.current.getBoundingClientRect().width;
+    const px = (e.shiftKey ? 40 : 10) * (e.key === "ArrowRight" ? 1 : -1);
+    if (i === columns.length - 1) growLast(widths, tableWidth, grow, px);
+    else setCustom(applyResize(widths, i, px / tableWidth, tableWidth));
+  };
+  const resetWidths = () => {
+    setCustom(null);
+    setGrow(0);
+  };
+  const filterColumns = columns.filter((c) => c.filter);
+  const filterActive = query.trim() !== "" || Object.values(filters).some((v) => v.length > 0);
+  const filterOptions = useMemo(
+    () => Object.fromEntries(
+      filterColumns.map((c) => [
+        c.id,
+        [...rows.reduce((m, r) => m.set(String(c.accessor(r)), (m.get(String(c.accessor(r))) ?? 0) + 1), /* @__PURE__ */ new Map())].sort((a, b) => collator.compare(a[0], b[0])).map(([v, count]) => ({ value: v, label: v, count }))
+      ])
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rows, columns]
+  );
+  const visible = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    let out = rows.filter((row) => {
+      for (const c of filterColumns) {
+        const want = filters[c.id];
+        if (want?.length && !want.includes(String(c.accessor(row)))) return false;
+      }
+      return !q || columns.some((c) => String(c.accessor(row)).toLowerCase().includes(q));
+    });
+    const col = sort && columns.find((c) => c.id === sort.columnId);
+    if (col && sort) {
+      const dir = sort.direction === "asc" ? 1 : -1;
+      out = [...out].sort((a, b) => {
+        const x = col.accessor(a);
+        const y = col.accessor(b);
+        return (typeof x === "number" && typeof y === "number" ? x - y : collator.compare(String(x), String(y))) * dir;
+      });
+    }
+    return out;
+  }, [rows, columns, query, filters, sort]);
+  const totalPages = Math.max(1, Math.ceil(visible.length / pageSize));
+  const current = Math.min(page, totalPages);
+  const pageRows = visible.slice((current - 1) * pageSize, current * pageSize);
+  const reset = () => setPage(1);
+  const toggleSort = (id) => {
+    reset();
+    setSort((s) => s?.columnId !== id ? { columnId: id, direction: "asc" } : s.direction === "asc" ? { columnId: id, direction: "desc" } : null);
+  };
+  const clearAll = () => {
+    setQuery("");
+    setFilters({});
+    reset();
+  };
+  const sortColumn = sort && columns.find((c) => c.id === sort.columnId);
+  const bar = (placement) => /* @__PURE__ */ jsx10(
+    PaginationBar,
+    {
+      placement,
+      page: current,
+      totalPages,
+      total: visible.length,
+      pageSize,
+      onPageChange: setPage,
+      pageSizeOptions,
+      onPageSizeChange: (n) => {
+        setPageSize(n);
+        reset();
+      },
+      right: /* @__PURE__ */ jsx10(
+        SegmentedControl,
+        {
+          label: "Row density",
+          value: dense ? "compact" : "comfortable",
+          onChange: (v) => setDense(v === "compact"),
+          options: [
+            { value: "comfortable", label: "Comfortable" },
+            { value: "compact", label: "Compact" }
+          ]
+        }
+      )
+    }
+  );
+  const pad = dense ? "px-4 py-1.5" : "px-4 py-3";
+  return /* @__PURE__ */ jsxs8("div", { className: "rounded-xl border border-gray-200", children: [
+    (searchable || filterColumns.length > 0 || sort || customized) && /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-end gap-3 rounded-t-xl border-b border-gray-100 p-3", children: [
+      searchable && /* @__PURE__ */ jsx10(
+        Input,
+        {
+          className: "w-full sm:w-64",
+          "aria-label": `Search ${label}`,
+          placeholder: searchPlaceholder,
+          icon: /* @__PURE__ */ jsx10(MagnifyingGlassIcon, {}),
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            reset();
+          }
+        }
+      ),
+      filterColumns.map((c) => /* @__PURE__ */ jsx10(
+        MultiSelect,
+        {
+          className: "w-full sm:w-44",
+          label: c.filterLabel ?? `All ${c.header.toLowerCase()}`,
+          value: filters[c.id] ?? [],
+          onChange: (v) => {
+            setFilters((f) => ({ ...f, [c.id]: v }));
+            reset();
+          },
+          options: filterOptions[c.id]
+        },
+        c.id
+      )),
+      filterActive && /* @__PURE__ */ jsx10(Button, { variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsx10(XMarkIcon2, { className: "h-4 w-4" }), onClick: clearAll, children: "Clear filters" }),
+      sortColumn && sort && /* @__PURE__ */ jsxs8(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: /* @__PURE__ */ jsx10(ArrowsUpDownIcon, { className: "h-4 w-4" }),
+          onClick: () => {
+            setSort(null);
+            reset();
+          },
+          title: "Remove sorting (a third click on the sorted header does the same)",
+          children: [
+            "Sorted by ",
+            sortColumn.header,
+            " (",
+            sort.direction === "asc" ? "A\u2192Z" : "Z\u2192A",
+            ") \xB7 Reset"
+          ]
+        }
+      ),
+      customized && /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: /* @__PURE__ */ jsx10(ArrowsRightLeftIcon, { className: "h-4 w-4" }),
+          onClick: resetWidths,
+          title: "Restore the default column widths (double-clicking a column edge does the same)",
+          children: "Reset column widths"
+        }
+      ),
+      /* @__PURE__ */ jsx10("p", { role: "status", className: "ml-auto self-center text-sm text-gray-500", children: visible.length === rows.length ? `${rows.length} rows` : `${visible.length} of ${rows.length} rows` })
+    ] }),
+    bar("above"),
+    /* @__PURE__ */ jsx10("div", { ref: wrapperRef, className: "overflow-x-auto", children: /* @__PURE__ */ jsxs8(
+      "table",
+      {
+        ref: tableRef,
+        "aria-label": label,
+        className: "w-full table-fixed text-left text-sm",
+        style: { minWidth: columns.length * MIN_TABLE_COL_PX, ...grow > 0 && { width: `calc(max(100%, ${columns.length * MIN_TABLE_COL_PX}px) + ${grow}px)` } },
+        children: [
+          /* @__PURE__ */ jsx10("colgroup", { children: columns.map((c, i) => /* @__PURE__ */ jsx10("col", { style: { width: `${widths[i] * 100}%` } }, c.id)) }),
+          /* @__PURE__ */ jsx10("thead", { className: "bg-gray-50 text-xs uppercase tracking-wide text-gray-500", children: /* @__PURE__ */ jsx10("tr", { children: columns.map((c, i) => {
+            const sorted = sort?.columnId === c.id ? sort.direction : null;
+            const sortable = c.sortable !== false;
+            const Icon = sorted === "asc" ? ChevronUpIcon : sorted === "desc" ? ChevronDownIcon3 : ChevronUpDownIcon;
+            return /* @__PURE__ */ jsxs8(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": sortable ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+                className: clsx9("relative px-4 py-2.5 font-semibold", c.align === "right" && "text-right"),
+                children: [
+                  sortable ? /* @__PURE__ */ jsxs8(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleSort(c.id),
+                      className: clsx9(
+                        "-mx-1.5 inline-flex max-w-[calc(100%+0.75rem)] items-center gap-1 rounded px-1.5 py-0.5 uppercase tracking-wide hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+                        sorted ? "text-gray-900" : "text-gray-500"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx10("span", { className: "truncate", children: c.header }),
+                        /* @__PURE__ */ jsx10(Icon, { className: clsx9("h-4 w-4 shrink-0", sorted ? "text-brand-600" : "text-gray-400"), "aria-hidden": "true" })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx10("span", { className: "block truncate", children: c.header }),
+                  columns.length > 1 && (i < columns.length - 1 || overflowing || grow > 0) && /* @__PURE__ */ jsx10(
+                    "span",
+                    {
+                      role: "separator",
+                      "aria-orientation": "vertical",
+                      "aria-label": i === columns.length - 1 ? `Resize ${c.header} column (widens the table)` : `Resize ${c.header} column`,
+                      "aria-valuemin": 0,
+                      "aria-valuemax": 100,
+                      "aria-valuenow": Math.round(widths[i] * 100),
+                      tabIndex: 0,
+                      title: "Drag to resize \xB7 double-click to reset",
+                      onPointerDown: (e) => onHandleDown(e, i),
+                      onPointerMove: onHandleMove,
+                      onPointerUp: onHandleUp,
+                      onPointerCancel: onHandleUp,
+                      onKeyDown: (e) => onHandleKey(e, i),
+                      onDoubleClick: resetWidths,
+                      className: clsx9(
+                        "group absolute inset-y-1 z-10 flex w-3 cursor-col-resize touch-none select-none justify-center rounded",
+                        i === columns.length - 1 ? "right-0" : "-right-1.5"
+                      ),
+                      children: /* @__PURE__ */ jsx10(
+                        "span",
+                        {
+                          className: clsx9(
+                            "my-auto h-5 w-0.5 rounded-full transition-colors group-hover:bg-brand-500 group-focus-visible:bg-brand-500",
+                            resizing === i ? "bg-brand-500" : "bg-gray-300"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              c.id
+            );
+          }) }) }),
+          /* @__PURE__ */ jsxs8("tbody", { children: [
+            pageRows.map((row) => /* @__PURE__ */ jsx10("tr", { className: "border-t border-gray-100 hover:bg-gray-50", children: columns.map((c) => /* @__PURE__ */ jsx10("td", { className: clsx9(pad, "overflow-hidden text-gray-600", c.align === "right" && "text-right"), children: c.cell ? c.cell(row, { dense }) : /* @__PURE__ */ jsx10("span", { className: "block truncate", children: String(c.accessor(row)) }) }, c.id)) }, rowKey(row))),
+            pageRows.length === 0 && /* @__PURE__ */ jsx10("tr", { className: "border-t border-gray-100", children: /* @__PURE__ */ jsxs8("td", { colSpan: columns.length, className: "px-4 py-10 text-center text-sm text-gray-500", children: [
+              emptyMessage,
+              " ",
+              filterActive && /* @__PURE__ */ jsx10("button", { type: "button", onClick: clearAll, className: "font-medium text-brand-700 underline", children: "Clear filters" })
+            ] }) })
+          ] })
+        ]
+      }
+    ) }),
+    bar("below")
+  ] });
+}
+
+// src/components/Progress.tsx
+import clsx10 from "clsx";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var fills = {
+  brand: "bg-brand-600",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-red-500"
+};
+var strokes = {
+  brand: "text-brand-600",
+  success: "text-emerald-500",
+  warning: "text-amber-500",
+  danger: "text-red-500"
+};
+var heights = { sm: "h-1", md: "h-2", lg: "h-3" };
+function ProgressBar({ value, label, showLabel = false, tone = "brand", size = "md", className }) {
+  const determinate = typeof value === "number";
+  const pct = determinate ? Math.min(100, Math.max(0, value)) : 0;
+  return /* @__PURE__ */ jsxs9("div", { className, children: [
+    showLabel && /* @__PURE__ */ jsxs9("div", { className: "mb-1 flex justify-between text-xs text-gray-600", children: [
+      /* @__PURE__ */ jsx11("span", { children: label }),
+      determinate && /* @__PURE__ */ jsxs9("span", { className: "tabular-nums", children: [
+        Math.round(pct),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": determinate ? Math.round(pct) : void 0,
+        className: clsx10("relative w-full overflow-hidden rounded-full bg-gray-200", heights[size]),
+        children: determinate ? /* @__PURE__ */ jsx11("div", { className: clsx10("h-full rounded-full transition-[width] duration-300 ease-out", fills[tone]), style: { width: `${pct}%` } }) : /* @__PURE__ */ jsx11("div", { className: clsx10("xex-indeterminate absolute inset-y-0 w-2/5 rounded-full", fills[tone]) })
+      }
+    )
+  ] });
+}
+function ProgressRing({ value, label, size = 48, tone = "brand", showValue = true }) {
+  const determinate = typeof value === "number";
+  const pct = determinate ? Math.min(100, Math.max(0, value)) : 25;
+  const stroke = Math.max(3, Math.round(size / 10));
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": determinate ? Math.round(pct) : void 0,
+      className: "relative inline-flex items-center justify-center",
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsxs9("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: clsx10("-rotate-90", !determinate && "animate-spin"), "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx11("circle", { cx: size / 2, cy: size / 2, r, fill: "none", strokeWidth: stroke, className: "xex-ring-track" }),
+          /* @__PURE__ */ jsx11(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              stroke: "currentColor",
+              className: clsx10(strokes[tone], determinate && "transition-[stroke-dashoffset] duration-300 ease-out"),
+              strokeDasharray: c,
+              strokeDashoffset: c * (1 - pct / 100)
+            }
+          )
+        ] }),
+        determinate && showValue && size >= 40 && /* @__PURE__ */ jsxs9("span", { className: "absolute text-xs font-semibold tabular-nums text-gray-700", children: [
+          Math.round(pct),
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Skeleton.tsx
+import clsx11 from "clsx";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Skeleton({ shape = "rect", className }) {
+  return /* @__PURE__ */ jsx12(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: clsx11(
+        "block animate-pulse bg-gray-200 motion-reduce:animate-none",
+        shape === "circle" ? "rounded-full" : shape === "text" ? "h-3 w-full rounded" : "rounded-lg",
+        className
+      )
+    }
+  );
+}
+function SkeletonText({ lines = 3, className }) {
+  return /* @__PURE__ */ jsx12("div", { className: clsx11("space-y-2", className), "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx12(Skeleton, { shape: "text", className: i === lines - 1 && lines > 1 ? "w-2/3" : void 0 }, i)) });
+}
+
+// src/components/LoadingOverlay.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function LoadingOverlay({ loading, label = "Loading\u2026", children, className }) {
+  return /* @__PURE__ */ jsxs10("div", { className: className ? `relative ${className}` : "relative", "aria-busy": loading || void 0, children: [
+    /* @__PURE__ */ jsx13("div", { inert: loading || void 0, children }),
+    loading && /* @__PURE__ */ jsxs10("div", { className: "xex-overlay absolute inset-0 z-10 flex items-center justify-center gap-3 rounded-[inherit] backdrop-blur-[1px]", children: [
+      /* @__PURE__ */ jsx13(Spinner, { size: "lg", label, className: "text-brand-600" }),
+      /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium text-gray-700", "aria-hidden": "true", children: label })
+    ] })
+  ] });
+}
+
+// src/components/FetchStatus.tsx
+import { CheckCircleIcon, ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import { CloudIcon } from "@heroicons/react/24/outline";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var defaults = {
+  idle: "Not loaded yet",
+  loading: "Fetching",
+  success: "Up to date",
+  error: "Couldn\u2019t load data"
+};
+function FetchStatus({ state, messages, onRetry }) {
+  const text = messages?.[state] ?? defaults[state];
+  return /* @__PURE__ */ jsxs11("p", { role: "status", "aria-live": "polite", className: "flex items-center gap-2 text-sm", children: [
+    state === "idle" && /* @__PURE__ */ jsx14(CloudIcon, { className: "h-5 w-5 text-gray-400" }),
+    state === "loading" && /* @__PURE__ */ jsx14(Spinner, { size: "md", decorative: true, className: "text-brand-600" }),
+    state === "success" && /* @__PURE__ */ jsx14(CheckCircleIcon, { className: "h-5 w-5 text-emerald-500" }),
+    state === "error" && /* @__PURE__ */ jsx14(ExclamationCircleIcon, { className: "h-5 w-5 text-red-500" }),
+    /* @__PURE__ */ jsx14("span", { className: state === "error" ? "text-red-700" : state === "idle" ? "text-gray-500" : "text-gray-700", children: text }),
+    state === "loading" && /* @__PURE__ */ jsx14(LoadingDots, { className: "text-gray-400" }),
+    state === "error" && onRetry && /* @__PURE__ */ jsx14(Button, { size: "xs", variant: "outline", onClick: onRetry, children: "Retry" })
+  ] });
+}
+
+// src/components/Tabs.tsx
+import { useCallback, useId as useId5, useLayoutEffect, useRef as useRef4, useState as useState3 } from "react";
+import clsx12 from "clsx";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var sizes3 = {
+  sm: "px-3 py-1.5 text-xs gap-1.5",
+  md: "px-4 py-2.5 text-sm gap-2"
+};
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  variant = "underline",
+  size = "md",
+  activation = "auto",
+  keepMounted = false,
+  fullWidth = false,
+  label,
+  className
+}) {
+  const uid = useId5();
+  const firstEnabled = items.find((i) => !i.disabled)?.id ?? items[0]?.id;
+  const [internal, setInternal] = useState3(defaultValue ?? firstEnabled);
+  const selected = value ?? internal;
+  const select = (id) => {
+    if (value === void 0) setInternal(id);
+    onChange?.(id);
+  };
+  const tabRefs = useRef4({});
+  const trackRef = useRef4(null);
+  const [line, setLine] = useState3(null);
+  const tabId = (id) => `${uid}-tab-${id}`;
+  const panelId = (id) => `${uid}-panel-${id}`;
+  const measure = useCallback(() => {
+    const el = tabRefs.current[selected];
+    if (el) setLine({ left: el.offsetLeft, width: el.offsetWidth });
+  }, [selected]);
+  useLayoutEffect(() => {
+    measure();
+    const track = trackRef.current;
+    if (!track) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(track);
+    return () => ro.disconnect();
+  }, [measure, items.length]);
+  const onKeyDown = (e) => {
+    const enabled = items.filter((i) => !i.disabled);
+    if (enabled.length === 0) return;
+    const current = enabled.findIndex((i) => tabRefs.current[i.id] === document.activeElement);
+    let next = -1;
+    if (e.key === "ArrowRight") next = current < 0 ? 0 : (current + 1) % enabled.length;
+    else if (e.key === "ArrowLeft") next = current < 0 ? enabled.length - 1 : (current - 1 + enabled.length) % enabled.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = enabled.length - 1;
+    if (next < 0) return;
+    e.preventDefault();
+    const target = enabled[next];
+    tabRefs.current[target.id]?.focus();
+    tabRefs.current[target.id]?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    if (activation === "auto") select(target.id);
+  };
+  return /* @__PURE__ */ jsxs12("div", { className, children: [
+    /* @__PURE__ */ jsx15("div", { className: clsx12(variant === "underline" && "border-b border-gray-200"), children: /* @__PURE__ */ jsx15("div", { className: "-m-1.5 scroll-px-2 overflow-x-auto p-1.5", children: /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref: trackRef,
+        role: "tablist",
+        "aria-label": label,
+        onKeyDown,
+        className: clsx12("relative flex", variant === "pills" && "gap-1", fullWidth ? "w-full" : "w-max min-w-full"),
+        children: [
+          items.map((item) => {
+            const isSelected = item.id === selected;
+            return /* @__PURE__ */ jsxs12(
+              "button",
+              {
+                ref: (node) => {
+                  tabRefs.current[item.id] = node;
+                },
+                id: tabId(item.id),
+                type: "button",
+                role: "tab",
+                "aria-selected": isSelected,
+                "aria-controls": item.content !== void 0 && (isSelected || keepMounted) ? panelId(item.id) : void 0,
+                tabIndex: isSelected ? 0 : -1,
+                disabled: item.disabled,
+                onClick: () => select(item.id),
+                className: clsx12(
+                  "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400 disabled:cursor-not-allowed disabled:opacity-50",
+                  sizes3[size],
+                  fullWidth && "flex-1",
+                  variant === "underline" ? clsx12("rounded-t-lg", isSelected ? "text-brand-700" : "text-gray-500 hover:text-gray-800") : clsx12("rounded-full", isSelected ? "bg-brand-600 text-white" : "text-gray-600 hover:bg-gray-100")
+                ),
+                children: [
+                  item.icon,
+                  item.label,
+                  item.badge !== void 0 && /* @__PURE__ */ jsx15(
+                    "span",
+                    {
+                      className: clsx12(
+                        "rounded-full px-1.5 py-px text-[11px] font-semibold tabular-nums",
+                        isSelected ? variant === "pills" ? "bg-white/25 text-white" : "bg-brand-100 text-brand-700" : "bg-gray-100 text-gray-600"
+                      ),
+                      children: item.badge
+                    }
+                  )
+                ]
+              },
+              item.id
+            );
+          }),
+          variant === "underline" && line && /* @__PURE__ */ jsx15(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute -bottom-px left-0 h-0.5 rounded-full bg-brand-600 transition-[transform,width] duration-200 ease-out motion-reduce:transition-none",
+              style: { width: line.width, transform: `translateX(${line.left}px)` }
+            }
+          )
+        ]
+      }
+    ) }) }),
+    items.map((item) => {
+      const isSelected = item.id === selected;
+      if (item.content === void 0 || !isSelected && !keepMounted) return null;
+      return /* @__PURE__ */ jsx15("div", { id: panelId(item.id), role: "tabpanel", "aria-labelledby": tabId(item.id), hidden: !isSelected, tabIndex: 0, className: "pt-4", children: item.content }, item.id);
+    })
+  ] });
+}
+
+// src/layout/Header.tsx
+import { Bars3Icon } from "@heroicons/react/24/outline";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function Header({ title, subtitle, actions, onMenu }) {
+  return /* @__PURE__ */ jsxs13("header", { className: "sticky top-0 z-30 flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 bg-white px-4 py-4 sm:px-6", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 items-center gap-3", children: [
+      onMenu && /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          onClick: onMenu,
+          "aria-label": "Open navigation",
+          className: "rounded-lg p-1.5 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400 lg:hidden",
+          children: /* @__PURE__ */ jsx16(Bars3Icon, { className: "h-6 w-6" })
+        }
+      ),
+      /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx16("h1", { className: "truncate text-xl font-bold text-gray-900", children: title }),
+        subtitle && /* @__PURE__ */ jsx16("p", { className: "text-sm text-gray-500", children: subtitle })
+      ] })
+    ] }),
+    actions && /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-2", children: actions })
+  ] });
+}
+
+// src/layout/PageGuide.tsx
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState4 } from "react";
+import clsx13 from "clsx";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+var OFFSET = 96;
+var reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function anchors(ids) {
+  const max = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+  const ys = ids.map((id) => {
+    const el = document.getElementById(id);
+    return el ? Math.max(0, el.getBoundingClientRect().top + window.scrollY - OFFSET) : 0;
+  });
+  for (let i = 1; i < ys.length; i++) ys[i] = Math.max(ys[i], ys[i - 1]);
+  const k = ys.findIndex((y) => y >= max - 1);
+  if (k >= 0) {
+    const base = k > 0 ? ys[k - 1] : 0;
+    for (let i = k; i < ys.length; i++) ys[i] = base + (max - base) * (i - k + 1) / (ys.length - k);
+  }
+  return ys;
+}
+function posAt(ys, y) {
+  const n = ys.length;
+  if (n === 0 || y <= ys[0]) return 0;
+  let i = n - 1;
+  while (i > 0 && ys[i] > y) i--;
+  if (i >= n - 1) return n - 1;
+  const span = ys[i + 1] - ys[i];
+  return span > 0 ? i + (y - ys[i]) / span : i;
+}
+function scrollYFor(ys, pos) {
+  const i = Math.min(Math.floor(pos), ys.length - 1);
+  if (i >= ys.length - 1) return ys[ys.length - 1];
+  return ys[i] + (ys[i + 1] - ys[i]) * (pos - i);
+}
+function PageGuide({ sections }) {
+  const ids = sections.map((s) => s.id);
+  const idsKey = ids.join("|");
+  const scrollerRef = useRef5(null);
+  const trackRef = useRef5(null);
+  const markerRef = useRef5(null);
+  const itemRefs = useRef5([]);
+  const [active, setActive] = useState4(0);
+  const [dragging, setDragging] = useState4(false);
+  const frame = useRef5(0);
+  const update = useCallback2(() => {
+    const items = itemRefs.current.slice(0, idsKey.split("|").length);
+    const marker = markerRef.current;
+    const scroller = scrollerRef.current;
+    if (!marker || !scroller || items.length === 0 || items.some((el) => !el)) return;
+    const pos = posAt(anchors(idsKey.split("|")), window.scrollY);
+    const i = Math.min(Math.floor(pos), items.length - 1);
+    const next = items[Math.min(i + 1, items.length - 1)];
+    const top = items[i].offsetTop + (next.offsetTop - items[i].offsetTop) * (pos - i);
+    const height = items[i].offsetHeight;
+    marker.style.height = `${height}px`;
+    marker.style.transform = `translateY(${top}px)`;
+    if (top < scroller.scrollTop + 8) scroller.scrollTop = Math.max(0, top - 8);
+    else if (top + height > scroller.scrollTop + scroller.clientHeight - 8) scroller.scrollTop = top + height - scroller.clientHeight + 8;
+    setActive(Math.round(pos));
+  }, [idsKey]);
+  useLayoutEffect2(() => {
+    const schedule = () => {
+      cancelAnimationFrame(frame.current);
+      frame.current = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    const ro = new ResizeObserver(schedule);
+    ro.observe(document.body);
+    return () => {
+      cancelAnimationFrame(frame.current);
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      ro.disconnect();
+    };
+  }, [update]);
+  const goTo = (index, focusTarget = false) => {
+    const ys = anchors(ids);
+    const i = Math.min(Math.max(index, 0), ids.length - 1);
+    window.scrollTo({ top: ys[i], behavior: reducedMotion() ? "auto" : "smooth" });
+    if (focusTarget) document.getElementById(ids[i])?.focus({ preventScroll: true });
+  };
+  const scrubTo = (clientY, smooth) => {
+    const items = itemRefs.current.slice(0, ids.length);
+    const track = trackRef.current;
+    if (!track || items.some((el) => !el)) return;
+    const y = clientY - track.getBoundingClientRect().top;
+    const centres = items.map((el) => el.offsetTop + el.offsetHeight / 2);
+    let pos = 0;
+    if (y >= centres[centres.length - 1]) pos = centres.length - 1;
+    else if (y > centres[0]) {
+      let i = 0;
+      while (centres[i + 1] < y) i++;
+      pos = i + (y - centres[i]) / (centres[i + 1] - centres[i]);
+    }
+    window.scrollTo({ top: scrollYFor(anchors(ids), pos), behavior: smooth && !reducedMotion() ? "smooth" : "auto" });
+  };
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDragging(true);
+    scrubTo(e.clientY, true);
+  };
+  const onPointerMove = (e) => {
+    if (dragging) scrubTo(e.clientY, false);
+  };
+  const endDrag = (e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+    setDragging(false);
+  };
+  return /* @__PURE__ */ jsxs14("aside", { "aria-label": "On this page", className: "sticky top-24 hidden w-52 shrink-0 self-start xl:block", children: [
+    /* @__PURE__ */ jsx17("p", { className: "mb-2 px-3 text-xs font-semibold uppercase tracking-wide text-gray-500", children: "On this page" }),
+    /* @__PURE__ */ jsx17("div", { ref: scrollerRef, className: "-m-1.5 max-h-[calc(100vh-10rem)] overflow-y-auto overscroll-contain p-1.5", children: /* @__PURE__ */ jsxs14("div", { ref: trackRef, className: "group relative", children: [
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          "aria-hidden": "true",
+          onPointerDown,
+          onPointerMove,
+          onPointerUp: endDrag,
+          onPointerCancel: endDrag,
+          className: clsx13("absolute -left-2 bottom-0 top-0 z-10 w-5 touch-none select-none", dragging ? "cursor-grabbing" : "cursor-grab")
+        }
+      ),
+      /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", className: "absolute bottom-0 left-0 top-0 w-px bg-gray-200" }),
+      /* @__PURE__ */ jsx17(
+        "span",
+        {
+          ref: markerRef,
+          "aria-hidden": "true",
+          className: clsx13(
+            "pointer-events-none absolute left-0 top-0 rounded-full bg-brand-600 transition-[width,margin] duration-150",
+            dragging ? "-ml-px w-1" : "w-0.5 group-hover:-ml-px group-hover:w-1"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx17("ul", { className: "space-y-0.5 pl-0", children: sections.map((s, i) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(
+        "a",
+        {
+          ref: (node) => {
+            itemRefs.current[i] = node;
+          },
+          href: `#${s.id}`,
+          "aria-current": i === active ? "location" : void 0,
+          onClick: (e) => {
+            e.preventDefault();
+            goTo(i, e.detail === 0);
+          },
+          className: clsx13(
+            "block py-1.5 pl-3 pr-2 text-sm transition-colors",
+            i === active ? "font-medium text-brand-700" : "text-gray-500 hover:text-gray-900"
+          ),
+          children: s.label
+        }
+      ) }, s.id)) })
+    ] }) })
+  ] });
+}
+
+// src/layout/Section.tsx
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function Section({ id, title, description, children }) {
+  return /* @__PURE__ */ jsxs15("section", { id, tabIndex: -1, className: "card scroll-mt-24 p-6 focus:outline-none", children: [
+    /* @__PURE__ */ jsx18("h2", { className: "text-base font-semibold text-gray-900", children: title }),
+    description && /* @__PURE__ */ jsx18("p", { className: "mt-0.5 text-sm text-gray-500", children: description }),
+    /* @__PURE__ */ jsx18("div", { className: "mt-5", children })
+  ] });
+}
+
+// src/layout/Sidebar.tsx
+import { useEffect as useEffect5, useRef as useRef6 } from "react";
+import clsx14 from "clsx";
+import { XMarkIcon as XMarkIcon3 } from "@heroicons/react/24/outline";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function Sidebar({ items, active, onSelect, open, onClose }) {
+  const asideRef = useRef6(null);
+  const trapTab = useDialogFocus(open, asideRef, {
+    initialFocus: () => asideRef.current?.querySelector('[aria-current="page"]')
+  });
+  useEffect5(() => {
+    if (!open) return;
+    const mq = window.matchMedia("(min-width: 1024px)");
+    const onChange = () => mq.matches && onClose();
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [open, onClose]);
+  useEffect5(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+    open && /* @__PURE__ */ jsx19("div", { className: "fixed inset-0 z-40 bg-black/40 backdrop-blur-sm lg:hidden", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs16(
+      "aside",
+      {
+        ref: asideRef,
+        "aria-label": "Main navigation",
+        onKeyDown: open ? trapTab : void 0,
+        className: clsx14(
+          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-gray-200 bg-white duration-200",
+          "lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-60 lg:shrink-0 lg:translate-x-0",
+          // Closed on small screens: invisible = out of the tab order. It switches off only after
+          // the slide-out finishes, but switches on immediately so focus can move in on open.
+          open ? "visible translate-x-0 shadow-2xl transition-transform" : "invisible -translate-x-full transition-[transform,visibility] lg:visible"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between px-5 py-5", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx19("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm font-bold text-white", children: "X" }),
+              /* @__PURE__ */ jsx19("span", { className: "text-lg font-bold tracking-tight text-gray-900", children: "XeX" })
+            ] }),
+            /* @__PURE__ */ jsx19("button", { type: "button", onClick: onClose, "aria-label": "Close navigation", className: "rounded-lg p-1 text-gray-400 hover:bg-gray-100 lg:hidden", children: /* @__PURE__ */ jsx19(XMarkIcon3, { className: "h-5 w-5" }) })
+          ] }),
+          /* @__PURE__ */ jsx19("nav", { className: "flex-1 space-y-1 overflow-y-auto px-3 pb-4 pt-2", children: items.map(({ id, label, icon: Icon }) => /* @__PURE__ */ jsxs16(
+            "a",
+            {
+              href: `#/${id}`,
+              "aria-current": id === active ? "page" : void 0,
+              onClick: (e) => {
+                e.preventDefault();
+                onSelect(id);
+              },
+              className: id === active ? "nav-item-active" : "nav-item-inactive",
+              children: [
+                /* @__PURE__ */ jsx19(Icon, { className: "h-5 w-5" }),
+                label
+              ]
+            },
+            id
+          )) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/theme/ThemeSwitcher.tsx
+import clsx15 from "clsx";
+import { CheckIcon, MoonIcon, SunIcon } from "@heroicons/react/24/solid";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function ThemeSwitcher({ showLabels = false }) {
+  const { theme, themes, setThemeId, mode, toggleMode } = useTheme();
+  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ jsx20("div", { className: "flex flex-wrap items-center gap-2", role: "radiogroup", "aria-label": "Color theme", onKeyDown: radioGroupKeyDown, children: themes.map((t) => {
+      const selected = t.id === theme.id;
+      return /* @__PURE__ */ jsxs17(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": selected,
+          tabIndex: selected ? 0 : -1,
+          title: t.name,
+          onClick: () => setThemeId(t.id),
+          className: clsx15(
+            "flex items-center gap-2 rounded-full border p-1 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+            showLabels && "pr-3",
+            selected ? "border-gray-400" : "border-transparent hover:border-gray-300"
+          ),
+          children: [
+            /* @__PURE__ */ jsx20(
+              "span",
+              {
+                className: "flex h-6 w-6 items-center justify-center rounded-full text-white",
+                style: { background: `linear-gradient(135deg, ${t.shades[400]}, ${t.shades[700]})` },
+                children: selected && /* @__PURE__ */ jsx20(CheckIcon, { className: "h-4 w-4" })
+              }
+            ),
+            showLabels && /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-gray-700", children: t.name })
+          ]
+        },
+        t.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs17(
+      "button",
+      {
+        type: "button",
+        onClick: toggleMode,
+        "aria-label": `Switch to ${mode === "dark" ? "light" : "dark"} mode`,
+        className: "flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+        children: [
+          mode === "dark" ? /* @__PURE__ */ jsx20(SunIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx20(MoonIcon, { className: "h-4 w-4" }),
+          mode === "dark" ? "Light" : "Dark"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AVATAR_COLORS,
+  Avatar,
+  Badge,
+  Button,
+  ConfirmDialog,
+  DataTable,
+  FetchStatus,
+  Header,
+  Input,
+  LoadingDots,
+  LoadingOverlay,
+  Modal,
+  MultiSelect,
+  PageGuide,
+  PaginationBar,
+  ProgressBar,
+  ProgressRing,
+  Section,
+  SegmentedControl,
+  Select,
+  Sidebar,
+  Skeleton,
+  SkeletonText,
+  Spinner,
+  Tabs,
+  ThemeProvider,
+  ThemeSwitcher,
+  colorFor,
+  focusablesIn,
+  initialsOf,
+  pageWindow,
+  radioGroupKeyDown,
+  useDialogFocus,
+  useTheme
+};