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

package/dist/components/avatar.js

@@ -0,0 +1,101 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { cn as c } from "../lib/cn.js";
+const p = {
+  compact: "size-control-compact text-data",
+  default: "size-control-default text-caption",
+  touch: "size-control-touch text-body-sm"
+}, g = {
+  online: "bg-success",
+  away: "bg-warning",
+  offline: "bg-graphite"
+};
+function w({ src: e, fallback: r, label: o, status: a, statusLabel: t, size: l = "default", className: u }) {
+  const [n, s] = m(!1);
+  return /* @__PURE__ */ f(
+    "span",
+    {
+      role: "img",
+      "aria-label": o,
+      "data-size": l,
+      className: c("relative inline-grid shrink-0 place-items-center overflow-visible rounded-full bg-surface-muted font-data font-[600] text-ink ring-1 ring-border", p[l], u),
+      children: [
+        e && !n ? /* @__PURE__ */ i(
+          "img",
+          {
+            src: e,
+            alt: "",
+            className: "size-full rounded-full object-cover",
+            onError: () => s(!0)
+          }
+        ) : /* @__PURE__ */ i("span", { className: "truncate px-1", "data-slot": "avatar-fallback", children: r }),
+        a && /* @__PURE__ */ i(
+          "span",
+          {
+            "aria-label": t,
+            "aria-hidden": t ? void 0 : !0,
+            "data-status": a,
+            className: c("absolute bottom-0 right-0 z-10 size-2.5 rounded-full ring-2 ring-surface-canvas", g[a])
+          }
+        )
+      ]
+    }
+  );
+}
+const v = {
+  compact: "-space-x-1.5",
+  default: "-space-x-2"
+};
+function z({
+  label: e,
+  children: r,
+  overlap: o = "default",
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      role: "group",
+      "aria-label": e,
+      className: c(
+        "isolate inline-flex items-center overflow-visible [&>*]:relative [&>*]:ring-2 [&>*]:ring-surface-raised [&>*]:transition-transform [&>*:hover]:z-10 [&>*:hover]:-translate-y-px",
+        v[o],
+        a
+      ),
+      ...t,
+      children: r
+    }
+  );
+}
+function N({
+  count: e,
+  label: r,
+  size: o = 20,
+  showPlus: a = !0,
+  className: t,
+  style: l,
+  ...u
+}) {
+  const n = Math.max(0, Math.floor(e)), s = `${a && n > 0 ? "+" : ""}${n}`, d = Math.max(o, 18 + Math.max(0, s.length - 2) * 4);
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      role: "img",
+      "aria-label": r,
+      "data-avatar-overflow-count": n,
+      className: c(
+        "inline-grid shrink-0 place-items-center overflow-visible whitespace-nowrap rounded-full bg-surface-muted font-data text-[9px] font-[600] leading-none text-ink",
+        t
+      ),
+      style: { width: d, height: d, ...l },
+      ...u,
+      children: s
+    }
+  );
+}
+export {
+  w as Avatar,
+  z as AvatarGroup,
+  N as AvatarGroupOverflow
+};

package/dist/components/badge.js

