@alfadocs/ui-kit 0.15.0 → 0.16.0

package/dist/_chunks/{public-header.agent-AzJSINlU.js → public-header.agent-ZLBAQ30j.js}

@@ -28,7 +28,12 @@ const X = C(
           "ds:data-[stuck=true]:shadow-[var(--shadow-md)]",
           "ds:forced-colors:border-b ds:forced-colors:border-[CanvasText]"
         ].join(" "),
-        dark: "ds:bg-[var(--color-blue-800)] ds:text-[var(--primary-foreground)]"
+        // `dark` flips its own scope into the dark token set so nav
+        // links + buttons inside read off-white text on the blue-800
+        // surface. Without the `theme-dark` scope the children inherit
+        // the light-theme `--foreground` (blue-500) and fail
+        // color-contrast at ~1.3:1.
+        dark: "theme-dark ds:bg-[var(--color-blue-800)] ds:text-[var(--foreground)]"
       },
       sticky: {
         none: "",
@@ -68,7 +73,7 @@ function G() {
   }, []), e;
 }
 function J(e, d, r) {
-  const [n, a] = b(!1), [m, o] = b(!1), l = L(0), u = L(!1);
+  const [n, a] = b(!1), [p, o] = b(!1), l = L(0), u = L(!1);
   return j(() => {
     if (!e || typeof window > "u") return;
     l.current = window.scrollY;
@@ -79,13 +84,13 @@ function J(e, d, r) {
         v > 4 && t > r ? o(!0) : (v < -4 || t <= r) && o(!1);
       }
       l.current = t, u.current = !1;
-    }, p = () => {
+    }, m = () => {
       u.current || (u.current = !0, window.requestAnimationFrame(f));
     };
-    return window.addEventListener("scroll", p, { passive: !0 }), f(), () => {
-      window.removeEventListener("scroll", p);
+    return window.addEventListener("scroll", m, { passive: !0 }), f(), () => {
+      window.removeEventListener("scroll", m);
     };
-  }, [e, d, r]), { stuck: n, hidden: m };
+  }, [e, d, r]), { stuck: n, hidden: p };
 }
 const I = P(
   ({
@@ -94,28 +99,28 @@ const I = P(
     homeLabel: r,
     navSlot: n,
     actionsSlot: a,
-    variant: m = "default",
+    variant: p = "default",
     sticky: o = "none",
     stickyOffset: l = 80,
     menuLabel: u,
     navLabel: f,
-    id: p,
+    id: m,
     className: t,
     ...v
   }, E) => {
-    const { t: h } = S(), y = G(), O = Y(), H = `${p ?? O}-sheet`, [i, w] = b(!1), _ = m === "transparent" || o === "scroll-up", { stuck: z, hidden: T } = J(
+    const { t: h } = S(), y = G(), O = Y(), H = `${m ?? O}-sheet`, [i, w] = b(!1), _ = p === "transparent" || o === "scroll-up", { stuck: z, hidden: T } = J(
       _,
       o,
       l
-    ), A = y ? !1 : T, M = N(() => w(!0), []), k = N(() => w(!1), []);
+    ), A = y ? !1 : T, k = N(() => w(!0), []), M = N(() => w(!1), []);
     q(
       E,
       () => ({
-        openMenu: M,
-        closeMenu: k,
+        openMenu: k,
+        closeMenu: M,
         getMenuOpen: () => i
       }),
-      [M, k, i]
+      [k, M, i]
     );
     const B = r ?? h("publicHeader.homeLabel", "AlfaDocs — home"), x = f ?? h("publicHeader.primaryNavLabel", "Primary"), V = u ?? (i ? h("publicHeader.closeMenu", "Close menu") : h("publicHeader.openMenu", "Open menu"));
     return /* @__PURE__ */ g(
@@ -123,11 +128,11 @@ const I = P(
       {
         ...v,
         "data-component": "public-header",
-        "data-component-id": p,
+        "data-component-id": m,
         "data-stuck": z ? "true" : void 0,
         "data-hidden": A ? "true" : void 0,
         "data-state": y ? "reduced-motion" : void 0,
-        className: X({ variant: m, sticky: o, className: t }),
+        className: X({ variant: p, sticky: o, className: t }),
         children: [
           /* @__PURE__ */ s(
             "a",
@@ -234,4 +239,4 @@ export {
   de as P,
   ae as p
 };
-//# sourceMappingURL=public-header.agent-AzJSINlU.js.map
+//# sourceMappingURL=public-header.agent-ZLBAQ30j.js.map

package/dist/_chunks/{stat-DEkZx0Mx.js → stat-CYEx8sIR.js}

@@ -1,9 +1,9 @@
 import { jsxs as z, jsx as i } from "react/jsx-runtime";
 import { forwardRef as Q, useId as X, useCallback as L, useRef as Z, useMemo as tt } from "react";
-import { c as S } from "./index-D2ZczOXr.js";
+import { c as V } from "./index-D2ZczOXr.js";
 import { useTranslation as U } from "react-i18next";
 import { u as et } from "./use-count-up-BLLetaZ8.js";
-const O = S("ds:flex ds:flex-col", {
+const O = V("ds:flex ds:flex-col", {
   variants: {
     variant: {
       default: "ds:gap-[var(--spacing-xs)]",
@@ -48,7 +48,7 @@ const O = S("ds:flex ds:flex-col", {
     size: "md",
     align: "start"
   }
-}), P = S("type-metric ds:text-[var(--foreground)]", {
+}), P = V("type-metric ds:text-[var(--foreground)]", {
   variants: {
     size: {
       sm: "ds:[--type-metric-size:var(--font-size-xl)]",
@@ -83,7 +83,7 @@ const O = S("ds:flex ds:flex-col", {
     size: "md",
     variant: "default"
   }
-}), st = S(
+}), st = V(
   "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-label",
   {
     variants: {
@@ -127,21 +127,21 @@ function it(d, t) {
   l && (o = l[0], e = e.slice(0, -1).trimEnd());
   let m = "", u = ".";
   try {
-    const h = new Intl.NumberFormat(t).formatToParts(12345.6);
-    for (const n of h)
+    const b = new Intl.NumberFormat(t).formatToParts(12345.6);
+    for (const n of b)
       n.type === "group" ? m = n.value : n.type === "decimal" && (u = n.value);
   } catch {
   }
-  const v = e.match(/^(\d+)\.(\d+)$/);
-  if (v && !(v[2].length === 3 && m === ".")) {
+  const g = e.match(/^(\d+)\.(\d+)$/);
+  if (g && !(g[2].length === 3 && m === ".")) {
     const n = Number.parseFloat(e);
     if (Number.isFinite(n))
       return { target: n, sign: a, suffix: o };
   }
   let s = e;
   m !== "" && (s = s.split(m).join("")), u !== "." && (s = s.split(u).join(".")), s = s.replace(/[\s\u00A0\u202F]/g, "");
-  const b = Number.parseFloat(s);
-  return Number.isFinite(b) ? { target: b, sign: a, suffix: o } : null;
+  const v = Number.parseFloat(s);
+  return Number.isFinite(v) ? { target: v, sign: a, suffix: o } : null;
 }
 const dt = Q(
   ({
@@ -154,12 +154,12 @@ const dt = Q(
     delta: l,
     deltaFormat: m = "decimal",
     icon: u,
-    loading: v = !1,
+    loading: g = !1,
     animate: s = !1,
-    animateOnEveryView: b = !1,
-    animateDurationMs: h = 1600,
+    animateOnEveryView: v = !1,
+    animateDurationMs: b = 1600,
     animateLocale: n,
-    animateSeparators: p,
+    animateSeparators: h,
     variant: x = "default",
     size: y = "md",
     align: I = "start",
@@ -191,46 +191,45 @@ const dt = Q(
       (w) => {
         const C = (() => {
           try {
-            return new Intl.NumberFormat(
-              N,
-              p ? { useGrouping: !0 } : void 0
-            );
+            return new Intl.NumberFormat(N, {
+              useGrouping: !0
+            });
           } catch {
             return null;
           }
         })();
-        let g;
+        let p;
         if (C)
-          if (p) {
-            const W = Math.abs(w), A = Math.trunc(W), D = W - A, H = p.thousand ?? "", V = String(A).replace(
+          if (h) {
+            const W = Math.abs(w), A = Math.trunc(W), D = W - A, H = h.thousand ?? "", S = String(A).replace(
               /\B(?=(\d{3})+(?!\d))/g,
               H
             );
             if (D === 0)
-              g = V;
+              p = S;
             else {
-              const G = D.toFixed(6).replace(/0+$/, "").slice(2), J = p.decimal ?? ".";
-              g = G ? V + J + G : V;
+              const G = D.toFixed(6).replace(/0+$/, "").slice(2), J = h.decimal ?? ".";
+              p = G ? S + J + G : S;
             }
           } else
-            g = C.format(Math.abs(w));
+            p = C.format(Math.abs(w));
         else
-          g = String(Math.abs(w));
+          p = String(Math.abs(w));
         let E = F;
-        return F === "" && w < 0 && (E = "-"), `${E}${g}${T}`;
+        return F === "" && w < 0 && (E = "-"), `${E}${p}${T}`;
       },
-      [N, p, F, T]
+      [N, h, F, T]
     ), $ = et({
       to: _,
       from: 0,
-      durationMs: h,
+      durationMs: b,
       startOnVisible: !0,
-      retriggerOnReEntry: b,
+      retriggerOnReEntry: v,
       // `formatter` is the only path we use — it owns both the locale
       // formatting and the sign/suffix re-application.
       formatter: q
     });
-    return v ? /* @__PURE__ */ z(
+    return g ? /* @__PURE__ */ z(
       "div",
       {
         ref: k,
@@ -315,4 +314,4 @@ dt.displayName = "Stat";
 export {
   dt as S
 };
-//# sourceMappingURL=stat-DEkZx0Mx.js.map
+//# sourceMappingURL=stat-CYEx8sIR.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.15.0",
+  "packageVersion": "0.16.0",
   "components": [
     {
       "kind": "component",
@@ -387,6 +387,20 @@
         }
       }
     },
+    {
+      "kind": "component",
+      "id": "benefit-card",
+      "capabilities": [],
+      "state": [],
+      "actions": [],
+      "domHooks": {
+        "root": {
+          "attr": "data-component",
+          "value": "benefit-card",
+          "description": "Marks the BenefitCard root. Presentational — no agent-driven state."
+        }
+      }
+    },
     {
       "kind": "component",
       "id": "breadcrumb",

package/dist/components/benefit-card/benefit-card.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+declare const ACCENT_WHEEL: readonly ["violet", "purple", "magenta", "blue", "green", "red"];
+type WheelAccent = (typeof ACCENT_WHEEL)[number];
+type SemanticAccent = 'primary' | 'accent' | 'info' | 'success' | 'warning';
+type AccentProp = SemanticAccent | WheelAccent | 'auto';
+export interface BenefitCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Step number; rendered as a zero-padded chip ("01", "02", …). Omit to hide. */
+    step?: number;
+    /** Icon node — usually an `<svg>` 24-32px. Rendered inside a tinted square chip. */
+    icon?: ReactNode;
+    /** Card heading. Always rendered inside an `<h3>` — pass only inline / phrasing content. */
+    title: ReactNode;
+    /** Optional CTA — usually a `<Button intent="link">` or kit `<Link>`. Rendered at the block-end. */
+    cta?: ReactNode;
+    /** Surface treatment. */
+    variant?: 'elevated' | 'outlined';
+    /**
+     * Accent colour. `auto` (default inside a `<BenefitCard.Row>`) rotates through the brand
+     * palette by row index: violet → purple → magenta → blue → green → red, then wraps.
+     * Outside a Row, `auto` falls back to `primary`.
+     */
+    accent?: AccentProp;
+    /** Body content (description / list / inline copy). */
+    children?: ReactNode;
+}
+export interface BenefitCardRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Number of columns at md+; defaults to 3. Collapses to 1 at < md. */
+    columns?: 1 | 2 | 3 | 4;
+    children?: ReactNode;
+}
+export declare const BenefitCard: import("react").ForwardRefExoticComponent<BenefitCardProps & import("react").RefAttributes<HTMLElement>> & {
+    Row: import("react").ForwardRefExoticComponent<BenefitCardRowProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};
+//# sourceMappingURL=benefit-card.d.ts.map

package/dist/components/benefit-card/index.d.ts

@@ -0,0 +1,3 @@
+export { BenefitCard } from './benefit-card';
+export type { BenefitCardProps, BenefitCardRowProps } from './benefit-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/benefit-card/index.js

@@ -0,0 +1,5 @@
+import { B as a } from "../../_chunks/benefit-card-Czs0oXdi.js";
+export {
+  a as BenefitCard
+};
+//# sourceMappingURL=index.js.map

package/dist/components/card/card.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const cardVariants: (props?: ({
-    variant?: "default" | "outlined" | "elevated" | null | undefined;
+    variant?: "default" | "elevated" | "outlined" | null | undefined;
     interactive?: boolean | null | undefined;
     stretch?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/carousel/index.js

@@ -1,4 +1,4 @@
-import { C as o, c as r } from "../../_chunks/carousel.agent-2dXpQoqp.js";
+import { C as o, c as r } from "../../_chunks/carousel.agent-OTn-kMQg.js";
 export {
   o as Carousel,
   r as carouselAgent

package/dist/components/index.d.ts

@@ -37,6 +37,7 @@ export * from './time-picker';
 export * from './accordion';
 export * from './avatar';
 export * from './badge';
+export * from './benefit-card';
 export * from './card';
 export * from './carousel';
 export * from './contact-card';

package/dist/components/public-header/index.js

@@ -1,4 +1,4 @@
-import { P as r, p } from "../../_chunks/public-header.agent-AzJSINlU.js";
+import { P as r, p } from "../../_chunks/public-header.agent-ZLBAQ30j.js";
 export {
   r as PublicHeader,
   p as publicHeaderAgent

package/dist/components/stat/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../../_chunks/stat-DEkZx0Mx.js";
+import { S as o } from "../../_chunks/stat-CYEx8sIR.js";
 export {
   o as Stat
 };

package/dist/components/stat/stat.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const statVariants: (props?: ({
-    variant?: "default" | "compact" | "outlined" | "elevated" | null | undefined;
+    variant?: "default" | "compact" | "elevated" | "outlined" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     align?: "center" | "end" | "start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;