@xenition/ui 0.1.0

package/dist/marketing/PriceList.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { OrnamentShape } from './OrnamentRule';
+export interface PriceListProps extends React.HTMLAttributes<HTMLElement> {
+    /** Group heading (e.g. a menu course, a service tier family). */
+    heading?: React.ReactNode;
+    /** Ornament drawn above the heading (default `diamond`; `none` hides the rule). */
+    ornament?: OrnamentShape;
+}
+export interface PriceRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Item name (left side of the leader). */
+    name: React.ReactNode;
+    /** Price, already formatted (right side of the leader — the kit never guesses currency). */
+    price: React.ReactNode;
+    /** Supporting line under the row. */
+    description?: React.ReactNode;
+    /** Heading level for the item name (default `h3`). */
+    as?: 'h3' | 'h4' | 'p';
+}
+/**
+ * Editorial price group generalized from the restaurant menu: an ornamented
+ * rule, a small-caps group heading, and dotted-leader rows. Token-colored and
+ * static (motion belongs to a wrapping `Reveal`/`Stagger`, by composition).
+ */
+export declare const PriceList: React.ForwardRefExoticComponent<PriceListProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One dotted-leader row: `name ········ price`, with an optional description
+ * beneath. The leader is `aria-hidden`; screen readers hear "name, price".
+ */
+export declare const PriceRow: React.ForwardRefExoticComponent<PriceRowProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PriceList.d.ts.map

package/dist/marketing/PriceList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceList.d.ts","sourceRoot":"","sources":["../../src/marketing/PriceList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAgB,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE7D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvE,iEAAiE;IACjE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,2CAA2C;IAC3C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,4FAA4F;IAC5F,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qCAAqC;IACrC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sDAAsD;IACtD,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;CACxB;AAgBD;;;;GAIG;AACH,eAAO,MAAM,SAAS,oFAkBpB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,QAAQ,sFAmBnB,CAAC"}

