@alfadocs/ui-kit 0.15.1 → 0.16.0

package/dist/_chunks/benefit-card-Czs0oXdi.js

@@ -0,0 +1,161 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as u, useContext as k, Children as y, createContext as w } from "react";
+import { c as l } from "./index-D2ZczOXr.js";
+const b = [
+  "violet",
+  "purple",
+  "magenta",
+  "blue",
+  "green",
+  "red"
+], m = w(null), C = l("ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-lg)]", {
+  variants: {
+    columns: {
+      1: "ds:md:grid-cols-1",
+      2: "ds:md:grid-cols-2",
+      3: "ds:md:grid-cols-3",
+      4: "ds:md:grid-cols-4"
+    }
+  },
+  defaultVariants: { columns: 3 }
+}), N = l(
+  [
+    "ds:relative ds:rounded-[var(--radius-lg)] ds:overflow-hidden",
+    "ds:flex ds:flex-col ds:h-full",
+    "ds:bg-[var(--card)] ds:text-[var(--card-foreground)]",
+    // Hover lift — the transform is gated through `motion-safe:` so users
+    // with `prefers-reduced-motion: reduce` see only the shadow change.
+    // `--animation-duration` is pinned to 0ms in the accessible theme,
+    // which collapses the transition without dropping the rule entirely.
+    "ds:transition-[transform,box-shadow] ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "ds:hover:shadow-[var(--shadow-hover)]",
+    "ds:motion-safe:hover:-translate-y-0.5"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        elevated: "ds:shadow-[var(--shadow-card)]",
+        outlined: "ds:border ds:border-[color:var(--border)]"
+      },
+      // 4px accent strip via the logical `border-block-start` shorthand.
+      // Tailwind v4 doesn't ship per-side logical-border utilities, so the
+      // bracketed CSS shorthand is the kit's idiom (mirrors patterns at
+      // `src/patterns/operator-profile/operator-profile.tsx`).
+      accent: {
+        primary: "ds:[border-block-start:4px_solid_var(--primary)]",
+        accent: "ds:[border-block-start:4px_solid_var(--accent)]",
+        info: "ds:[border-block-start:4px_solid_var(--info)]",
+        success: "ds:[border-block-start:4px_solid_var(--success)]",
+        warning: "ds:[border-block-start:4px_solid_var(--warning)]",
+        violet: "ds:[border-block-start:4px_solid_var(--color-violet-500)]",
+        purple: "ds:[border-block-start:4px_solid_var(--color-purple-500)]",
+        magenta: "ds:[border-block-start:4px_solid_var(--color-magenta-500)]",
+        blue: "ds:[border-block-start:4px_solid_var(--color-blue-500)]",
+        green: "ds:[border-block-start:4px_solid_var(--color-green-500)]",
+        red: "ds:[border-block-start:4px_solid_var(--color-red-500)]"
+      }
+    },
+    defaultVariants: { variant: "elevated", accent: "primary" }
+  }
+), j = l(
+  [
+    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:size-12 ds:rounded-[var(--radius-md)] ds:shrink-0",
+    "ds:[&>svg]:size-6"
+  ].join(" "),
+  {
+    variants: {
+      accent: {
+        primary: "ds:text-[color:var(--primary)] ds:bg-[color-mix(in_srgb,var(--primary)_12%,var(--background))]",
+        accent: "ds:text-[color:var(--accent)] ds:bg-[color-mix(in_srgb,var(--accent)_12%,var(--background))]",
+        info: "ds:text-[color:var(--info)] ds:bg-[color-mix(in_srgb,var(--info)_12%,var(--background))]",
+        success: "ds:text-[color:var(--success)] ds:bg-[color-mix(in_srgb,var(--success)_12%,var(--background))]",
+        warning: "ds:text-[color:var(--warning)] ds:bg-[color-mix(in_srgb,var(--warning)_12%,var(--background))]",
+        violet: "ds:text-[color:var(--color-violet-500)] ds:bg-[color-mix(in_srgb,var(--color-violet-500)_12%,var(--background))]",
+        purple: "ds:text-[color:var(--color-purple-500)] ds:bg-[color-mix(in_srgb,var(--color-purple-500)_12%,var(--background))]",
+        magenta: "ds:text-[color:var(--color-magenta-500)] ds:bg-[color-mix(in_srgb,var(--color-magenta-500)_12%,var(--background))]",
+        blue: "ds:text-[color:var(--color-blue-500)] ds:bg-[color-mix(in_srgb,var(--color-blue-500)_12%,var(--background))]",
+        green: "ds:text-[color:var(--color-green-500)] ds:bg-[color-mix(in_srgb,var(--color-green-500)_12%,var(--background))]",
+        red: "ds:text-[color:var(--color-red-500)] ds:bg-[color-mix(in_srgb,var(--color-red-500)_12%,var(--background))]"
+      }
+    },
+    defaultVariants: { accent: "primary" }
+  }
+);
+function B(o, a) {
+  return o !== "auto" ? o : a ? b[a.index % b.length] : "primary";
+}
+const p = u(
+  ({ columns: o = 3, children: a, className: t, ...s }, n) => {
+    const c = y.toArray(a);
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: n,
+        "data-component": "benefit-card-row",
+        className: C({ columns: o, className: t }),
+        ...s,
+        children: c.map((e, d) => /* @__PURE__ */ r(m.Provider, { value: { index: d }, children: e }, d))
+      }
+    );
+  }
+);
+p.displayName = "BenefitCard.Row";
+const x = u(
+  ({
+    step: o,
+    icon: a,
+    title: t,
+    cta: s,
+    variant: n = "elevated",
+    accent: c = "auto",
+    children: e,
+    className: d,
+    ..._
+  }, f) => {
+    const h = k(m), i = B(c, h), v = typeof o == "number";
+    return /* @__PURE__ */ r(
+      "article",
+      {
+        ref: f,
+        "data-component": "benefit-card",
+        "data-accent": i,
+        className: N({ variant: n, accent: i, className: d }),
+        ..._,
+        children: /* @__PURE__ */ g("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-lg)] ds:flex-1", children: [
+          (a || v) && /* @__PURE__ */ g("div", { className: "ds:flex ds:items-start ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+            a ? /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: j({ accent: i }),
+                children: a
+              }
+            ) : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
+            v ? /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-part": "step",
+                className: "type-eyebrow ds:rounded-[var(--radius-full)] ds:bg-[var(--muted)] ds:text-[var(--muted-foreground)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
+                children: String(o).padStart(2, "0")
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ r("h3", { className: "type-title-card ds:text-[var(--foreground)]", children: t }),
+          e ? /* @__PURE__ */ r("div", { className: "type-body ds:text-[var(--muted-foreground)] ds:flex-1", children: e }) : null,
+          s ? /* @__PURE__ */ r("div", { className: "ds:mt-[var(--spacing-xs)]", children: s }) : null
+        ] })
+      }
+    );
+  }
+);
+x.displayName = "BenefitCard";
+const E = Object.assign(x, {
+  Row: p
+});
+export {
+  E as B
+};
+//# sourceMappingURL=benefit-card-Czs0oXdi.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.15.1",
+  "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/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/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;