@alfadocs/ui-kit 0.15.0 → 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