@epicbagel/saas-kit 1.32.0 → 1.33.0

package/dist/primitives/short-video.js

@@ -0,0 +1,110 @@
+"use client";
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/short-video.tsx
+import { useRef, useState } from "react";
+import { Play, Pause, Volume2, VolumeX } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatDuration(sec) {
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function ShortVideo({
+  src,
+  poster,
+  durationSec,
+  orientation = "portrait",
+  caption,
+  maxWidth = 320,
+  className
+}) {
+  const videoRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [muted, setMuted] = useState(false);
+  const [started, setStarted] = useState(false);
+  const togglePlay = () => {
+    const el = videoRef.current;
+    if (!el) return;
+    if (el.paused) {
+      void el.play();
+      setStarted(true);
+    } else {
+      el.pause();
+    }
+  };
+  const toggleMute = () => {
+    const el = videoRef.current;
+    if (!el) return;
+    el.muted = !el.muted;
+    setMuted(el.muted);
+  };
+  return /* @__PURE__ */ jsxs("figure", { className: cn("flex flex-col gap-2", className), style: { maxWidth }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group relative overflow-hidden rounded-2xl border bg-muted",
+          orientation === "portrait" ? "aspect-[9/16]" : "aspect-video"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              src,
+              poster,
+              preload: "metadata",
+              playsInline: true,
+              className: "h-full w-full object-cover",
+              onPlay: () => setPlaying(true),
+              onPause: () => setPlaying(false),
+              onEnded: () => setPlaying(false),
+              onClick: togglePlay
+            }
+          ),
+          !started && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: togglePlay,
+              "aria-label": "Play video",
+              className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors hover:bg-black/30",
+              children: /* @__PURE__ */ jsx("span", { className: "flex size-16 items-center justify-center rounded-full bg-background/90 shadow-lg backdrop-blur-sm transition-transform group-hover:scale-105", children: /* @__PURE__ */ jsx(Play, { className: "ml-1 size-7 text-foreground" }) })
+            }
+          ),
+          !started && durationSec ? /* @__PURE__ */ jsx("span", { className: "absolute bottom-3 right-3 rounded-full bg-black/60 px-2 py-0.5 font-mono text-[11px] font-medium text-white", children: formatDuration(durationSec) }) : null,
+          started && /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/60 to-transparent p-3 opacity-0 transition-opacity group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: togglePlay,
+                "aria-label": playing ? "Pause" : "Play",
+                className: "flex size-9 items-center justify-center rounded-full bg-background/90 text-foreground",
+                children: playing ? /* @__PURE__ */ jsx(Pause, { className: "size-4" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggleMute,
+                "aria-label": muted ? "Unmute" : "Mute",
+                className: "flex size-9 items-center justify-center rounded-full bg-background/90 text-foreground",
+                children: muted ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: "text-sm text-muted-foreground", children: caption })
+  ] });
+}
+export {
+  ShortVideo
+};

