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

package/dist/components/theme-editor.js

@@ -0,0 +1,159 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Sun as w, Moon as b, Monitor as k, Check as C } from "lucide-react";
+import { UI_THEME_BRANDS as S, UI_THEME_ACCENTS as L, UI_THEME_NEUTRALS as y, UI_THEME_SEMANTICS as f, normalizeUiThemeSettings as z } from "../theme.js";
+import { Button as N } from "./button.js";
+import { ColorPicker as T } from "./color-picker.js";
+import { SegmentedControl as l } from "./segmented-control.js";
+import { Switch as E } from "./selection-controls.js";
+import { Slider as x } from "./slider.js";
+function s({ title: i, children: e }) {
+  return /* @__PURE__ */ o("section", { className: "min-w-0 overflow-hidden rounded-panel border border-border bg-surface-raised", children: [
+    /* @__PURE__ */ r("h3", { className: "border-b border-divider px-3 py-2.5 font-product text-body-sm font-[600] text-ink", children: i }),
+    /* @__PURE__ */ r("div", { className: "grid min-w-0 divide-y divide-divider", children: e })
+  ] });
+}
+function t({ label: i, children: e }) {
+  return /* @__PURE__ */ o("div", { className: "af-theme-field grid min-w-0 gap-2.5 px-3 py-3", children: [
+    /* @__PURE__ */ r("span", { className: "af-theme-field-label min-w-0 font-product text-caption font-[500] text-ink", children: i }),
+    /* @__PURE__ */ r("div", { className: "min-w-0", children: e })
+  ] });
+}
+function u({ icon: i, children: e }) {
+  return /* @__PURE__ */ o("span", { className: "flex min-w-0 items-center justify-center gap-1.5", children: [
+    i,
+    e
+  ] });
+}
+function m({
+  label: i,
+  customLabel: e,
+  colors: h,
+  value: p,
+  onChange: v,
+  pickerLabels: g
+}) {
+  return /* @__PURE__ */ r(t, { label: i, children: /* @__PURE__ */ o("div", { className: "grid min-w-0 gap-2.5", children: [
+    /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-wrap items-center gap-2", role: "group", "aria-label": i, children: h.map((n) => /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        "aria-label": `${i} ${n}`,
+        "aria-pressed": p === n,
+        onClick: () => v(n),
+        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: n },
+        children: p === n ? /* @__PURE__ */ r(C, { size: 13, className: "text-pure-white drop-shadow-sm", strokeWidth: 3, "aria-hidden": !0 }) : null
+      },
+      n
+    )) }),
+    /* @__PURE__ */ r(T, { value: p, onChange: v, presets: h, labels: { ...g, trigger: e } })
+  ] }) });
+}
+function B({
+  settings: i,
+  labels: e,
+  onChange: h,
+  brands: p = S,
+  accents: v = L,
+  neutrals: g = y
+}) {
+  const n = (a) => h(z({ ...i, ...a })), c = "flex w-full", d = (a) => ({
+    trigger: a,
+    dialog: e.colorPickerTitle(a),
+    hex: e.colorPickerHex,
+    hue: e.colorPickerHue,
+    saturation: e.colorPickerSaturation,
+    presets: e.colorPickerPresets,
+    close: e.colorPickerClose
+  });
+  return /* @__PURE__ */ o("div", { "data-ui-theme-editor": "true", className: "af-theme-editor grid min-w-0 gap-4 overflow-x-hidden", children: [
+    /* @__PURE__ */ r(s, { title: e.preview, children: /* @__PURE__ */ r("div", { "data-theme-preview": !0, className: "min-w-0 p-3", children: /* @__PURE__ */ o("div", { className: "min-w-0 rounded-panel border border-border bg-surface-canvas p-3 shadow-subtle", children: [
+      /* @__PURE__ */ o("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ o("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ r("p", { className: "font-product text-micro uppercase text-graphite", children: e.previewEyebrow }),
+          /* @__PURE__ */ r("p", { className: "mt-0.5 break-words font-product text-body font-[600] text-ink", children: e.previewTitle }),
+          /* @__PURE__ */ r("p", { className: "mt-1 break-words font-product text-caption leading-normal text-graphite", children: e.previewDescription })
+        ] }),
+        /* @__PURE__ */ r("span", { className: "shrink-0 rounded-control bg-rust/12 px-2 py-1 font-product text-micro font-[600] text-rust", children: e.previewMetric })
+      ] }),
+      /* @__PURE__ */ o("div", { className: "mt-3 flex items-center gap-4 border-b border-divider font-product text-caption", children: [
+        /* @__PURE__ */ r("span", { className: "border-b-2 border-rust pb-1.5 font-[600] text-ink", children: e.previewPrimaryTab }),
+        /* @__PURE__ */ r("span", { className: "pb-1.5 text-graphite", children: e.previewSecondaryTab })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "mt-3 h-2 overflow-hidden rounded-full bg-surface-muted", "aria-hidden": !0, children: /* @__PURE__ */ r("div", { className: "h-full w-3/5 rounded-full bg-rust" }) }),
+      /* @__PURE__ */ o("div", { className: "mt-3 flex min-w-0 flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ r(N, { variant: "accent", size: "compact", children: e.previewAction }),
+        /* @__PURE__ */ r(N, { variant: "ghost", size: "compact", children: e.previewSecondaryAction }),
+        /* @__PURE__ */ r(E, { label: e.previewSwitch, checked: !0, onCheckedChange: () => {
+        } })
+      ] }),
+      /* @__PURE__ */ o("div", { className: "mt-3 flex items-center gap-2", "aria-hidden": !0, children: [
+        /* @__PURE__ */ r("span", { className: "size-5 rounded-control bg-rust" }),
+        /* @__PURE__ */ r("span", { className: "size-5 rounded-control bg-up" }),
+        /* @__PURE__ */ r("span", { className: "size-5 rounded-control bg-down" })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ o(s, { title: e.page, children: [
+      /* @__PURE__ */ r(t, { label: e.mode, children: /* @__PURE__ */ r(
+        l,
+        {
+          className: c,
+          value: i.mode,
+          onChange: (a) => n({ mode: a }),
+          ariaLabel: e.mode,
+          options: [
+            { value: "light", label: /* @__PURE__ */ r(u, { icon: /* @__PURE__ */ r(w, { size: 14, "aria-hidden": !0 }), children: e.light }) },
+            { value: "dark", label: /* @__PURE__ */ r(u, { icon: /* @__PURE__ */ r(b, { size: 14, "aria-hidden": !0 }), children: e.dark }) },
+            { value: "system", label: /* @__PURE__ */ r(u, { icon: /* @__PURE__ */ r(k, { size: 14, "aria-hidden": !0 }), children: e.system }) }
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r(t, { label: e.shape, children: /* @__PURE__ */ r(
+        l,
+        {
+          className: c,
+          value: i.shape,
+          onChange: (a) => n({ shape: a, radiusScale: { sharp: 0, compact: 0.65, soft: 1, round: 2 }[a] }),
+          ariaLabel: e.shape,
+          options: [
+            { value: "sharp", label: /* @__PURE__ */ r(u, { icon: /* @__PURE__ */ r("span", { className: "size-3 border border-current", "aria-hidden": !0 }), children: e.sharp }) },
+            { value: "compact", label: /* @__PURE__ */ r(u, { icon: /* @__PURE__ */ r("span", { className: "size-3 rounded-[2px] border border-current", "aria-hidden": !0 }), children: e.compact }) },
+            { value: "soft", label: /* @__PURE__ */ r(u, { icon: /* @__PURE__ */ r("span", { className: "size-3 rounded-[4px] border border-current", "aria-hidden": !0 }), children: e.soft }) },
+            { value: "round", label: /* @__PURE__ */ r(u, { icon: /* @__PURE__ */ r("span", { className: "size-3 rounded-full border border-current", "aria-hidden": !0 }), children: e.round }) }
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ o(s, { title: e.colors, children: [
+      /* @__PURE__ */ r(m, { label: e.brand, customLabel: e.customBrand, colors: p, value: i.brand, onChange: (a) => n({ brand: a }), pickerLabels: d(e.customBrand) }),
+      /* @__PURE__ */ r(m, { label: e.accent, customLabel: e.customAccent, colors: v, value: i.accent, onChange: (a) => n({ accent: a }), pickerLabels: d(e.customAccent) }),
+      /* @__PURE__ */ r(m, { label: e.neutral, customLabel: e.customNeutral, colors: g, value: i.neutral, onChange: (a) => n({ neutral: a }), pickerLabels: d(e.customNeutral) })
+    ] }),
+    /* @__PURE__ */ o(s, { title: e.semanticColors, children: [
+      /* @__PURE__ */ r(m, { label: e.positive, customLabel: e.customPositive, colors: f, value: i.positive, onChange: (a) => n({ positive: a }), pickerLabels: d(e.customPositive) }),
+      /* @__PURE__ */ r(m, { label: e.negative, customLabel: e.customNegative, colors: f, value: i.negative, onChange: (a) => n({ negative: a }), pickerLabels: d(e.customNegative) }),
+      /* @__PURE__ */ r(m, { label: e.warning, customLabel: e.customWarning, colors: f, value: i.warning, onChange: (a) => n({ warning: a }), pickerLabels: d(e.customWarning) }),
+      /* @__PURE__ */ r(m, { label: e.info, customLabel: e.customInfo, colors: f, value: i.info, onChange: (a) => n({ info: a }), pickerLabels: d(e.customInfo) })
+    ] }),
+    /* @__PURE__ */ o(s, { title: e.controls, children: [
+      /* @__PURE__ */ r(t, { label: e.solidStyle, children: /* @__PURE__ */ r(l, { className: c, value: i.solidStyle, onChange: (a) => n({ solidStyle: a }), ariaLabel: e.solidStyle, options: [{ value: "color", label: e.color }, { value: "inverse", label: e.inverse }] }) }),
+      /* @__PURE__ */ r(t, { label: e.effect, children: /* @__PURE__ */ r(l, { className: c, value: i.effect, onChange: (a) => n({ effect: a }), ariaLabel: e.effect, options: [{ value: "flat", label: e.flat }, { value: "plastic", label: e.plastic }] }) })
+    ] }),
+    /* @__PURE__ */ o(s, { title: e.advanced, children: [
+      /* @__PURE__ */ r(t, { label: e.surface, children: /* @__PURE__ */ r(l, { className: c, value: i.surface, onChange: (a) => n({ surface: a }), ariaLabel: e.surface, options: [{ value: "filled", label: e.filled }, { value: "translucent", label: e.translucent }] }) }),
+      /* @__PURE__ */ r(t, { label: e.dataStyle, children: /* @__PURE__ */ r(l, { className: c, value: i.dataStyle, onChange: (a) => n({ dataStyle: a }), ariaLabel: e.dataStyle, options: [{ value: "categorical", label: e.categorical }, { value: "divergent", label: e.divergent }, { value: "sequential", label: e.sequential }] }) }),
+      /* @__PURE__ */ r(t, { label: e.motion, children: /* @__PURE__ */ r(l, { className: c, value: i.motion, onChange: (a) => n({ motion: a }), ariaLabel: e.motion, options: [{ value: "all", label: e.all }, { value: "micro", label: e.micro }, { value: "macro", label: e.macro }, { value: "none", label: e.none }] }) }),
+      /* @__PURE__ */ r(t, { label: e.fontScale, children: /* @__PURE__ */ o("div", { className: "grid grid-cols-[minmax(0,1fr)_4.75rem] items-center gap-3", children: [
+        /* @__PURE__ */ r(x, { value: i.fontScale, min: 0.875, max: 1.25, step: 0.125, onChange: (a) => n({ fontScale: a }), ariaLabel: e.fontScale, formatValue: e.value }),
+        /* @__PURE__ */ r("output", { className: "rounded-control border border-border bg-surface-raised px-2 py-1.5 text-center font-data text-data tabular-nums text-ink", children: e.value(i.fontScale) })
+      ] }) }),
+      /* @__PURE__ */ r(t, { label: e.radiusScale, children: /* @__PURE__ */ o("div", { className: "grid grid-cols-[minmax(0,1fr)_4.75rem] items-center gap-3", children: [
+        /* @__PURE__ */ r(x, { value: i.radiusScale, min: 0, max: 2, step: 0.25, onChange: (a) => n({ radiusScale: a }), ariaLabel: e.radiusScale, formatValue: e.value }),
+        /* @__PURE__ */ r("output", { className: "rounded-control border border-border bg-surface-raised px-2 py-1.5 text-center font-data text-data tabular-nums text-ink", children: e.value(i.radiusScale) })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  B as ThemeEditor
+};

package/dist/components/toast.js

@@ -0,0 +1,66 @@
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { Info as C, CheckCircle2 as k, AlertCircle as N, X as z } from "lucide-react";
+import { useState as E, useRef as x, useCallback as l, useEffect as I, useMemo as O, useContext as P, createContext as j } from "react";
+import { cn as y } from "../lib/cn.js";
+const A = { error: N, success: k, info: C }, M = { error: "bg-danger", success: "bg-success", info: "bg-info" }, g = j(null);
+function R() {
+  const o = P(g);
+  if (!o) throw new Error("useToast must be used within ToastProvider");
+  return o;
+}
+function S({ children: o, closeLabel: b, duration: u = 6e3 }) {
+  const [v, d] = E([]), w = x(1), r = x(/* @__PURE__ */ new Map()), c = l((e) => {
+    d((n) => n.filter((i) => i.id !== e));
+    const t = r.current.get(e);
+    t && clearTimeout(t), r.current.delete(e);
+  }, []), a = l((e) => {
+    const t = r.current.get(e);
+    t && clearTimeout(t), r.current.set(e, setTimeout(() => c(e), u));
+  }, [c, u]), m = l((e, t = "error") => {
+    d((n) => {
+      const i = n.find((p) => p.message === e && p.tone === t);
+      if (i)
+        return a(i.id), n;
+      const f = w.current++;
+      return a(f), [...n, { id: f, message: e, tone: t }];
+    });
+  }, [a]);
+  I(() => () => {
+    for (const e of r.current.values()) clearTimeout(e);
+    r.current.clear();
+  }, []);
+  const T = O(() => ({ show: m }), [m]);
+  return /* @__PURE__ */ h(g.Provider, { value: T, children: [
+    o,
+    /* @__PURE__ */ s("div", { className: "pointer-events-none fixed right-4 top-[calc(60px+1rem)] z-[9999] flex w-[calc(100vw-2rem)] flex-col items-end gap-2.5 sm:right-6 sm:w-auto sm:max-w-sm", "data-slot": "toast-viewport", children: v.map((e) => {
+      const t = A[e.tone];
+      return /* @__PURE__ */ h(
+        "div",
+        {
+          role: e.tone === "error" ? "alert" : "status",
+          "data-tone": e.tone,
+          className: "t-item pointer-events-auto flex w-full items-center gap-3 rounded-panel border border-border bg-surface-raised py-3 pl-3.5 pr-3 shadow-pop",
+          children: [
+            /* @__PURE__ */ s("span", { className: y("grid size-8 shrink-0 place-items-center rounded-full text-on-status", M[e.tone]), children: /* @__PURE__ */ s(t, { size: 17, "aria-hidden": !0 }) }),
+            /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 break-words font-product text-caption font-[480] text-ink", children: e.message }),
+            /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                onClick: () => c(e.id),
+                "aria-label": b,
+                className: "grid size-7 shrink-0 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__ */ s(z, { size: 14, "aria-hidden": !0 })
+              }
+            )
+          ]
+        },
+        e.id
+      );
+    }) })
+  ] });
+}
+export {
+  S as ToastProvider,
+  R as useToast
+};

package/dist/components/toolbar.js

@@ -0,0 +1,46 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Toolbar as t } from "radix-ui";
+function c({ label: e, children: n, className: i = "", variant: r = "framed", density: a = "default" }) {
+  return /* @__PURE__ */ o(
+    t.Root,
+    {
+      "aria-label": e,
+      "data-variant": r,
+      "data-density": a,
+      className: `inline-flex items-center gap-1 ${a === "compact" ? "h-control-compact" : "h-control-default"} ${r === "framed" ? "rounded-panel border border-border bg-surface-fog p-1" : "bg-transparent"} ${i}`,
+      loop: !0,
+      children: n
+    }
+  );
+}
+function u(e) {
+  return /* @__PURE__ */ o(
+    t.Button,
+    {
+      ...e,
+      className: `inline-flex size-control-compact items-center justify-center rounded-control text-graphite outline-none transition-colors hover:bg-surface-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-rust disabled:opacity-50 ${e.className ?? ""}`
+    }
+  );
+}
+function f({ children: e }) {
+  return /* @__PURE__ */ o(t.ToggleGroup, { type: "multiple", children: e });
+}
+function m(e) {
+  return /* @__PURE__ */ o(
+    t.ToggleItem,
+    {
+      ...e,
+      className: `inline-flex size-control-compact items-center justify-center rounded-control text-graphite outline-none transition-colors hover:bg-surface-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-rust data-[state=on]:bg-surface-raised data-[state=on]:text-ink ${e.className ?? ""}`
+    }
+  );
+}
+function b(e) {
+  return /* @__PURE__ */ o(t.Separator, { ...e, className: `mx-1 h-4 w-px bg-divider ${e.className ?? ""}` });
+}
+export {
+  c as Toolbar,
+  u as ToolbarButton,
+  b as ToolbarSeparator,
+  f as ToolbarToggleGroup,
+  m as ToolbarToggleItem
+};

package/dist/components/utility.js

@@ -0,0 +1,19 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { AspectRatio as n, ScrollArea as o, Separator as s } from "radix-ui";
+function m(e) {
+  return /* @__PURE__ */ a(s.Root, { ...e, className: `shrink-0 bg-divider data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px ${e.className ?? ""}` });
+}
+function p(e) {
+  const { children: r, className: t, ...l } = e;
+  return /* @__PURE__ */ i(o.Root, { ...l, className: `overflow-hidden ${t ?? ""}`, children: [
+    /* @__PURE__ */ a(o.Viewport, { className: "size-full", children: r }),
+    /* @__PURE__ */ a(o.Scrollbar, { orientation: "vertical", className: "flex w-2 touch-none select-none p-0.5", children: /* @__PURE__ */ a(o.Thumb, { className: "flex-1 rounded-full bg-dove" }) }),
+    /* @__PURE__ */ a(o.Corner, {})
+  ] });
+}
+const f = n.Root;
+export {
+  f as AspectRatio,
+  p as ScrollArea,
+  m as Separator
+};

package/dist/components/widget-frame.js

@@ -0,0 +1,41 @@
+import { jsxs as t, jsx as e, Fragment as l } from "react/jsx-runtime";
+import { useId as b } from "react";
+import { cn as a } from "../lib/cn.js";
+function w({
+  title: d,
+  status: c,
+  toolbar: n,
+  headerContent: i,
+  headerClassName: s,
+  hideHeader: m = !1,
+  density: o = "default",
+  children: h,
+  className: f,
+  contentClassName: p,
+  ...x
+}) {
+  const r = b();
+  return /* @__PURE__ */ t(
+    "section",
+    {
+      role: "region",
+      "aria-labelledby": r,
+      className: a("min-w-0 overflow-hidden rounded-panel border border-border bg-surface-fog", f),
+      ...x,
+      children: [
+        m ? /* @__PURE__ */ e("h3", { id: r, className: "sr-only", children: d }) : /* @__PURE__ */ e("header", { className: a("flex items-center gap-2 border-b border-divider px-3", !i && (o === "compact" ? "h-row-compact" : "h-row-default"), s), children: i ? /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ e("h3", { id: r, className: "sr-only", children: d }),
+          i
+        ] }) : /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ e("h3", { id: r, className: a("min-w-0 flex-1 truncate font-product font-[500] text-ink", o === "compact" ? "text-caption" : "text-body-sm"), children: d }),
+          c && /* @__PURE__ */ e("div", { className: "shrink-0 font-data text-data tabular-nums text-graphite", children: c }),
+          n && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: n })
+        ] }) }),
+        /* @__PURE__ */ e("div", { "data-slot": "widget-content", className: a("min-w-0", p), children: h })
+      ]
+    }
+  );
+}
+export {
+  w as WidgetFrame
+};

package/dist/components/widget-picker.js

@@ -0,0 +1,87 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { Search as C, Check as z } from "lucide-react";
+import { Input as L } from "./input.js";
+import { InputGroup as $ } from "./input-group.js";
+import { Pressable as O } from "./button.js";
+import { SlidingTabs as S } from "./sliding-tabs.js";
+import { cn as f } from "../lib/cn.js";
+function D({
+  label: d,
+  searchLabel: o,
+  searchPlaceholder: g,
+  categories: c,
+  category: t,
+  onCategoryChange: u,
+  query: p,
+  onQueryChange: v,
+  items: x,
+  selected: w,
+  onToggle: N,
+  addedLabel: k,
+  emptyLabel: y,
+  testIdPrefix: m,
+  className: j
+}) {
+  const b = p.trim().toLocaleLowerCase(), h = x.filter(
+    (e) => (t === "all" || e.category === t) && (!b || e.title.toLocaleLowerCase().includes(b))
+  ).reduce((e, s) => {
+    var l;
+    return (e[l = s.category] ?? (e[l] = [])).push(s), e;
+  }, {});
+  return /* @__PURE__ */ i("div", { "aria-label": d, className: f("min-w-0 space-y-4", j), children: [
+    /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-col gap-2 border-b border-divider pb-2 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ a(
+        S,
+        {
+          size: "sm",
+          ariaLabel: d,
+          value: t,
+          onChange: u,
+          tabs: c.map((e) => ({ key: e.value, label: e.label })),
+          className: "min-w-0"
+        }
+      ),
+      /* @__PURE__ */ a($, { label: o, start: /* @__PURE__ */ a(C, { size: 13, "aria-hidden": !0 }), className: "w-full shrink-0 sm:w-48", children: /* @__PURE__ */ a(L, { density: "compact", value: p, onChange: (e) => v(e.target.value), "aria-label": o, placeholder: g }) })
+    ] }),
+    Object.keys(h).length === 0 && /* @__PURE__ */ a("p", { className: "py-12 text-center font-sohne text-body-sm text-graphite", children: y }),
+    Object.entries(h).map(([e, s]) => {
+      var l;
+      return /* @__PURE__ */ i("section", { "aria-labelledby": `widget-picker-${e}`, className: "space-y-2.5", children: [
+        /* @__PURE__ */ a("h3", { id: `widget-picker-${e}`, className: "font-sohne text-body-sm font-[500] text-ink", children: ((l = c.find((r) => r.value === e)) == null ? void 0 : l.label) ?? e }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4", children: s.map((r) => {
+          const n = w.includes(r.id);
+          return /* @__PURE__ */ i(
+            O,
+            {
+              "data-testid": m ? `${m}-${r.id}` : void 0,
+              "aria-pressed": n,
+              "aria-label": r.title,
+              active: n,
+              onClick: () => N(r.id),
+              "aria-disabled": r.disabled || void 0,
+              className: f(
+                "group relative min-h-36 overflow-hidden rounded-panel border border-border bg-surface-card p-3 text-left hover:border-graphite hover:bg-surface-hover",
+                n && "border-graphite bg-surface-muted",
+                r.disabled && "pointer-events-none opacity-45"
+              ),
+              children: [
+                /* @__PURE__ */ i("span", { className: "flex min-w-0 items-center justify-between gap-2 font-sohne text-caption font-[500] text-ink", children: [
+                  /* @__PURE__ */ a("span", { className: "truncate", children: r.title }),
+                  n && /* @__PURE__ */ i("span", { className: "inline-flex shrink-0 items-center gap-1 text-micro font-[450] text-graphite", children: [
+                    /* @__PURE__ */ a(z, { size: 11, "aria-hidden": !0 }),
+                    k
+                  ] })
+                ] }),
+                /* @__PURE__ */ a("div", { className: "mt-3 h-24 overflow-hidden rounded-control border border-divider bg-surface-canvas p-2", children: r.preview })
+              ]
+            },
+            r.id
+          );
+        }) })
+      ] }, e);
+    })
+  ] });
+}
+export {
+  D as WidgetPicker
+};