@alfadocs/ui-kit 0.0.19 → 0.1.0

package/dist/_chunks/{sparkline.agent-BDTXzTy9.js → sparkline.agent-BLY1IMyW.js}

@@ -1,11 +1,11 @@
-import { jsx as I, jsxs as L } from "react/jsx-runtime";
-import { forwardRef as j, useId as F, useMemo as S, useRef as G, useState as z, useEffect as A, useImperativeHandle as P } from "react";
+import { jsx as I, jsxs as F } from "react/jsx-runtime";
+import { forwardRef as L, useId as j, useMemo as S, useRef as G, useState as z, useEffect as A, useImperativeHandle as P } from "react";
 import { c as V } from "./index-D2ZczOXr.js";
 import { useTranslation as Z } from "react-i18next";
 import $ from "react-apexcharts";
 import w from "apexcharts";
-import { g as H } from "./apexcharts-theme-cpBYmCcr.js";
-function q(e) {
+import { g as H, u as q } from "./apexcharts-theme-BkSShpEy.js";
+function J(e) {
   if (e.length < 2)
     return { slope: 0, direction: "steady" };
   const n = e.length, a = (n - 1) / 2, c = e.reduce((s, o) => s + o, 0) / n;
@@ -14,31 +14,31 @@ function q(e) {
     const o = s - a;
     u += o * (e[s] - c), i += o * o;
   }
-  const l = i === 0 ? 0 : u / i, b = 0.01 * (Math.max(...e) - Math.min(...e) || 1), m = Math.abs(l) < b ? "steady" : l > 0 ? "increasing" : "decreasing";
-  return { slope: l, direction: m };
+  const d = i === 0 ? 0 : u / i, k = 0.01 * (Math.max(...e) - Math.min(...e) || 1), m = Math.abs(d) < k ? "steady" : d > 0 ? "increasing" : "decreasing";
+  return { slope: d, direction: m };
 }
-const D = V("relative inline-block w-full", {
+const D = V("ds:relative ds:inline-block ds:w-full", {
   variants: {
     size: {
-      xs: "h-6",
-      sm: "h-8",
-      md: "h-10"
+      xs: "ds:h-6",
+      sm: "ds:h-8",
+      md: "ds:h-10"
     }
   },
   defaultVariants: { size: "md" }
-}), J = {
+}), K = {
   increasing: "↑",
   decreasing: "↓",
   steady: "→"
-}, K = {
+}, Q = {
   xs: 24,
   sm: 32,
   md: 40
 };
-function Q() {
+function X() {
   return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-const X = j(
+const Y = L(
   ({
     data: e,
     variant: n = "line",
@@ -46,27 +46,27 @@ const X = j(
     label: c,
     color: u,
     showEndpoint: i = !1,
-    showTooltip: l = !1,
+    showTooltip: d = !1,
     width: v,
-    height: b,
+    height: k,
     className: m,
     ...s
   }, o) => {
     var N;
-    const { t: d, i18n: R } = Z(), M = F(), p = S(
+    const { t: l, i18n: R } = Z(), M = j(), p = S(
       () => `sparkline-${M.replace(/[^a-zA-Z0-9-_]/g, "")}`,
       [M]
-    ), k = G(null), [C, U] = z(0), { direction: y } = q(e), T = S(() => {
+    ), h = G(null), [C, U] = z(0), { direction: y } = J(e), T = S(() => {
       if (e.length === 0)
-        return d("ui.sparkline.noData", "No data");
-      const t = (g) => new Intl.NumberFormat(R.language).format(g), r = d(`ui.sparkline.direction.${y}`), f = {
+        return l("ui.sparkline.noData", "No data");
+      const t = (b) => new Intl.NumberFormat(R.language).format(b), r = l(`ui.sparkline.direction.${y}`), g = {
         min: t(Math.min(...e)),
         max: t(Math.max(...e)),
         current: t(e[e.length - 1]),
         direction: r
       };
-      return c ? d("ui.sparkline.summary", { label: c, ...f }) : d("ui.sparkline.summaryNoLabel", f);
-    }, [e, c, y, R.language, d]), [h, _] = z(() => {
+      return c ? l("ui.sparkline.summary", { label: c, ...g }) : l("ui.sparkline.summaryNoLabel", g);
+    }, [e, c, y, R.language, l]), [f, _] = z(() => {
       try {
         return H();
       } catch {
@@ -90,14 +90,14 @@ const X = j(
         clearTimeout(t), r.disconnect();
       };
     }, []), A(() => {
-      const t = k.current;
+      const t = h.current;
       if (!t) return;
-      const r = new ResizeObserver((f) => {
-        const g = f[0];
-        g && U(Math.floor(g.contentRect.width));
+      const r = new ResizeObserver((g) => {
+        const b = g[0];
+        b && U(Math.floor(b.contentRect.width));
       });
       return r.observe(t), () => r.disconnect();
-    }, []), P(o, () => ({
+    }, []), q(h), P(o, () => ({
       updateSeries(t) {
         var r;
         (r = w.getChartByID(p)) == null || r.updateSeries([{ data: t }]);
@@ -111,12 +111,12 @@ const X = j(
         return t ? (await t.dataURI()).imgURI : "";
       }
     }));
-    const x = u ?? ((N = h.colors) == null ? void 0 : N[0]) ?? "currentColor";
+    const x = u ?? ((N = f.colors) == null ? void 0 : N[0]) ?? "currentColor";
     if (e.length === 0)
       return /* @__PURE__ */ I(
         "div",
         {
-          ref: k,
+          ref: h,
           role: "img",
           "aria-label": T,
           dir: "ltr",
@@ -124,10 +124,10 @@ const X = j(
           ...s
         }
       );
-    const O = Q(), E = {
-      ...h,
+    const O = X(), E = {
+      ...f,
       chart: {
-        ...h.chart,
+        ...f.chart,
         id: p,
         type: n,
         sparkline: { enabled: !0 },
@@ -150,7 +150,7 @@ const X = j(
       xaxis: {
         crosshairs: { show: !1 }
       },
-      tooltip: { enabled: l },
+      tooltip: { enabled: d },
       markers: i ? {
         size: [0],
         discrete: [
@@ -164,17 +164,17 @@ const X = j(
         ]
       } : { size: 0 },
       grid: {
-        ...h.grid,
+        ...f.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 }
       }
-    }, W = v ?? (C > 0 ? C : "100%"), B = b ?? K[a ?? "md"];
-    return /* @__PURE__ */ L(
+    }, W = v ?? (C > 0 ? C : "100%"), B = k ?? Q[a ?? "md"];
+    return /* @__PURE__ */ F(
       "div",
       {
-        ref: k,
+        ref: h,
         role: "img",
         "aria-label": T,
         dir: "ltr",
@@ -197,8 +197,8 @@ const X = j(
             "span",
             {
               "aria-hidden": "true",
-              className: "pointer-events-none absolute end-0 top-0 text-[var(--font-size-xs)] leading-none",
-              children: J[y]
+              className: "ds:pointer-events-none ds:absolute ds:end-0 ds:top-0 ds:text-[var(--font-size-xs)] ds:leading-none",
+              children: K[y]
             }
           )
         ]
@@ -206,8 +206,8 @@ const X = j(
     );
   }
 );
-X.displayName = "Sparkline";
-const ie = {
+Y.displayName = "Sparkline";
+const ae = {
   id: "sparkline",
   capabilities: [],
   state: {},
@@ -231,8 +231,8 @@ const ie = {
   }
 };
 export {
-  X as S,
-  ie as s,
-  q as u
+  Y as S,
+  ae as s,
+  J as u
 };
-//# sourceMappingURL=sparkline.agent-BDTXzTy9.js.map
+//# sourceMappingURL=sparkline.agent-BLY1IMyW.js.map

package/dist/_chunks/sparkline.agent-BLY1IMyW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.agent-BLY1IMyW.js","sources":["../../src/components/sparkline/use-linear-trend.ts","../../src/components/sparkline/sparkline.tsx","../../src/components/sparkline/sparkline.agent.ts"],"sourcesContent":["export type TrendDirection = 'increasing' | 'decreasing' | 'steady';\n\nexport interface LinearTrendResult {\n  slope: number;\n  direction: TrendDirection;\n}\n\nexport function useLinearTrend(data: number[]): LinearTrendResult {\n  if (data.length < 2) {\n    return { slope: 0, direction: 'steady' };\n  }\n\n  const n = data.length;\n  const xMean = (n - 1) / 2;\n  const yMean = data.reduce((sum, y) => sum + y, 0) / n;\n\n  let numerator = 0;\n  let denominator = 0;\n\n  for (let i = 0; i < n; i++) {\n    const dx = i - xMean;\n    numerator += dx * (data[i] - yMean);\n    denominator += dx * dx;\n  }\n\n  const slope = denominator === 0 ? 0 : numerator / denominator;\n  const range = Math.max(...data) - Math.min(...data);\n  const threshold = 0.01 * (range || 1);\n\n  const direction: TrendDirection =\n    Math.abs(slope) < threshold ? 'steady' : slope > 0 ? 'increasing' : 'decreasing';\n\n  return { slope, direction };\n}\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport ReactApexChart from 'react-apexcharts';\nimport ApexCharts from 'apexcharts';\nimport { getApexChartsTheme } from '../../tokens/apexcharts-theme';\nimport { useNeutraliseHiddenFocus } from '../_shared/use-neutralize-hidden-focus';\nimport { useLinearTrend } from './use-linear-trend';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                  */\n/* ------------------------------------------------------------------ */\n\nconst sparklineVariants = cva('ds:relative ds:inline-block ds:w-full', {\n  variants: {\n    size: {\n      xs: 'ds:h-6',\n      sm: 'ds:h-8',\n      md: 'ds:h-10',\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\n/* ------------------------------------------------------------------ */\n/* Constants                                                            */\n/* ------------------------------------------------------------------ */\n\nconst DIRECTION_ARROW = {\n  increasing: '↑',\n  decreasing: '↓',\n  steady: '→',\n} as const;\n\nconst SIZE_HEIGHT: Record<'xs' | 'sm' | 'md', number> = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n};\n\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window !== 'undefined' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Public types                                                         */\n/* ------------------------------------------------------------------ */\n\nexport interface SparklineHandle {\n  updateSeries: (data: number[]) => void;\n  updateOptions: (opts: ApexCharts.ApexOptions) => void;\n  dataURI: () => Promise<string>;\n}\n\nexport interface SparklineProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'>,\n    VariantProps<typeof sparklineVariants> {\n  /** Array of numeric data points */\n  data: number[];\n  /** Chart visual style */\n  variant?: 'line' | 'bar' | 'area';\n  /** Size preset */\n  size?: 'xs' | 'sm' | 'md';\n  /** Accessible label prefix, e.g. \"Revenue, 30 days\" */\n  label?: string;\n  /** Stroke / bar colour override — defaults to var(--primary) via bridge */\n  color?: string;\n  /** Show end-point dot with trend direction arrow */\n  showEndpoint?: boolean;\n  /**\n   * Show Apex's hover tooltip with the data point value. Defaults to\n   * `false` — sparklines are intentionally minimal — opt in when the\n   * sparkline is large enough to be a primary metric surface (e.g.\n   * dashboard widgets) and the user benefits from per-point readout.\n   */\n  showTooltip?: boolean;\n  /** Width override — defaults to 100% of container */\n  width?: string | number;\n  /** Height override — defaults to the size variant height */\n  height?: string | number;\n}\n\n/* ------------------------------------------------------------------ */\n/* Sparkline component                                                  */\n/* ------------------------------------------------------------------ */\n\nexport const Sparkline = forwardRef<SparklineHandle, SparklineProps>(\n  (\n    {\n      data,\n      variant = 'line',\n      size = 'md',\n      label,\n      color,\n      showEndpoint = false,\n      showTooltip = false,\n      width,\n      height,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n    const rawId = useId();\n    const chartId = useMemo(\n      () => `sparkline-${rawId.replace(/[^a-zA-Z0-9-_]/g, '')}`,\n      [rawId],\n    );\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState(0);\n\n    const { direction } = useLinearTrend(data);\n\n    /* ---- accessible summary ---------------------------------------- */\n    const ariaLabel = useMemo(() => {\n      if (data.length === 0) {\n        return t('ui.sparkline.noData', 'No data');\n      }\n      const fmt = (n: number) => new Intl.NumberFormat(i18n.language).format(n);\n      const dirText = t(`ui.sparkline.direction.${direction}`);\n      const nums = {\n        min: fmt(Math.min(...data)),\n        max: fmt(Math.max(...data)),\n        current: fmt(data[data.length - 1]),\n        direction: dirText,\n      };\n      if (label) {\n        return t('ui.sparkline.summary', { label, ...nums });\n      }\n      return t('ui.sparkline.summaryNoLabel', nums);\n    }, [data, label, direction, i18n.language, t]);\n\n    /* ---- theme-reactive state -------------------------------------- */\n    const [themeOptions, setThemeOptions] = useState<ApexCharts.ApexOptions>(() => {\n      try {\n        return getApexChartsTheme();\n      } catch {\n        return {};\n      }\n    });\n\n    /* ---- MutationObserver: re-read theme on class change ----------- */\n    useEffect(() => {\n      let timer: ReturnType<typeof setTimeout>;\n      const observer = new MutationObserver(() => {\n        clearTimeout(timer);\n        timer = setTimeout(() => {\n          try {\n            setThemeOptions(getApexChartsTheme());\n          } catch {\n            /* no-op in non-browser environments */\n          }\n        }, 50);\n      });\n      observer.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n      return () => {\n        clearTimeout(timer);\n        observer.disconnect();\n      };\n    }, []);\n\n    /* ---- ResizeObserver: track container width -------------------- */\n    useEffect(() => {\n      const el = wrapperRef.current;\n      if (!el) return;\n      const ro = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (entry) setContainerWidth(Math.floor(entry.contentRect.width));\n      });\n      ro.observe(el);\n      return () => ro.disconnect();\n    }, []);\n\n    /* ApexCharts injects focusable canvases inside the `aria-hidden`   */\n    /* chart wrapper. Neutralise their tabindex so axe's                */\n    /* `aria-hidden-focus` rule passes. Shared hook — same fix in       */\n    /* `Chart` (full apex) and the calendar's mirror events.            */\n    useNeutraliseHiddenFocus(wrapperRef);\n\n    /* ---- imperative handle ---------------------------------------- */\n    useImperativeHandle(ref, () => ({\n      updateSeries(newData: number[]) {\n        ApexCharts.getChartByID(chartId)?.updateSeries([{ data: newData }]);\n      },\n      updateOptions(opts: ApexCharts.ApexOptions) {\n        ApexCharts.getChartByID(chartId)?.updateOptions(opts);\n      },\n      async dataURI(): Promise<string> {\n        const instance = ApexCharts.getChartByID(chartId);\n        if (!instance) return '';\n        const result = await instance.dataURI();\n        return (result as { imgURI: string }).imgURI;\n      },\n    }));\n\n    /* ---- resolve color -------------------------------------------- */\n    const resolvedColor = color ?? themeOptions.colors?.[0] ?? 'currentColor';\n\n    /* ---- empty state ---------------------------------------------- */\n    if (data.length === 0) {\n      return (\n        <div\n          ref={wrapperRef}\n          role=\"img\"\n          aria-label={ariaLabel}\n          dir=\"ltr\"\n          className={sparklineVariants({ size, className })}\n          {...props}\n        />\n      );\n    }\n\n    /* ---- chart config ---------------------------------------------- */\n    const reducedMotion = prefersReducedMotion();\n\n    const chartOptions: ApexCharts.ApexOptions = {\n      ...themeOptions,\n      chart: {\n        ...themeOptions.chart,\n        id: chartId,\n        type: variant,\n        sparkline: { enabled: true },\n        toolbar: { show: false },\n        animations: {\n          enabled: !reducedMotion,\n          dynamicAnimation: { enabled: !reducedMotion },\n        },\n        zoom: { enabled: false },\n        parentHeightOffset: 0,\n      },\n      colors: [resolvedColor],\n      stroke: {\n        curve: 'smooth',\n        width: variant === 'bar' ? 0 : 2,\n      },\n      fill: {\n        opacity: variant === 'area' ? 0.15 : 1,\n      },\n      xaxis: {\n        crosshairs: { show: false },\n      },\n      tooltip: { enabled: showTooltip },\n      markers:\n        showEndpoint\n          ? {\n              size: [0],\n              discrete: [\n                {\n                  seriesIndex: 0,\n                  dataPointIndex: data.length - 1,\n                  fillColor: resolvedColor,\n                  strokeColor: resolvedColor,\n                  size: 4,\n                },\n              ],\n            }\n          : { size: 0 },\n      grid: {\n        ...themeOptions.grid,\n        show: false,\n        // ApexCharts grid.padding uses physical keys (not CSS logical properties).\n        // The chart wrapper enforces dir=\"ltr\" so these always resolve correctly.\n        padding: { top: 2, right: 2, bottom: 2, left: 2 },\n      },\n    };\n\n    const resolvedWidth = width ?? (containerWidth > 0 ? containerWidth : '100%');\n    const resolvedHeight = height ?? SIZE_HEIGHT[size ?? 'md'];\n\n    return (\n      <div\n        ref={wrapperRef}\n        role=\"img\"\n        aria-label={ariaLabel}\n        dir=\"ltr\"\n        className={sparklineVariants({ size, className })}\n        data-component=\"sparkline\"\n        {...props}\n      >\n        <ReactApexChart\n          type={variant}\n          series={[{ data }]}\n          options={chartOptions}\n          width={resolvedWidth}\n          height={resolvedHeight}\n          aria-hidden=\"true\"\n        />\n        {showEndpoint && (\n          <span\n            aria-hidden=\"true\"\n            className=\"ds:pointer-events-none ds:absolute ds:end-0 ds:top-0 ds:text-[var(--font-size-xs)] ds:leading-none\"\n          >\n            {DIRECTION_ARROW[direction]}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nSparkline.displayName = 'Sparkline';\n","import type { AgentAdapter } from '../../agent/types';\nimport type { SparklineHandle } from './sparkline';\n\nexport const sparklineAgent: AgentAdapter<SparklineHandle> = {\n  id: 'sparkline',\n  capabilities: [],\n  state: {},\n  actions: {\n    update_series: {\n      safety: 'read',\n      argsType: '{ data: number[] }',\n      description: 'Replace the sparkline data without remounting.',\n      invoke: (handle, args: { data: number[] }) => {\n        handle.updateSeries(args.data);\n      },\n    },\n    export_png: {\n      safety: 'read',\n      description: 'Return a PNG data URI of the sparkline.',\n      invoke: (handle) => handle.dataURI(),\n    },\n  },\n  domHooks: {\n    root: { attr: 'data-component', value: 'sparkline' },\n  },\n};\n"],"names":["useLinearTrend","data","xMean","yMean","sum","y","numerator","denominator","i","dx","slope","threshold","direction","sparklineVariants","cva","DIRECTION_ARROW","SIZE_HEIGHT","prefersReducedMotion","Sparkline","forwardRef","variant","size","label","color","showEndpoint","showTooltip","width","height","className","props","ref","t","i18n","useTranslation","rawId","useId","chartId","useMemo","wrapperRef","useRef","containerWidth","setContainerWidth","useState","ariaLabel","fmt","n","dirText","nums","themeOptions","setThemeOptions","getApexChartsTheme","useEffect","timer","observer","el","ro","entries","entry","useNeutraliseHiddenFocus","useImperativeHandle","newData","_a","ApexCharts","opts","instance","resolvedColor","jsx","reducedMotion","chartOptions","resolvedWidth","resolvedHeight","jsxs","ReactApexChart","sparklineAgent","handle","args"],"mappings":"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"}

package/dist/_chunks/{spinner-77xUGpuX.js → spinner-CoAOGcDa.js}

@@ -2,12 +2,12 @@ import { jsxs as e, jsx as s } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
 import { c as i } from "./index-D2ZczOXr.js";
 import { useTranslation as h } from "react-i18next";
-const f = i("inline-block shrink-0 text-current", {
+const f = i("ds:inline-block ds:shrink-0 ds:text-current", {
   variants: {
     size: {
-      sm: "size-3",
-      md: "size-4",
-      lg: "size-5"
+      sm: "ds:size-3",
+      md: "ds:size-4",
+      lg: "ds:size-5"
     },
     variant: {
       pulse: "",
@@ -23,43 +23,43 @@ const f = i("inline-block shrink-0 text-current", {
     }
   },
   compoundVariants: [
-    { variant: "pulse", speed: "slower", class: "[--spinner-duration:2400ms]" },
-    { variant: "pulse", speed: "slow", class: "[--spinner-duration:1800ms]" },
-    { variant: "pulse", speed: "normal", class: "[--spinner-duration:1200ms]" },
-    { variant: "pulse", speed: "fast", class: "[--spinner-duration:900ms]" },
-    { variant: "pulse", speed: "faster", class: "[--spinner-duration:600ms]" },
-    { variant: "chase", speed: "slower", class: "[--spinner-duration:2400ms]" },
-    { variant: "chase", speed: "slow", class: "[--spinner-duration:1800ms]" },
-    { variant: "chase", speed: "normal", class: "[--spinner-duration:1200ms]" },
-    { variant: "chase", speed: "fast", class: "[--spinner-duration:900ms]" },
-    { variant: "chase", speed: "faster", class: "[--spinner-duration:600ms]" },
+    { variant: "pulse", speed: "slower", class: "ds:[--spinner-duration:2400ms]" },
+    { variant: "pulse", speed: "slow", class: "ds:[--spinner-duration:1800ms]" },
+    { variant: "pulse", speed: "normal", class: "ds:[--spinner-duration:1200ms]" },
+    { variant: "pulse", speed: "fast", class: "ds:[--spinner-duration:900ms]" },
+    { variant: "pulse", speed: "faster", class: "ds:[--spinner-duration:600ms]" },
+    { variant: "chase", speed: "slower", class: "ds:[--spinner-duration:2400ms]" },
+    { variant: "chase", speed: "slow", class: "ds:[--spinner-duration:1800ms]" },
+    { variant: "chase", speed: "normal", class: "ds:[--spinner-duration:1200ms]" },
+    { variant: "chase", speed: "fast", class: "ds:[--spinner-duration:900ms]" },
+    { variant: "chase", speed: "faster", class: "ds:[--spinner-duration:600ms]" },
     // prism runs 2× so each of the 4 brand hues has room to read.
-    { variant: "prism", speed: "slower", class: "[--spinner-duration:4800ms]" },
-    { variant: "prism", speed: "slow", class: "[--spinner-duration:3600ms]" },
-    { variant: "prism", speed: "normal", class: "[--spinner-duration:2400ms]" },
-    { variant: "prism", speed: "fast", class: "[--spinner-duration:1800ms]" },
-    { variant: "prism", speed: "faster", class: "[--spinner-duration:1200ms]" }
+    { variant: "prism", speed: "slower", class: "ds:[--spinner-duration:4800ms]" },
+    { variant: "prism", speed: "slow", class: "ds:[--spinner-duration:3600ms]" },
+    { variant: "prism", speed: "normal", class: "ds:[--spinner-duration:2400ms]" },
+    { variant: "prism", speed: "fast", class: "ds:[--spinner-duration:1800ms]" },
+    { variant: "prism", speed: "faster", class: "ds:[--spinner-duration:1200ms]" }
   ],
   defaultVariants: { size: "md", variant: "pulse", speed: "normal" }
 }), n = i(
   [
-    "fill-current",
-    "[transform-box:fill-box] [transform-origin:center]",
-    "motion-reduce:animate-none",
-    "[animation-delay:calc(var(--spinner-duration)/4*var(--spinner-position))]"
+    "ds:fill-current",
+    "ds:[transform-box:fill-box] ds:[transform-origin:center]",
+    "ds:motion-reduce:animate-none",
+    "ds:[animation-delay:calc(var(--spinner-duration)/4*var(--spinner-position))]"
   ].join(" "),
   {
     variants: {
       variant: {
-        pulse: "animate-[spinner-pulse_var(--spinner-duration)_ease-in-out_infinite]",
-        chase: "animate-[spinner-chase_var(--spinner-duration)_ease-out_infinite]",
-        prism: "animate-[spinner-prism_var(--spinner-duration)_linear_infinite] motion-reduce:fill-[var(--color-violet-500)]"
+        pulse: "ds:animate-[spinner-pulse_var(--spinner-duration)_ease-in-out_infinite]",
+        chase: "ds:animate-[spinner-chase_var(--spinner-duration)_ease-out_infinite]",
+        prism: "ds:animate-[spinner-prism_var(--spinner-duration)_linear_infinite] ds:motion-reduce:fill-[var(--color-violet-500)]"
       },
       position: {
-        top: "[--spinner-position:0]",
-        right: "[--spinner-position:1]",
-        bottom: "[--spinner-position:2]",
-        left: "[--spinner-position:3]"
+        top: "ds:[--spinner-position:0]",
+        right: "ds:[--spinner-position:1]",
+        bottom: "ds:[--spinner-position:2]",
+        left: "ds:[--spinner-position:3]"
       }
     },
     defaultVariants: { variant: "pulse", position: "top" }
@@ -70,20 +70,20 @@ const f = i("inline-block shrink-0 text-current", {
     variant: a = "pulse",
     speed: t = "normal",
     label: o,
-    className: p,
-    ...l
-  }, m) => {
-    const { t: d } = h(), c = o ?? d("ui.common.loading", "Loading…");
+    className: d,
+    ...p
+  }, l) => {
+    const { t: m } = h(), c = o ?? m("ui.common.loading", "Loading…");
     return /* @__PURE__ */ e(
       "span",
       {
-        ref: m,
+        ref: l,
         role: "status",
         "aria-live": "polite",
-        className: f({ size: r, variant: a, speed: t, className: p }),
-        ...l,
+        className: f({ size: r, variant: a, speed: t, className: d }),
+        ...p,
         children: [
-          /* @__PURE__ */ e("svg", { "aria-hidden": "true", viewBox: "0 0 148 148", className: "size-full", children: [
+          /* @__PURE__ */ e("svg", { "aria-hidden": "true", viewBox: "0 0 148 148", className: "ds:size-full", children: [
             /* @__PURE__ */ s(
               "g",
               {
@@ -150,7 +150,7 @@ const f = i("inline-block shrink-0 text-current", {
               }
             )
           ] }),
-          /* @__PURE__ */ s("span", { className: "sr-only", children: c })
+          /* @__PURE__ */ s("span", { className: "ds:sr-only", children: c })
         ]
       }
     );
@@ -160,4 +160,4 @@ v.displayName = "Spinner";
 export {
   v as S
 };
-//# sourceMappingURL=spinner-77xUGpuX.js.map
+//# sourceMappingURL=spinner-CoAOGcDa.js.map

package/dist/_chunks/spinner-CoAOGcDa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-CoAOGcDa.js","sources":["../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\nconst spinnerVariants = cva('ds:inline-block ds:shrink-0 ds:text-current', {\n  variants: {\n    size: {\n      sm: 'ds:size-3',\n      md: 'ds:size-4',\n      lg: 'ds:size-5',\n    },\n    variant: {\n      pulse: '',\n      chase: '',\n      prism: '',\n    },\n    speed: {\n      slower: '',\n      slow: '',\n      normal: '',\n      fast: '',\n      faster: '',\n    },\n  },\n  compoundVariants: [\n    { variant: 'pulse', speed: 'slower', class: 'ds:[--spinner-duration:2400ms]' },\n    { variant: 'pulse', speed: 'slow', class: 'ds:[--spinner-duration:1800ms]' },\n    { variant: 'pulse', speed: 'normal', class: 'ds:[--spinner-duration:1200ms]' },\n    { variant: 'pulse', speed: 'fast', class: 'ds:[--spinner-duration:900ms]' },\n    { variant: 'pulse', speed: 'faster', class: 'ds:[--spinner-duration:600ms]' },\n    { variant: 'chase', speed: 'slower', class: 'ds:[--spinner-duration:2400ms]' },\n    { variant: 'chase', speed: 'slow', class: 'ds:[--spinner-duration:1800ms]' },\n    { variant: 'chase', speed: 'normal', class: 'ds:[--spinner-duration:1200ms]' },\n    { variant: 'chase', speed: 'fast', class: 'ds:[--spinner-duration:900ms]' },\n    { variant: 'chase', speed: 'faster', class: 'ds:[--spinner-duration:600ms]' },\n    // prism runs 2× so each of the 4 brand hues has room to read.\n    { variant: 'prism', speed: 'slower', class: 'ds:[--spinner-duration:4800ms]' },\n    { variant: 'prism', speed: 'slow', class: 'ds:[--spinner-duration:3600ms]' },\n    { variant: 'prism', speed: 'normal', class: 'ds:[--spinner-duration:2400ms]' },\n    { variant: 'prism', speed: 'fast', class: 'ds:[--spinner-duration:1800ms]' },\n    { variant: 'prism', speed: 'faster', class: 'ds:[--spinner-duration:1200ms]' },\n  ],\n  defaultVariants: { size: 'md', variant: 'pulse', speed: 'normal' },\n});\n\nconst shapeVariants = cva(\n  [\n    'ds:fill-current',\n    'ds:[transform-box:fill-box] ds:[transform-origin:center]',\n    'ds:motion-reduce:animate-none',\n    'ds:[animation-delay:calc(var(--spinner-duration)/4*var(--spinner-position))]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        pulse:\n          'ds:animate-[spinner-pulse_var(--spinner-duration)_ease-in-out_infinite]',\n        chase:\n          'ds:animate-[spinner-chase_var(--spinner-duration)_ease-out_infinite]',\n        prism:\n          'ds:animate-[spinner-prism_var(--spinner-duration)_linear_infinite] ds:motion-reduce:fill-[var(--color-violet-500)]',\n      },\n      position: {\n        top: 'ds:[--spinner-position:0]',\n        right: 'ds:[--spinner-position:1]',\n        bottom: 'ds:[--spinner-position:2]',\n        left: 'ds:[--spinner-position:3]',\n      },\n    },\n    defaultVariants: { variant: 'pulse', position: 'top' },\n  },\n);\n\nexport type SpinnerVariant = 'pulse' | 'chase' | 'prism';\nexport type SpinnerSpeed = 'slower' | 'slow' | 'normal' | 'fast' | 'faster';\n\nexport interface SpinnerProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'children'>,\n    VariantProps<typeof spinnerVariants> {\n  size?: 'sm' | 'md' | 'lg';\n  variant?: SpinnerVariant;\n  speed?: SpinnerSpeed;\n  label?: string;\n}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n  (\n    {\n      size = 'md',\n      variant = 'pulse',\n      speed = 'normal',\n      label,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const accessibleLabel = label ?? t('ui.common.loading', 'Loading…');\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-live=\"polite\"\n        className={spinnerVariants({ size, variant, speed, className })}\n        {...props}\n      >\n        <svg aria-hidden=\"true\" viewBox=\"0 0 148 148\" className=\"ds:size-full\">\n          <g\n            data-shape=\"top\"\n            className={shapeVariants({ variant, position: 'top' })}\n          >\n            <rect\n              x=\"53.04\"\n              y=\"2.54\"\n              width=\"33.99\"\n              height=\"49.34\"\n              rx=\"4.56\"\n              ry=\"4.56\"\n              transform=\"translate(-4.66 19.05) rotate(-15)\"\n            />\n          </g>\n          <g\n            data-shape=\"right\"\n            className={shapeVariants({ variant, position: 'right' })}\n          >\n            <rect\n              x=\"96.12\"\n              y=\"53.04\"\n              width=\"49.34\"\n              height=\"33.99\"\n              rx=\"4.56\"\n              ry=\"4.56\"\n              transform=\"translate(-14.01 33.65) rotate(-15)\"\n            />\n          </g>\n          <g\n            data-shape=\"bottom\"\n            className={shapeVariants({ variant, position: 'bottom' })}\n          >\n            <rect\n              x=\"60.97\"\n              y=\"96.12\"\n              width=\"33.99\"\n              height=\"49.34\"\n              rx=\"4.56\"\n              ry=\"4.56\"\n              transform=\"translate(-28.61 24.29) rotate(-15)\"\n            />\n          </g>\n          <g\n            data-shape=\"left\"\n            className={shapeVariants({ variant, position: 'left' })}\n          >\n            <path d=\"M47.82,59.56c-.65-2.43-3.15-3.87-5.58-3.22L3.38,66.75c-2.43.65-3.87,3.15-3.22,5.58l6.44,24.03c.65,2.43,3.15,3.87,5.58,3.22l38.86-10.41c2.43-.65,3.87-3.15,3.22-5.58l-6.44-24.03Z\" />\n          </g>\n        </svg>\n        <span className=\"ds:sr-only\">{accessibleLabel}</span>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["spinnerVariants","cva","shapeVariants","Spinner","forwardRef","size","variant","speed","label","className","props","ref","t","useTranslation","accessibleLabel","jsxs","jsx"],"mappings":"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"}

package/dist/_chunks/stat-D76MNHzK.js

@@ -0,0 +1,208 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as I, useId as j } from "react";
+import { c as p } from "./index-D2ZczOXr.js";
+import { useTranslation as h } from "react-i18next";
+const y = p("ds:flex ds:flex-col", {
+  variants: {
+    variant: {
+      default: "ds:gap-[var(--spacing-xs)]",
+      outlined: [
+        "ds:gap-[var(--spacing-xs)]",
+        "ds:border ds:border-[color:var(--border)]",
+        "ds:rounded-[var(--radius-md)]",
+        "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+        "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]"
+      ].join(" "),
+      // White card surface with the shared card shadow — matches
+      // `Card variant="elevated"` tokens (`--card` + `--shadow-card`) so
+      // a grid of elevated Stats reads as a set of shaded panels without
+      // nesting a Card around each one.
+      elevated: [
+        "ds:gap-[var(--spacing-xs)]",
+        "ds:bg-[var(--card)]",
+        "ds:text-[var(--card-foreground)]",
+        "ds:shadow-[var(--shadow-card)]",
+        "ds:rounded-[var(--radius-lg)]",
+        "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+        "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]",
+        // Forced-colors: UA strips shadow, so render a border as the
+        // separation cue — mirrors Card's forced-colors behaviour.
+        "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
+      ].join(" "),
+      compact: "ds:gap-[var(--spacing-none)]"
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    align: {
+      start: "ds:items-start ds:text-start",
+      center: "ds:items-center ds:text-center",
+      end: "ds:items-end ds:text-end"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    align: "start"
+  }
+}), k = p(
+  "type-metric ds:text-[var(--foreground)]",
+  {
+    variants: {
+      size: {
+        sm: "ds:[--type-metric-size:var(--font-size-xl)]",
+        md: "ds:[--type-metric-size:var(--font-size-3xl)]",
+        lg: "ds:[--type-metric-size:var(--font-size-5xl)]"
+      },
+      variant: {
+        default: "",
+        outlined: "",
+        elevated: "",
+        compact: ""
+      }
+    },
+    compoundVariants: [
+      { variant: "compact", size: "sm", className: "ds:[--type-metric-size:var(--font-size-lg)]" },
+      { variant: "compact", size: "md", className: "ds:[--type-metric-size:var(--font-size-xl)]" },
+      { variant: "compact", size: "lg", className: "ds:[--type-metric-size:var(--font-size-2xl)]" }
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+), S = p(
+  "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-label",
+  {
+    variants: {
+      trend: {
+        up: "ds:text-[var(--success)]",
+        down: "ds:text-[var(--destructive)]",
+        flat: "ds:text-[var(--muted-foreground)]"
+      }
+    },
+    defaultVariants: {
+      trend: "flat"
+    }
+  }
+), T = { up: "↑", down: "↓", flat: "→" }, F = {
+  up: "ui.stat.trend.up",
+  down: "ui.stat.trend.down",
+  flat: "ui.stat.trend.flat"
+};
+function R({ trend: s, delta: a, deltaFormat: t = "decimal", locale: l }) {
+  const { t: r, i18n: d } = h(), n = typeof a == "string" ? a : new Intl.NumberFormat(l ?? d.language, {
+    style: t === "percent" ? "percent" : "decimal"
+  }).format(t === "percent" ? a / 100 : a);
+  return /* @__PURE__ */ c("span", { className: S({ trend: s }), children: [
+    /* @__PURE__ */ e("span", { "aria-hidden": "true", children: T[s] }),
+    /* @__PURE__ */ e("span", { className: "ds:sr-only", children: r(F[s]) }),
+    n
+  ] });
+}
+const D = I(
+  ({
+    label: s,
+    value: a,
+    format: t,
+    currency: l,
+    locale: r,
+    trend: d,
+    delta: n,
+    deltaFormat: N = "decimal",
+    icon: u,
+    loading: w = !1,
+    variant: o = "default",
+    size: m = "md",
+    align: v = "start",
+    className: f,
+    ...g
+  }, x) => {
+    const { i18n: z } = h(), b = j(), V = () => {
+      if (typeof a == "string") return a;
+      const i = r ?? z.language;
+      switch (t) {
+        case "currency":
+          return new Intl.NumberFormat(i, {
+            style: "currency",
+            currency: l ?? "USD"
+          }).format(a);
+        case "percent":
+          return new Intl.NumberFormat(i, { style: "percent" }).format(a);
+        case "decimal":
+          return new Intl.NumberFormat(i, { style: "decimal" }).format(a);
+        default:
+          return new Intl.NumberFormat(i).format(a);
+      }
+    };
+    return w ? /* @__PURE__ */ c(
+      "div",
+      {
+        ref: x,
+        role: "group",
+        "aria-busy": "true",
+        "aria-label": s,
+        className: y({ variant: o, size: m, align: v, className: f }),
+        ...g,
+        children: [
+          /* @__PURE__ */ e("div", { className: "ds:h-[var(--skeleton-label-h)] ds:w-[var(--skeleton-label-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" }),
+          /* @__PURE__ */ e("div", { className: "ds:h-[var(--skeleton-value-h)] ds:w-[var(--skeleton-value-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" })
+        ]
+      }
+    ) : /* @__PURE__ */ c(
+      "div",
+      {
+        ref: x,
+        role: "group",
+        "aria-labelledby": b,
+        className: y({ variant: o, size: m, align: v, className: f }),
+        ...g,
+        children: [
+          /* @__PURE__ */ c("span", { className: "ds:inline-flex ds:items-center", children: [
+            u && /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: [
+                  "ds:me-[var(--spacing-xs)] ds:inline-flex ds:shrink-0",
+                  // Accent tint on the leading icon. The icon is decorative
+                  // (aria-hidden), so magenta-500's 3.2:1 contrast on white
+                  // is acceptable here — the Stat label + value still
+                  // carry the accessible name at `--foreground`.
+                  "ds:text-[color:var(--accent)]",
+                  "ds:forced-colors:text-[CanvasText]"
+                ].join(" "),
+                children: u
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                id: b,
+                className: "type-label ds:text-[var(--muted-foreground)]",
+                children: s
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("span", { className: k({ size: m, variant: o }), children: V() }),
+          d != null && n != null && /* @__PURE__ */ e(
+            R,
+            {
+              trend: d,
+              delta: n,
+              deltaFormat: N,
+              locale: r
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+D.displayName = "Stat";
+export {
+  D as S
+};
+//# sourceMappingURL=stat-D76MNHzK.js.map