package/dist/primitives/stats-card.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+
+var _chunkR3DQS6U4cjs = require('../chunk-R3DQS6U4.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/stats-card.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+function StatsCard({
+  title,
+  value,
+  icon,
+  change,
+  changeType
+}) {
+  const iconNode = _react.isValidElement.call(void 0, icon) ? icon : /* @__PURE__ */ (() => {
+    const Icon = icon;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: "h-4 w-4 text-muted-foreground" });
+  })();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.Card, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR3DQS6U4cjs.CardTitle, { className: "text-sm font-medium", children: title }),
+      iconNode
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.CardContent, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-2xl font-bold", children: value }),
+      change && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "p",
+        {
+          className: `text-xs ${changeType === "positive" ? "text-green-500" : "text-red-500"}`,
+          children: [
+            change,
+            " from last month"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+
+exports.StatsCard = StatsCard;

package/dist/primitives/stats-card.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatsCardProps {
+    title: string;
+    value: string;
+    /**
+     * Lucide component reference OR an instantiated element. Pass an
+     * element when calling from a server component (component references
+     * can't cross the server→client boundary).
+     */
+    icon: LucideIcon | ReactNode;
+    change?: string;
+    changeType?: "positive" | "negative";
+}
+declare function StatsCard({ title, value, icon, change, changeType, }: StatsCardProps): react_jsx_runtime.JSX.Element;
+
+export { StatsCard };

package/dist/primitives/stats-card.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatsCardProps {
+    title: string;
+    value: string;
+    /**
+     * Lucide component reference OR an instantiated element. Pass an
+     * element when calling from a server component (component references
+     * can't cross the server→client boundary).
+     */
+    icon: LucideIcon | ReactNode;
+    change?: string;
+    changeType?: "positive" | "negative";
+}
+declare function StatsCard({ title, value, icon, change, changeType, }: StatsCardProps): react_jsx_runtime.JSX.Element;
+
+export { StatsCard };

package/dist/primitives/stats-card.js

@@ -0,0 +1,46 @@
+"use client";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "../chunk-35YMAIEL.js";
+import "../chunk-G6SRSWXB.js";
+
+// src/primitives/stats-card.tsx
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatsCard({
+  title,
+  value,
+  icon,
+  change,
+  changeType
+}) {
+  const iconNode = isValidElement(icon) ? icon : /* @__PURE__ */ (() => {
+    const Icon = icon;
+    return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" });
+  })();
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: title }),
+      iconNode
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: value }),
+      change && /* @__PURE__ */ jsxs(
+        "p",
+        {
+          className: `text-xs ${changeType === "positive" ? "text-green-500" : "text-red-500"}`,
+          children: [
+            change,
+            " from last month"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  StatsCard
+};

package/dist/primitives/stats-strip.cjs

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+
+var _chunkR3DQS6U4cjs = require('../chunk-R3DQS6U4.cjs');
+
+
+var _chunkEJP2L5QVcjs = require('../chunk-EJP2L5QV.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/stats-strip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var COLS = {
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6"
+};
+function StatsStrip({ items, columns = 5, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "grid grid-cols-2 gap-2", _nullishCoalesce(COLS[columns], () => ( COLS[5])), className), children: items.map((item, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR3DQS6U4cjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.CardContent, { className: "py-3 px-4", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: item.label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "text-2xl font-semibold",
+          item.tone ? _chunkEJP2L5QVcjs.statusColors[item.tone].icon : "text-foreground"
+        ),
+        children: item.value
+      }
+    )
+  ] }) }, i)) });
+}
+
+
+exports.StatsStrip = StatsStrip;

package/dist/primitives/stats-strip.d.cts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { StatusColorKey } from '../lib/status-colors.cjs';
+
+interface StatsStripItem {
+    label: ReactNode;
+    value: ReactNode;
+    /** Tone for the value text. Maps to the kit's standard token palette. */
+    tone?: StatusColorKey;
+}
+interface StatsStripProps {
+    items: StatsStripItem[];
+    /** Columns at the `sm:` breakpoint. Mobile is always 2 cols. */
+    columns?: 3 | 4 | 5 | 6;
+    className?: string;
+}
+/**
+ * Horizontal strip of metric cards — useful for "X total / Y this week
+ * / Z verified" page headers. Each card is composed of `Card` +
+ * `CardContent`; coloured tones map to `status-colors`.
+ */
+declare function StatsStrip({ items, columns, className }: StatsStripProps): react_jsx_runtime.JSX.Element;
+
+export { StatsStrip, type StatsStripItem, type StatsStripProps };

package/dist/primitives/stats-strip.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { StatusColorKey } from '../lib/status-colors.js';
+
+interface StatsStripItem {
+    label: ReactNode;
+    value: ReactNode;
+    /** Tone for the value text. Maps to the kit's standard token palette. */
+    tone?: StatusColorKey;
+}
+interface StatsStripProps {
+    items: StatsStripItem[];
+    /** Columns at the `sm:` breakpoint. Mobile is always 2 cols. */
+    columns?: 3 | 4 | 5 | 6;
+    className?: string;
+}
+/**
+ * Horizontal strip of metric cards — useful for "X total / Y this week
+ * / Z verified" page headers. Each card is composed of `Card` +
+ * `CardContent`; coloured tones map to `status-colors`.
+ */
+declare function StatsStrip({ items, columns, className }: StatsStripProps): react_jsx_runtime.JSX.Element;
+
+export { StatsStrip, type StatsStripItem, type StatsStripProps };

package/dist/primitives/stats-strip.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  Card,
+  CardContent
+} from "../chunk-35YMAIEL.js";
+import {
+  statusColors
+} from "../chunk-F7JHSZNT.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/stats-strip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLS = {
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6"
+};
+function StatsStrip({ items, columns = 5, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-2", COLS[columns] ?? COLS[5], className), children: items.map((item, i) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "py-3 px-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: item.label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "text-2xl font-semibold",
+          item.tone ? statusColors[item.tone].icon : "text-foreground"
+        ),
+        children: item.value
+      }
+    )
+  ] }) }, i)) });
+}
+export {
+  StatsStrip
+};