@@ -0,0 +1,111 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { useState as h, useEffect as w } from "react";
+import { cn as l } from "../lib/cn.js";
+const g = [
+  "var(--color-surface-warm)",
+  "var(--color-surface-cool)",
+  "var(--color-surface-muted)",
+  "var(--color-surface-raised)"
+];
+function m(t) {
+  let n = 0;
+  for (let e = 0; e < t.length; e++) n = n * 31 + t.charCodeAt(e) >>> 0;
+  return g[n % g.length];
+}
+function v({
+  initials: t,
+  tint: n,
+  size: e = 36,
+  className: r,
+  src: o,
+  alt: a
+}) {
+  return o ? /* @__PURE__ */ i(
+    "img",
+    {
+      src: o,
+      alt: a ?? t,
+      className: l("inline-block shrink-0 rounded-full object-cover", r),
+      style: { width: e, height: e }
+    }
+  ) : /* @__PURE__ */ i(
+    "span",
+    {
+      className: l(
+        "inline-flex items-center justify-center rounded-full font-sohne font-[500] text-ink",
+        r
+      ),
+      style: {
+        backgroundColor: n ?? m(t),
+        width: e,
+        height: e,
+        fontSize: Math.round(e * 0.36)
+      },
+      children: t.slice(0, 2).toUpperCase()
+    }
+  );
+}
+function j({ label: t, fallback: n, sources: e = [], tint: r, size: o = 20, className: a }) {
+  const [c, f] = h(0), [s, u] = h(!1), d = e[c];
+  return w(() => {
+    f(0), u(!1);
+  }, [t, e.join("|")]), /* @__PURE__ */ x(
+    "span",
+    {
+      role: "img",
+      "aria-label": t,
+      "data-image-state": s ? "loaded" : d ? "loading" : "fallback",
+      className: l("relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full font-sohne font-[600] text-ink", a),
+      style: { width: o, height: o, backgroundColor: s ? "transparent" : r ?? m(t) },
+      children: [
+        !s && /* @__PURE__ */ i("span", { "aria-hidden": !0, style: { fontSize: Math.max(7, Math.round(o * 0.42)), lineHeight: 1 }, children: n.slice(0, 2).toUpperCase() }),
+        d && /* @__PURE__ */ i(
+          "img",
+          {
+            src: d,
+            alt: "",
+            "aria-hidden": !0,
+            onLoad: () => u(!0),
+            onError: () => {
+              c + 1 < e.length ? f((p) => p + 1) : u(!1);
+            },
+            className: l("absolute inset-0 size-full rounded-full object-contain", s ? "opacity-100" : "opacity-0")
+          },
+          d
+        )
+      ]
+    }
+  );
+}
+function C({ children: t, tone: n = "neutral", size: e = "default", className: r, ...o }) {
+  const a = {
+    neutral: "bg-fog text-graphite",
+    warm: "bg-surface-warm text-rust",
+    cool: "bg-surface-cool text-ink",
+    success: "bg-up/15 text-ink",
+    danger: "bg-down/15 text-down",
+    warning: "bg-warning/15 text-warning"
+  }, c = {
+    micro: "h-4 rounded-indicator px-1.5 text-micro font-[500]",
+    compact: "h-5 rounded-control px-2 text-data font-[500]",
+    default: "min-h-7 rounded-full px-3 py-1 text-[13px] font-[450]"
+  };
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      ...o,
+      className: l(
+        "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-sohne",
+        a[n],
+        c[e],
+        r
+      ),
+      children: t
+    }
+  );
+}
+export {
+  v as AvatarBadge,
+  j as ResourceIcon,
+  C as Tag
+};

package/dist/components/button-group.js

@@ -0,0 +1,22 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as l } from "../lib/cn.js";
+function d({ label: o, children: n, orientation: t = "horizontal", className: r }) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      role: "group",
+      "aria-label": o,
+      "aria-orientation": t,
+      "data-orientation": t,
+      className: l(
+        "inline-flex min-w-0 [&>button]:relative [&>button]:focus-visible:z-10",
+        t === "horizontal" ? "flex-row [&>button:not(:first-child)]:-ml-px [&>button:not(:first-child)]:rounded-l-none [&>button:not(:last-child)]:rounded-r-none" : "flex-col [&>button:not(:first-child)]:-mt-px [&>button:not(:first-child)]:rounded-t-none [&>button:not(:last-child)]:rounded-b-none",
+        r
+      ),
+      children: n
+    }
+  );
+}
+export {
+  d as ButtonGroup
+};

package/dist/components/button.js

@@ -0,0 +1,64 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as u } from "radix-ui";
+import { forwardRef as p } from "react";
+import { cn as f } from "../lib/cn.js";
+function h({
+  asChild: o = !1,
+  variant: t = "primary",
+  size: e = "default",
+  className: n,
+  children: r,
+  type: s = "button",
+  ...i
+}) {
+  const c = o ? u.Root : "button", l = "inline-flex shrink-0 items-center justify-center gap-2 rounded-control font-sohne font-[500] tracking-[0] outline-none transition-[background-color,color,border-color,opacity,transform] duration-150 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-rust/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-canvas disabled:pointer-events-none disabled:opacity-45", d = {
+    primary: "bg-solid text-on-solid hover:opacity-90",
+    accent: "bg-rust text-on-accent hover:opacity-90",
+    secondary: "border border-border bg-surface-muted text-ink hover:bg-surface-hover",
+    ghost: "text-ink hover:bg-surface-hover",
+    success: "bg-up text-on-status hover:opacity-90",
+    danger: "bg-danger text-on-status hover:opacity-90",
+    text: "h-auto rounded-none p-0 text-ink underline-offset-4 hover:underline"
+  }, b = {
+    compact: "h-control-compact px-2.5 text-caption",
+    default: "h-control-default px-3.5 text-body-sm",
+    touch: "h-control-touch px-4 text-body",
+    icon: "size-control-default p-0"
+  };
+  return /* @__PURE__ */ a(
+    c,
+    {
+      type: o ? void 0 : s,
+      "data-variant": t,
+      "data-size": e,
+      className: f(l, d[t], b[e], n),
+      ...i,
+      children: r
+    }
+  );
+}
+function y({ children: o }) {
+  return /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-end gap-2", children: o });
+}
+const k = p(function({ asChild: t = !1, active: e = !1, className: n, children: r, ...s }, i) {
+  const c = t ? u.Root : "button";
+  return /* @__PURE__ */ a(
+    c,
+    {
+      ref: i,
+      type: t ? void 0 : "button",
+      "data-active": e || void 0,
+      className: f(
+        "outline-none transition-[background-color,color,border-color,box-shadow,transform] focus-visible:ring-2 focus-visible:ring-rust/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-canvas active:scale-[0.99]",
+        n
+      ),
+      ...s,
+      children: r
+    }
+  );
+});
+export {
+  y as ActionGroup,
+  h as Button,
+  k as Pressable
+};