package/dist/marketing/PriceList.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceRow = exports.PriceList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const inject_1 = require("../motion/internal/inject");
+const cn_1 = require("../primitives/cn");
+const Eyebrow_1 = require("../primitives/Eyebrow");
+const OrnamentRule_1 = require("./OrnamentRule");
+/**
+ * The dotted leader is the only color-bearing rule: an accent-tinted dotted
+ * border, baseline-aligned via a small negative translate.
+ */
+const PRICE_CSS = `
+[data-xen-price-leader] {
+  flex: 1 1 auto;
+  min-width: 2rem;
+  margin: 0 0.85rem;
+  border-bottom: 1px dotted color-mix(in srgb, var(--xen-accent-400) 40%, transparent);
+  transform: translateY(-0.3em);
+}
+`;
+/**
+ * Editorial price group generalized from the restaurant menu: an ornamented
+ * rule, a small-caps group heading, and dotted-leader rows. Token-colored and
+ * static (motion belongs to a wrapping `Reveal`/`Stagger`, by composition).
+ */
+exports.PriceList = React.forwardRef(function PriceList({ heading, ornament = 'diamond', className, children, ...rest }, ref) {
+    return ((0, jsx_runtime_1.jsxs)("section", { ref: ref, "data-xen-price-list": "", className: (0, cn_1.cn)('flex flex-col gap-[var(--xen-space-lg)]', className), ...rest, children: [ornament !== 'none' ? (0, jsx_runtime_1.jsx)(OrnamentRule_1.OrnamentRule, { ornament: ornament, "aria-hidden": "true" }) : null, heading !== undefined ? ((0, jsx_runtime_1.jsx)(Eyebrow_1.Eyebrow, { align: "center", children: heading })) : null, (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-[var(--xen-space-lg)]", children: children })] }));
+});
+/**
+ * One dotted-leader row: `name ········ price`, with an optional description
+ * beneath. The leader is `aria-hidden`; screen readers hear "name, price".
+ */
+exports.PriceRow = React.forwardRef(function PriceRow({ name, price, description, as: Heading = 'h3', className, ...rest }, ref) {
+    (0, inject_1.injectStyleOnce)('xen-price-styles', PRICE_CSS);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-xen-price-row": "", className: (0, cn_1.cn)('group', className), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline", children: [(0, jsx_runtime_1.jsx)(Heading, { className: "font-heading text-xl leading-snug text-on-surface", children: name }), (0, jsx_runtime_1.jsx)("span", { "data-xen-price-leader": "", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { "data-xen-price": "", className: "whitespace-nowrap font-heading text-lg text-accent", children: price })] }), description !== undefined ? ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 max-w-xl text-sm leading-relaxed text-muted", children: description })) : null] }));
+});
+//# sourceMappingURL=PriceList.js.map

package/dist/marketing/PriceList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceList.js","sourceRoot":"","sources":["../../src/marketing/PriceList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,sDAA4D;AAC5D,yCAAsC;AACtC,mDAAgD;AAChD,iDAA6D;AAoB7D;;;GAGG;AACH,MAAM,SAAS,GAAG;;;;;;;;CAQjB,CAAC;AAEF;;;;GAIG;AACU,QAAA,SAAS,GAAG,KAAK,CAAC,UAAU,CAA8B,SAAS,SAAS,CACvF,EAAE,OAAO,EAAE,QAAQ,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAC/D,GAAG;IAEH,OAAO,CACL,qCACE,GAAG,EAAE,GAAG,yBACY,EAAE,EACtB,SAAS,EAAE,IAAA,OAAE,EAAC,yCAAyC,EAAE,SAAS,CAAC,KAC/D,IAAI,aAEP,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,uBAAC,2BAAY,IAAC,QAAQ,EAAE,QAAQ,iBAAc,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EACpF,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CACvB,uBAAC,iBAAO,IAAC,KAAK,EAAC,QAAQ,YAAE,OAAO,GAAW,CAC5C,CAAC,CAAC,CAAC,IAAI,EACR,gCAAK,SAAS,EAAC,yCAAyC,YAAE,QAAQ,GAAO,IACjE,CACX,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACU,QAAA,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAgC,SAAS,QAAQ,CACvF,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACpE,GAAG;IAEH,IAAA,wBAAe,EAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAC/C,OAAO,CACL,iCAAK,GAAG,EAAE,GAAG,wBAAqB,EAAE,EAAC,SAAS,EAAE,IAAA,OAAE,EAAC,OAAO,EAAE,SAAS,CAAC,KAAM,IAAI,aAC9E,iCAAK,SAAS,EAAC,qBAAqB,aAClC,uBAAC,OAAO,IAAC,SAAS,EAAC,mDAAmD,YAAE,IAAI,GAAW,EACvF,0DAA4B,EAAE,iBAAa,MAAM,GAAG,EACpD,mDAAqB,EAAE,EAAC,SAAS,EAAC,oDAAoD,YACnF,KAAK,GACD,IACH,EACL,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,8BAAG,SAAS,EAAC,kDAAkD,YAAE,WAAW,GAAK,CAClF,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/marketing/PricingTable.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export type PricingTableProps = React.HTMLAttributes<HTMLDivElement>;
+/** Responsive row of `PricingTier` cards. */
+export declare const PricingTable: React.ForwardRefExoticComponent<PricingTableProps & React.RefAttributes<HTMLDivElement>>;
+export interface PricingTierProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tier name ("Starter", "Pro", …). */
+    name: React.ReactNode;
+    /** Price display ("$19", "Free", …). */
+    price: React.ReactNode;
+    /** Billing period line (e.g. "/month"). */
+    period?: React.ReactNode;
+    /** Short description under the price. */
+    description?: React.ReactNode;
+    /** Checklist entries. */
+    features?: readonly React.ReactNode[];
+    /** Emphasized tier: token ring, slight scale, badge. */
+    featured?: boolean;
+    /** Badge text on the featured tier. */
+    featuredLabel?: React.ReactNode;
+    /** Call-to-action slot (usually a `Button`). */
+    action?: React.ReactNode;
+}
+/** One pricing tier card. */
+export declare const PricingTier: React.ForwardRefExoticComponent<PricingTierProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PricingTable.d.ts.map

package/dist/marketing/PricingTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingTable.d.ts","sourceRoot":"","sources":["../../src/marketing/PricingTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAErE,6CAA6C;AAC7C,eAAO,MAAM,YAAY,0FAcxB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,uCAAuC;IACvC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,yCAAyC;IACzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,KAAK,CAAC,SAAS,EAAE,CAAC;IACtC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAmBD,6BAA6B;AAC7B,eAAO,MAAM,WAAW,yFA0DvB,CAAC"}

package/dist/marketing/PricingTable.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PricingTier = exports.PricingTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const cn_1 = require("../primitives/cn");
+/** Responsive row of `PricingTier` cards. */
+exports.PricingTable = React.forwardRef(function PricingTable({ className, ...rest }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-xen-pricing": "", className: (0, cn_1.cn)('grid grid-cols-1 items-stretch gap-[var(--xen-space-lg)] md:grid-cols-2 lg:grid-cols-3', className), ...rest }));
+});
+const CheckIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "mt-0.5 shrink-0 text-success", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 8.5l3.5 3.5L13 4.5" }) }));
+/** One pricing tier card. */
+exports.PricingTier = React.forwardRef(function PricingTier({ name, price, period, description, features = [], featured = false, featuredLabel = 'Most popular', action, className, children, ...rest }, ref) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-xen-pricing-tier": "", "data-featured": featured ? 'true' : 'false', className: (0, cn_1.cn)('relative flex flex-col gap-[var(--xen-space-md)] bg-surface text-on-surface', 'rounded-[var(--xen-radius-lg)] p-[var(--xen-space-lg)]', featured
+            ? 'border-2 border-primary shadow-lg ring-2 ring-primary-300 lg:scale-105'
+            : 'border border-border', className), ...rest, children: [featured ? ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2 rounded-[var(--xen-radius-full)] bg-primary px-3 py-0.5 text-xs font-semibold text-on-primary", children: featuredLabel })) : null, (0, jsx_runtime_1.jsx)("h3", { className: "font-heading text-lg font-semibold", children: name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-heading text-3xl font-bold", children: price }), period !== undefined ? (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-muted", children: period }) : null] }), description !== undefined ? (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: description }) : null, features.length > 0 ? ((0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-[var(--xen-space-xs)] text-sm", children: features.map((feature, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex items-start gap-[var(--xen-space-xs)]", children: [(0, jsx_runtime_1.jsx)(CheckIcon, {}), (0, jsx_runtime_1.jsx)("span", { children: feature })] }, index))) })) : null, children, action !== undefined ? (0, jsx_runtime_1.jsx)("div", { className: "mt-auto pt-[var(--xen-space-sm)]", children: action }) : null] }));
+});
+//# sourceMappingURL=PricingTable.js.map

package/dist/marketing/PricingTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingTable.js","sourceRoot":"","sources":["../../src/marketing/PricingTable.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,yCAAsC;AAItC,6CAA6C;AAChC,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC/C,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,sBACS,EAAE,EACnB,SAAS,EAAE,IAAA,OAAE,EACX,wFAAwF,EACxF,SAAS,CACV,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAqBF,MAAM,SAAS,GAAG,GAAuB,EAAE,CAAC,CAC1C,+CACc,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAC,8BAA8B,YAExC,iCAAM,CAAC,EAAC,uBAAuB,GAAG,GAC9B,CACP,CAAC;AAEF,6BAA6B;AAChB,QAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,SAAS,WAAW,CAClB,EACE,IAAI,EACJ,KAAK,EACL,MAAM,EACN,WAAW,EACX,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG;IAEH,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,2BACc,EAAE,mBACT,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,SAAS,EAAE,IAAA,OAAE,EACX,6EAA6E,EAC7E,wDAAwD,EACxD,QAAQ;YACN,CAAC,CAAC,wEAAwE;YAC1E,CAAC,CAAC,sBAAsB,EAC1B,SAAS,CACV,KACG,IAAI,aAEP,QAAQ,CAAC,CAAC,CAAC,CACV,iCAAM,SAAS,EAAC,yIAAyI,YACtJ,aAAa,GACT,CACR,CAAC,CAAC,CAAC,IAAI,EACR,+BAAI,SAAS,EAAC,oCAAoC,YAAE,IAAI,GAAM,EAC9D,iCAAK,SAAS,EAAC,2BAA2B,aACxC,iCAAM,SAAS,EAAC,iCAAiC,YAAE,KAAK,GAAQ,EAC/D,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,iCAAM,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC/E,EACL,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,8BAAG,SAAS,EAAC,oBAAoB,YAAE,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,EACtF,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACrB,+BAAI,SAAS,EAAC,iDAAiD,YAC5D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,gCAAgB,SAAS,EAAC,4CAA4C,aACpE,uBAAC,SAAS,KAAG,EACb,2CAAO,OAAO,GAAQ,KAFf,KAAK,CAGT,CACN,CAAC,GACC,CACN,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,gCAAK,SAAS,EAAC,kCAAkC,YAAE,MAAM,GAAO,CAAC,CAAC,CAAC,IAAI,IAC3F,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/marketing/PricingToggle.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface PricingToggleOption {
+    /** Visible label ("Monthly", "Yearly", …). */
+    label: React.ReactNode;
+    /** Value reported via `onChange` when selected. */
+    value: string;
+    /** Optional small "save %" (or any) badge shown beside the label. */
+    badge?: React.ReactNode;
+}
+export interface PricingToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Segments to switch between (2+ supported). */
+    options: PricingToggleOption[];
+    /** Currently active option value (controlled). */
+    value: string;
+    /** Fires with the newly selected value. */
+    onChange: (value: string) => void;
+    /** Accessible label for the switch group. */
+    label?: string;
+}
+/**
+ * Monthly/yearly (or N-option) segmented switch that reports the active key
+ * via `value`/`onChange`, with a per-option "save %" badge slot. Pairs with
+ * `PricingTable` to swap billing periods.
+ */
+export declare const PricingToggle: React.ForwardRefExoticComponent<PricingToggleProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PricingToggle.d.ts.map

package/dist/marketing/PricingToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingToggle.d.ts","sourceRoot":"","sources":["../../src/marketing/PricingToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,iDAAiD;IACjD,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,2FAqDzB,CAAC"}

package/dist/marketing/PricingToggle.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PricingToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const cn_1 = require("../primitives/cn");
+/**
+ * Monthly/yearly (or N-option) segmented switch that reports the active key
+ * via `value`/`onChange`, with a per-option "save %" badge slot. Pairs with
+ * `PricingTable` to swap billing periods.
+ */
+exports.PricingToggle = React.forwardRef(function PricingToggle({ options, value, onChange, label = 'Billing period', className, ...rest }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-xen-pricing-toggle": "", role: "radiogroup", "aria-label": label, className: (0, cn_1.cn)('inline-flex items-center gap-1 rounded-[var(--xen-radius-full)] border border-border bg-neutral-50 p-1', className), ...rest, children: options.map((option) => {
+            const active = option.value === value;
+            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": active, "data-active": active ? 'true' : 'false', onClick: () => onChange(option.value), className: (0, cn_1.cn)('inline-flex items-center gap-[var(--xen-space-xs)] rounded-[var(--xen-radius-full)] px-4 py-1.5 text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300', active
+                    ? 'bg-primary text-on-primary shadow-sm'
+                    : 'text-muted hover:text-on-surface'), children: [(0, jsx_runtime_1.jsx)("span", { children: option.label }), option.badge !== undefined ? ((0, jsx_runtime_1.jsx)("span", { "data-xen-pricing-toggle-badge": "", className: (0, cn_1.cn)('rounded-[var(--xen-radius-full)] px-2 py-0.5 text-xs font-semibold', active ? 'bg-on-primary text-primary' : 'bg-primary-100 text-primary-700'), children: option.badge })) : null] }, option.value));
+        }) }));
+});
+//# sourceMappingURL=PricingToggle.js.map