package/dist/primitives/step-list.cjs

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/step-list.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+
+function Step({ n, children, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-start gap-3", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-shrink-0 inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary text-primary-foreground text-[11px] font-medium", children: n }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm flex-1", children })
+  ] });
+}
+function StepList({ children, spacing = "normal", className }) {
+  const spacingClass = spacing === "tight" ? "space-y-2" : spacing === "loose" ? "space-y-4" : "space-y-3";
+  let counter = 0;
+  const numbered = _react.Children.map(children, (child) => {
+    if (!_react.isValidElement.call(void 0, child)) return child;
+    const stepChild = child;
+    if (stepChild.type !== Step) return stepChild;
+    counter += 1;
+    if (stepChild.props.n != null) return stepChild;
+    return /* @__PURE__ */ _react.createElement.call(void 0, Step, { ...stepChild.props, n: counter, key: _nullishCoalesce(stepChild.key, () => ( counter)) });
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, spacingClass, className), children: numbered });
+}
+
+
+
+exports.Step = Step; exports.StepList = StepList;

package/dist/primitives/step-list.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface StepProps {
+    /** Explicit number. Omit to let `StepList` auto-number. */
+    n?: number;
+    children: ReactNode;
+    className?: string;
+}
+declare function Step({ n, children, className }: StepProps): react_jsx_runtime.JSX.Element;
+interface StepListProps {
+    children: ReactNode;
+    /** Vertical spacing between steps. Defaults to `space-y-3`. */
+    spacing?: "tight" | "normal" | "loose";
+    className?: string;
+}
+declare function StepList({ children, spacing, className }: StepListProps): react_jsx_runtime.JSX.Element;
+
+export { Step, StepList, type StepListProps, type StepProps };

package/dist/primitives/step-list.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface StepProps {
+    /** Explicit number. Omit to let `StepList` auto-number. */
+    n?: number;
+    children: ReactNode;
+    className?: string;
+}
+declare function Step({ n, children, className }: StepProps): react_jsx_runtime.JSX.Element;
+interface StepListProps {
+    children: ReactNode;
+    /** Vertical spacing between steps. Defaults to `space-y-3`. */
+    spacing?: "tight" | "normal" | "loose";
+    className?: string;
+}
+declare function StepList({ children, spacing, className }: StepListProps): react_jsx_runtime.JSX.Element;
+
+export { Step, StepList, type StepListProps, type StepProps };

package/dist/primitives/step-list.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/step-list.tsx
+import { Children, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+function Step({ n, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary text-primary-foreground text-[11px] font-medium", children: n }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm flex-1", children })
+  ] });
+}
+function StepList({ children, spacing = "normal", className }) {
+  const spacingClass = spacing === "tight" ? "space-y-2" : spacing === "loose" ? "space-y-4" : "space-y-3";
+  let counter = 0;
+  const numbered = Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    const stepChild = child;
+    if (stepChild.type !== Step) return stepChild;
+    counter += 1;
+    if (stepChild.props.n != null) return stepChild;
+    return /* @__PURE__ */ createElement(Step, { ...stepChild.props, n: counter, key: stepChild.key ?? counter });
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(spacingClass, className), children: numbered });
+}
+export {
+  Step,
+  StepList
+};

package/dist/primitives/steps.cjs