package/dist/components/calendar-period-navigator.js

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { ChevronLeft as v, ChevronRight as g } from "lucide-react";
+import { cn as u } from "../lib/cn.js";
+import { Button as r } from "./button.js";
+import { DatePicker as x } from "./date-time.js";
+import { SlidingTabs as C } from "./sliding-tabs.js";
+function j({
+  value: o,
+  onValueChange: n,
+  onPrevious: t,
+  onNext: c,
+  onToday: s,
+  period: d,
+  onPeriodChange: m,
+  periods: l,
+  labels: e,
+  datePicker: h,
+  className: p,
+  trailing: f
+}) {
+  return /* @__PURE__ */ a("div", { className: u("flex min-w-0 flex-wrap items-center gap-2", p), children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ i(r, { size: "icon", variant: "ghost", "aria-label": e.previousPeriod, onClick: t, children: /* @__PURE__ */ i(v, { size: 14, "aria-hidden": !0 }) }),
+      /* @__PURE__ */ i(r, { size: "compact", variant: "secondary", onClick: s, children: e.today }),
+      /* @__PURE__ */ i(r, { size: "icon", variant: "ghost", "aria-label": e.nextPeriod, onClick: c, children: /* @__PURE__ */ i(g, { size: 14, "aria-hidden": !0 }) })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "w-36", children: /* @__PURE__ */ i(x, { ...h, value: o, onValueChange: n }) }),
+    /* @__PURE__ */ i(C, { size: "sm", value: d, onChange: m, tabs: l }),
+    f
+  ] });
+}
+export {
+  j as CalendarPeriodNavigator
+};

package/dist/components/card.js

@@ -0,0 +1,35 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Slot as f } from "radix-ui";
+import { cn as n } from "../lib/cn.js";
+function u({ asChild: r = !1, as: o = "div", tone: a = "plain", density: e = "default", className: c, children: d, ...s }) {
+  const b = r ? f.Root : o;
+  return /* @__PURE__ */ t(
+    b,
+    {
+      "data-density": e,
+      className: n(
+        "rounded-panel",
+        e === "none" ? "" : e === "compact" ? "p-3" : "p-4",
+        {
+          plain: "border border-border bg-surface-card",
+          warm: "border border-border bg-surface-warm",
+          cool: "border border-border bg-surface-cool"
+        }[a],
+        c
+      ),
+      ...s,
+      children: d
+    }
+  );
+}
+function x({ children: r, className: o }) {
+  return /* @__PURE__ */ t("h3", { className: n("font-sohne text-body font-[500] tracking-[0] text-ink", o), children: r });
+}
+function g({ children: r, className: o }) {
+  return /* @__PURE__ */ t("span", { className: n("font-sohne text-caption text-graphite", o), children: r });
+}
+export {
+  u as Card,
+  g as CardLabel,
+  x as CardTitle
+};

package/dist/components/chart-frame.js