package/dist/marketing/PricingToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingToggle.js","sourceRoot":"","sources":["../../src/marketing/PricingToggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,yCAAsC;AAuBtC;;;;GAIG;AACU,QAAA,aAAa,GAAG,KAAK,CAAC,UAAU,CAC3C,SAAS,aAAa,CACpB,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,gBAAgB,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAC1E,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,6BACgB,EAAE,EAC1B,IAAI,EAAC,YAAY,gBACL,KAAK,EACjB,SAAS,EAAE,IAAA,OAAE,EACX,wGAAwG,EACxG,SAAS,CACV,KACG,IAAI,YAEP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACL,oCAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,MAAM,iBACP,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,SAAS,EAAE,IAAA,OAAE,EACX,uIAAuI,EACvI,gFAAgF,EAChF,MAAM;oBACJ,CAAC,CAAC,sCAAsC;oBACxC,CAAC,CAAC,kCAAkC,CACvC,aAED,2CAAO,MAAM,CAAC,KAAK,GAAQ,EAC1B,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5B,kEACgC,EAAE,EAChC,SAAS,EAAE,IAAA,OAAE,EACX,oEAAoE,EACpE,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,iCAAiC,CAC1E,YAEA,MAAM,CAAC,KAAK,GACR,CACR,CAAC,CAAC,CAAC,IAAI,KAzBH,MAAM,CAAC,KAAK,CA0BV,CACV,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/marketing/ProcessSteps.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ProcessStep {
+    /** Step headline. */
+    title: React.ReactNode;
+    /** Supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Optional icon rendered inside the numbered marker instead of the number. */
+    icon?: React.ReactNode;
+}
+export interface ProcessStepsProps extends React.HTMLAttributes<HTMLOListElement> {
+    /** Ordered "how it works" steps. */
+    steps: ProcessStep[];
+}
+/** Numbered "how it works" flow — horizontal on desktop, vertical on mobile, with connectors. */
+export declare const ProcessSteps: React.ForwardRefExoticComponent<ProcessStepsProps & React.RefAttributes<HTMLOListElement>>;
+//# sourceMappingURL=ProcessSteps.d.ts.map

