@agent-factory-platform/ui-kit 0.8.0 → 0.9.0

package/dist/components/combobox.js

@@ -0,0 +1,129 @@
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { useRef as F, useId as O, useState as y, useEffect as R, useMemo as j } from "react";
+import { Search as q, Check as M } from "lucide-react";
+import { Popover as v } from "radix-ui";
+import { cn as S } from "../lib/cn.js";
+function B({
+  value: k,
+  options: d,
+  onValueChange: C,
+  label: A,
+  resultsLabel: N,
+  placeholder: L,
+  emptyText: $,
+  disabled: x = !1,
+  className: I
+}) {
+  const f = F(null), p = O(), t = d.find((e) => e.value === k), [w, m] = y((t == null ? void 0 : t.label) ?? ""), [o, i] = y(!1), [b, s] = y(0);
+  R(() => {
+    o || m((t == null ? void 0 : t.label) ?? "");
+  }, [o, t == null ? void 0 : t.label]);
+  const a = j(() => {
+    const e = w.trim().toLocaleLowerCase();
+    return !e || e === (t == null ? void 0 : t.label.toLocaleLowerCase()) ? [...d] : d.filter(
+      (r) => `${r.label} ${r.meta ?? ""}`.toLocaleLowerCase().includes(e)
+    );
+  }, [d, w, t == null ? void 0 : t.label]), h = (e, r) => {
+    var n;
+    for (let c = 0; c < a.length; c += 1) {
+      const g = (e + c * r + a.length) % a.length;
+      if (!((n = a[g]) != null && n.disabled)) return g;
+    }
+    return -1;
+  }, D = (e) => {
+    const r = a[e];
+    !r || r.disabled || (C(r.value), m(r.label), i(!1), requestAnimationFrame(() => {
+      var n;
+      return (n = f.current) == null ? void 0 : n.focus();
+    }));
+  }, P = (e) => {
+    s((r) => {
+      const n = a.length ? (r + e + a.length) % a.length : 0;
+      return h(n, e);
+    });
+  }, z = (e) => {
+    x || (e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), o ? P(e.key === "ArrowDown" ? 1 : -1) : (i(!0), s(h(e.key === "ArrowDown" ? 0 : a.length - 1, e.key === "ArrowDown" ? 1 : -1)))) : e.key === "Enter" && o ? (e.preventDefault(), D(b)) : e.key === "Escape" && o ? (e.preventDefault(), i(!1), m((t == null ? void 0 : t.label) ?? "")) : e.key === "Home" && o ? (e.preventDefault(), s(h(0, 1))) : e.key === "End" && o && (e.preventDefault(), s(h(a.length - 1, -1))));
+  }, E = o && b >= 0 ? `${p}-option-${b}` : void 0;
+  return /* @__PURE__ */ u(v.Root, { open: o, onOpenChange: i, children: [
+    /* @__PURE__ */ l(v.Trigger, { asChild: !0, children: /* @__PURE__ */ u("div", { className: S("relative min-w-0", I), children: [
+      /* @__PURE__ */ l(q, { size: 14, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-graphite", "aria-hidden": !0 }),
+      /* @__PURE__ */ l(
+        "input",
+        {
+          ref: f,
+          role: "combobox",
+          "aria-label": A,
+          "aria-controls": p,
+          "aria-expanded": o,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": E,
+          autoComplete: "off",
+          disabled: x,
+          placeholder: L,
+          value: w,
+          onFocus: () => {
+            x || i(!0);
+          },
+          onChange: (e) => {
+            m(e.target.value), s(0), i(!0);
+          },
+          onKeyDown: z,
+          className: "h-control-default w-full rounded-control border border-border bg-surface-raised pl-9 pr-3 font-product text-body-sm text-ink outline-none placeholder:text-graphite focus:border-rust focus-visible:ring-2 focus-visible:ring-rust/20 disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ l(v.Portal, { children: /* @__PURE__ */ u(
+      v.Content,
+      {
+        role: "listbox",
+        id: p,
+        "aria-label": N,
+        sideOffset: 4,
+        align: "start",
+        collisionPadding: 8,
+        onOpenAutoFocus: (e) => {
+          var r;
+          e.preventDefault(), (r = f.current) == null || r.focus();
+        },
+        onCloseAutoFocus: (e) => {
+          var r;
+          e.preventDefault(), (r = f.current) == null || r.focus();
+        },
+        className: "af-popup-bound z-50 max-h-command-results w-overlay-sm overflow-y-auto rounded-panel border border-border bg-surface-raised p-1 font-product text-body-sm text-ink shadow-pop outline-none",
+        children: [
+          a.length === 0 && /* @__PURE__ */ l("div", { className: "px-3 py-2 text-caption text-graphite", children: $ }),
+          a.map((e, r) => {
+            const n = r === b, c = e.value === k;
+            return /* @__PURE__ */ u(
+              "div",
+              {
+                id: `${p}-option-${r}`,
+                role: "option",
+                "aria-selected": c,
+                "aria-disabled": e.disabled || void 0,
+                "data-active": n || void 0,
+                onPointerMove: () => {
+                  e.disabled || s(r);
+                },
+                onPointerDown: (g) => g.preventDefault(),
+                onClick: () => D(r),
+                className: "flex min-h-row-default cursor-default items-center gap-2 rounded-control px-3 outline-none data-[active]:bg-surface-hover aria-disabled:pointer-events-none aria-disabled:opacity-50",
+                children: [
+                  /* @__PURE__ */ u("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ l("span", { className: "block truncate", children: e.label }),
+                    e.meta && /* @__PURE__ */ l("span", { className: "block truncate text-caption text-graphite", children: e.meta })
+                  ] }),
+                  c && /* @__PURE__ */ l(M, { size: 14, className: "shrink-0 text-rust", "aria-hidden": !0 })
+                ]
+              },
+              e.value
+            );
+          })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  B as Combobox
+};

package/dist/components/command-dialog.js

@@ -0,0 +1,89 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { Search as N } from "lucide-react";
+import { cn as l } from "../lib/cn.js";
+import { Modal as w } from "./modal.js";
+function D({
+  open: s,
+  onClose: d,
+  title: a,
+  query: m,
+  onQueryChange: c,
+  placeholder: h,
+  inputRef: b,
+  busy: t = !1,
+  filters: f,
+  filter: p,
+  onFilterChange: u,
+  filterAriaLabel: x,
+  children: v,
+  footer: i,
+  onKeyDown: g,
+  className: k
+}) {
+  return /* @__PURE__ */ e(w, { open: s, onClose: d, title: a, size: "command", sheetUntilPx: 640, bare: !0, children: /* @__PURE__ */ n("div", { "data-command-dialog": !0, className: l("flex min-h-0 flex-col", k), onKeyDown: g, children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        "data-slot": "command-search",
+        className: "flex min-h-command-search shrink-0 items-center gap-2 border-b border-divider px-4",
+        children: [
+          /* @__PURE__ */ e(N, { size: 17, className: "shrink-0 text-graphite", "aria-hidden": !0 }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: b,
+              value: m,
+              onChange: (r) => c(r.target.value),
+              placeholder: h,
+              "aria-label": a,
+              "aria-busy": t,
+              autoComplete: "off",
+              spellCheck: !1,
+              className: "min-w-0 flex-1 bg-transparent font-sohne text-body text-ink outline-none placeholder:text-graphite"
+            }
+          ),
+          t && /* @__PURE__ */ e(
+            "span",
+            {
+              className: "size-4 shrink-0 animate-spin rounded-full border-2 border-graphite/25 border-t-graphite",
+              "aria-hidden": !0
+            }
+          ),
+          /* @__PURE__ */ e("kbd", { className: "hidden rounded-control border border-border bg-surface-muted px-1.5 py-0.5 font-mono text-micro text-graphite sm:inline", children: "Esc" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        "data-slot": "command-filters",
+        role: "group",
+        "aria-label": x,
+        className: "flex min-h-row-default shrink-0 items-end gap-4 overflow-x-auto border-b border-divider px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        children: f.map((r) => {
+          const o = r.value === p;
+          return /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": o,
+              disabled: r.disabled,
+              onClick: () => u(r.value),
+              className: l(
+                "relative h-row-default shrink-0 px-0.5 font-sohne text-caption outline-none transition-colors focus-visible:ring-2 focus-visible:ring-rust/35 disabled:pointer-events-none disabled:opacity-45",
+                o ? "font-[500] text-ink after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-rust" : "text-graphite hover:text-ink"
+              ),
+              children: r.label
+            },
+            r.value
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "min-h-0 max-h-command-results flex-1 overflow-y-auto px-2 py-2", children: v }),
+    i && /* @__PURE__ */ e("div", { className: "min-h-row-compact shrink-0 border-t border-divider px-4 py-2 font-sohne text-data text-graphite", children: i })
+  ] }) });
+}
+export {
+  D as CommandDialog
+};

package/dist/components/confirm-dialog.js

@@ -0,0 +1,57 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { Button as l } from "./button.js";
+import { Modal as x } from "./modal.js";
+function O({
+  open: s,
+  onClose: e,
+  title: f,
+  message: o,
+  body: n,
+  confirmLabel: a,
+  cancelLabel: t,
+  closeLabel: c,
+  onConfirm: m,
+  confirmVariant: h,
+  busy: i = !1,
+  busyLabel: v,
+  confirmDisabled: p = !1
+}) {
+  return /* @__PURE__ */ d(
+    x,
+    {
+      open: s,
+      onClose: i ? () => {
+      } : e,
+      title: f,
+      closeLabel: c ?? t,
+      footer: /* @__PURE__ */ d("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            variant: "secondary",
+            onClick: e,
+            disabled: i,
+            children: t
+          }
+        ),
+        /* @__PURE__ */ r(
+          l,
+          {
+            variant: h ?? "primary",
+            onClick: () => void m(),
+            disabled: i || p,
+            "aria-busy": i || void 0,
+            children: i ? v ?? a : a
+          }
+        )
+      ] }),
+      children: [
+        o && /* @__PURE__ */ r("p", { className: "font-sohne text-body-sm leading-relaxed text-ash", children: o }),
+        n && /* @__PURE__ */ r("div", { className: "mt-3", children: n })
+      ]
+    }
+  );
+}
+export {
+  O as ConfirmDialog
+};

package/dist/components/data-table.js

@@ -0,0 +1,135 @@
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { ArrowUp as B, ArrowDown as $, ChevronsUpDown as q } from "lucide-react";
+import { useState as E, useRef as F, useMemo as G } from "react";
+import { cn as f } from "../lib/cn.js";
+function Y({
+  label: P,
+  columns: i,
+  rows: u,
+  rowKey: v,
+  emptyText: I,
+  density: L = "default",
+  className: S,
+  selectedRowKey: z,
+  onRowActivate: p,
+  rowAriaLabel: M
+}) {
+  const [l, V] = E(null), N = F(null), D = i.map((t) => Math.max(1, t.width ?? 100)), T = D.reduce((t, e) => t + e, 0), [X, y] = E({}), n = i.map((t, e) => X[t.id] ?? D[e] / T * 100), k = G(() => {
+    if (!l) return [...u];
+    const t = i.find((r) => r.id === l.id);
+    if (!(t != null && t.sortValue)) return [...u];
+    const e = l.direction === "ascending" ? 1 : -1;
+    return [...u].sort((r, o) => {
+      var d, h;
+      const a = ((d = t.sortValue) == null ? void 0 : d.call(t, r)) ?? "", c = ((h = t.sortValue) == null ? void 0 : h.call(t, o)) ?? "";
+      return (typeof a == "number" && typeof c == "number" ? a - c : String(a).localeCompare(String(c))) * e;
+    });
+  }, [i, u, l]), x = (t, e) => {
+    t >= n.length - 1 || y((r) => {
+      const o = r[i[t].id] ?? n[t], a = r[i[t + 1].id] ?? n[t + 1], c = o + a, d = Math.min(10, c / 3), h = Math.min(c - d, Math.max(d, o + e));
+      return { ...r, [i[t].id]: h, [i[t + 1].id]: c - h };
+    });
+  }, j = (t, e) => {
+    t.key === "ArrowLeft" ? (t.preventDefault(), x(e, -5)) : t.key === "ArrowRight" && (t.preventDefault(), x(e, 5));
+  }, w = (t, e) => {
+    var C;
+    if (t.button !== 0) return;
+    t.preventDefault();
+    const r = t.currentTarget, o = t.clientX, a = ((C = N.current) == null ? void 0 : C.getBoundingClientRect().width) ?? 1, c = n[e], d = n[e] + n[e + 1];
+    r.setPointerCapture(t.pointerId);
+    const h = (b) => {
+      const W = Math.min(
+        d - Math.min(10, d / 3),
+        Math.max(Math.min(10, d / 3), c + (b.clientX - o) / a * 100)
+      );
+      y((U) => ({ ...U, [i[e].id]: W, [i[e + 1].id]: d - W }));
+    }, g = (b) => {
+      r.hasPointerCapture(b.pointerId) && r.releasePointerCapture(b.pointerId), r.removeEventListener("pointermove", h), r.removeEventListener("pointerup", g), r.removeEventListener("pointercancel", g);
+    };
+    r.addEventListener("pointermove", h), r.addEventListener("pointerup", g), r.addEventListener("pointercancel", g);
+  };
+  return /* @__PURE__ */ s("div", { className: f("min-w-0 overflow-x-auto rounded-panel border border-border", S), children: /* @__PURE__ */ m("table", { ref: N, "aria-label": P, className: "w-full min-w-xl border-collapse table-fixed", children: [
+    /* @__PURE__ */ s("colgroup", { children: i.map((t, e) => /* @__PURE__ */ s("col", { style: { width: `${n[e]}%` } }, t.id)) }),
+    /* @__PURE__ */ s("thead", { className: "bg-surface-muted font-product text-micro uppercase text-graphite", children: /* @__PURE__ */ s("tr", { className: "h-row-compact", children: i.map((t, e) => {
+      var o;
+      const r = (l == null ? void 0 : l.id) === t.id ? l.direction : void 0;
+      return /* @__PURE__ */ m(
+        "th",
+        {
+          scope: "col",
+          "aria-sort": r ?? (t.sortValue ? "none" : void 0),
+          className: f("relative px-3 font-[500]", t.pinned && t.id === ((o = i[0]) == null ? void 0 : o.id) && "sticky left-0 z-20 bg-surface-muted", t.align === "right" ? "text-right" : "text-left"),
+          children: [
+            t.sortValue ? /* @__PURE__ */ m(
+              "button",
+              {
+                type: "button",
+                onClick: () => V((a) => ({
+                  id: t.id,
+                  direction: (a == null ? void 0 : a.id) === t.id && a.direction === "ascending" ? "descending" : "ascending"
+                })),
+                className: f(
+                  "inline-flex h-control-compact max-w-full items-center gap-1 rounded-control outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-rust",
+                  t.align === "right" && "ml-auto"
+                ),
+                children: [
+                  /* @__PURE__ */ s("span", { className: "truncate", children: t.header }),
+                  r === "ascending" ? /* @__PURE__ */ s(B, { size: 12, "aria-hidden": !0 }) : r === "descending" ? /* @__PURE__ */ s($, { size: 12, "aria-hidden": !0 }) : /* @__PURE__ */ s(q, { size: 12, "aria-hidden": !0 })
+                ]
+              }
+            ) : t.header,
+            t.resizeLabel && e < i.length - 1 && /* @__PURE__ */ s(
+              "span",
+              {
+                role: "separator",
+                tabIndex: 0,
+                "aria-label": t.resizeLabel,
+                "aria-orientation": "vertical",
+                "aria-valuemin": Math.min(10, (n[e] + n[e + 1]) / 3),
+                "aria-valuemax": Math.round(n[e] + n[e + 1] - Math.min(10, (n[e] + n[e + 1]) / 3)),
+                "aria-valuenow": Math.round(n[e]),
+                onKeyDown: (a) => j(a, e),
+                onPointerDown: (a) => w(a, e),
+                className: "absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none bg-transparent outline-none hover:bg-rust focus-visible:bg-rust"
+              }
+            )
+          ]
+        },
+        t.id
+      );
+    }) }) }),
+    /* @__PURE__ */ m("tbody", { className: "font-data text-data tabular-nums text-ink", children: [
+      k.map((t) => /* @__PURE__ */ s(
+        "tr",
+        {
+          tabIndex: p ? 0 : void 0,
+          "aria-label": M == null ? void 0 : M(t),
+          "aria-selected": z === void 0 ? void 0 : z === v(t),
+          onClick: (e) => {
+            e.target.closest("a,button,input,select,textarea") || p == null || p(t);
+          },
+          onKeyDown: (e) => {
+            e.target === e.currentTarget && p && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p(t));
+          },
+          className: f("border-t border-divider hover:bg-surface-hover focus-visible:outline focus-visible:outline-rust", L === "compact" ? "h-row-compact" : "h-row-default", z === v(t) && "bg-surface-hover"),
+          children: i.map((e) => {
+            var r;
+            return /* @__PURE__ */ s(
+              "td",
+              {
+                className: f("truncate px-3", e.pinned && e.id === ((r = i[0]) == null ? void 0 : r.id) && "sticky left-0 z-10 bg-surface-canvas", e.align === "right" ? "text-right" : "text-left"),
+                children: e.cell(t)
+              },
+              e.id
+            );
+          })
+        },
+        v(t)
+      )),
+      k.length === 0 && /* @__PURE__ */ s("tr", { className: "h-row-touch border-t border-divider", children: /* @__PURE__ */ s("td", { colSpan: i.length, className: "px-3 text-center font-product text-caption text-graphite", children: I }) })
+    ] })
+  ] }) });
+}
+export {
+  Y as DataTable
+};

package/dist/components/date-time.js

@@ -0,0 +1,203 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { ChevronLeft as E, ChevronRight as H } from "lucide-react";
+import { useState as F, useId as Y, useMemo as _, useEffect as L } from "react";
+import { Popover as y } from "radix-ui";
+import { cn as Z } from "../lib/cn.js";
+import { Button as N } from "./button.js";
+import { Field as G } from "./field.js";
+import { Input as J } from "./input.js";
+function u(e) {
+  const [i, o, s] = e.split("-").map(Number);
+  return new Date(Date.UTC(i, o - 1, s));
+}
+function k(e) {
+  return [
+    e.getUTCFullYear(),
+    String(e.getUTCMonth() + 1).padStart(2, "0"),
+    String(e.getUTCDate()).padStart(2, "0")
+  ].join("-");
+}
+function P(e, i) {
+  const o = u(e);
+  return o.setUTCDate(o.getUTCDate() + i), k(o);
+}
+function p(e) {
+  return `${e.getUTCFullYear()}-${String(e.getUTCMonth() + 1).padStart(2, "0")}`;
+}
+function Q({
+  value: e,
+  onValueChange: i,
+  label: o,
+  locale: s,
+  weekdayLabels: d,
+  previousMonthLabel: c,
+  nextMonthLabel: l,
+  dateLabel: g = (w) => w,
+  minimum: f,
+  maximum: D,
+  className: j
+}) {
+  const w = e ? u(e) : /* @__PURE__ */ new Date(), [v, C] = F(() => p(w)), S = Y(), [R, M] = v.split("-").map(Number), b = new Date(Date.UTC(R, M - 1, 1)), T = new Date(b);
+  T.setUTCDate(1 - b.getUTCDay());
+  const V = Array.from({ length: 42 }, (t, n) => {
+    const a = new Date(T);
+    return a.setUTCDate(T.getUTCDate() + n), k(a);
+  }), $ = k(/* @__PURE__ */ new Date()), K = _(
+    () => new Intl.DateTimeFormat(s, { year: "numeric", month: "long", timeZone: "UTC" }).format(b),
+    [s, v]
+  );
+  L(() => {
+    e && C(p(u(e)));
+  }, [e]);
+  const U = (t) => {
+    const n = new Date(b);
+    n.setUTCMonth(n.getUTCMonth() + t), C(p(n));
+  }, A = (t) => {
+    C(p(u(t))), requestAnimationFrame(() => {
+      var n;
+      (n = document.querySelector(`[data-calendar-id="${S}"] [data-date="${t}"]`)) == null || n.focus();
+    });
+  }, O = (t, n) => {
+    const a = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    }[t.key];
+    if (a)
+      t.preventDefault(), A(P(n, a));
+    else if (t.key === "Home" || t.key === "End") {
+      t.preventDefault();
+      const m = u(n).getUTCDay();
+      A(P(n, t.key === "Home" ? -m : 6 - m));
+    } else (t.key === "PageUp" || t.key === "PageDown") && (t.preventDefault(), U(t.key === "PageUp" ? -1 : 1));
+  };
+  return /* @__PURE__ */ h("div", { className: Z("font-product text-body-sm text-ink", j), children: [
+    /* @__PURE__ */ h("div", { className: "mb-2 flex h-row-default items-center justify-between", children: [
+      /* @__PURE__ */ r(N, { size: "icon", variant: "ghost", "aria-label": c, onClick: () => U(-1), children: /* @__PURE__ */ r(E, { size: 14, "aria-hidden": !0 }) }),
+      /* @__PURE__ */ r("span", { className: "font-[500]", children: K }),
+      /* @__PURE__ */ r(N, { size: "icon", variant: "ghost", "aria-label": l, onClick: () => U(1), children: /* @__PURE__ */ r(H, { size: 14, "aria-hidden": !0 }) })
+    ] }),
+    /* @__PURE__ */ h("div", { role: "grid", "aria-label": o, "data-calendar-id": S, children: [
+      /* @__PURE__ */ r("div", { role: "row", className: "grid grid-cols-7", children: d.map((t) => /* @__PURE__ */ r("span", { role: "columnheader", className: "grid h-row-compact place-items-center text-micro text-graphite", children: t }, t)) }),
+      Array.from({ length: 6 }, (t, n) => /* @__PURE__ */ r("div", { role: "row", className: "grid grid-cols-7", children: V.slice(n * 7, n * 7 + 7).map((a) => {
+        const m = u(a), I = m.getUTCMonth() !== M - 1, x = a === e, q = !!(f && a < f || D && a > D);
+        return /* @__PURE__ */ r("span", { role: "gridcell", "aria-selected": x, children: /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            "data-date": a,
+            "aria-label": g(a),
+            "aria-current": a === $ ? "date" : void 0,
+            "aria-pressed": x,
+            disabled: q,
+            tabIndex: x || !e && m.getUTCDate() === 1 && !I ? 0 : -1,
+            onKeyDown: (B) => O(B, a),
+            onClick: () => {
+              i(a), C(p(m));
+            },
+            className: "grid size-control-default place-items-center rounded-control font-data text-caption tabular-nums text-ink outline-none hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-rust disabled:opacity-30 data-[outside=true]:text-graphite aria-pressed:bg-rust aria-pressed:text-on-accent",
+            "data-outside": I || void 0,
+            children: m.getUTCDate()
+          }
+        ) }, a);
+      }) }, n))
+    ] })
+  ] });
+}
+function z({
+  value: e,
+  onValueChange: i,
+  label: o,
+  calendarLabel: s,
+  placeholder: d,
+  displayValue: c = (g) => g,
+  ...l
+}) {
+  const [g, f] = F(!1);
+  return /* @__PURE__ */ h(y.Root, { open: g, onOpenChange: f, children: [
+    /* @__PURE__ */ r(y.Trigger, { asChild: !0, children: /* @__PURE__ */ r(N, { variant: "secondary", "aria-label": o, className: "w-full justify-start", children: e ? c(e) : d }) }),
+    /* @__PURE__ */ r(y.Portal, { children: /* @__PURE__ */ r(
+      y.Content,
+      {
+        role: "dialog",
+        "aria-label": s,
+        sideOffset: 4,
+        collisionPadding: 8,
+        className: "z-50 w-80 rounded-panel border border-border bg-surface-raised p-3 shadow-pop outline-none",
+        children: /* @__PURE__ */ r(
+          Q,
+          {
+            ...l,
+            value: e,
+            label: s,
+            onValueChange: (D) => {
+              i(D), f(!1);
+            }
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function ie({
+  start: e,
+  end: i,
+  onChange: o,
+  startLabel: s,
+  endLabel: d,
+  ...c
+}) {
+  return /* @__PURE__ */ h("div", { className: "grid min-w-0 gap-2 sm:grid-cols-2", children: [
+    /* @__PURE__ */ r(
+      z,
+      {
+        ...c,
+        value: e,
+        label: s,
+        maximum: i || void 0,
+        onValueChange: (l) => o({ start: l, end: i })
+      }
+    ),
+    /* @__PURE__ */ r(
+      z,
+      {
+        ...c,
+        value: i,
+        label: d,
+        minimum: e || void 0,
+        onValueChange: (l) => o({ start: e, end: l })
+      }
+    )
+  ] });
+}
+function se({
+  label: e,
+  value: i,
+  onValueChange: o,
+  timezone: s,
+  minimum: d,
+  maximum: c
+}) {
+  return /* @__PURE__ */ r(G, { label: e, children: /* @__PURE__ */ h("div", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ r(
+      J,
+      {
+        type: "time",
+        "aria-label": e,
+        value: i,
+        min: d,
+        max: c,
+        onChange: (l) => o(l.target.value),
+        className: "min-w-0 flex-1 font-data tabular-nums"
+      }
+    ),
+    /* @__PURE__ */ r("span", { className: "shrink-0 font-mono text-data text-graphite", children: s })
+  ] }) });
+}
+export {
+  Q as Calendar,
+  z as DatePicker,
+  ie as DateRangePicker,
+  se as TimeField
+};

package/dist/components/disclosure.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { ChevronDown as s } from "lucide-react";
+import { Accordion as r, Collapsible as i } from "radix-ui";
+function f({
+  value: t,
+  title: n,
+  children: a
+}) {
+  return /* @__PURE__ */ e(r.Root, { type: "single", collapsible: !0, className: "overflow-hidden rounded-panel border border-border bg-surface-fog", children: /* @__PURE__ */ o(r.Item, { value: t, children: [
+    /* @__PURE__ */ e(r.Header, { children: /* @__PURE__ */ o(r.Trigger, { className: "group flex h-row-default w-full items-center justify-between gap-3 px-3 font-sohne text-body-sm font-[500] text-ink outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rust", children: [
+      /* @__PURE__ */ e("span", { children: n }),
+      /* @__PURE__ */ e(s, { size: 14, className: "shrink-0 text-graphite transition-transform group-data-[state=open]:rotate-180", "aria-hidden": !0 })
+    ] }) }),
+    /* @__PURE__ */ e(r.Content, { className: "border-t border-divider px-3 py-2 font-sohne text-caption text-graphite", children: a })
+  ] }) });
+}
+function p({ title: t, children: n }) {
+  return /* @__PURE__ */ o(i.Root, { className: "overflow-hidden rounded-panel border border-border bg-surface-fog", children: [
+    /* @__PURE__ */ o(i.Trigger, { className: "group flex h-row-default w-full items-center justify-between gap-3 px-3 font-sohne text-body-sm font-[500] text-ink outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rust", children: [
+      /* @__PURE__ */ e("span", { children: t }),
+      /* @__PURE__ */ e(s, { size: 14, className: "shrink-0 text-graphite transition-transform group-data-[state=open]:rotate-180", "aria-hidden": !0 })
+    ] }),
+    /* @__PURE__ */ e(i.Content, { className: "border-t border-divider px-3 py-2 font-sohne text-caption text-graphite", children: n })
+  ] });
+}
+export {
+  f as Accordion,
+  p as Collapsible
+};