@@ -0,0 +1,53 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useId as c } from "react";
+import { cn as l } from "../lib/cn.js";
+const b = {
+  live: "bg-up",
+  stale: "bg-warning",
+  loading: "bg-info",
+  error: "bg-danger"
+};
+function N({
+  title: o,
+  summary: m,
+  status: i,
+  statusLabel: n,
+  toolbar: a,
+  legend: s,
+  className: h,
+  children: f,
+  ...p
+}) {
+  const d = c(), t = c();
+  return /* @__PURE__ */ r(
+    "figure",
+    {
+      "aria-labelledby": d,
+      "aria-describedby": t,
+      "data-chart-status": i,
+      className: l(
+        "flex min-h-chart-frame-min min-w-0 flex-col overflow-hidden rounded-panel border border-border bg-surface-card",
+        h
+      ),
+      ...p,
+      children: [
+        /* @__PURE__ */ r("header", { className: "flex min-h-row-compact shrink-0 items-center justify-between gap-3 border-b border-divider px-3", children: [
+          /* @__PURE__ */ r("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ e("span", { id: d, className: "truncate font-sohne text-caption font-[500] text-ink", children: o }),
+            i && n && /* @__PURE__ */ r("span", { className: "inline-flex shrink-0 items-center gap-1.5 font-sohne text-micro text-graphite", children: [
+              /* @__PURE__ */ e("span", { className: l("size-1.5 rounded-full", b[i]), "aria-hidden": !0 }),
+              n
+            ] })
+          ] }),
+          a && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: a })
+        ] }),
+        s && /* @__PURE__ */ e("div", { className: "shrink-0 border-b border-divider px-3 py-1.5", children: s }),
+        /* @__PURE__ */ e("div", { className: "min-h-0 min-w-0 flex-1 p-3", children: f }),
+        /* @__PURE__ */ e("figcaption", { id: t, className: "sr-only", children: m })
+      ]
+    }
+  );
+}
+export {
+  N as ChartFrame
+};

package/dist/components/color-picker.js