package/dist/marketing/ProcessSteps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessSteps.d.ts","sourceRoot":"","sources":["../../src/marketing/ProcessSteps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uCAAuC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC/E,oCAAoC;IACpC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,iGAAiG;AACjG,eAAO,MAAM,YAAY,4FA+CxB,CAAC"}

package/dist/marketing/ProcessSteps.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProcessSteps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const cn_1 = require("../primitives/cn");
+/** Numbered "how it works" flow — horizontal on desktop, vertical on mobile, with connectors. */
+exports.ProcessSteps = React.forwardRef(function ProcessSteps({ steps, className, ...rest }, ref) {
+    return ((0, jsx_runtime_1.jsx)("ol", { ref: ref, "data-xen-process-steps": "", className: (0, cn_1.cn)('flex flex-col gap-[var(--xen-space-lg)] md:flex-row md:items-start', className), ...rest, children: steps.map((step, index) => {
+            const isLast = index === steps.length - 1;
+            return ((0, jsx_runtime_1.jsxs)("li", { "data-xen-process-step": "", className: "relative flex flex-1 gap-[var(--xen-space-md)] md:flex-col md:text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center md:w-full md:flex-row md:items-center", children: [(0, jsx_runtime_1.jsx)("span", { "data-xen-process-number": "", className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--xen-radius-full)] bg-primary text-on-primary font-heading text-base font-semibold md:mx-auto", children: step.icon ?? index + 1 }), !isLast ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", "data-xen-process-connector": "", className: "mt-[var(--xen-space-xs)] w-px flex-1 bg-border md:mt-0 md:ml-[var(--xen-space-sm)] md:h-px md:w-auto md:flex-1" })) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[var(--xen-space-xs)] pb-[var(--xen-space-md)] md:pb-0", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-heading text-lg font-semibold text-on-surface", children: step.title }), step.description !== undefined ? ((0, jsx_runtime_1.jsx)("p", { className: "text-sm leading-relaxed text-muted", children: step.description })) : null] })] }, index));
+        }) }));
+});
+//# sourceMappingURL=ProcessSteps.js.map

