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

package/dist/components/drawer.js

@@ -0,0 +1,150 @@
+import { jsx as n, jsxs as c, Fragment as R } from "react/jsx-runtime";
+import { useRef as j, useId as C, useEffect as D, useState as O } from "react";
+import { createPortal as P } from "react-dom";
+import { AnimatePresence as A, motion as M } from "motion/react";
+import { X as T } from "lucide-react";
+import { transitions as S, fadeInOut as X, bottomSheet as B } from "../lib/motion.js";
+import { cn as b } from "../lib/cn.js";
+const G = {
+  initial: { x: "100%" },
+  animate: { x: 0 },
+  exit: { x: "100%" }
+};
+function H() {
+  const [o, r] = O(
+    () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(min-width: 640px)").matches
+  );
+  return D(() => {
+    if (typeof window.matchMedia != "function") return;
+    const t = window.matchMedia("(min-width: 640px)"), i = () => r(t.matches);
+    return t.addEventListener("change", i), () => t.removeEventListener("change", i);
+  }, []), o;
+}
+function ee({
+  open: o,
+  onClose: r,
+  title: t,
+  ariaLabel: i,
+  closeLabel: w = "Close",
+  description: p,
+  children: x,
+  footer: y,
+  size: u = "md",
+  bare: f = !1,
+  side: s = "right",
+  mobilePlacement: L = "bottom",
+  rootClassName: z,
+  panelClassName: I
+}) {
+  const a = j(null), v = C(), g = j(r);
+  g.current = r;
+  const l = H() || L === "side", h = l ? s === "left" ? { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" } } : G : B;
+  if (D(() => {
+    if (!o) return;
+    const d = document.activeElement, k = (e) => {
+      if (e.key === "Escape") {
+        g.current();
+        return;
+      }
+      if (e.key === "Tab" && a.current) {
+        const m = a.current.querySelectorAll(
+          'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+        );
+        if (m.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const E = m[0], N = m[m.length - 1];
+        e.shiftKey && (document.activeElement === E || document.activeElement === a.current) ? (e.preventDefault(), N.focus()) : !e.shiftKey && document.activeElement === N && (e.preventDefault(), E.focus());
+      }
+    };
+    document.addEventListener("keydown", k);
+    const F = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const K = requestAnimationFrame(() => {
+      var e;
+      return (e = a.current) == null ? void 0 : e.focus();
+    });
+    return () => {
+      var e;
+      document.removeEventListener("keydown", k), document.body.style.overflow = F, cancelAnimationFrame(K), (e = d == null ? void 0 : d.focus) == null || e.call(d);
+    };
+  }, [o]), typeof document > "u") return null;
+  const q = u === "xl" ? "sm:w-drawer-xl" : u === "lg" ? "sm:w-drawer-lg" : u === "sm" ? "sm:w-drawer-sm" : "sm:w-drawer-md";
+  return P(
+    /* @__PURE__ */ n(A, { children: o && /* @__PURE__ */ c(
+      "div",
+      {
+        className: b(
+          "fixed inset-0 z-50 flex",
+          l ? s === "left" ? "items-stretch justify-start" : "items-stretch justify-end" : "items-end justify-center sm:items-stretch sm:justify-end",
+          z
+        ),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": !f && t ? v : void 0,
+        "aria-label": f ? i ?? t : t ? void 0 : i,
+        "data-overlay": "drawer",
+        "data-placement": l ? s : "bottom",
+        children: [
+          /* @__PURE__ */ n(
+            M.div,
+            {
+              ...X,
+              transition: S.fade,
+              "aria-hidden": "true",
+              onClick: r,
+              className: "absolute inset-0 bg-black/55 backdrop-blur-sm"
+            }
+          ),
+          /* @__PURE__ */ n(
+            M.div,
+            {
+              ref: a,
+              "data-testid": "drawer-panel",
+              tabIndex: -1,
+              initial: h.initial,
+              animate: h.animate,
+              exit: h.exit,
+              transition: S.drawer,
+              className: b(
+                "relative z-10 flex w-full min-w-0 flex-col overflow-hidden border border-border bg-surface-raised shadow-pop outline-none",
+                l ? b(
+                  "h-full max-h-none pb-0",
+                  s === "left" ? "rounded-r-overlay border-l-0" : "rounded-l-overlay border-r-0"
+                ) : "max-h-[90dvh] rounded-t-sheet border-b-0 pb-[env(safe-area-inset-bottom)] sm:h-full sm:max-h-none sm:rounded-none sm:rounded-l-overlay sm:border-b sm:border-r-0 sm:pb-0",
+                q,
+                I
+              ),
+              children: f ? x : /* @__PURE__ */ c(R, { children: [
+                t && /* @__PURE__ */ c("header", { className: "flex shrink-0 items-start justify-between gap-2 border-b border-divider px-5 py-3.5", children: [
+                  /* @__PURE__ */ c("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ n("h2", { id: v, className: "font-sohne text-body font-[500] text-ink", children: t }),
+                    p && /* @__PURE__ */ n("p", { className: "mt-0.5 font-sohne text-caption text-graphite", children: p })
+                  ] }),
+                  /* @__PURE__ */ n(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: r,
+                      title: w,
+                      "aria-label": w,
+                      className: "-mr-1 grid size-8 place-items-center rounded-control text-graphite outline-none transition hover:bg-surface-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-rust/35",
+                      children: /* @__PURE__ */ n(T, { size: 16, "aria-hidden": !0 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ n("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: x }),
+                y && /* @__PURE__ */ n("div", { className: "shrink-0 border-t border-divider px-5 py-3", children: y })
+              ] })
+            }
+          )
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+export {
+  ee as Drawer
+};

package/dist/components/dropdown-select.js

@@ -0,0 +1,191 @@
+import { jsx as c, jsxs as x } from "react/jsx-runtime";
+import { useState as N, useRef as P, useId as q, useMemo as F, useEffect as I, useLayoutEffect as G } from "react";
+import { createPortal as J } from "react-dom";
+import { AnimatePresence as Q, motion as V } from "motion/react";
+import { Check as X, ChevronDown as Y } from "lucide-react";
+import { cn as h } from "../lib/cn.js";
+import { transitions as Z } from "../lib/motion.js";
+function ae({
+  value: p,
+  options: i,
+  onChange: R,
+  ariaLabel: M,
+  placeholder: S,
+  disabled: v = !1,
+  density: H = "default",
+  menuAlign: g = "start",
+  portaled: l = !1,
+  className: $
+}) {
+  const [r, d] = N(!1), [a, u] = N(-1), y = P(null), k = P(null), [B, j] = N(), m = q(), f = F(() => i.find((e) => e.value === p), [i, p]), E = !v && i.length > 0, b = (e, t) => {
+    var n;
+    for (let o = 0; o < i.length; o += 1) {
+      const s = (e + t * o + i.length) % i.length;
+      if (!((n = i[s]) != null && n.disabled)) return s;
+    }
+    return -1;
+  }, T = () => {
+    if (!E) return;
+    const e = i.findIndex((t) => t.value === p && !t.disabled);
+    u(e >= 0 ? e : b(0, 1)), d(!0);
+  };
+  I(() => {
+    if (!r) return;
+    const e = (n) => {
+      var s, w;
+      const o = n.target;
+      !((s = y.current) != null && s.contains(o)) && !((w = k.current) != null && w.contains(o)) && d(!1);
+    }, t = (n) => {
+      n.key === "Escape" && d(!1);
+    };
+    return document.addEventListener("mousedown", e, !0), document.addEventListener("keydown", t), () => {
+      document.removeEventListener("mousedown", e, !0), document.removeEventListener("keydown", t);
+    };
+  }, [r]), G(() => {
+    if (!r || !l) return;
+    const e = () => {
+      var K;
+      const t = (K = y.current) == null ? void 0 : K.getBoundingClientRect();
+      if (!t) return;
+      const n = 8, o = Math.max(220, t.width), s = g === "end" ? t.right - o : t.left, w = Math.max(n, Math.min(s, window.innerWidth - o - n)), D = window.innerHeight - t.bottom - n - 6, L = D < 160 && t.top > D;
+      j({
+        position: "fixed",
+        left: w,
+        top: L ? void 0 : t.bottom + 6,
+        bottom: L ? window.innerHeight - t.top + 6 : void 0,
+        width: o,
+        maxHeight: Math.max(96, Math.min(256, L ? t.top - 14 : D))
+      });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [g, r, l]), I(() => {
+    v && d(!1);
+  }, [v]), I(() => {
+    if (!r || a < 0) return;
+    const e = k.current, t = e == null ? void 0 : e.children.item(a);
+    if (!e || !t) return;
+    const n = t.offsetTop, o = n + t.offsetHeight;
+    n < e.scrollTop ? e.scrollTop = n : o > e.scrollTop + e.clientHeight && (e.scrollTop = o - e.clientHeight);
+  }, [a, m, r]);
+  const A = (e) => {
+    const t = i[e];
+    !t || t.disabled || (R(t.value), d(!1));
+  }, z = (e) => {
+    u((t) => b(t < 0 ? e === 1 ? -1 : 0 : t + e, e));
+  }, U = (e) => {
+    if (E) {
+      if (!r) {
+        (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), T());
+        return;
+      }
+      O(e);
+    }
+  }, O = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), z(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), z(-1);
+        break;
+      case "Home":
+        e.preventDefault(), u(b(0, 1));
+        break;
+      case "End":
+        e.preventDefault(), u(b(i.length - 1, -1));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), a >= 0 && A(a);
+        break;
+    }
+  }, W = r && a >= 0 ? `${m}-opt-${a}` : void 0, C = /* @__PURE__ */ c(Q, { children: r && /* @__PURE__ */ c(
+    V.div,
+    {
+      ref: k,
+      id: m,
+      initial: { opacity: 0, y: -4, scale: 0.98 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: -4, scale: 0.98 },
+      transition: Z.fade,
+      style: l ? B : void 0,
+      className: h(
+        "z-[100] max-h-64 w-full min-w-[220px] overflow-y-auto rounded-panel border border-border bg-surface-raised p-1 shadow-pop",
+        l ? "fixed" : "absolute top-[calc(100%+6px)]",
+        !l && (g === "end" ? "right-0" : "left-0")
+      ),
+      role: "listbox",
+      "aria-label": M,
+      children: i.map((e, t) => {
+        const n = e.value === p, o = t === a;
+        return /* @__PURE__ */ x(
+          "button",
+          {
+            id: `${m}-opt-${t}`,
+            type: "button",
+            role: "option",
+            "aria-selected": n,
+            disabled: e.disabled,
+            tabIndex: -1,
+            onMouseEnter: () => !e.disabled && u(t),
+            onClick: () => {
+              e.disabled || A(t);
+            },
+            className: h(
+              "flex min-h-row-default w-full min-w-0 items-center gap-2 rounded-control px-2.5 py-1.5 text-left font-sohne text-body-sm transition-colors disabled:cursor-not-allowed disabled:opacity-45",
+              n ? "bg-surface-muted font-[500] text-ink" : "text-graphite hover:bg-surface-hover hover:text-ink",
+              o && !n && "bg-surface-hover text-ink"
+            ),
+            children: [
+              e.leading,
+              /* @__PURE__ */ x("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ c("span", { className: "block truncate", children: e.label }),
+                e.meta && /* @__PURE__ */ c("span", { className: "mt-0.5 block truncate text-caption font-[450] text-graphite", children: e.meta })
+              ] }),
+              n && /* @__PURE__ */ c(X, { size: 14, className: "shrink-0 text-ink" })
+            ]
+          },
+          e.value
+        );
+      })
+    }
+  ) });
+  return /* @__PURE__ */ x("div", { ref: y, className: h("relative min-w-0", $), children: [
+    /* @__PURE__ */ x(
+      "button",
+      {
+        type: "button",
+        "aria-label": M,
+        "aria-haspopup": "listbox",
+        "aria-expanded": r,
+        "aria-controls": r ? m : void 0,
+        "aria-activedescendant": W,
+        disabled: !E,
+        "data-density": H,
+        onClick: () => r ? d(!1) : T(),
+        onKeyDown: U,
+        className: h(
+          "flex w-full min-w-0 items-center gap-2 rounded-control border border-border bg-pure-white font-sohne font-[500] leading-none text-ink outline-none transition hover:border-graphite hover:bg-surface-hover disabled:cursor-not-allowed disabled:text-graphite focus-visible:ring-2 focus-visible:ring-rust/35",
+          H === "compact" ? "h-control-compact px-2 text-caption" : "h-control-default px-3 text-body-sm"
+        ),
+        children: [
+          f == null ? void 0 : f.leading,
+          /* @__PURE__ */ c("span", { className: "min-w-0 flex-1 truncate text-left", children: (f == null ? void 0 : f.label) ?? S }),
+          /* @__PURE__ */ c(
+            Y,
+            {
+              size: 12,
+              className: h("shrink-0 text-ink transition-transform", r && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    l && typeof document < "u" ? J(C, document.body) : C
+  ] });
+}
+export {
+  ae as DropdownSelect
+};

package/dist/components/field.js

@@ -0,0 +1,21 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { useId as f, isValidElement as g, cloneElement as b } from "react";
+function I({ label: r, children: e, hint: i, error: t, required: l = !1, className: c = "" }) {
+  const p = f(), a = e.props.id ?? p, d = i ? `${a}-hint` : void 0, n = t ? `${a}-error` : void 0, m = [e.props["aria-describedby"], d, n].filter(Boolean).join(" ") || void 0, x = g(e) ? b(e, {
+    id: a,
+    "aria-describedby": m,
+    "aria-invalid": !!t || void 0
+  }) : e;
+  return /* @__PURE__ */ s("div", { className: `grid min-w-0 gap-1.5 font-sohne text-caption ${c}`, "data-slot": "field", children: [
+    /* @__PURE__ */ s("label", { htmlFor: a, className: "font-[500] text-graphite", children: [
+      r,
+      l && /* @__PURE__ */ o("span", { className: "ml-1 text-danger", "aria-hidden": !0, children: "*" })
+    ] }),
+    x,
+    i && /* @__PURE__ */ o("p", { id: d, className: "text-caption text-graphite", children: i }),
+    t && /* @__PURE__ */ o("p", { id: n, className: "text-caption text-danger", children: t })
+  ] });
+}
+export {
+  I as Field
+};

package/dist/components/floating-window.js

@@ -0,0 +1,159 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { useState as g, useRef as D, useEffect as v } from "react";
+import { createPortal as X } from "react-dom";
+import { Pin as S, X as B } from "lucide-react";
+import { cn as x } from "../lib/cn.js";
+import { useWideViewport as F } from "../lib/viewport.js";
+const c = (o, d, f) => Math.max(d, Math.min(f, o));
+function J({
+  open: o,
+  onClose: d,
+  title: f,
+  children: j,
+  initialW: w = 560,
+  initialH: p = 440,
+  minW: E = 320,
+  minH: R = 260,
+  pinLabel: y = "Pin",
+  unpinLabel: P = "Unpin",
+  closeLabel: b = "Close"
+}) {
+  const n = F(640), [i, W] = g(!1), [l, Y] = g({ w, h: p }), [t, k] = g(null), u = D(null), s = D(null);
+  if (v(() => {
+    !o || typeof window > "u" || !n || k(
+      (e) => e ?? {
+        x: c((window.innerWidth - w) / 2, 16, Math.max(16, window.innerWidth - w - 16)),
+        y: c((window.innerHeight - p) / 3, 16, Math.max(16, window.innerHeight - p - 16))
+      }
+    );
+  }, [o, w, p, n]), v(() => {
+    if (!o || n && i) return;
+    const e = (a) => {
+      a.key === "Escape" && d();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [o, i, d, n]), v(() => {
+    if (!o || n || typeof document > "u") return;
+    const e = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = e;
+    };
+  }, [o, n]), !o || typeof document > "u" || n && !t) return null;
+  const z = (e) => {
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }, H = (e) => {
+    !n || e.button !== 0 || !t || (u.current = { ox: e.clientX - t.x, oy: e.clientY - t.y }, z(e));
+  }, I = (e) => {
+    !n || !u.current || !t || k({
+      x: c(e.clientX - u.current.ox, 0, window.innerWidth - l.w),
+      y: c(e.clientY - u.current.oy, 0, window.innerHeight - 40)
+    });
+  }, N = (e) => {
+    var a, h;
+    u.current = null, (h = (a = e.currentTarget).releasePointerCapture) == null || h.call(a, e.pointerId);
+  }, T = (e) => {
+    !n || !t || (e.stopPropagation(), s.current = { sx: e.clientX, sy: e.clientY, sw: l.w, sh: l.h }, z(e));
+  }, U = (e) => {
+    !n || !s.current || !t || Y({
+      w: c(s.current.sw + (e.clientX - s.current.sx), E, window.innerWidth - t.x - 8),
+      h: c(s.current.sh + (e.clientY - s.current.sy), R, window.innerHeight - t.y - 8)
+    });
+  }, M = (e) => {
+    var a, h;
+    s.current = null, (h = (a = e.currentTarget).releasePointerCapture) == null || h.call(a, e.pointerId);
+  }, C = /* @__PURE__ */ m(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": f,
+      className: x(
+        "flex flex-col overflow-hidden bg-surface-raised shadow-subtle ring-1 ring-border",
+        n ? "fixed z-50 rounded-overlay" : "relative z-10 h-[min(92dvh,var(--spacing-overlay-dashboard))] w-full max-w-none rounded-t-sheet pb-[env(safe-area-inset-bottom)]"
+      ),
+      style: n && t ? { left: t.x, top: t.y, width: l.w, height: l.h } : void 0,
+      children: [
+        /* @__PURE__ */ m(
+          "header",
+          {
+            onPointerDown: H,
+            onPointerMove: I,
+            onPointerUp: N,
+            onPointerCancel: N,
+            className: x(
+              "flex shrink-0 select-none items-center justify-between gap-2 border-b border-border bg-fog/50 px-3 py-2",
+              n ? "cursor-move touch-none" : "cursor-default"
+            ),
+            children: [
+              !n && /* @__PURE__ */ r("span", { className: "absolute left-1/2 top-1.5 h-1 w-10 -translate-x-1/2 rounded-full bg-dove/80", "aria-hidden": !0 }),
+              /* @__PURE__ */ r("span", { className: x("truncate font-sohne text-caption font-[480] text-ink", !n && "pt-1"), children: f }),
+              /* @__PURE__ */ m("div", { className: "flex shrink-0 items-center gap-1", children: [
+                n && /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onPointerDown: (e) => e.stopPropagation(),
+                    onClick: () => W((e) => !e),
+                    "aria-pressed": i,
+                    title: i ? P : y,
+                    "aria-label": i ? P : y,
+                    className: x(
+                      "grid h-6 w-6 place-items-center rounded-full transition hover:bg-dove/50",
+                      i ? "text-ink" : "text-graphite"
+                    ),
+                    children: /* @__PURE__ */ r(S, { size: 13, fill: i ? "currentColor" : "none" })
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onPointerDown: (e) => e.stopPropagation(),
+                    onClick: d,
+                    title: b,
+                    "aria-label": b,
+                    className: "grid h-6 w-6 place-items-center rounded-full text-graphite transition hover:bg-dove/50 hover:text-ink",
+                    children: /* @__PURE__ */ r(B, { size: 14, "aria-hidden": !0 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "relative flex min-h-0 flex-1 flex-col p-2", children: j }),
+        n && /* @__PURE__ */ r(
+          "div",
+          {
+            onPointerDown: T,
+            onPointerMove: U,
+            onPointerUp: M,
+            onPointerCancel: M,
+            "aria-hidden": !0,
+            className: "absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize touch-none",
+            children: /* @__PURE__ */ r("svg", { viewBox: "0 0 10 10", className: "h-full w-full text-graphite/60", "aria-hidden": !0, children: /* @__PURE__ */ r("path", { d: "M9 3 L3 9 M9 6 L6 9", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", fill: "none" }) })
+          }
+        )
+      ]
+    }
+  );
+  return n ? X(C, document.body) : X(
+    /* @__PURE__ */ m("div", { className: "fixed inset-0 z-50 flex items-end justify-center", children: [
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          "aria-label": b,
+          onClick: d,
+          className: "absolute inset-0 bg-black/45 backdrop-blur-[2px]"
+        }
+      ),
+      C
+    ] }),
+    document.body
+  );
+}
+export {
+  J as FloatingWindow
+};

package/dist/components/heading.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cn as i } from "../lib/cn.js";
+function g({
+  level: t = "base",
+  as: e = "h2",
+  className: s,
+  children: a
+}) {
+  return /* @__PURE__ */ n(e, { className: i("font-signifier font-[600] tracking-[0] text-ink", {
+    display: "text-display",
+    lg: "text-heading-lg",
+    base: "text-heading"
+  }[t], s), children: a });
+}
+function x({ children: t, className: e }) {
+  return /* @__PURE__ */ n("h3", { className: i("font-sohne text-subheading font-[450] text-ink", e), children: t });
+}
+export {
+  g as Heading,
+  x as Subheading
+};

package/dist/components/hover-tip.js

@@ -0,0 +1,90 @@
+import { jsxs as j, Fragment as k, jsx as f } from "react/jsx-runtime";
+import { useRef as H, useState as T, useCallback as W, useLayoutEffect as v } from "react";
+import { createPortal as F } from "react-dom";
+import { AnimatePresence as I, motion as $ } from "motion/react";
+import { cn as z } from "../lib/cn.js";
+import { transitions as G } from "../lib/motion.js";
+const t = 8;
+function A(s, h, i) {
+  return Math.min(Math.max(h, s), i);
+}
+function O({
+  content: s,
+  children: h,
+  width: i = 240,
+  variant: e = "panel"
+}) {
+  const d = H(null), R = H(null), a = H(null), [o, x] = T(null), [g, y] = T(!1), M = () => {
+    a.current && clearTimeout(a.current), a.current = null;
+  }, B = W(() => {
+    M();
+    const r = d.current;
+    if (!r) return;
+    const c = r.getBoundingClientRect();
+    y(!1), x({
+      top: c.bottom + 5,
+      left: c.left,
+      maxH: e === "hint" ? 96 : 240
+    });
+  }, [e]), w = W(() => {
+    M(), a.current = setTimeout(() => {
+      x(null), y(!1);
+    }, 140);
+  }, []);
+  return v(() => {
+    if (!o) return;
+    const r = R.current, c = d.current;
+    if (!r || !c) return;
+    const n = c.getBoundingClientRect(), C = r.getBoundingClientRect(), E = C.width || (e === "hint" ? 160 : i), p = C.height || 32, L = window.innerWidth, b = window.innerHeight, N = b - n.bottom - t < p + 8 && n.top > p + t;
+    let u = N ? n.top - 5 - p : n.bottom + 5;
+    u = A(u, t, Math.max(t, b - t - p));
+    let l;
+    e === "hint" ? l = n.left + n.width / 2 - E / 2 : l = n.left, l = A(l, t, Math.max(t, L - t - E));
+    const P = N ? Math.max(e === "hint" ? 48 : 120, n.top - t * 2) : Math.max(e === "hint" ? 48 : 120, b - u - t), m = { top: u, left: l, maxH: P };
+    (!g || Math.abs(m.top - o.top) > 0.5 || Math.abs(m.left - o.left) > 0.5 || Math.abs(m.maxH - o.maxH) > 0.5) && (x(m), y(!0));
+  }, [o, g, e, i, s]), /* @__PURE__ */ j(k, { children: [
+    /* @__PURE__ */ f(
+      "span",
+      {
+        ref: d,
+        className: "inline-flex",
+        onMouseEnter: B,
+        onMouseLeave: w,
+        onFocus: B,
+        onBlur: w,
+        children: h
+      }
+    ),
+    typeof document < "u" && F(
+      /* @__PURE__ */ f(I, { children: o && /* @__PURE__ */ f(
+        $.div,
+        {
+          ref: R,
+          role: "tooltip",
+          initial: { opacity: 0, y: -4 },
+          animate: { opacity: g ? 1 : 0, y: 0 },
+          exit: { opacity: 0, y: -4 },
+          transition: G.fade,
+          onMouseEnter: M,
+          onMouseLeave: w,
+          style: {
+            position: "fixed",
+            top: o.top,
+            left: o.left,
+            maxHeight: o.maxH,
+            ...e === "hint" ? { maxWidth: `min(${i}px, calc(100vw - ${t * 2}px))` } : { width: i }
+          },
+          className: z(
+            "z-[60]",
+            e === "hint" ? "pointer-events-none w-max rounded-md bg-ink px-2 py-1 shadow-pop" : "overflow-y-auto rounded-panel bg-surface-raised p-3 shadow-pop ring-1 ring-border"
+          ),
+          children: e === "hint" ? /* @__PURE__ */ f("div", { className: "font-sohne text-[11px] font-[480] leading-snug text-pure-white", children: s }) : s
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+export {
+  O as HoverTip
+};

package/dist/components/icon-tip.js

@@ -0,0 +1,12 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { HoverTip as i } from "./hover-tip.js";
+function e({
+  label: o,
+  children: r
+}) {
+  return /* @__PURE__ */ t(i, { content: o, variant: "hint", children: r });
+}
+export {
+  e as IconTip
+};

package/dist/components/input-group.js

@@ -0,0 +1,16 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { isValidElement as l, cloneElement as p } from "react";
+import { cn as s } from "../lib/cn.js";
+function m({ label: i, start: e, end: o, children: r, className: n }) {
+  const a = l(r) ? p(r, {
+    className: s("min-w-0 flex-1 !rounded-none !border-0 !bg-transparent focus:!border-0 focus-visible:!ring-0", r.props.className)
+  }) : r;
+  return /* @__PURE__ */ d("div", { role: "group", "aria-label": i, "data-focus-shell": !0, className: s("flex min-w-0 items-center overflow-hidden rounded-control border border-border bg-pure-white has-[input:focus-visible]:border-rust/70 has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-rust/20", n), children: [
+    e && /* @__PURE__ */ t("span", { "data-slot": "input-start", className: "shrink-0 border-r border-divider px-2.5 font-product text-caption text-graphite", children: e }),
+    a,
+    o && /* @__PURE__ */ t("span", { "data-slot": "input-end", className: "shrink-0 border-l border-divider px-2.5 font-product text-caption text-graphite", children: o })
+  ] });
+}
+export {
+  m as InputGroup
+};