@@ -0,0 +1,155 @@
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import { Pipette as w, Check as x } from "lucide-react";
+import { useMemo as N, useState as k, useRef as C, useEffect as y } from "react";
+import { Button as $ } from "./button.js";
+import { Input as M } from "./input.js";
+import { Popover as z } from "./popover-menu.js";
+function b(d, p = 0, t = 1) {
+  return Math.min(t, Math.max(p, d));
+}
+function D(d) {
+  const p = /^#[0-9a-f]{6}$/i.test(d) ? d : "#000000", [t, i, o] = [1, 3, 5].map((h) => Number.parseInt(p.slice(h, h + 2), 16) / 255), r = Math.max(t, i, o), a = Math.min(t, i, o), l = r - a;
+  let n = 0;
+  return l > 0 && (r === t ? n = 60 * ((i - o) / l % 6) : r === i ? n = 60 * ((o - t) / l + 2) : n = 60 * ((t - i) / l + 4)), {
+    h: n < 0 ? n + 360 : n,
+    s: r === 0 ? 0 : l / r,
+    v: r
+  };
+}
+function L({ h: d, s: p, v: t }) {
+  const i = t * p, o = d / 60, r = i * (1 - Math.abs(o % 2 - 1)), [a, l, n] = o < 1 ? [i, r, 0] : o < 2 ? [r, i, 0] : o < 3 ? [0, i, r] : o < 4 ? [0, r, i] : o < 5 ? [r, 0, i] : [i, 0, r], h = t - i, c = (m) => Math.round((m + h) * 255).toString(16).padStart(2, "0");
+  return `#${c(a)}${c(l)}${c(n)}`;
+}
+function S({ value: d, onChange: p, labels: t, presets: i = [], disabled: o = !1 }) {
+  const r = /^#[0-9a-f]{6}$/i.test(d) ? d.toLowerCase() : "#000000", a = N(() => D(r), [r]), [l, n] = k(r.toUpperCase()), h = C(null);
+  y(() => n(r.toUpperCase()), [r]);
+  const c = (e) => p(L({ h: (e.h + 360) % 360, s: b(e.s), v: b(e.v) })), m = (e) => {
+    const u = h.current;
+    if (!u) return;
+    const g = u.getBoundingClientRect();
+    c({ h: a.h, s: b((e.clientX - g.left) / g.width), v: 1 - b((e.clientY - g.top) / g.height) });
+  }, v = () => {
+    /^#[0-9a-f]{6}$/i.test(l) ? p(l.toLowerCase()) : n(r.toUpperCase());
+  };
+  return /* @__PURE__ */ s(
+    z,
+    {
+      title: t.dialog,
+      closeLabel: t.close,
+      trigger: /* @__PURE__ */ f(
+        $,
+        {
+          "data-color-picker-trigger": "true",
+          variant: "secondary",
+          disabled: o,
+          "aria-label": t.trigger,
+          className: "w-full min-w-0 justify-between px-2.5",
+          children: [
+            /* @__PURE__ */ f("span", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ s("span", { className: "size-5 shrink-0 rounded-full border border-border shadow-subtle", style: { backgroundColor: r }, "aria-hidden": !0 }),
+              /* @__PURE__ */ s("span", { className: "min-w-0 text-left text-caption text-graphite", children: t.trigger })
+            ] }),
+            /* @__PURE__ */ s("span", { className: "shrink-0 font-data text-data tabular-nums text-ink", children: r.toUpperCase() })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ f("div", { className: "grid min-w-0 gap-3 pt-5", children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            ref: h,
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": t.saturation,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(a.s * a.v * 100),
+            className: "relative h-40 touch-none cursor-crosshair overflow-hidden rounded-control border border-border outline-none focus-visible:ring-2 focus-visible:ring-rust/35",
+            style: { backgroundImage: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${a.h} 100% 50%))` },
+            onPointerDown: (e) => {
+              e.currentTarget.setPointerCapture(e.pointerId), m(e);
+            },
+            onPointerMove: (e) => {
+              e.currentTarget.hasPointerCapture(e.pointerId) && m(e);
+            },
+            onKeyDown: (e) => {
+              const u = e.shiftKey ? 0.1 : 0.02;
+              if (e.key === "ArrowLeft") c({ ...a, s: a.s - u });
+              else if (e.key === "ArrowRight") c({ ...a, s: a.s + u });
+              else if (e.key === "ArrowUp") c({ ...a, v: a.v + u });
+              else if (e.key === "ArrowDown") c({ ...a, v: a.v - u });
+              else return;
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ s(
+              "span",
+              {
+                className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-pure-white shadow-pop",
+                style: { left: `${a.s * 100}%`, top: `${(1 - a.v) * 100}%`, backgroundColor: r },
+                "aria-hidden": !0
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ f("label", { className: "grid gap-1.5", children: [
+          /* @__PURE__ */ s("span", { className: "font-product text-micro font-[600] text-graphite", children: t.hue }),
+          /* @__PURE__ */ s(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 359,
+              value: Math.round(a.h),
+              "aria-label": t.hue,
+              onChange: (e) => c({ ...a, h: Number(e.target.value) }),
+              className: "af-color-picker-hue h-3 w-full cursor-pointer appearance-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-rust/35"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ f("label", { className: "grid gap-1.5", children: [
+          /* @__PURE__ */ s("span", { className: "font-product text-micro font-[600] text-graphite", children: t.hex }),
+          /* @__PURE__ */ f("span", { className: "grid grid-cols-[auto_minmax(0,1fr)] items-center overflow-hidden rounded-control border border-border bg-pure-white has-[input:focus-visible]:border-rust has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-rust/20", children: [
+            /* @__PURE__ */ s("span", { className: "grid size-control-default place-items-center border-r border-divider text-graphite", "aria-hidden": !0, children: /* @__PURE__ */ s(w, { size: 15 }) }),
+            /* @__PURE__ */ s(
+              M,
+              {
+                value: l,
+                "aria-label": t.hex,
+                maxLength: 7,
+                spellCheck: !1,
+                onChange: (e) => n(e.target.value.startsWith("#") ? e.target.value : `#${e.target.value}`),
+                onBlur: v,
+                onKeyDown: (e) => {
+                  e.key === "Enter" && (v(), e.currentTarget.blur());
+                },
+                className: "border-0 bg-transparent font-data uppercase focus-visible:ring-0"
+              }
+            )
+          ] })
+        ] }),
+        i.length > 0 ? /* @__PURE__ */ f("div", { className: "grid gap-1.5", children: [
+          /* @__PURE__ */ s("span", { className: "font-product text-micro font-[600] text-graphite", children: t.presets }),
+          /* @__PURE__ */ s("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": t.presets, children: i.map((e) => {
+            const u = e.toLowerCase() === r;
+            return /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${t.presets}: ${e}`,
+                "aria-pressed": u,
+                onClick: () => p(e.toLowerCase()),
+                className: "grid size-8 place-items-center rounded-full border-2 border-surface-raised outline-none ring-1 ring-border transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:ring-rust aria-pressed:ring-2 aria-pressed:ring-ink",
+                style: { backgroundColor: e },
+                children: u ? /* @__PURE__ */ s(x, { size: 14, className: "text-pure-white drop-shadow-sm", strokeWidth: 3, "aria-hidden": !0 }) : null
+              },
+              e
+            );
+          }) })
+        ] }) : null
+      ] })
+    }
+  );
+}
+export {
+  S as ColorPicker
+};