@@ -0,0 +1,77 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkHTTRUJQUcjs = require('../chunk-HTTRUJQU.cjs');
+
+
+var _chunk6T2EULKNcjs = require('../chunk-6T2EULKN.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/steps.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function Steps({
+  eyebrow,
+  title,
+  description,
+  caption,
+  items,
+  variant = "numbered",
+  tone = "default",
+  className,
+  id,
+  marginTop = "none"
+}) {
+  const cols = items.length === 2 ? "md:grid-cols-2" : "md:grid-cols-3";
+  const isList = variant === "list";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHTTRUJQUcjs.MarketingSection, { tone, width: "widest", className: _chunkKWLSBTB2cjs.cn.call(void 0, marginTop === "md" && "mt-4", className), id, children: [
+    (eyebrow || title || description || caption) && (isList ? (
+      // List header: left-aligned, with the caption pinned to the right.
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-10 flex flex-col gap-4 md:mb-14 md:flex-row md:items-end md:justify-between", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          eyebrow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6T2EULKNcjs.Eyebrow, { className: "mb-3 block", children: eyebrow }),
+          title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-3xl font-medium leading-[1.1] tracking-tight md:text-4xl", children: title }),
+          description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-4 max-w-xl text-base leading-relaxed text-muted-foreground md:text-lg", children: description })
+        ] }),
+        caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6T2EULKNcjs.Eyebrow, { className: "shrink-0 md:pb-1.5", children: caption })
+      ] })
+    ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mx-auto mb-12 max-w-2xl text-center md:mb-16", children: [
+      eyebrow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6T2EULKNcjs.Eyebrow, { className: "mb-3 block", children: eyebrow }),
+      title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-3xl font-medium tracking-tight md:text-4xl", children: title }),
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-4 text-base leading-relaxed text-muted-foreground md:text-lg", children: description })
+    ] })),
+    isList ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: items.map((step, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "grid grid-cols-1 gap-2 border-t border-border py-8 md:grid-cols-[5rem_1fr_1.15fr] md:items-baseline md:gap-10 md:py-10",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "font-mono text-3xl font-medium tabular-nums text-foreground/20 md:text-4xl", children: String(i + 1).padStart(2, "0") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-xl font-medium tracking-tight md:text-2xl", children: step.title }),
+          step.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-base leading-relaxed text-muted-foreground", children: step.description })
+        ]
+      },
+      i
+    )) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "grid gap-8 md:gap-12", cols), children: items.map(
+      (step, i) => variant === "cards" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: "rounded-xl border border-border bg-background p-6 text-left",
+          children: [
+            step.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-foreground [&_svg]:h-5 [&_svg]:w-5", children: step.icon }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 font-mono text-sm text-muted-foreground", children: String(i + 1).padStart(2, "0") }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-lg font-medium tracking-tight", children: step.title }),
+            step.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-base leading-relaxed text-muted-foreground", children: step.description })
+          ]
+        },
+        i
+      ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mx-auto mb-4 font-mono text-3xl font-medium tabular-nums text-foreground/30", children: String(i + 1).padStart(2, "0") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-lg font-medium tracking-tight md:text-xl", children: step.title }),
+        step.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mx-auto mt-2 max-w-xs text-base leading-relaxed text-muted-foreground", children: step.description })
+      ] }, i)
+    ) })
+  ] });
+}
+
+
+exports.Steps = Steps;

package/dist/primitives/steps.d.cts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Step = {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Rendered icon element (server-safe). Used by the "cards" variant. */
+    icon?: ReactNode;
+};
+/**
+ * Steps — a "how it works" section.
+ *
+ *  - "numbered" → big mono number + title + copy, centered columns (default)
+ *  - "cards"    → bordered cards with an icon + title + copy
+ *  - "list"     → editorial rule-separated rows (index · title · copy), with a
+ *                 left-aligned header and an optional right-aligned `caption`
+ *
+ * For the tabbed two-column "how it works" layout, use HowItWorksTabs.
+ */
+interface StepsProps {
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Right-aligned header note (the "list" variant), e.g. "SPEC → QUEUE → DECISION". */
+    caption?: ReactNode;
+    items: Step[];
+    variant?: "numbered" | "cards" | "list";
+    tone?: "default" | "muted" | "inverted";
+    className?: string;
+    id?: string;
+    marginTop?: "none" | "md";
+}
+declare function Steps({ eyebrow, title, description, caption, items, variant, tone, className, id, marginTop, }: StepsProps): react_jsx_runtime.JSX.Element;
+
+export { type Step, Steps, type StepsProps };

package/dist/primitives/steps.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Step = {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Rendered icon element (server-safe). Used by the "cards" variant. */
+    icon?: ReactNode;
+};
+/**
+ * Steps — a "how it works" section.
+ *
+ *  - "numbered" → big mono number + title + copy, centered columns (default)
+ *  - "cards"    → bordered cards with an icon + title + copy
+ *  - "list"     → editorial rule-separated rows (index · title · copy), with a
+ *                 left-aligned header and an optional right-aligned `caption`
+ *
+ * For the tabbed two-column "how it works" layout, use HowItWorksTabs.
+ */
+interface StepsProps {
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Right-aligned header note (the "list" variant), e.g. "SPEC → QUEUE → DECISION". */
+    caption?: ReactNode;
+    items: Step[];
+    variant?: "numbered" | "cards" | "list";
+    tone?: "default" | "muted" | "inverted";
+    className?: string;
+    id?: string;
+    marginTop?: "none" | "md";
+}
+declare function Steps({ eyebrow, title, description, caption, items, variant, tone, className, id, marginTop, }: StepsProps): react_jsx_runtime.JSX.Element;
+
+export { type Step, Steps, type StepsProps };