@alfadocs/ui-kit 0.1.10 → 0.2.1

package/dist/_chunks/progress-C11tqhoI.js

@@ -0,0 +1,298 @@
+import { jsx as d, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as R, useId as fe, useRef as p, useState as pe, useEffect as ge, useLayoutEffect as K, useMemo as ve, useImperativeHandle as be, createContext as ye, useContext as he } from "react";
+import { c as U } from "./index-D2ZczOXr.js";
+import { useTranslation as C } from "react-i18next";
+import { u as xe } from "./registry-C9nwlNyL.js";
+const ke = {
+  id: "progress",
+  capabilities: [],
+  state: {},
+  actions: {
+    set_value: {
+      safety: "read",
+      argsType: "{ value: number }",
+      description: "Set the displayed progress value (0–100).",
+      invoke: (a, i) => {
+        a.setValue(i.value);
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "progress" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, j = ye(null);
+function W() {
+  const a = he(j);
+  if (!a)
+    throw new Error("Progress sub-components must be used within <Progress>");
+  return a;
+}
+const M = {
+  sm: { viewBox: "0 0 24 24", cx: 12, cy: 12, r: 10 },
+  md: { viewBox: "0 0 40 40", cx: 20, cy: 20, r: 18 },
+  lg: { viewBox: "0 0 56 56", cx: 28, cy: 28, r: 26 }
+}, Pe = U(
+  "ds:relative ds:w-full ds:overflow-hidden ds:rounded-[var(--radius-full)] ds:bg-[var(--progress-track)]",
+  {
+    variants: {
+      size: { sm: "ds:h-1", md: "ds:h-2", lg: "ds:h-3" }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Q = U("", {
+  variants: {
+    size: {
+      sm: "ds:w-6 ds:h-6",
+      md: "ds:w-10 ds:h-10",
+      lg: "ds:w-14 ds:h-14"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), Y = R(({ children: a, className: i, ...e }, t) => {
+  const r = W(), { t: u, i18n: m } = C(), f = r.isIndeterminate ? u("ui.common.loading", "Loading...") : u("ui.common.progress_label", {
+    percent: new Intl.NumberFormat(m.language, {
+      style: "percent",
+      maximumFractionDigits: 0
+    }).format((r.value ?? 0) / r.max)
+  });
+  return /* @__PURE__ */ d(
+    "span",
+    {
+      ref: t,
+      id: r.labelId,
+      className: ["type-label ds:text-foreground", i].filter(Boolean).join(" "),
+      ...e,
+      children: a ?? f
+    }
+  );
+});
+Y.displayName = "Progress.Label";
+const Z = R(({ className: a, ...i }, e) => {
+  const t = W(), { t: r, i18n: u } = C(), m = t.isIndeterminate ? r("ui.common.loading", "Loading...") : new Intl.NumberFormat(u.language, {
+    style: "percent",
+    maximumFractionDigits: 0
+  }).format((t.value ?? 0) / t.max);
+  return /* @__PURE__ */ d(
+    "span",
+    {
+      ref: e,
+      className: [
+        "type-body-sm ds:tabular-nums ds:text-muted-foreground",
+        a
+      ].filter(Boolean).join(" "),
+      ...i,
+      children: m
+    }
+  );
+});
+Z.displayName = "Progress.Value";
+const $ = R(
+  ({
+    id: a,
+    value: i,
+    max: e = 100,
+    shape: t = "bar",
+    size: r = "md",
+    ariaLabel: u,
+    ariaValueText: m,
+    debouncePercent: f = 1,
+    disabled: S = !1,
+    className: z,
+    children: V,
+    ...L
+  }, ee) => {
+    const B = fe(), { t: D, i18n: re } = C(), x = p(null), k = p(null), P = p(null), w = p(null), g = p(null), s = i === void 0, c = s ? void 0 : Math.min(e, Math.max(0, i)), te = c !== void 0 ? c / e * 100 : void 0, [se, ae] = pe(!1);
+    ge(() => {
+      ae(!0);
+    }, []);
+    const v = se || s ? te : 0;
+    K(() => {
+      var n, l;
+      if (!(s || v === void 0))
+        if (t === "bar")
+          (n = k.current) == null || n.style.setProperty(
+            "--progress-value",
+            String(v)
+          );
+        else {
+          const { r: o } = M[r], h = 2 * Math.PI * o * (1 - v / 100);
+          (l = w.current) == null || l.style.setProperty(
+            "stroke-dashoffset",
+            String(h)
+          );
+        }
+    }, [s, v, t, r]), K(() => {
+      const n = t === "bar" ? x.current : P.current;
+      if (!n) return;
+      if (s) {
+        n.removeAttribute("aria-valuenow"), g.current = null;
+        return;
+      }
+      if (c === void 0) return;
+      const l = c / e * 100, o = g.current;
+      (o === null ? 1 / 0 : Math.abs(l - o)) >= f && (n.setAttribute("aria-valuenow", String(c)), g.current = l);
+    }, [s, c, e, f, t]);
+    const F = p(null), _ = ve(
+      () => ({
+        setValue: (n) => {
+          var G, J;
+          const l = Math.min(e, Math.max(0, n)), o = l / e * 100;
+          if (t === "bar")
+            (G = k.current) == null || G.style.setProperty(
+              "--progress-value",
+              String(o)
+            );
+          else {
+            const { r: ue } = M[r], me = 2 * Math.PI * ue * (1 - o / 100);
+            (J = w.current) == null || J.style.setProperty(
+              "stroke-dashoffset",
+              String(me)
+            );
+          }
+          const y = t === "bar" ? x.current : P.current, h = g.current;
+          (h === null ? 1 / 0 : Math.abs(o - h)) >= f && y && (y.setAttribute("aria-valuenow", String(l)), g.current = o);
+        }
+      }),
+      [e, t, r, f]
+    );
+    be(ee, () => _, [_]), xe(ke, _, a);
+    const ne = s ? D("ui.common.loading", "Loading...") : D("ui.common.progress_label", {
+      percent: new Intl.NumberFormat(re.language, {
+        style: "percent",
+        maximumFractionDigits: 0
+      }).format((c ?? 0) / e)
+    }), A = u ? { "aria-label": u } : { "aria-labelledby": B, "aria-label": ne }, E = s ? { "aria-busy": !0, "aria-valuemin": 0, "aria-valuemax": e } : {
+      "aria-valuemin": 0,
+      "aria-valuemax": e,
+      ...m ? { "aria-valuetext": m } : {}
+    }, T = S ? { "aria-disabled": !0 } : {}, H = [
+      "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+      S && "ds:opacity-50",
+      z
+    ].filter(Boolean).join(" "), O = {
+      labelId: B,
+      isIndeterminate: s,
+      value: c,
+      max: e
+    };
+    if (t === "bar") {
+      const n = s ? [
+        "ds:absolute ds:[inset-block:0] ds:bg-primary ds:rounded-[var(--radius-full)]",
+        "ds:[@media(prefers-reduced-motion:no-preference)]:animate-[progress-bar-indeterminate_1200ms_ease-in-out_infinite]",
+        "ds:[.theme-accessible_&]:animate-none",
+        "ds:motion-reduce:animate-[progress-indeterminate-pulse_var(--animation-duration)_ease-in-out_infinite]"
+      ].join(" ") : [
+        "ds:absolute ds:[inset-block:0] ds:start-0",
+        "ds:[inline-size:calc(var(--progress-value,0)*1%)]",
+        "ds:bg-primary ds:rounded-[var(--radius-full)]",
+        "ds:transition-[inline-size] ds:duration-[var(--animation-duration)]",
+        "ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none"
+      ].join(" ");
+      return /* @__PURE__ */ d(j.Provider, { value: O, children: /* @__PURE__ */ N(
+        "div",
+        {
+          ref: F,
+          className: H,
+          "data-component": "progress",
+          "data-component-id": a,
+          ...L,
+          children: [
+            V,
+            /* @__PURE__ */ d(
+              "div",
+              {
+                ref: x,
+                role: "progressbar",
+                ...A,
+                ...E,
+                ...T,
+                className: Pe({ size: r }),
+                children: /* @__PURE__ */ d("div", { ref: k, className: n })
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    const { viewBox: oe, cx: X, cy: q, r: I } = M[r], b = 2 * Math.PI * I, ie = b * 0.25, ce = s ? ie : b, le = s ? [
+      Q({ size: r }),
+      "ds:[transform:rotate(-90deg)]",
+      "ds:[@media(prefers-reduced-motion:no-preference)]:animate-[progress-circular-spin_1200ms_linear_infinite]",
+      "ds:[.theme-accessible_&]:animate-none",
+      "ds:motion-reduce:animate-[progress-indeterminate-pulse_var(--animation-duration)_ease-in-out_infinite]"
+    ].join(" ") : [
+      Q({ size: r }),
+      "ds:[transform:rotate(-90deg)]",
+      "ds:rtl:[transform:rotate(-90deg)_scaleX(-1)]"
+    ].join(" "), de = [
+      "ds:stroke-primary ds:[stroke-width:var(--spacing-xs)]",
+      !s && "ds:transition-[stroke-dashoffset] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ d(j.Provider, { value: O, children: /* @__PURE__ */ N(
+      "div",
+      {
+        ref: F,
+        className: H,
+        "data-component": "progress",
+        ...L,
+        children: [
+          V,
+          /* @__PURE__ */ N(
+            "svg",
+            {
+              ref: P,
+              role: "progressbar",
+              ...A,
+              ...E,
+              ...T,
+              viewBox: oe,
+              className: le,
+              children: [
+                /* @__PURE__ */ d(
+                  "circle",
+                  {
+                    cx: X,
+                    cy: q,
+                    r: I,
+                    fill: "none",
+                    strokeDasharray: b,
+                    className: "ds:[stroke:var(--progress-track)] ds:[stroke-width:var(--spacing-xs)]"
+                  }
+                ),
+                /* @__PURE__ */ d(
+                  "circle",
+                  {
+                    ref: w,
+                    cx: X,
+                    cy: q,
+                    r: I,
+                    fill: "none",
+                    strokeLinecap: "round",
+                    strokeDasharray: b,
+                    strokeDashoffset: ce,
+                    className: de
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+$.displayName = "Progress";
+const Ce = Object.assign($, {
+  Label: Y,
+  Value: Z
+});
+export {
+  Ce as P,
+  ke as p
+};
+//# sourceMappingURL=progress-C11tqhoI.js.map

package/dist/_chunks/{recaptcha-widget.agent-BGHpU5zD.js → recaptcha-widget-NyfOfLII.js}

@@ -1,18 +1,60 @@
-import { jsxs as D, jsx as W } from "react/jsx-runtime";
-import { forwardRef as U, useRef as u, useState as q, useEffect as E, useImperativeHandle as G } from "react";
-import { useTranslation as J } from "react-i18next";
-import { u as K } from "./form-field-context-94LwgYTQ.js";
-import { u as Q } from "./use-theme-BMUhembX.js";
-const X = "https://www.google.com/recaptcha/api.js", L = "alfadocs-ui-recaptcha-loader";
+import { jsxs as U, jsx as L } from "react/jsx-runtime";
+import { forwardRef as q, useRef as u, useState as E, useEffect as G, useMemo as J, useImperativeHandle as K } from "react";
+import { useTranslation as Q } from "react-i18next";
+import { u as X } from "./form-field-context-B3APVHKx.js";
+import { u as Y } from "./use-theme-B1cwAXJR.js";
+import { u as Z } from "./registry-C9nwlNyL.js";
+const z = {
+  id: "recaptcha-widget",
+  capabilities: ["submit"],
+  state: {
+    hasToken: {
+      type: "boolean",
+      descriptionKey: "ui.agent.recaptchaWidget.state.hasToken",
+      description: "True when the widget currently holds a valid verification token.",
+      read: (t) => t.getResponse().length > 0
+    }
+  },
+  actions: {
+    execute: {
+      safety: "write",
+      descriptionKey: "ui.agent.recaptchaWidget.actions.execute",
+      description: "Programmatically trigger the captcha challenge. Issues a token via the callback.",
+      invoke: (t) => {
+        t.execute();
+      }
+    },
+    reset: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.recaptchaWidget.actions.reset",
+      description: "Clear the current token and re-roll the captcha. Irreversible.",
+      invoke: (t) => {
+        t.reset();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "recaptcha-widget",
+      description: "Marks the RecaptchaWidget wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop (or the surrounding FormField id)."
+    }
+  }
+}, C = "https://www.google.com/recaptcha/api.js", j = "alfadocs-ui-recaptcha-loader";
 let f = null;
-function Y(t) {
+function ee(t) {
   return typeof window > "u" ? Promise.reject(new Error("recaptcha: window is not available")) : window.grecaptcha && typeof window.grecaptcha.render == "function" ? Promise.resolve(window.grecaptcha) : f || (f = new Promise((d, g) => {
-    const y = document.getElementById(
-      L
+    const b = document.getElementById(
+      j
     ), i = () => {
       window.grecaptcha && typeof window.grecaptcha.render == "function" ? d(window.grecaptcha) : g(new Error("recaptcha: grecaptcha global missing after load"));
     };
-    if (window.___grecaptchaOnLoad___ = i, y)
+    if (window.___grecaptchaOnLoad___ = i, b)
       return;
     const p = new URLSearchParams({
       onload: "___grecaptchaOnLoad___",
@@ -20,37 +62,37 @@ function Y(t) {
     });
     t && p.set("hl", t);
     const r = document.createElement("script");
-    r.id = L, r.src = `${X}?${p.toString()}`, r.async = !0, r.defer = !0, r.onerror = () => {
+    r.id = j, r.src = `${C}?${p.toString()}`, r.async = !0, r.defer = !0, r.onerror = () => {
       f = null, g(new Error("recaptcha: script failed to load"));
     }, document.head.appendChild(r);
   }), f);
 }
-const re = U(function({
+const oe = q(function({
   siteKey: d,
   theme: g,
-  locale: y,
+  locale: b,
   size: i = "normal",
   onChange: p,
   onExpired: r,
   onError: T,
-  error: b,
-  id: j,
-  className: B
-}, F) {
-  const { t: R, i18n: M } = J(), k = K(), { resolvedTheme: N } = Q(), w = u(null), c = u(null), a = u(null), [$, h] = q(""), _ = j ?? k.id, H = b ? `${_}-error` : void 0, O = [k.describedBy, H].filter(Boolean).join(" ") || void 0, x = g ?? (N.startsWith("dark") ? "dark" : "light"), I = y ?? M.language, e = u(p), v = u(r), o = u(T);
-  e.current = p, v.current = r, o.current = T;
-  const S = R(
+  error: k,
+  id: B,
+  className: F
+}, M) {
+  const { t: S, i18n: H } = Q(), _ = X(), { resolvedTheme: N } = Y(), w = u(null), a = u(null), c = u(null), [$, h] = E(""), v = B ?? _.id, A = k ? `${v}-error` : void 0, O = [_.describedBy, A].filter(Boolean).join(" ") || void 0, x = g ?? (N.startsWith("dark") ? "dark" : "light"), I = b ?? H.language, e = u(p), y = u(r), o = u(T);
+  e.current = p, y.current = r, o.current = T;
+  const W = S(
     "ui.inputs.recaptcha.expired",
     "Verification expired — please retry."
-  ), P = R(
+  ), P = S(
     "ui.inputs.recaptcha.error",
     "Verification failed — please retry."
   );
-  E(() => {
+  G(() => {
     if (!d || !w.current) return;
     let l = !1;
-    return Y(I).then((m) => {
-      l || !w.current || (a.current = m, c.current = m.render(w.current, {
+    return ee(I).then((m) => {
+      l || !w.current || (c.current = m, a.current = m.render(w.current, {
         sitekey: d,
         theme: x,
         size: i,
@@ -61,7 +103,7 @@ const re = U(function({
         },
         "expired-callback": () => {
           var s, n;
-          h(S), (s = e.current) == null || s.call(e, null), (n = v.current) == null || n.call(v);
+          h(W), (s = e.current) == null || s.call(e, null), (n = y.current) == null || n.call(y);
         },
         "error-callback": () => {
           var s, n;
@@ -72,28 +114,36 @@ const re = U(function({
       var m;
       l || (h(P), (m = o.current) == null || m.call(o));
     }), () => {
-      if (l = !0, a.current && c.current !== null)
+      if (l = !0, c.current && a.current !== null)
         try {
-          a.current.reset(c.current);
+          c.current.reset(a.current);
         } catch {
         }
     };
-  }, [d, x, I, i, S, P]), G(
-    F,
+  }, [
+    d,
+    x,
+    I,
+    i,
+    W,
+    P
+  ]);
+  const R = J(
     () => ({
       reset: () => {
         var l;
-        a.current && c.current !== null && (a.current.reset(c.current), h(""), (l = e.current) == null || l.call(e, null));
+        c.current && a.current !== null && (c.current.reset(a.current), h(""), (l = e.current) == null || l.call(e, null));
       },
-      getResponse: () => a.current && c.current !== null ? a.current.getResponse(c.current) : "",
+      getResponse: () => c.current && a.current !== null ? c.current.getResponse(a.current) : "",
       execute: () => {
-        a.current && c.current !== null && a.current.execute(c.current);
+        c.current && a.current !== null && c.current.execute(a.current);
       }
     }),
     []
   );
-  const V = b || $, A = i === "invisible" ? "presentation" : void 0;
-  return /* @__PURE__ */ D(
+  K(M, () => R, [R]), Z(z, R, v);
+  const V = k || $, D = i === "invisible" ? "presentation" : void 0;
+  return /* @__PURE__ */ U(
     "div",
     {
       className: [
@@ -101,27 +151,27 @@ const re = U(function({
         // Keep the iframe inside the wrapper's stacking context so
         // popovers etc. above the form continue to overlay correctly.
         "ds:relative ds:isolate",
-        B
+        F
       ].filter(Boolean).join(" "),
       "data-component": "recaptcha-widget",
-      "data-component-id": _,
+      "data-component-id": v,
       "data-size": i,
-      role: A,
+      role: D,
       children: [
-        /* @__PURE__ */ W(
+        /* @__PURE__ */ L(
           "div",
           {
             ref: w,
-            id: _,
+            id: v,
             className: "g-recaptcha",
             "data-sitekey": d,
             "data-theme": x,
             "data-size": i,
             "aria-describedby": O,
-            "aria-invalid": b || k.invalid ? !0 : void 0
+            "aria-invalid": k || _.invalid ? !0 : void 0
           }
         ),
-        /* @__PURE__ */ W(
+        /* @__PURE__ */ L(
           "div",
           {
             role: "status",
@@ -134,50 +184,9 @@ const re = U(function({
       ]
     }
   );
-}), ce = {
-  id: "recaptcha-widget",
-  capabilities: ["submit"],
-  state: {
-    hasToken: {
-      type: "boolean",
-      descriptionKey: "ui.agent.recaptchaWidget.state.hasToken",
-      description: "True when the widget currently holds a valid verification token.",
-      read: (t) => t.getResponse().length > 0
-    }
-  },
-  actions: {
-    execute: {
-      safety: "write",
-      descriptionKey: "ui.agent.recaptchaWidget.actions.execute",
-      description: "Programmatically trigger the captcha challenge. Issues a token via the callback.",
-      invoke: (t) => {
-        t.execute();
-      }
-    },
-    reset: {
-      safety: "destructive",
-      descriptionKey: "ui.agent.recaptchaWidget.actions.reset",
-      description: "Clear the current token and re-roll the captcha. Irreversible.",
-      invoke: (t) => {
-        t.reset();
-      }
-    }
-  },
-  domHooks: {
-    root: {
-      attr: "data-component",
-      value: "recaptcha-widget",
-      description: "Marks the RecaptchaWidget wrapper."
-    },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop (or the surrounding FormField id)."
-    }
-  }
-};
+});
 export {
-  re as R,
-  ce as r
+  oe as R,
+  z as r
 };
-//# sourceMappingURL=recaptcha-widget.agent-BGHpU5zD.js.map
+//# sourceMappingURL=recaptcha-widget-NyfOfLII.js.map