package/dist/marketing/ProcessSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessSteps.js","sourceRoot":"","sources":["../../src/marketing/ProcessSteps.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,yCAAsC;AAgBtC,iGAAiG;AACpF,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACtD,OAAO,CACL,+BACE,GAAG,EAAE,GAAG,4BACe,EAAE,EACzB,SAAS,EAAE,IAAA,OAAE,EACX,oEAAoE,EACpE,SAAS,CACV,KACG,IAAI,YAEP,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC1C,OAAO,CACL,yDAEwB,EAAE,EACxB,SAAS,EAAC,2EAA2E,aAErF,iCAAK,SAAS,EAAC,kEAAkE,aAC/E,4DAC0B,EAAE,EAC1B,SAAS,EAAC,iKAAiK,YAE1K,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,CAAC,GAClB,EACN,CAAC,MAAM,CAAC,CAAC,CAAC,CACT,gDACc,MAAM,gCACS,EAAE,EAC7B,SAAS,EAAC,gHAAgH,GAC1H,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,EACN,iCAAK,SAAS,EAAC,0EAA0E,aACvF,+BAAI,SAAS,EAAC,oDAAoD,YAAE,IAAI,CAAC,KAAK,GAAM,EACnF,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,8BAAG,SAAS,EAAC,oCAAoC,YAAE,IAAI,CAAC,WAAW,GAAK,CACzE,CAAC,CAAC,CAAC,IAAI,IACJ,KAxBD,KAAK,CAyBP,CACN,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/marketing/ProductMock.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export type ProductMockVariant = 'analytics' | 'chat' | 'commerce' | 'calendar';
+/** Chart drawn in the main pane; `scene` falls back to the variant's own vignette. */
+export type ProductMockChart = 'bars' | 'sparkline' | 'rings' | 'scene';
+export interface ProductMockKpi {
+    label: string;
+    /** Pre-formatted value string — the kit never invents numbers or locales. */
+    value: string;
+}
+export interface ProductMockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Which fake product the panel impersonates (default `analytics`). */
+    variant?: ProductMockVariant;
+    /** Chrome-bar label (defaults per variant, e.g. `analytics / production`). */
+    title?: string;
+    /** KPI tiles across the top (defaults per variant; `[]` hides the row). */
+    kpis?: ProductMockKpi[];
+    /**
+     * Main-pane visual. Defaults per variant: analytics `bars`, commerce
+     * `sparkline`, chat and calendar their own `scene` (message thread /
+     * month grid). `rings` works everywhere.
+     */
+    chart?: ProductMockChart;
+    /** Live event feed lines in the side pane (defaults per variant; `[]` hides it). */
+    feed?: string[];
+    /** Badge text next to the pulsing dot (default `LIVE`; `false` hides the badge). */
+    live?: string | false;
+    /** 3D entrance: rise + un-tilt on mount (default true; reduced motion skips it). */
+    tilt?: boolean;
+    /** Footnote line under the feed (e.g. "9,214 events in the last 5s"). */
+    footnote?: string;
+}
+/**
+ * A configurable fake-product panel — the "product shot" of a landing hero,
+ * generalized from the SaaS template's dashboard mock. Glass chrome bar with
+ * a pulsing LIVE badge, KPI tiles, an animated main pane (equalizer bars,
+ * self-drawing sparkline, progress rings, chat thread, or month grid), and a
+ * sliding event feed. Entirely CSS-animated (no library), token-only colors,
+ * deterministic layout, and `aria-hidden` throughout: it is scenery — real
+ * copy belongs outside it.
+ *
+ * ```tsx
+ * <ProductMock variant="commerce" kpis={[{ label: 'Revenue', value: '$9,120' }]} />
+ * ```
+ */
+export declare const ProductMock: React.ForwardRefExoticComponent<ProductMockProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProductMock.d.ts.map

package/dist/marketing/ProductMock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductMock.d.ts","sourceRoot":"","sources":["../../src/marketing/ProductMock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAChF,sFAAsF;AACtF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3F,uEAAuE;IACvE,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,oFAAoF;IACpF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAoTD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,yFA4HvB,CAAC"}