@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/iban-input-B0TWzR1R.js

@@ -0,0 +1,436 @@
+import { jsxs as B, jsx as d, Fragment as He } from "react/jsx-runtime";
+import { forwardRef as Le, useContext as _e, useState as O, useRef as _, useId as $e, useEffect as Ge, useMemo as $, useCallback as ee } from "react";
+import { c as re } from "./index-D2ZczOXr.js";
+import { useTranslation as Ke } from "react-i18next";
+import { u as Pe, F as Ue } from "./form-field-context-B3APVHKx.js";
+import { I as te, c as we, a as G, b as K } from "./input-surface-xyERuLU_.js";
+import { c as Ze } from "./compose-refs-C0k0tdqF.js";
+import { u as ze } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as De } from "./registry-DvAUVLHh.js";
+import { C as ne } from "./circle-alert-ChA9opNA.js";
+import { C as se } from "./circle-check-9AeSgJD_.js";
+const je = {
+  id: "iban-input",
+  capabilities: ["set_value"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.ibanInput.state.value",
+      description: "Current IBAN, normalised (uppercased, [A-Z0-9], no spaces, ≤34 characters).",
+      read: (e) => e.getValue()
+    },
+    isValid: {
+      type: "boolean",
+      descriptionKey: "ui.agent.ibanInput.state.isValid",
+      description: "Whether the value is a structurally complete IBAN with a passing mod-97-10 checksum.",
+      read: (e) => e.isValid()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      argsSchema: {
+        type: "object",
+        properties: { value: { type: "string" } },
+        required: ["value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.ibanInput.actions.setValue",
+      description: "Replace the IBAN. The value is uppercased and stripped to [A-Z0-9], capped at 34 characters.",
+      examples: [
+        {
+          args: { value: "DE89370400440532013000" },
+          note: "A complete, checksum-valid German IBAN."
+        }
+      ],
+      invoke: (e, s) => {
+        e.setValue(s.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.ibanInput.actions.clear",
+      description: "Empty the input. Loses any typed value.",
+      invoke: (e) => {
+        e.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.ibanInput.actions.focus",
+      description: "Move keyboard focus to the IBAN input.",
+      invoke: (e) => {
+        e.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "iban-input",
+      description: "Marks the IbanInput wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, qe = {
+  AD: 24,
+  AE: 23,
+  AL: 28,
+  AT: 20,
+  AZ: 28,
+  BA: 20,
+  BE: 16,
+  BG: 22,
+  BH: 22,
+  BR: 29,
+  BY: 28,
+  CH: 21,
+  CR: 22,
+  CY: 28,
+  CZ: 24,
+  DE: 22,
+  DK: 18,
+  DO: 28,
+  EE: 20,
+  EG: 29,
+  ES: 24,
+  FI: 18,
+  FO: 18,
+  FR: 27,
+  GB: 22,
+  GE: 22,
+  GI: 23,
+  GL: 18,
+  GR: 27,
+  GT: 28,
+  HR: 21,
+  HU: 28,
+  IE: 22,
+  IL: 23,
+  IS: 26,
+  IT: 27,
+  JO: 30,
+  KW: 30,
+  KZ: 20,
+  LB: 28,
+  LC: 32,
+  LI: 21,
+  LT: 20,
+  LU: 20,
+  LV: 21,
+  MC: 27,
+  MD: 24,
+  ME: 22,
+  MK: 19,
+  MR: 27,
+  MT: 31,
+  MU: 30,
+  NL: 18,
+  NO: 15,
+  PK: 24,
+  PL: 28,
+  PS: 29,
+  PT: 25,
+  QA: 29,
+  RO: 24,
+  RS: 22,
+  SA: 24,
+  SC: 31,
+  SE: 24,
+  SI: 19,
+  SK: 24,
+  SM: 27,
+  TN: 24,
+  TR: 26,
+  UA: 29,
+  VG: 24,
+  XK: 20
+}, Xe = 15, ae = 34;
+function We(e) {
+  const s = e.slice(4) + e.slice(0, 4);
+  let i = 0;
+  for (let a = 0; a < s.length; a += 1) {
+    const o = s.charCodeAt(a), N = o >= 65 && o <= 90 ? String(o - 55) : String.fromCharCode(o);
+    for (let m = 0; m < N.length; m += 1)
+      i = (i * 10 + (N.charCodeAt(m) - 48)) % 97;
+  }
+  return i;
+}
+function S(e) {
+  if (e === "") return "empty";
+  const s = /^[A-Z]{2}/.test(e) ? e.slice(0, 2) : void 0, i = s ? qe[s] : void 0;
+  return i && e.length > i ? "badFormat" : (i ? e.length === i : e.length >= Xe) ? /^[A-Z]{2}\d{2}[A-Z0-9]+$/.test(e) ? We(e) === 1 ? "valid" : "badChecksum" : "badFormat" : "incomplete";
+}
+function pt(e) {
+  return S(e) === "valid";
+}
+const Ye = re(
+  ["ds:relative ds:flex ds:items-center ds:w-full", we].join(
+    " "
+  ),
+  {
+    variants: {
+      size: {
+        sm: G.sm,
+        md: G.md,
+        lg: G.lg
+      },
+      tone: {
+        default: te.default,
+        error: `${te.error} ds:focus-within:outline-destructive`
+      }
+    },
+    defaultVariants: { size: "md", tone: "default" }
+  }
+), Je = re(
+  [
+    // dir="ltr" + tabular-nums keep the IBAN rendering left-to-right and evenly
+    // spaced even under an RTL/CJK surrounding UI — this is a value-RENDERING
+    // concern (the IBAN is never mirrored), not a layout-direction violation,
+    // so logical-prop rules don't apply to the IBAN glyphs themselves.
+    "ds:w-full ds:min-w-0 ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
+    "ds:border-0 ds:outline-none ds:tabular-nums ds:uppercase ds:tracking-wide",
+    "ds:disabled:cursor-not-allowed",
+    "ds:read-only:cursor-default"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: `ds:ps-3 ds:pe-3 ${K.sm}`,
+        md: `ds:ps-3 ds:pe-3 ${K.md}`,
+        lg: `ds:ps-4 ds:pe-4 ${K.lg}`
+      },
+      hasEnd: {
+        true: "ds:pe-10",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", hasEnd: !1 }
+  }
+), Qe = "ds:absolute ds:inset-y-0 ds:end-0 ds:pe-3 ds:flex ds:items-center ds:pointer-events-none ds:[&_svg]:size-4", P = "type-body-sm ds:mt-[var(--spacing-xs)]";
+function f(e) {
+  return e.normalize("NFKC").replace(/[٠-٩]/g, (s) => String(s.charCodeAt(0) - 1632)).replace(/[۰-۹]/g, (s) => String(s.charCodeAt(0) - 1776)).toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, ae);
+}
+function Oe(e, s) {
+  let i = 0;
+  for (let a = 0; a < s && a < e.length; a += 1) {
+    const o = e[a];
+    (o >= "0" && o <= "9" || o >= "A" && o <= "Z" || o >= "a" && o <= "z") && (i += 1);
+  }
+  return i;
+}
+const et = Le(
+  function({
+    value: s,
+    defaultValue: i,
+    onChange: a,
+    size: o = "md",
+    tone: N = "default",
+    validateOn: m = "blur",
+    showError: oe,
+    errorMessage: y,
+    disabled: ie,
+    readOnly: u,
+    required: ce,
+    placeholder: de,
+    showFormatHint: le = !0,
+    id: R,
+    name: ue,
+    className: pe,
+    "aria-label": U
+  }, me) {
+    const { t: p } = Ke(), C = Pe(), l = _e(Ue) !== null, h = s !== void 0, [fe, T] = O(
+      () => f(i ?? "")
+    ), c = h ? f(s ?? "") : fe, [he, ge] = O(!1), F = _(!1), g = _(null), b = _(null), be = Ze(me, b), V = $e(), w = `${V}-hint`, Z = `${V}-status`, z = `${V}-error`;
+    Ge(() => {
+    }, [l, U]);
+    const v = $(() => S(c), [c]), D = v !== "empty" && v !== "incomplete", E = v === "valid", ve = (l ? C.disabled : !1) || !!ie, Ie = (l ? C.required : !1) || !!ce, Ce = !u && (!!oe || D && !E && (m === "change" || m === "blur" && he)), j = l && C.invalid, I = Ce && !j, q = j || I, Ee = q || N === "error" ? "error" : "default", Ae = $(() => y || p(v === "badChecksum" ? "inputs.iban.errorChecksum" : v === "badFormat" ? "inputs.iban.errorFormat" : "inputs.iban.errorIncomplete"), [y, v, p]), X = !l && le && !u, xe = l ? void 0 : [
+      X ? w : null,
+      I ? z : Z
+    ].filter(Boolean).join(" ") || void 0, Ne = l ? C.describedBy || void 0 : xe, Be = R ?? C.id, A = ee(
+      (t) => {
+        const n = S(t);
+        a == null || a(t, {
+          isValid: n === "valid",
+          isComplete: n !== "empty" && n !== "incomplete",
+          reason: n
+        });
+      },
+      [a]
+    ), k = ee(
+      (t) => {
+        h || T(t), A(t);
+      },
+      [h, A]
+    );
+    ze(() => {
+      if (g.current == null) return;
+      const t = g.current;
+      g.current = null;
+      const n = b.current;
+      if (n && document.activeElement === n) {
+        const r = Math.min(t, n.value.length);
+        n.setSelectionRange(r, r);
+      }
+    });
+    const Se = (t) => {
+      if (u || F.current) return;
+      const n = t.target, r = n.value, H = n.selectionStart ?? r.length, L = Oe(r, H), x = f(r);
+      g.current = Math.min(L, x.length), k(x);
+    }, ye = () => {
+      F.current = !0;
+    }, Re = (t) => {
+      if (F.current = !1, u) return;
+      const n = f(t.currentTarget.value);
+      g.current = n.length, k(n);
+    }, Te = (t) => {
+      if (u) return;
+      const n = t.clipboardData.getData("text");
+      t.preventDefault();
+      const r = b.current, H = (r == null ? void 0 : r.selectionStart) ?? c.length, L = (r == null ? void 0 : r.selectionEnd) ?? c.length, x = f(n), J = c.slice(0, H), Me = c.slice(L), Q = f(J + x + Me);
+      g.current = Math.min(
+        (J + x).length,
+        Q.length
+      ), k(Q);
+    }, Fe = () => {
+      m === "blur" && ge(!0);
+    }, Ve = $(
+      () => ({
+        getValue: () => c,
+        setValue: (t) => {
+          var r;
+          const n = f(t);
+          h || T(n), A(n), (r = b.current) == null || r.focus();
+        },
+        clear: () => {
+          var t;
+          h || T(""), A(""), (t = b.current) == null || t.focus();
+        },
+        focus: () => {
+          var t;
+          return (t = b.current) == null ? void 0 : t.focus();
+        },
+        isValid: () => S(c) === "valid"
+      }),
+      [c, h, A]
+    );
+    De(je, Ve, R);
+    const ke = de ?? p("inputs.iban.placeholder"), M = u || l ? "" : E ? p("inputs.iban.valid") : c.length > 0 && !D ? p("inputs.iban.charactersEntered", { count: c.length }) : "", W = I ? Ae : "", Y = !u && (I || E && !l);
+    return /* @__PURE__ */ B(
+      "div",
+      {
+        className: "ds:flex ds:flex-col",
+        "data-component": "iban-input",
+        "data-component-id": R,
+        children: [
+          /* @__PURE__ */ B(
+            "div",
+            {
+              "data-slot": "iban-input",
+              className: Ye({ size: o, tone: Ee, className: pe }),
+              children: [
+                /* @__PURE__ */ d(
+                  "input",
+                  {
+                    ref: be,
+                    id: Be,
+                    name: ue,
+                    dir: "ltr",
+                    type: "text",
+                    inputMode: "text",
+                    autoCapitalize: "characters",
+                    autoCorrect: "off",
+                    autoComplete: "off",
+                    spellCheck: !1,
+                    maxLength: ae,
+                    pattern: "[A-Za-z]{2}[0-9]{2}[A-Za-z0-9]+",
+                    value: c,
+                    placeholder: ke,
+                    disabled: ve,
+                    readOnly: u,
+                    "aria-label": U,
+                    "aria-describedby": Ne,
+                    "aria-invalid": q || void 0,
+                    "aria-required": Ie || void 0,
+                    onChange: Se,
+                    onCompositionStart: ye,
+                    onCompositionEnd: Re,
+                    onPaste: Te,
+                    onBlur: Fe,
+                    className: Je({ size: o, hasEnd: Y })
+                  }
+                ),
+                Y ? /* @__PURE__ */ d(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `${Qe} ${I ? "ds:text-destructive" : "ds:text-success"}`,
+                    children: I ? /* @__PURE__ */ d(ne, {}) : /* @__PURE__ */ d(se, {})
+                  }
+                ) : null
+              ]
+            }
+          ),
+          X ? /* @__PURE__ */ d(
+            "p",
+            {
+              id: w,
+              className: `${P} ds:text-muted-foreground`,
+              children: p("inputs.iban.formatHint")
+            }
+          ) : null,
+          /* @__PURE__ */ d(
+            "p",
+            {
+              id: Z,
+              role: "status",
+              "aria-live": "polite",
+              className: `${P} ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] ${E ? "ds:text-success" : "ds:text-muted-foreground"} ${M ? "" : "ds:sr-only"}`,
+              children: M ? /* @__PURE__ */ B(He, { children: [
+                E ? /* @__PURE__ */ d(
+                  se,
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:size-4 ds:shrink-0"
+                  }
+                ) : null,
+                /* @__PURE__ */ d("span", { children: M })
+              ] }) : null
+            }
+          ),
+          W ? /* @__PURE__ */ B(
+            "p",
+            {
+              id: z,
+              role: "alert",
+              className: `${P} ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-destructive`,
+              children: [
+                /* @__PURE__ */ d(ne, { "aria-hidden": "true", className: "ds:size-4 ds:shrink-0" }),
+                /* @__PURE__ */ d("span", { children: W })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+et.displayName = "IbanInput";
+export {
+  qe as I,
+  ae as M,
+  et as a,
+  Xe as b,
+  S as c,
+  We as d,
+  pt as e,
+  je as i,
+  Ye as w
+};
+//# sourceMappingURL=iban-input-B0TWzR1R.js.map

package/dist/_chunks/icon-picker-0B7KhrF1.js

@@ -0,0 +1,272 @@
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { forwardRef as H, useState as y, useRef as h, useCallback as v, useMemo as b } from "react";
+import { c as M } from "./index-D2ZczOXr.js";
+import { useTranslation as F } from "react-i18next";
+import { P as k } from "./popover-B2qCDhJC.js";
+import { B as D } from "./button-DD_0Xdmr.js";
+import { T as E } from "./text-input-B-OWQ1Je.js";
+import { u as G } from "./registry-DvAUVLHh.js";
+import { S as J } from "./search-BonnQsHv.js";
+const U = {
+  id: "icon-picker",
+  capabilities: ["pick", "filter", "open", "close"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.iconPicker.state.value",
+      description: "Id of the currently selected icon, or an empty string when nothing is picked.",
+      read: (t) => t.getValue()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.iconPicker.state.isOpen",
+      description: "True when the picker popover is currently open.",
+      read: (t) => t.isOpen()
+    },
+    query: {
+      type: "string",
+      descriptionKey: "ui.agent.iconPicker.state.query",
+      description: "Current search query filtering the icon grid by label.",
+      read: (t) => t.getQuery()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Id of an icon in the supplied `icons` set."
+          }
+        },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.setValue",
+      description: "Select the icon with the given id.",
+      examples: [{ args: { id: "star" }, note: 'Pick the "star" icon.' }],
+      invoke: (t, i) => {
+        t.setValue(i.id);
+      }
+    },
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.open",
+      description: "Open the picker popover.",
+      invoke: (t) => {
+        t.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.close",
+      description: "Close the picker popover.",
+      invoke: (t) => {
+        t.close();
+      }
+    },
+    filter: {
+      safety: "write",
+      argsType: "{ query: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          query: {
+            type: "string",
+            description: "Case-insensitive substring matched against icon labels."
+          }
+        },
+        required: ["query"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.filter",
+      description: "Filter the icon grid to labels containing the query.",
+      examples: [
+        {
+          args: { query: "star" },
+          note: 'Show icons whose label contains "star".'
+        }
+      ],
+      invoke: (t, i) => {
+        t.setQuery(i.query);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "icon-picker",
+      description: "Marks the IconPicker trigger button."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, W = M(
+  [
+    "ds:relative ds:inline-flex ds:items-center ds:justify-center",
+    "ds:size-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+    "ds:border ds:text-foreground ds:bg-transparent",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:hover:bg-muted/10",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:[&_svg]:size-5"
+  ].join(" "),
+  {
+    variants: {
+      selected: {
+        true: "ds:border-primary ds:bg-muted",
+        false: "ds:border-transparent"
+      }
+    },
+    defaultVariants: { selected: !1 }
+  }
+), X = H(
+  function({
+    icons: i,
+    value: P,
+    defaultValue: S,
+    onChange: a,
+    placeholder: O,
+    disabled: R,
+    id: u,
+    className: T,
+    "aria-label": j
+  }, K) {
+    const { t: n } = F(), p = P !== void 0, [Q, z] = y(
+      S ?? ""
+    ), o = p ? P ?? "" : Q, [g, A] = y(!1), [c, d] = y(""), x = h(o);
+    x.current = o;
+    const w = h(g);
+    w.current = g;
+    const q = h(c);
+    q.current = c;
+    const s = v((e) => {
+      A(e), e || d("");
+    }, []), l = v(
+      (e) => {
+        p || z(e), a == null || a(e);
+      },
+      [p, a]
+    ), L = v(
+      (e) => {
+        l(e), s(!1);
+      },
+      [l, s]
+    ), _ = b(
+      () => ({
+        getValue: () => x.current,
+        setValue: (e) => l(e),
+        isOpen: () => w.current,
+        open: () => s(!0),
+        close: () => s(!1),
+        getQuery: () => q.current,
+        setQuery: (e) => d(e)
+      }),
+      [l, s]
+    );
+    G(U, _, u);
+    const V = b(
+      () => i.find((e) => e.id === o),
+      [i, o]
+    ), m = c.trim().toLowerCase(), C = b(
+      () => m ? i.filter(
+        (e) => e.label.toLowerCase().includes(m)
+      ) : i,
+      [i, m]
+    ), f = j ?? n("iconPicker.trigger"), B = O ?? n("iconPicker.trigger");
+    return /* @__PURE__ */ N(k.Root, { open: g, onOpenChange: s, id: u, children: [
+      /* @__PURE__ */ r(k.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
+        D,
+        {
+          ref: K,
+          type: "button",
+          intent: "outline",
+          disabled: R,
+          "aria-label": f,
+          className: T,
+          "data-component": "icon-picker",
+          "data-component-id": u,
+          children: V ? /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:items-center ds:justify-center ds:[&_svg]:size-5",
+              children: V.node
+            }
+          ) : /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:items-center ds:text-muted-foreground", children: B })
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        k.Content,
+        {
+          align: "start",
+          showArrow: !1,
+          "aria-label": f,
+          className: "ds:w-72",
+          children: /* @__PURE__ */ N("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ r(
+              E,
+              {
+                size: "sm",
+                value: c,
+                onChange: (e) => d(e.target.value),
+                placeholder: n("iconPicker.search"),
+                "aria-label": n("iconPicker.search"),
+                startAdornment: /* @__PURE__ */ r(J, {}),
+                clearable: !0,
+                onClear: () => d(""),
+                autoComplete: "off"
+              }
+            ),
+            C.length === 0 ? /* @__PURE__ */ r(
+              "p",
+              {
+                role: "status",
+                className: "type-body-sm ds:text-muted-foreground ds:text-center ds:py-[var(--spacing-sm)]",
+                children: n("iconPicker.noResults")
+              }
+            ) : /* @__PURE__ */ r(
+              "div",
+              {
+                role: "group",
+                "aria-label": f,
+                className: "ds:grid ds:grid-cols-5 ds:gap-[var(--spacing-xs)] ds:max-h-64 ds:overflow-y-auto",
+                children: C.map((e) => {
+                  const I = e.id === o;
+                  return /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": e.label,
+                      "aria-pressed": I,
+                      onClick: () => L(e.id),
+                      className: W({ selected: I }),
+                      children: /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "ds:inline-flex", children: e.node })
+                    },
+                    e.id
+                  );
+                })
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+);
+X.displayName = "IconPicker";
+export {
+  X as I,
+  U as i
+};
+//# sourceMappingURL=icon-picker-0B7KhrF1.js.map