@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/list.agent-D0iWt4VI.js

@@ -0,0 +1,420 @@
+import { jsx as r, jsxs as U, Fragment as Y } from "react/jsx-runtime";
+import { forwardRef as J, useState as G, useMemo as B, useRef as Q, useCallback as u, useImperativeHandle as Z, useContext as $, useLayoutEffect as V, Children as C, isValidElement as ee, createContext as te } from "react";
+import { c as W } from "./index-D2ZczOXr.js";
+import { useTranslation as se } from "react-i18next";
+const z = te({
+  selection: "none",
+  selectedValues: /* @__PURE__ */ new Set(),
+  focusedValue: null,
+  disabled: !1,
+  enabledItemValues: [],
+  onItemSelect: () => {
+  },
+  onItemFocus: () => {
+  },
+  onItemKeyDown: () => {
+  },
+  registerItemRef: () => {
+  },
+  divider: "spaced"
+}), ie = W("ds:flex ds:flex-col ds:p-0 ds:m-0", {
+  variants: {
+    divider: {
+      spaced: "",
+      divided: "",
+      bordered: "ds:border ds:border-[color:var(--border)] ds:rounded-[var(--radius-md)] ds:overflow-hidden"
+    },
+    density: {
+      compact: "ds:gap-[var(--spacing-xs)]",
+      default: "ds:gap-[var(--spacing-sm)]",
+      relaxed: "ds:gap-[var(--spacing-md)]"
+    },
+    ordered: {
+      true: "ds:list-decimal ds:ps-[var(--spacing-lg)]",
+      false: "ds:list-none"
+    }
+  },
+  defaultVariants: {
+    divider: "spaced",
+    density: "default",
+    ordered: !1
+  }
+}), re = W(
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
+  {
+    variants: {
+      divider: {
+        spaced: "",
+        divided: "ds:[&:not(:last-child)]:[border-block-end:1px_solid_var(--border)]",
+        bordered: "ds:[&:not(:last-child)]:[border-block-end:1px_solid_var(--border)]"
+      },
+      interactive: {
+        // flex lives on the outer <div role="option"> so it doesn't suppress ::marker on <li>
+        true: [
+          "ds:flex ds:items-center ds:gap-x-[var(--spacing-sm)]",
+          "ds:min-h-[var(--min-target-size)] ds:cursor-pointer ds:select-none",
+          "ds:rounded-[var(--radius-sm)]",
+          "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+          "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+          "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+        ].join(" "),
+        // no flex here — <li> keeps display:list-item so ::marker renders correctly
+        false: ""
+      },
+      selected: {
+        true: "",
+        false: ""
+      },
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        interactive: !0,
+        selected: !1,
+        disabled: !1,
+        className: "ds:hover:bg-[color:var(--muted)]/20"
+      },
+      {
+        interactive: !0,
+        selected: !0,
+        className: "ds:bg-[color:var(--primary)]/10"
+      },
+      {
+        interactive: !0,
+        disabled: !0,
+        className: "ds:opacity-50 ds:cursor-not-allowed ds:pointer-events-none"
+      }
+    ],
+    defaultVariants: {
+      divider: "spaced",
+      interactive: !1,
+      selected: !1,
+      disabled: !1
+    }
+  }
+);
+function ne(t) {
+  const p = [];
+  return C.forEach(t, (x) => {
+    if (!ee(x)) return;
+    const h = x.props;
+    typeof h.value == "string" && p.push({ value: h.value, disabled: !!h.disabled });
+  }), p;
+}
+const T = J(
+  ({
+    as: t = "ul",
+    start: p,
+    divider: x = "spaced",
+    density: h = "default",
+    selection: S = "none",
+    value: y,
+    defaultValue: N,
+    onValueChange: v,
+    disabled: o = !1,
+    className: k,
+    children: l,
+    "aria-label": F,
+    ...n
+  }, H) => {
+    const { t: O } = se(), a = S !== "none", b = S === "multiple", L = y !== void 0, [_, P] = G(() => N === void 0 ? [] : Array.isArray(N) ? N : [N]), c = B(() => {
+      if (L) {
+        const e = y;
+        return new Set(Array.isArray(e) ? e : [e]);
+      }
+      return new Set(_);
+    }, [L, y, _]), j = B(() => ne(l), [l]), f = B(
+      () => j.filter((e) => !e.disabled && !o).map((e) => e.value),
+      [j, o]
+    ), [I, g] = G(null), D = Q(/* @__PURE__ */ new Map()), q = u((e, i) => {
+      i ? D.current.set(e, i) : D.current.delete(e);
+    }, []), w = u((e) => {
+      g(e), requestAnimationFrame(() => {
+        var i;
+        (i = D.current.get(e)) == null || i.focus();
+      });
+    }, []), m = u(
+      (e) => {
+        L || P(e), b ? v == null || v(e) : v == null || v(e[0] ?? "");
+      },
+      [L, b, v]
+    ), R = u(
+      (e) => {
+        if (!o && a)
+          if (b) {
+            const i = [...c];
+            c.has(e) ? m(i.filter((s) => s !== e)) : m([...i, e]);
+          } else
+            c.has(e) ? m([]) : m([e]);
+      },
+      [o, a, b, c, m]
+    ), K = u((e) => {
+      g(e);
+    }, []), M = u(
+      (e, i) => {
+        if (!a) return;
+        const s = f.indexOf(i);
+        switch (e.key) {
+          case "ArrowDown": {
+            e.preventDefault();
+            const d = f[s + 1];
+            d !== void 0 && w(d);
+            break;
+          }
+          case "ArrowUp": {
+            e.preventDefault();
+            const d = f[s - 1];
+            d !== void 0 && w(d);
+            break;
+          }
+          case "Home": {
+            e.preventDefault();
+            const d = f[0];
+            d !== void 0 && w(d);
+            break;
+          }
+          case "End": {
+            e.preventDefault();
+            const d = f[f.length - 1];
+            d !== void 0 && w(d);
+            break;
+          }
+          case " ":
+          case "Enter": {
+            e.preventDefault(), R(i);
+            break;
+          }
+        }
+      },
+      [a, f, w, R]
+    ), A = {
+      selection: S,
+      selectedValues: c,
+      focusedValue: I,
+      disabled: o,
+      enabledItemValues: f,
+      onItemSelect: R,
+      onItemFocus: K,
+      onItemKeyDown: M,
+      registerItemRef: q,
+      divider: x
+    }, E = ie({ divider: x, density: h, ordered: t === "ol", className: k });
+    if (Z(
+      H,
+      () => ({
+        getSelection: () => Array.from(c),
+        setSelection: (e) => {
+          a && m(b ? e : e.slice(0, 1));
+        },
+        clearSelection: () => {
+          a && m([]);
+        }
+      }),
+      [c, a, b, m]
+    ), a) {
+      const e = F ?? O("ui.list.label", "List");
+      return /* @__PURE__ */ r(z.Provider, { value: A, children: /* @__PURE__ */ r(
+        "div",
+        {
+          role: "listbox",
+          "aria-label": e,
+          "aria-multiselectable": b ? !0 : void 0,
+          "aria-disabled": o ? !0 : void 0,
+          className: E,
+          "data-component": "list",
+          "data-component-id": n.id,
+          ...n,
+          children: l
+        }
+      ) });
+    }
+    return t === "ol" ? /* @__PURE__ */ r(z.Provider, { value: A, children: /* @__PURE__ */ r(
+      "ol",
+      {
+        role: "list",
+        start: p,
+        className: E,
+        "data-component": "list",
+        "data-component-id": n.id,
+        ...n,
+        children: l
+      }
+    ) }) : /* @__PURE__ */ r(z.Provider, { value: A, children: /* @__PURE__ */ r(
+      "ul",
+      {
+        role: "list",
+        className: E,
+        "data-component": "list",
+        "data-component-id": n.id,
+        ...n,
+        children: l
+      }
+    ) });
+  }
+);
+T.displayName = "List";
+const X = J(
+  ({
+    value: t,
+    leading: p,
+    title: x,
+    description: h,
+    trailing: S,
+    lineClamp: y,
+    disabled: N = !1,
+    className: v,
+    onClick: o,
+    onFocus: k,
+    onKeyDown: l,
+    ...F
+  }, n) => {
+    const {
+      selection: H,
+      selectedValues: O,
+      focusedValue: a,
+      disabled: b,
+      enabledItemValues: L,
+      onItemSelect: _,
+      onItemFocus: P,
+      onItemKeyDown: c,
+      registerItemRef: j,
+      divider: f
+    } = $(z), I = H !== "none", g = b || N, D = t !== void 0 ? O.has(t) : !1, q = t !== void 0 && a === t, w = t !== void 0 && L[0] === t, m = I ? a !== null ? q && !g ? 0 : -1 : w && !g ? 0 : -1 : void 0, R = Q(null);
+    V(() => {
+      const s = R.current;
+      s && (y != null ? s.style.setProperty("--list-item-clamp", String(y)) : s.style.removeProperty("--list-item-clamp"));
+    }, [y]);
+    const K = u(
+      (s) => {
+        t && j(t, s), typeof n == "function" ? n(s) : n && (n.current = s);
+      },
+      [t, j, n]
+    ), M = u(
+      (s) => {
+        I && t && !g && _(t), o == null || o(s);
+      },
+      [I, t, g, _, o]
+    ), A = u(
+      (s) => {
+        t && P(t), k == null || k(s);
+      },
+      [t, P, k]
+    ), E = u(
+      (s) => {
+        t && c(s, t), l == null || l(s);
+      },
+      [t, c, l]
+    ), e = re({
+      divider: f,
+      interactive: I,
+      selected: D,
+      disabled: g,
+      className: v
+    }), i = /* @__PURE__ */ U(Y, { children: [
+      p && /* @__PURE__ */ r("span", { className: "ds:shrink-0 ds:flex ds:items-center ds:justify-center", children: p }),
+      /* @__PURE__ */ U("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:min-w-0", children: [
+        /* @__PURE__ */ r("span", { className: "ds:text-[color:var(--foreground)] ds:text-[length:var(--font-size-sm)] ds:font-medium ds:leading-[var(--line-height-base)] ds:[overflow-wrap:anywhere]", children: x }),
+        h && /* @__PURE__ */ r(
+          "span",
+          {
+            ref: R,
+            className: [
+              "ds:text-[color:var(--muted-foreground)] ds:text-[length:var(--font-size-xs)] ds:leading-[var(--line-height-base)]",
+              y != null ? "ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:var(--list-item-clamp)]" : ""
+            ].filter(Boolean).join(" "),
+            children: h
+          }
+        )
+      ] }),
+      S && /* @__PURE__ */ r("span", { className: "ds:shrink-0 ds:flex ds:items-center ds:justify-center", children: S })
+    ] });
+    return I ? /* @__PURE__ */ r(
+      "div",
+      {
+        ref: K,
+        role: "option",
+        "aria-selected": D,
+        "aria-disabled": g ? !0 : void 0,
+        tabIndex: m,
+        onClick: M,
+        onFocus: A,
+        onKeyDown: E,
+        className: e,
+        "data-item-id": t,
+        ...F,
+        children: i
+      }
+    ) : /* @__PURE__ */ r(
+      "li",
+      {
+        ref: K,
+        onClick: M,
+        onFocus: A,
+        onKeyDown: E,
+        className: e,
+        "data-item-id": t,
+        ...F,
+        children: /* @__PURE__ */ r("div", { className: "ds:flex ds:items-center ds:gap-x-[var(--spacing-sm)]", children: i })
+      }
+    );
+  }
+);
+X.displayName = "List.Item";
+const ce = Object.assign(T, {
+  Root: T,
+  Item: X
+}), fe = {
+  id: "list",
+  capabilities: ["select_single", "select_multiple"],
+  state: {
+    selection: {
+      type: "string[]",
+      descriptionKey: "ui.agent.list.state.selection",
+      description: "Ids of currently-selected list items. Empty array when none selected or list is presentational.",
+      read: (t) => t.getSelection()
+    }
+  },
+  actions: {
+    set_selection: {
+      safety: "read",
+      argsType: "{ ids: string[] }",
+      descriptionKey: "ui.agent.list.actions.setSelection",
+      description: "Replace the current selection with the given item ids. No-op on presentational lists.",
+      invoke: (t, p) => {
+        t.setSelection(p.ids);
+      }
+    },
+    clear_selection: {
+      safety: "read",
+      descriptionKey: "ui.agent.list.actions.clearSelection",
+      description: "Deselect all items.",
+      invoke: (t) => {
+        t.clearSelection();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "list",
+      description: "Marks the List root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-item-id",
+      description: "Opaque item id; sourced from each ListItem `value` prop. Emitted only when `value` is set."
+    }
+  }
+};
+export {
+  ce as L,
+  fe as l
+};
+//# sourceMappingURL=list.agent-D0iWt4VI.js.map

package/dist/_chunks/{message-card-qAp2-WQK.js → message-card-qhoGv947.js}

@@ -160,6 +160,7 @@ const Q = R(
         ref: z,
         role: "listitem",
         "data-component": "message-card",
+        "data-component-id": e.id,
         "data-read": e.read ? "true" : "false",
         "data-leaving": b ? "true" : void 0,
         "aria-hidden": b || void 0,
@@ -273,4 +274,4 @@ export {
   Q as M,
   O as i
 };
-//# sourceMappingURL=message-card-qAp2-WQK.js.map
+//# sourceMappingURL=message-card-qhoGv947.js.map

package/dist/_chunks/message-card.agent-4IeIgrnJ.js

@@ -0,0 +1,22 @@
+const e = {
+  id: "message-card",
+  capabilities: ["dismiss"],
+  state: {},
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "message-card",
+      description: "Marks the element as a kit MessageCard. The card root also emits data-component-id sourced from item.id and data-read with the current read flag."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "item.id",
+      description: "Sourced from item.id — the stable message identifier."
+    }
+  }
+};
+export {
+  e as m
+};
+//# sourceMappingURL=message-card.agent-4IeIgrnJ.js.map