@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/slider-CcsQTZTA.js

@@ -0,0 +1,322 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { forwardRef as la, useState as ca, useCallback as ua, useRef as q, useMemo as ma } from "react";
+import * as h from "@radix-ui/react-slider";
+import { c as t } from "./index-D2ZczOXr.js";
+import { useTranslation as pa } from "react-i18next";
+import { u as fa } from "./form-field-context-94LwgYTQ.js";
+import { u as ha } from "./use-direction-D6rvvG9G.js";
+import { c as va } from "./compose-refs-C0k0tdqF.js";
+import { u as ba } from "./registry-C9nwlNyL.js";
+const ga = {
+  id: "slider",
+  capabilities: ["pick", "range_pick"],
+  state: {
+    value: {
+      type: "number[]",
+      descriptionKey: "ui.agent.slider.state.value",
+      description: "Current thumb values; length 1 for a single slider, length 2 for a range.",
+      read: (d) => d.getValue()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: number[] }",
+      descriptionKey: "ui.agent.slider.actions.setValue",
+      description: "Replace the thumb value(s). Pass a 1-tuple for single, 2-tuple for range.",
+      invoke: (d, v) => {
+        d.setValue(v.value);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "slider",
+      description: "Marks the Slider root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, wa = t(
+  [
+    "ds:relative ds:flex ds:touch-none ds:select-none ds:items-center",
+    "ds:data-[orientation=horizontal]:w-full",
+    "ds:data-[orientation=vertical]:flex-col ds:data-[orientation=vertical]:h-full",
+    "ds:data-[disabled]:cursor-not-allowed ds:data-[disabled]:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:data-[orientation=horizontal]:h-1 ds:data-[orientation=vertical]:w-1",
+        md: "ds:data-[orientation=horizontal]:h-2 ds:data-[orientation=vertical]:w-2",
+        lg: "ds:data-[orientation=horizontal]:h-3 ds:data-[orientation=vertical]:w-3"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), xa = t(
+  [
+    "ds:relative ds:grow ds:overflow-hidden ds:rounded-[var(--radius-full)] ds:bg-muted",
+    "ds:data-[orientation=horizontal]:h-full",
+    "ds:data-[orientation=vertical]:w-full"
+  ].join(" ")
+), ya = t(
+  [
+    "ds:absolute ds:bg-primary ds:rounded-[var(--radius-full)]",
+    "ds:data-[orientation=horizontal]:h-full",
+    "ds:data-[orientation=vertical]:w-full"
+  ].join(" ")
+), za = t(
+  [
+    "ds:group/thumb",
+    "ds:relative ds:block ds:rounded-full",
+    "ds:bg-background ds:border-2 ds:border-primary ds:shadow-[var(--shadow-sm)]",
+    "ds:transition-[transform,box-shadow] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:outline-none",
+    "ds:focus-visible:shadow-[var(--shadow-focus),var(--shadow-sm)]",
+    "ds:active:shadow-[var(--shadow-sm)]",
+    "ds:data-[disabled]:cursor-not-allowed ds:data-[disabled]:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:size-4",
+        md: "ds:size-5",
+        lg: "ds:size-6"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Va = t("ds:absolute ds:rounded-full", {
+  variants: {
+    size: {
+      sm: "ds:-inset-[calc((var(--min-target-size)-1rem)/2)]",
+      md: "ds:-inset-[calc((var(--min-target-size)-1.25rem)/2)]",
+      lg: "ds:-inset-[calc((var(--min-target-size)-1.5rem)/2)]"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), ka = t(
+  "ds:absolute ds:flex ds:pointer-events-none ds:items-center ds:justify-center",
+  {
+    variants: {
+      orientation: {
+        horizontal: "ds:start-0 ds:end-0 ds:bottom-full",
+        vertical: "ds:top-0 ds:bottom-0 ds:start-full"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+), Na = t(
+  [
+    "ds:whitespace-nowrap ds:bg-foreground ds:text-background",
+    "ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
+    "ds:rounded-[var(--radius-sm)] ds:text-[length:var(--font-size-xs)] ds:tabular-nums",
+    "ds:shadow-[var(--shadow-sm)]",
+    "ds:transition-opacity ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      orientation: {
+        horizontal: "ds:mb-[var(--spacing-xs)]",
+        vertical: "ds:ms-[var(--spacing-xs)]"
+      },
+      alwaysShow: {
+        true: "ds:opacity-100",
+        false: "ds:opacity-0 ds:group-hover/thumb:opacity-100 ds:group-focus-visible/thumb:opacity-100"
+      }
+    },
+    defaultVariants: { orientation: "horizontal", alwaysShow: !1 }
+  }
+), Sa = t("ds:absolute ds:pointer-events-none", {
+  variants: {
+    orientation: {
+      horizontal: "ds:start-0 ds:end-0 ds:top-full",
+      vertical: "ds:top-0 ds:bottom-0 ds:start-full"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+}), Ra = t("ds:absolute ds:flex ds:items-center", {
+  variants: {
+    orientation: {
+      horizontal: "ds:flex-col ds:-translate-x-1/2 ds:rtl:translate-x-1/2",
+      vertical: "ds:flex-row ds:-translate-y-1/2 ds:ps-[var(--spacing-xs)]"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+}), Ma = t("ds:bg-border", {
+  variants: {
+    orientation: {
+      horizontal: "ds:w-px ds:h-1",
+      vertical: "ds:h-px ds:w-1"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+}), ja = t(
+  "ds:text-muted-foreground type-meta ds:mt-[var(--spacing-xs)]"
+), La = t(
+  "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+  {
+    variants: {
+      orientation: {
+        horizontal: "ds:w-full ds:flex-row",
+        vertical: "ds:h-full ds:flex-col-reverse"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+), K = t(
+  "ds:text-muted-foreground type-meta ds:tabular-nums ds:shrink-0"
+), Ta = la((d, v) => {
+  const {
+    value: u,
+    defaultValue: S,
+    marks: b,
+    minLabel: g,
+    maxLabel: w,
+    formatValue: C,
+    alwaysShowValue: E = !1,
+    step: H = 1,
+    largeStep: R = 10,
+    thumbLabels: m,
+    size: x = "md",
+    orientation: s = "horizontal",
+    min: n = 0,
+    max: y = 100,
+    disabled: U,
+    dir: W,
+    id: z,
+    className: _,
+    onValueChange: p,
+    onValueCommit: r,
+    onKeyDown: V,
+    ...M
+  } = d, { t: j, i18n: L } = pa(), o = fa(), l = u !== void 0, [O, G] = ca(
+    u ?? S ?? [n]
+  ), c = l ? u : O, k = (a) => {
+    l || G(a), p == null || p(a);
+  }, T = !!(o.disabled || U), A = o.describedBy || void 0, J = z ?? o.id, Q = ua(
+    (a) => new Intl.NumberFormat(L.language).format(a),
+    [L.language]
+  ), D = C ?? Q, X = j("ui.inputs.slider.minLabel", "Minimum"), Y = j("ui.inputs.slider.maxLabel", "Maximum"), Z = M["aria-label"], aa = (a) => m != null && m[a] ? m[a] : c.length === 2 ? a === 0 ? X : Y : Z, ta = (a) => {
+    if (V == null || V(a), a.defaultPrevented || T || a.key !== "PageUp" && a.key !== "PageDown") return;
+    a.preventDefault();
+    const i = Array.from(
+      a.currentTarget.querySelectorAll('[role="slider"]')
+    ), N = Math.max(
+      0,
+      i.indexOf(document.activeElement)
+    ), oa = a.key === "PageUp" ? R : -R, B = c.map(
+      ($, da) => da === N ? Math.max(n, Math.min(y, $ + oa)) : $
+    );
+    k(B), r == null || r(B);
+  }, ea = y - n || 1, sa = (a) => (a - n) / ea * 100, F = q(null), ra = va(v, F), ia = ha(F), I = q(c);
+  I.current = c;
+  const na = ma(
+    () => ({
+      getValue: () => I.current.slice(),
+      setValue: (a) => {
+        k(a), r == null || r(a);
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [l, p, r]
+  );
+  ba(ga, na, z);
+  const P = /* @__PURE__ */ f(
+    h.Root,
+    {
+      ref: ra,
+      id: J,
+      dir: W ?? ia,
+      orientation: s,
+      min: n,
+      max: y,
+      step: H,
+      disabled: T,
+      value: l ? u : void 0,
+      defaultValue: l ? void 0 : S ?? [n],
+      onValueChange: k,
+      onValueCommit: r,
+      onKeyDown: ta,
+      "aria-describedby": A,
+      "aria-invalid": o.invalid || void 0,
+      "aria-required": o.required || void 0,
+      className: wa({ size: x, className: _ }),
+      "data-component": "slider",
+      "data-component-id": z,
+      ...M,
+      "aria-label": void 0,
+      children: [
+        /* @__PURE__ */ e(h.Track, { className: xa(), children: /* @__PURE__ */ e(h.Range, { className: ya() }) }),
+        b && b.length > 0 ? /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: Sa({ orientation: s }),
+            children: b.map((a) => {
+              const i = sa(a.value), N = s === "vertical" ? { insetBlockEnd: `${i}%` } : { insetInlineStart: `${i}%` };
+              return /* @__PURE__ */ f(
+                "span",
+                {
+                  className: Ra({ orientation: s }),
+                  style: N,
+                  children: [
+                    /* @__PURE__ */ e("span", { className: Ma({ orientation: s }) }),
+                    a.label ? /* @__PURE__ */ e("span", { className: ja(), children: a.label }) : null
+                  ]
+                },
+                `${a.value}-${a.label ?? ""}`
+              );
+            })
+          }
+        ) : null,
+        c.map((a, i) => /* @__PURE__ */ f(
+          h.Thumb,
+          {
+            "aria-label": aa(i),
+            "aria-valuetext": D(a),
+            "aria-describedby": A,
+            "aria-invalid": o.invalid || void 0,
+            className: za({ size: x }),
+            children: [
+              /* @__PURE__ */ e("span", { "aria-hidden": "true", className: Va({ size: x }) }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: ka({ orientation: s }),
+                  children: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: Na({
+                        orientation: s,
+                        alwaysShow: E
+                      }),
+                      children: D(a)
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          i
+        ))
+      ]
+    }
+  );
+  return g !== void 0 || w !== void 0 ? /* @__PURE__ */ f("div", { className: La({ orientation: s }), children: [
+    g !== void 0 ? /* @__PURE__ */ e("span", { className: K(), children: g }) : null,
+    P,
+    w !== void 0 ? /* @__PURE__ */ e("span", { className: K(), children: w }) : null
+  ] }) : P;
+});
+Ta.displayName = "Slider";
+export {
+  Ta as S
+};
+//# sourceMappingURL=slider-CcsQTZTA.js.map

package/dist/_chunks/sparkline.agent-56Sj7nOP.js

@@ -0,0 +1,245 @@
+import { jsx as I, jsxs as L } from "react/jsx-runtime";
+import { forwardRef as P, useId as j, useMemo as S, useRef as G, useState as z, useEffect as A, useImperativeHandle as V } from "react";
+import { c as Z } from "./index-D2ZczOXr.js";
+import { useTranslation as $ } from "react-i18next";
+import q from "react-apexcharts";
+import w from "apexcharts";
+import { g as H, u as J } from "./apexcharts-theme-BkSShpEy.js";
+function K(n) {
+  if (n.length < 2)
+    return { slope: 0, direction: "steady" };
+  const t = n.length, i = (t - 1) / 2, c = n.reduce((s, o) => s + o, 0) / t;
+  let a = 0, l = 0;
+  for (let s = 0; s < t; s++) {
+    const o = s - i;
+    a += o * (n[s] - c), l += o * o;
+  }
+  const d = l === 0 ? 0 : a / l, b = 0.01 * (Math.max(...n) - Math.min(...n) || 1), k = Math.abs(d) < b ? "steady" : d > 0 ? "increasing" : "decreasing";
+  return { slope: d, direction: k };
+}
+const D = Z("ds:relative ds:inline-block ds:w-full", {
+  variants: {
+    size: {
+      xs: "ds:h-6",
+      sm: "ds:h-8",
+      md: "ds:h-10"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), Q = {
+  increasing: "↑",
+  decreasing: "↓",
+  steady: "→"
+}, X = {
+  xs: 24,
+  sm: 32,
+  md: 40
+};
+function Y() {
+  return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+const ee = P(
+  ({
+    id: n,
+    data: t,
+    variant: i = "line",
+    size: c = "md",
+    label: a,
+    color: l,
+    showEndpoint: d = !1,
+    showTooltip: v = !1,
+    width: b,
+    height: k,
+    className: s,
+    ...o
+  }, U) => {
+    var N;
+    const { t: u, i18n: R } = $(), M = j(), m = S(
+      () => `sparkline-${M.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+      [M]
+    ), p = G(null), [C, _] = z(0), { direction: y } = K(t), T = S(() => {
+      if (t.length === 0)
+        return u("ui.sparkline.noData", "No data");
+      const e = (g) => new Intl.NumberFormat(R.language).format(g), r = u(`ui.sparkline.direction.${y}`), f = {
+        min: e(Math.min(...t)),
+        max: e(Math.max(...t)),
+        current: e(t[t.length - 1]),
+        direction: r
+      };
+      return a ? u("ui.sparkline.summary", { label: a, ...f }) : u("ui.sparkline.summaryNoLabel", f);
+    }, [t, a, y, R.language, u]), [h, E] = z(() => {
+      try {
+        return H();
+      } catch {
+        return {};
+      }
+    });
+    A(() => {
+      let e;
+      const r = new MutationObserver(() => {
+        clearTimeout(e), e = setTimeout(() => {
+          try {
+            E(H());
+          } catch {
+          }
+        }, 50);
+      });
+      return r.observe(document.documentElement, {
+        attributes: !0,
+        attributeFilter: ["class"]
+      }), () => {
+        clearTimeout(e), r.disconnect();
+      };
+    }, []), A(() => {
+      const e = p.current;
+      if (!e) return;
+      const r = new ResizeObserver((f) => {
+        const g = f[0];
+        g && _(Math.floor(g.contentRect.width));
+      });
+      return r.observe(e), () => r.disconnect();
+    }, []), J(p), V(U, () => ({
+      updateSeries(e) {
+        var r;
+        (r = w.getChartByID(m)) == null || r.updateSeries([{ data: e }]);
+      },
+      updateOptions(e) {
+        var r;
+        (r = w.getChartByID(m)) == null || r.updateOptions(e);
+      },
+      async dataURI() {
+        const e = w.getChartByID(m);
+        return e ? (await e.dataURI()).imgURI : "";
+      }
+    }));
+    const x = l ?? ((N = h.colors) == null ? void 0 : N[0]) ?? "currentColor";
+    if (t.length === 0)
+      return /* @__PURE__ */ I(
+        "div",
+        {
+          ref: p,
+          role: "img",
+          "aria-label": T,
+          dir: "ltr",
+          className: D({ size: c, className: s }),
+          ...o
+        }
+      );
+    const O = Y(), W = {
+      ...h,
+      chart: {
+        ...h.chart,
+        id: m,
+        type: i,
+        sparkline: { enabled: !0 },
+        toolbar: { show: !1 },
+        animations: {
+          enabled: !O,
+          dynamicAnimation: { enabled: !O }
+        },
+        zoom: { enabled: !1 },
+        parentHeightOffset: 0
+      },
+      colors: [x],
+      stroke: {
+        curve: "smooth",
+        width: i === "bar" ? 0 : 2
+      },
+      fill: {
+        opacity: i === "area" ? 0.15 : 1
+      },
+      xaxis: {
+        crosshairs: { show: !1 }
+      },
+      tooltip: { enabled: v },
+      markers: d ? {
+        size: [0],
+        discrete: [
+          {
+            seriesIndex: 0,
+            dataPointIndex: t.length - 1,
+            fillColor: x,
+            strokeColor: x,
+            size: 4
+          }
+        ]
+      } : { size: 0 },
+      grid: {
+        ...h.grid,
+        show: !1,
+        // ApexCharts grid.padding uses physical keys (not CSS logical properties).
+        // The chart wrapper enforces dir="ltr" so these always resolve correctly.
+        padding: { top: 2, right: 2, bottom: 2, left: 2 }
+      }
+    }, B = b ?? (C > 0 ? C : "100%"), F = k ?? X[c ?? "md"];
+    return /* @__PURE__ */ L(
+      "div",
+      {
+        ref: p,
+        role: "img",
+        "aria-label": T,
+        dir: "ltr",
+        className: D({ size: c, className: s }),
+        "data-component": "sparkline",
+        "data-component-id": n,
+        ...o,
+        children: [
+          /* @__PURE__ */ I(
+            q,
+            {
+              type: i,
+              series: [{ data: t }],
+              options: W,
+              width: B,
+              height: F,
+              "aria-hidden": "true"
+            }
+          ),
+          d && /* @__PURE__ */ I(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:pointer-events-none ds:absolute ds:end-0 ds:top-0 ds:text-[length:var(--font-size-xs)] ds:leading-none",
+              children: Q[y]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ee.displayName = "Sparkline";
+const de = {
+  id: "sparkline",
+  capabilities: [],
+  state: {},
+  actions: {
+    update_series: {
+      safety: "read",
+      argsType: "{ data: number[] }",
+      description: "Replace the sparkline data without remounting.",
+      invoke: (n, t) => {
+        n.updateSeries(t.data);
+      }
+    },
+    export_png: {
+      safety: "read",
+      description: "Return a PNG data URI of the sparkline.",
+      invoke: (n) => n.dataURI()
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "sparkline" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  ee as S,
+  de as s,
+  K as u
+};
+//# sourceMappingURL=sparkline.agent-56Sj7nOP.js.map