@web-my-money/blocks 1.0.0

package/dist/funnel.d.mts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+interface FormStep {
+    label: string;
+    /** step body */
+    content: React.ReactNode;
+    /** gate the Next button (e.g. wire to your RHF isValid for this step) */
+    canProceed?: boolean;
+}
+interface MultiStepFormProps {
+    steps: FormStep[];
+    onComplete?: () => void;
+    /** labels */
+    nextLabel?: string;
+    backLabel?: string;
+    submitLabel?: string;
+    className?: string;
+}
+/**
+ * Headless-ish multi-step form shell (dep-free). Manages step index + progress; you own
+ * the fields and validation (wire `canProceed` to your react-hook-form per-step isValid).
+ */
+declare function MultiStepForm({ steps, onComplete, nextLabel, backLabel, submitLabel, className, }: MultiStepFormProps): React.JSX.Element;
+
+interface OfferItem {
+    label: string;
+    value: string;
+    /** show as bonus (accent) */
+    bonus?: boolean;
+}
+interface OfferStackProps {
+    items: OfferItem[];
+    totalLabel?: string;
+    totalValue: string;
+    priceLabel?: string;
+    price: string;
+    className?: string;
+}
+/** Value stack — itemized deliverables with values, total, and today's price (funnel offer). */
+declare function OfferStack({ items, totalLabel, totalValue, priceLabel, price, className, }: OfferStackProps): React.JSX.Element;
+
+interface GuaranteeBadgeProps {
+    title?: string;
+    text: string;
+    icon?: React.ReactNode;
+    className?: string;
+}
+/** Risk-reversal / money-back guarantee badge for offers + funnels. */
+declare function GuaranteeBadge({ title, text, icon, className }: GuaranteeBadgeProps): React.JSX.Element;
+
+interface CountdownCTAProps {
+    /** deadline as an ISO string or ms timestamp */
+    deadline: string | number;
+    heading: string;
+    subheading?: string;
+    ctaLabel: string;
+    onCta?: () => void;
+    ctaHref?: string;
+    expiredLabel?: string;
+    className?: string;
+}
+/** Urgency block — live countdown + CTA. Great for funnel offers / cart deadlines. */
+declare function CountdownCTA({ deadline, heading, subheading, ctaLabel, onCta, ctaHref, expiredLabel, className, }: CountdownCTAProps): React.JSX.Element;
+
+interface FunnelStep {
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+interface FunnelStepsProps {
+    steps: FunnelStep[];
+    /** highlight up to this index (inclusive) as done/active */
+    activeIndex?: number;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+/** Visual conversion path — WMM Find → Attract → Convert → Retain style. */
+declare function FunnelSteps({ steps, activeIndex, orientation, className }: FunnelStepsProps): React.JSX.Element;
+
+export { CountdownCTA, type CountdownCTAProps, type FormStep, type FunnelStep, FunnelSteps, type FunnelStepsProps, GuaranteeBadge, type GuaranteeBadgeProps, MultiStepForm, type MultiStepFormProps, type OfferItem, OfferStack, type OfferStackProps };

package/dist/funnel.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+interface FormStep {
+    label: string;
+    /** step body */
+    content: React.ReactNode;
+    /** gate the Next button (e.g. wire to your RHF isValid for this step) */
+    canProceed?: boolean;
+}
+interface MultiStepFormProps {
+    steps: FormStep[];
+    onComplete?: () => void;
+    /** labels */
+    nextLabel?: string;
+    backLabel?: string;
+    submitLabel?: string;
+    className?: string;
+}
+/**
+ * Headless-ish multi-step form shell (dep-free). Manages step index + progress; you own
+ * the fields and validation (wire `canProceed` to your react-hook-form per-step isValid).
+ */
+declare function MultiStepForm({ steps, onComplete, nextLabel, backLabel, submitLabel, className, }: MultiStepFormProps): React.JSX.Element;
+
+interface OfferItem {
+    label: string;
+    value: string;
+    /** show as bonus (accent) */
+    bonus?: boolean;
+}
+interface OfferStackProps {
+    items: OfferItem[];
+    totalLabel?: string;
+    totalValue: string;
+    priceLabel?: string;
+    price: string;
+    className?: string;
+}
+/** Value stack — itemized deliverables with values, total, and today's price (funnel offer). */
+declare function OfferStack({ items, totalLabel, totalValue, priceLabel, price, className, }: OfferStackProps): React.JSX.Element;
+
+interface GuaranteeBadgeProps {
+    title?: string;
+    text: string;
+    icon?: React.ReactNode;
+    className?: string;
+}
+/** Risk-reversal / money-back guarantee badge for offers + funnels. */
+declare function GuaranteeBadge({ title, text, icon, className }: GuaranteeBadgeProps): React.JSX.Element;
+
+interface CountdownCTAProps {
+    /** deadline as an ISO string or ms timestamp */
+    deadline: string | number;
+    heading: string;
+    subheading?: string;
+    ctaLabel: string;
+    onCta?: () => void;
+    ctaHref?: string;
+    expiredLabel?: string;
+    className?: string;
+}
+/** Urgency block — live countdown + CTA. Great for funnel offers / cart deadlines. */
+declare function CountdownCTA({ deadline, heading, subheading, ctaLabel, onCta, ctaHref, expiredLabel, className, }: CountdownCTAProps): React.JSX.Element;
+
+interface FunnelStep {
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+interface FunnelStepsProps {
+    steps: FunnelStep[];
+    /** highlight up to this index (inclusive) as done/active */
+    activeIndex?: number;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+/** Visual conversion path — WMM Find → Attract → Convert → Retain style. */
+declare function FunnelSteps({ steps, activeIndex, orientation, className }: FunnelStepsProps): React.JSX.Element;
+
+export { CountdownCTA, type CountdownCTAProps, type FormStep, type FunnelStep, FunnelSteps, type FunnelStepsProps, GuaranteeBadge, type GuaranteeBadgeProps, MultiStepForm, type MultiStepFormProps, type OfferItem, OfferStack, type OfferStackProps };

package/dist/funnel.js

@@ -0,0 +1,281 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/funnel.ts
+var funnel_exports = {};
+__export(funnel_exports, {
+  CountdownCTA: () => CountdownCTA,
+  FunnelSteps: () => FunnelSteps,
+  GuaranteeBadge: () => GuaranteeBadge,
+  MultiStepForm: () => MultiStepForm,
+  OfferStack: () => OfferStack
+});
+module.exports = __toCommonJS(funnel_exports);
+
+// src/multi-step-form/index.tsx
+var React = __toESM(require("react"));
+var import_lucide_react = require("lucide-react");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/multi-step-form/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function MultiStepForm({
+  steps,
+  onComplete,
+  nextLabel = "Continue",
+  backLabel = "Back",
+  submitLabel = "Submit",
+  className
+}) {
+  const [i, setI] = React.useState(0);
+  const last = i === steps.length - 1;
+  const step = steps[i];
+  const pct = (i + 1) / steps.length * 100;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex flex-col gap-6", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: steps.map((s, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: cn(
+              "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-colors",
+              idx < i && "bg-primary text-primary-foreground",
+              idx === i && "bg-primary text-primary-foreground ring-4 ring-primary/20",
+              idx > i && "bg-muted text-muted-foreground"
+            ),
+            children: idx < i ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "size-3.5" }) : idx + 1
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("hidden text-sm sm:inline", idx === i ? "font-medium text-foreground" : "text-muted-foreground"), children: s.label })
+      ] }),
+      idx < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-px flex-1 bg-border" })
+    ] }, idx)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted sm:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full rounded-full bg-primary transition-[width] duration-300", style: { width: `${pct}%` } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-24", children: step.content }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setI((x) => Math.max(0, x - 1)),
+          disabled: i === 0,
+          className: "rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-40 disabled:pointer-events-none",
+          children: backLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => last ? onComplete?.() : setI((x) => Math.min(steps.length - 1, x + 1)),
+          disabled: step.canProceed === false,
+          className: "rounded-lg bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 disabled:pointer-events-none",
+          children: last ? submitLabel : nextLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/offer-stack/index.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function OfferStack({
+  items,
+  totalLabel = "Total value",
+  totalValue,
+  priceLabel = "Today only",
+  price,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("rounded-2xl border border-border bg-card p-6", className), style: { boxShadow: "var(--shadow-card)" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "flex flex-col gap-3", children: items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-center justify-between gap-4 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex items-center gap-2 text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Check, { className: cn("size-4 shrink-0", it.bonus ? "text-accent" : "text-primary") }),
+        it.label
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("shrink-0 tabular-nums", it.bonus ? "font-semibold text-accent" : "text-muted-foreground"), children: it.value })
+    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 flex items-center justify-between border-t border-border pt-4 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: totalLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground line-through tabular-nums", children: totalValue })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 flex items-end justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-medium uppercase tracking-wider text-primary", children: priceLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-3xl font-bold tabular-nums text-foreground", children: price })
+    ] })
+  ] });
+}
+
+// src/guarantee-badge/index.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function GuaranteeBadge({ title = "100% Guarantee", text, icon, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-4 rounded-xl border border-primary/25 bg-primary/5 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.ShieldCheck, { className: "size-6" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: text })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/countdown-cta/index.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function useCountdown(deadline) {
+  const target = React2.useMemo(() => new Date(deadline).getTime(), [deadline]);
+  const [now, setNow] = React2.useState(() => Date.now());
+  React2.useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, []);
+  const diff = Math.max(0, target - now);
+  const s = Math.floor(diff / 1e3);
+  return {
+    expired: diff === 0,
+    days: Math.floor(s / 86400),
+    hours: Math.floor(s % 86400 / 3600),
+    minutes: Math.floor(s % 3600 / 60),
+    seconds: s % 60
+  };
+}
+function Unit({ value, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-12 rounded-lg bg-background/10 px-2 py-1.5 text-center text-2xl font-bold tabular-nums text-primary-foreground", children: String(value).padStart(2, "0") }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mt-1 text-[10px] uppercase tracking-wider text-primary-foreground/70", children: label })
+  ] });
+}
+function CountdownCTA({
+  deadline,
+  heading,
+  subheading,
+  ctaLabel,
+  onCta,
+  ctaHref,
+  expiredLabel = "Offer ended",
+  className
+}) {
+  const t = useCountdown(deadline);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn("flex flex-col items-center gap-4 rounded-2xl p-6 text-center", className),
+      style: { background: "var(--gradient-primary, var(--primary))" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-xl font-bold text-primary-foreground", children: heading }),
+          subheading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mt-1 text-sm text-primary-foreground/80", children: subheading })
+        ] }),
+        t.expired ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-lg font-semibold text-primary-foreground", children: expiredLabel }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+          t.days > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Unit, { value: t.days, label: "days" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Unit, { value: t.hours, label: "hrs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Unit, { value: t.minutes, label: "min" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Unit, { value: t.seconds, label: "sec" })
+        ] }),
+        !t.expired && (ctaHref ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "a",
+          {
+            href: ctaHref,
+            className: "rounded-lg bg-background px-6 py-2.5 text-sm font-semibold text-foreground transition-transform hover:scale-[1.02]",
+            children: ctaLabel
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: onCta,
+            className: "rounded-lg bg-background px-6 py-2.5 text-sm font-semibold text-foreground transition-transform hover:scale-[1.02]",
+            children: ctaLabel
+          }
+        ))
+      ]
+    }
+  );
+}
+
+// src/funnel-steps/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FunnelSteps({ steps, activeIndex = -1, orientation = "horizontal", className }) {
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "ol",
+    {
+      className: cn(
+        "flex gap-4",
+        horizontal ? "flex-col sm:flex-row sm:items-start" : "flex-col",
+        className
+      ),
+      children: steps.map((s, i) => {
+        const active = i <= activeIndex;
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: cn("flex flex-1 gap-3", horizontal && "sm:flex-col sm:items-center sm:text-center"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center gap-3", horizontal && "sm:flex-col"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "span",
+              {
+                className: cn(
+                  "flex size-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold transition-colors",
+                  active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                ),
+                children: s.icon ?? i + 1
+              }
+            ),
+            i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("bg-border", horizontal ? "hidden h-px w-full sm:block" : "ml-5 h-6 w-px") })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: cn("text-sm font-semibold", active ? "text-foreground" : "text-muted-foreground"), children: s.label }),
+            s.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: s.description })
+          ] })
+        ] }, i);
+      })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CountdownCTA,
+  FunnelSteps,
+  GuaranteeBadge,
+  MultiStepForm,
+  OfferStack
+});

