@alfadocs/ui-kit 0.68.0 → 0.70.0

package/dist/_chunks/editable-currency-cell-renderer-C9twtALM.js

@@ -0,0 +1,328 @@
+import { useMemo as V, useState as E, useRef as F, useEffect as I } from "react";
+import { jsx as u, jsxs as _ } from "react/jsx-runtime";
+import { T as B } from "./tag-BQXwuJq1.js";
+import { useTranslation as T } from "react-i18next";
+import { S as L } from "./square-check-big-Jr-0202D.js";
+import { S as M } from "./square-CZoGU14v.js";
+import { u as $ } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { c as j, a as D, b as P, d as A } from "./input-surface-xyERuLU_.js";
+function se(n, t, e) {
+  return V(() => {
+    const i = {};
+    for (const r of t) {
+      let m = 0;
+      for (const d of n ?? []) {
+        const l = d[r], f = typeof l == "number" ? l : Number(l);
+        Number.isFinite(f) && (m += f);
+      }
+      i[r] = m;
+    }
+    return e != null && e.labelField && e.labelValue !== void 0 && (i[e.labelField] = e.labelValue), i;
+  }, [n, t, e == null ? void 0 : e.labelField, e == null ? void 0 : e.labelValue]);
+}
+function H() {
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: "ds:size-3.5",
+      children: /* @__PURE__ */ u("path", { d: "M12 5.5c-1.074 -1.426 -2.45 -2.2 -4 -2c-2.5 .323 -3.7 2.5 -3.5 5c.1 1.5 .5 3 .5 4.5c0 1.5 .5 3.5 1 5c.3 .9 .5 2 1.5 2s1.3 -1.5 1.5 -2.5c.2 -1 .5 -2 1.5 -2s1.3 1 1.5 2c.2 1 .5 2.5 1.5 2.5s1.2 -1.1 1.5 -2c.5 -1.5 1 -3.5 1 -5c0 -1.5 .4 -3 .5 -4.5c.2 -2.5 -1 -4.677 -3.5 -5c-1.55 -.2 -2.926 .574 -4 2z" })
+    }
+  );
+}
+function le(n) {
+  const { value: t, maxInlineSize: e = "8rem" } = n;
+  return !Array.isArray(t) || t.length === 0 ? null : /* @__PURE__ */ u(
+    B,
+    {
+      label: t.join(", "),
+      size: "sm",
+      fill: "outline",
+      leading: /* @__PURE__ */ u(H, {}),
+      maxInlineSize: e
+    }
+  );
+}
+function ie(n) {
+  const {
+    value: t,
+    data: e,
+    onToggle: i,
+    onError: r,
+    trueIcon: m,
+    falseIcon: d,
+    trueClass: l = "ds:text-[color:var(--success)]",
+    falseClass: f = "ds:text-[color:var(--muted-foreground)]",
+    label: a
+  } = n, { t: o } = T(), [s, v] = E(!1);
+  if (!e) return null;
+  const h = !!t, C = h ? m ?? /* @__PURE__ */ u(L, { "aria-hidden": !0, className: "ds:size-4" }) : d ?? /* @__PURE__ */ u(M, { "aria-hidden": !0, className: "ds:size-4" }), y = h ? l : f, N = a ?? o(h ? "inputs.switch.on" : "inputs.switch.off");
+  async function c(g) {
+    if (g.stopPropagation(), s || !e) return;
+    const p = i(e, !h);
+    if (p && typeof p.then == "function") {
+      v(!0);
+      try {
+        await p;
+      } catch (x) {
+        r == null || r(e, x);
+      } finally {
+        v(!1);
+      }
+    }
+  }
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": h,
+      "aria-busy": s,
+      "aria-label": N,
+      disabled: s,
+      onClick: c,
+      className: [
+        "ds:inline-flex ds:items-center ds:justify-center",
+        "ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]",
+        "ds:appearance-none ds:bg-transparent ds:p-[var(--spacing-xs)]",
+        "ds:rounded-[var(--radius-sm)]",
+        "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)]",
+        "ds:disabled:opacity-50",
+        y
+      ].join(" "),
+      children: C
+    }
+  );
+}
+const G = {
+  sm: "ds:size-[var(--icon-size-sm)]",
+  md: "ds:size-[var(--icon-size-md)]",
+  lg: "ds:size-[var(--icon-size-lg)]"
+};
+function k(n, t) {
+  if (!n || typeof n != "object") return;
+  const e = n[t];
+  return typeof e == "string" ? e : void 0;
+}
+const X = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i, q = /^rgba?\(\s*[\d.\s,%/]+\)$/i, K = /^hsla?\(\s*[\d.\s,%/]+\)$/i, O = /^var\(--[a-z0-9-]+(?:,\s*[^)]+)?\)$/i;
+function W(n) {
+  if (!n) return;
+  const t = n.trim();
+  if (X.test(t) || q.test(t) || K.test(t) || O.test(t))
+    return t;
+}
+function oe(n) {
+  const { data: t, colorField: e, size: i = "md", labelField: r } = n, m = F(null), d = t ? k(t, e) : void 0, l = W(d), f = t && r ? k(t, r) : void 0;
+  return $(() => {
+    const a = m.current;
+    a && (l ? a.style.setProperty("--data-table-dot-color", l) : a.style.removeProperty("--data-table-dot-color"));
+  }, [l]), l ? /* @__PURE__ */ _("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+    /* @__PURE__ */ u(
+      "span",
+      {
+        ref: m,
+        "aria-hidden": "true",
+        className: [
+          "ds:inline-block ds:shrink-0 ds:rounded-[var(--radius-full)]",
+          "ds:bg-[var(--data-table-dot-color)]",
+          "ds:border ds:border-[color:var(--border)]",
+          G[i]
+        ].join(" ")
+      }
+    ),
+    f ? /* @__PURE__ */ u("span", { children: f }) : null
+  ] }) : null;
+}
+function Z(n, t) {
+  if (!n || typeof n != "object") return null;
+  const e = n[t], i = typeof e == "number" ? e : Number(e);
+  return Number.isFinite(i) ? i : null;
+}
+function ce(n) {
+  const { data: t, lines: e, currency: i = "EUR", highlightNegative: r } = n, { i18n: m } = T();
+  if (!t) return null;
+  const d = m.language || "en", l = (a) => {
+    const o = Z(t, a.valueField);
+    if (o === null) return null;
+    let s;
+    switch (a.format ?? "number") {
+      case "currency":
+        s = new Intl.NumberFormat(d, {
+          style: "currency",
+          currency: i
+        }).format(o);
+        break;
+      case "percent":
+        s = new Intl.NumberFormat(d, {
+          style: "percent",
+          maximumFractionDigits: 1
+        }).format(o / 100);
+        break;
+      default:
+        s = new Intl.NumberFormat(d).format(o);
+    }
+    return {
+      label: a.label,
+      formatted: s,
+      negative: !!r && o < 0
+    };
+  }, f = e.map(l).filter(
+    (a) => a !== null
+  );
+  return f.length === 0 ? null : /* @__PURE__ */ u(
+    "div",
+    {
+      className: [
+        "ds:flex",
+        "ds:flex-wrap",
+        "ds:items-center",
+        "ds:gap-x-[var(--spacing-sm)]",
+        "ds:gap-y-0",
+        "type-meta",
+        "ds:leading-tight"
+      ].join(" "),
+      children: f.map((a, o) => /* @__PURE__ */ _(
+        "span",
+        {
+          className: "ds:inline-flex ds:items-baseline ds:gap-x-[var(--spacing-xs)]",
+          children: [
+            o > 0 ? /* @__PURE__ */ u(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:me-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]",
+                children: "·"
+              }
+            ) : null,
+            /* @__PURE__ */ u("span", { className: "ds:text-[color:var(--muted-foreground)]", children: a.label }),
+            /* @__PURE__ */ u(
+              "span",
+              {
+                className: [
+                  "ds:tabular-nums",
+                  "ds:font-medium",
+                  a.negative ? "ds:text-[color:var(--destructive)]" : ""
+                ].filter(Boolean).join(" "),
+                children: a.formatted
+              }
+            )
+          ]
+        },
+        `${a.label}-${o}`
+      ))
+    }
+  );
+}
+function ue(n) {
+  var a, o;
+  const { initialValue: t, onValueChange: e, stopEditing: i, column: r } = n, [m, d] = E(t ?? ""), l = F(null);
+  I(() => {
+    const s = l.current;
+    s && (s.focus(), s.select());
+  }, []);
+  const f = ((o = (a = r == null ? void 0 : r.getColDef) == null ? void 0 : a.call(r)) == null ? void 0 : o.headerName) ?? void 0;
+  return /* @__PURE__ */ u(
+    "input",
+    {
+      ref: l,
+      type: "text",
+      value: m,
+      "aria-label": f,
+      onChange: (s) => {
+        const v = s.target.value;
+        d(v), e(v);
+      },
+      onKeyDown: (s) => {
+        s.key === "Enter" && (s.preventDefault(), i());
+      },
+      className: [
+        "ds:block ds:w-full ds:appearance-none",
+        // Input surface chrome: rounded border + bg + focus halo.
+        j,
+        // Use the `md` height (`--min-target-size`) so the input
+        // auto-lifts to 48px under `.theme-accessible` to satisfy
+        // WCAG 2.5.5 target size.
+        D.md,
+        P.sm,
+        A.sm
+      ].join(" ")
+    }
+  );
+}
+function de(n) {
+  var y, N;
+  const {
+    initialValue: t,
+    onValueChange: e,
+    stopEditing: i,
+    column: r,
+    decimals: m = 2,
+    min: d,
+    max: l
+  } = n, { i18n: f } = T(), a = F(null), o = ((N = (y = r == null ? void 0 : r.getColDef) == null ? void 0 : y.call(r)) == null ? void 0 : N.headerName) ?? void 0, [s, v] = E(() => t == null || Number.isNaN(t) ? "" : String(t));
+  I(() => {
+    const c = a.current;
+    c && (c.focus(), c.select());
+  }, []);
+  function h(c) {
+    var z, S;
+    if (c.trim().length === 0) return null;
+    const g = f.language || "en", b = new Intl.NumberFormat(g).formatToParts(12345.6), p = ((z = b.find((R) => R.type === "group")) == null ? void 0 : z.value) ?? "", x = ((S = b.find((R) => R.type === "decimal")) == null ? void 0 : S.value) ?? ".", U = c.replace(new RegExp(`\\${p}`, "g"), "").replace(x, ".").replace(/[^\d.-]/g, ""), w = Number(U);
+    return Number.isFinite(w) ? w : null;
+  }
+  function C(c) {
+    const g = h(c);
+    if (g == null) {
+      e(null);
+      return;
+    }
+    let b = g;
+    typeof d == "number" && (b = Math.max(d, b)), typeof l == "number" && (b = Math.min(l, b));
+    const p = 10 ** m;
+    e(Math.round(b * p) / p);
+  }
+  return /* @__PURE__ */ u(
+    "input",
+    {
+      ref: a,
+      type: "text",
+      inputMode: "decimal",
+      value: s,
+      "aria-label": o,
+      onChange: (c) => {
+        const g = c.target.value;
+        v(g), C(g);
+      },
+      onKeyDown: (c) => {
+        c.key === "Enter" && (c.preventDefault(), i());
+      },
+      className: [
+        "ds:block ds:w-full ds:appearance-none ds:text-end ds:tabular-nums",
+        j,
+        // Use `md` height — see editable-text-cell-renderer for rationale.
+        D.md,
+        P.sm,
+        A.sm
+      ].join(" ")
+    }
+  );
+}
+export {
+  ce as B,
+  oe as C,
+  de as E,
+  ie as T,
+  ue as a,
+  le as b,
+  se as u
+};
+//# sourceMappingURL=editable-currency-cell-renderer-C9twtALM.js.map