package/dist/funnel.mjs

@@ -0,0 +1,235 @@
+import {
+  cn
+} from "./chunk-PJO7WJ4G.mjs";
+
+// src/multi-step-form/index.tsx
+import * as React from "react";
+import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MultiStepForm({
+  steps,
+  onComplete,
+  nextLabel = "Continue",
+  backLabel = "Back",
+  submitLabel = "Submit",
+  className
+}) {
+  const [i, setI] = React.useState(0);
+  const last = i === steps.length - 1;
+  const step = steps[i];
+  const pct = (i + 1) / steps.length * 100;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: steps.map((s, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-colors",
+              idx < i && "bg-primary text-primary-foreground",
+              idx === i && "bg-primary text-primary-foreground ring-4 ring-primary/20",
+              idx > i && "bg-muted text-muted-foreground"
+            ),
+            children: idx < i ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : idx + 1
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("hidden text-sm sm:inline", idx === i ? "font-medium text-foreground" : "text-muted-foreground"), children: s.label })
+      ] }),
+      idx < steps.length - 1 && /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+    ] }, idx)) }),
+    /* @__PURE__ */ jsx("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted sm:hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-full bg-primary transition-[width] duration-300", style: { width: `${pct}%` } }) }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-24", children: step.content }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setI((x) => Math.max(0, x - 1)),
+          disabled: i === 0,
+          className: "rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-40 disabled:pointer-events-none",
+          children: backLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => last ? onComplete?.() : setI((x) => Math.min(steps.length - 1, x + 1)),
+          disabled: step.canProceed === false,
+          className: "rounded-lg bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 disabled:pointer-events-none",
+          children: last ? submitLabel : nextLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/offer-stack/index.tsx
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function OfferStack({
+  items,
+  totalLabel = "Total value",
+  totalValue,
+  priceLabel = "Today only",
+  price,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("rounded-2xl border border-border bg-card p-6", className), style: { boxShadow: "var(--shadow-card)" }, children: [
+    /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-3", children: items.map((it, i) => /* @__PURE__ */ jsxs2("li", { className: "flex items-center justify-between gap-4 text-sm", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-2 text-foreground", children: [
+        /* @__PURE__ */ jsx2(Check2, { className: cn("size-4 shrink-0", it.bonus ? "text-accent" : "text-primary") }),
+        it.label
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: cn("shrink-0 tabular-nums", it.bonus ? "font-semibold text-accent" : "text-muted-foreground"), children: it.value })
+    ] }, i)) }),
+    /* @__PURE__ */ jsxs2("div", { className: "mt-4 flex items-center justify-between border-t border-border pt-4 text-sm", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: totalLabel }),
+      /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground line-through tabular-nums", children: totalValue })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex items-end justify-between", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium uppercase tracking-wider text-primary", children: priceLabel }),
+      /* @__PURE__ */ jsx2("span", { className: "text-3xl font-bold tabular-nums text-foreground", children: price })
+    ] })
+  ] });
+}
+
+// src/guarantee-badge/index.tsx
+import { ShieldCheck } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function GuaranteeBadge({ title = "100% Guarantee", text, icon, className }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-4 rounded-xl border border-primary/25 bg-primary/5 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary", children: icon ?? /* @__PURE__ */ jsx3(ShieldCheck, { className: "size-6" }) }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-sm text-muted-foreground", children: text })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/countdown-cta/index.tsx
+import * as React2 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function useCountdown(deadline) {
+  const target = React2.useMemo(() => new Date(deadline).getTime(), [deadline]);
+  const [now, setNow] = React2.useState(() => Date.now());
+  React2.useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, []);
+  const diff = Math.max(0, target - now);
+  const s = Math.floor(diff / 1e3);
+  return {
+    expired: diff === 0,
+    days: Math.floor(s / 86400),
+    hours: Math.floor(s % 86400 / 3600),
+    minutes: Math.floor(s % 3600 / 60),
+    seconds: s % 60
+  };
+}
+function Unit({ value, label }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx4("span", { className: "min-w-12 rounded-lg bg-background/10 px-2 py-1.5 text-center text-2xl font-bold tabular-nums text-primary-foreground", children: String(value).padStart(2, "0") }),
+    /* @__PURE__ */ jsx4("span", { className: "mt-1 text-[10px] uppercase tracking-wider text-primary-foreground/70", children: label })
+  ] });
+}
+function CountdownCTA({
+  deadline,
+  heading,
+  subheading,
+  ctaLabel,
+  onCta,
+  ctaHref,
+  expiredLabel = "Offer ended",
+  className
+}) {
+  const t = useCountdown(deadline);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn("flex flex-col items-center gap-4 rounded-2xl p-6 text-center", className),
+      style: { background: "var(--gradient-primary, var(--primary))" },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx4("h3", { className: "text-xl font-bold text-primary-foreground", children: heading }),
+          subheading && /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm text-primary-foreground/80", children: subheading })
+        ] }),
+        t.expired ? /* @__PURE__ */ jsx4("p", { className: "text-lg font-semibold text-primary-foreground", children: expiredLabel }) : /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          t.days > 0 && /* @__PURE__ */ jsx4(Unit, { value: t.days, label: "days" }),
+          /* @__PURE__ */ jsx4(Unit, { value: t.hours, label: "hrs" }),
+          /* @__PURE__ */ jsx4(Unit, { value: t.minutes, label: "min" }),
+          /* @__PURE__ */ jsx4(Unit, { value: t.seconds, label: "sec" })
+        ] }),
+        !t.expired && (ctaHref ? /* @__PURE__ */ jsx4(
+          "a",
+          {
+            href: ctaHref,
+            className: "rounded-lg bg-background px-6 py-2.5 text-sm font-semibold text-foreground transition-transform hover:scale-[1.02]",
+            children: ctaLabel
+          }
+        ) : /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: onCta,
+            className: "rounded-lg bg-background px-6 py-2.5 text-sm font-semibold text-foreground transition-transform hover:scale-[1.02]",
+            children: ctaLabel
+          }
+        ))
+      ]
+    }
+  );
+}
+
+// src/funnel-steps/index.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function FunnelSteps({ steps, activeIndex = -1, orientation = "horizontal", className }) {
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx5(
+    "ol",
+    {
+      className: cn(
+        "flex gap-4",
+        horizontal ? "flex-col sm:flex-row sm:items-start" : "flex-col",
+        className
+      ),
+      children: steps.map((s, i) => {
+        const active = i <= activeIndex;
+        return /* @__PURE__ */ jsxs5("li", { className: cn("flex flex-1 gap-3", horizontal && "sm:flex-col sm:items-center sm:text-center"), children: [
+          /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-3", horizontal && "sm:flex-col"), children: [
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: cn(
+                  "flex size-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold transition-colors",
+                  active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                ),
+                children: s.icon ?? i + 1
+              }
+            ),
+            i < steps.length - 1 && /* @__PURE__ */ jsx5("span", { className: cn("bg-border", horizontal ? "hidden h-px w-full sm:block" : "ml-5 h-6 w-px") })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5("p", { className: cn("text-sm font-semibold", active ? "text-foreground" : "text-muted-foreground"), children: s.label }),
+            s.description && /* @__PURE__ */ jsx5("p", { className: "mt-0.5 text-xs text-muted-foreground", children: s.description })
+          ] })
+        ] }, i);
+      })
+    }
+  );
+}
+export {
+  CountdownCTA,
+  FunnelSteps,
+  GuaranteeBadge,
+  MultiStepForm,
+  OfferStack
+};