@krizaka/ui 2.8.0 → 2.10.0

package/dist/pricing-page.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+interface PricingPlan {
+    /** A stable key. */
+    id: string;
+    /** Its name. */
+    name: React.ReactNode;
+    /** Its price (`€29`, `Free`, `Custom`). */
+    price: React.ReactNode;
+    /** Under the price: the unit (`per month · 12,000 credits`). */
+    unit?: React.ReactNode;
+    /** What it includes, a few lines. */
+    features: readonly React.ReactNode[];
+    /** Its action (a cut Button or link; the featured one primary). */
+    action: React.ReactNode;
+    /** The plan most people choose: lifted and lit. */
+    featured?: boolean;
+    /** Its badge (`Most chosen`). */
+    badge?: React.ReactNode;
+}
+type PricingPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The brand the page wears (`.brand-<id>`). */
+    brand?: string;
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One sentence under it. */
+    lead?: React.ReactNode;
+    /** Above the plans: a period switch (monthly · yearly), a currency. */
+    toolbar?: React.ReactNode;
+    /** The plans' accessible name (`Plans`). */
+    plansLabel: string;
+    /** The plans. */
+    plans: readonly PricingPlan[];
+    /** The comparison: its caption, columns (the plans' names) and rows (a feature and a cell per plan). */
+    compare?: {
+        caption: React.ReactNode;
+        columns: readonly React.ReactNode[];
+        rows: readonly {
+            feature: React.ReactNode;
+            cells: readonly React.ReactNode[];
+        }[];
+    };
+    /** What a credit buys, the credits left: a Meter, a sentence. */
+    credits?: {
+        title: React.ReactNode;
+        children: React.ReactNode;
+    };
+    /** The questions, folded. */
+    faq?: {
+        title: React.ReactNode;
+        items: readonly {
+            question: React.ReactNode;
+            answer: React.ReactNode;
+        }[];
+    };
+};
+/** A pricing page: plans (the featured one lifted), the comparison, credits, the questions. */
+declare function PricingPage({ brand, eyebrow, title, lead, toolbar, plansLabel, plans, compare, credits, faq, className, ...props }: PricingPageProps): React.JSX.Element;
+
+export { PricingPage, type PricingPageProps, type PricingPlan };

package/dist/pricing-page.js

@@ -0,0 +1,71 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/pricing-page/pricing-page.tsx
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var CheckGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+
+// src/pricing-page/pricing-page.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PricingPage({ brand, eyebrow, title, lead, toolbar, plansLabel, plans, compare, credits, faq, className, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx2(PageHero, { eyebrow, title, lead, align: "center", backdrop: "plain", children: toolbar }),
+    /* @__PURE__ */ jsx2(Section, { "aria-label": plansLabel, spacing: "sm", children: /* @__PURE__ */ jsx2("ul", { className: "kz-tpl-plans", children: plans.map((p) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2("div", { className: "kz-tpl-plan", "data-featured": p.featured ? "" : void 0, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "kz-tpl-collection-head", children: [
+        /* @__PURE__ */ jsx2("h2", { children: p.name }),
+        p.badge && /* @__PURE__ */ jsx2("span", { className: "kz-fact", "data-tone": "ok", children: p.badge })
+      ] }),
+      /* @__PURE__ */ jsxs2("p", { className: "kz-tpl-price", children: [
+        p.price,
+        p.unit && /* @__PURE__ */ jsx2("small", { children: p.unit })
+      ] }),
+      /* @__PURE__ */ jsx2("ul", { children: p.features.map((f, i) => /* @__PURE__ */ jsxs2("li", { children: [
+        /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx2("span", { children: f })
+      ] }, i)) }),
+      /* @__PURE__ */ jsx2("div", { children: p.action })
+    ] }) }, p.id)) }) }),
+    compare && /* @__PURE__ */ jsx2(Section, { "aria-label": typeof compare.caption === "string" ? compare.caption : void 0, spacing: "sm", divider: true, children: /* @__PURE__ */ jsx2("div", { className: "kz-tpl-scroll", tabIndex: 0, children: /* @__PURE__ */ jsxs2("table", { className: "kz-tpl-compare", children: [
+      /* @__PURE__ */ jsx2("caption", { className: "kz-label kz-tpl-caption", children: compare.caption }),
+      /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx2("td", {}),
+        compare.columns.map((c, i) => /* @__PURE__ */ jsx2("th", { scope: "col", children: c }, i))
+      ] }) }),
+      /* @__PURE__ */ jsx2("tbody", { children: compare.rows.map((r, i) => /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx2("th", { scope: "row", children: r.feature }),
+        r.cells.map((cell, j) => /* @__PURE__ */ jsx2("td", { children: cell }, j))
+      ] }, i)) })
+    ] }) }) }),
+    credits && /* @__PURE__ */ jsx2(Section, { id: "credits", title: credits.title, headingSize: "sm", spacing: "sm", divider: true, children: credits.children }),
+    faq && /* @__PURE__ */ jsx2(Section, { id: "faq", title: faq.title, headingSize: "sm", spacing: "sm", divider: true, children: /* @__PURE__ */ jsx2("div", { className: "kz-tpl-faq", children: faq.items.map((q, i) => /* @__PURE__ */ jsxs2("details", { children: [
+      /* @__PURE__ */ jsx2("summary", { children: q.question }),
+      /* @__PURE__ */ jsx2("div", { children: q.answer })
+    ] }, i)) }) })
+  ] });
+}
+export {
+  PricingPage
+};
+//# sourceMappingURL=pricing-page.js.map

package/dist/pricing-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pricing-page/pricing-page.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe. Plans and what they cost (blocks.css `.kz-tpl-plans`, `.kz-tpl-compare`, `.kz-tpl-faq`): the hero, the\n// plans side by side — the featured one lifted, lit by the brand — the comparison as a table that scrolls on a phone,\n// what a credit buys, and the questions people ask, folded.\nimport { Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph } from \"../glyphs\";\n\nexport interface PricingPlan {\n  /** A stable key. */\n  id: string;\n  /** Its name. */\n  name: React.ReactNode;\n  /** Its price (`€29`, `Free`, `Custom`). */\n  price: React.ReactNode;\n  /** Under the price: the unit (`per month · 12,000 credits`). */\n  unit?: React.ReactNode;\n  /** What it includes, a few lines. */\n  features: readonly React.ReactNode[];\n  /** Its action (a cut Button or link; the featured one primary). */\n  action: React.ReactNode;\n  /** The plan most people choose: lifted and lit. */\n  featured?: boolean;\n  /** Its badge (`Most chosen`). */\n  badge?: React.ReactNode;\n}\n\nexport type PricingPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** Above the plans: a period switch (monthly · yearly), a currency. */\n  toolbar?: React.ReactNode;\n  /** The plans' accessible name (`Plans`). */\n  plansLabel: string;\n  /** The plans. */\n  plans: readonly PricingPlan[];\n  /** The comparison: its caption, columns (the plans' names) and rows (a feature and a cell per plan). */\n  compare?: { caption: React.ReactNode; columns: readonly React.ReactNode[]; rows: readonly { feature: React.ReactNode; cells: readonly React.ReactNode[] }[] };\n  /** What a credit buys, the credits left: a Meter, a sentence. */\n  credits?: { title: React.ReactNode; children: React.ReactNode };\n  /** The questions, folded. */\n  faq?: { title: React.ReactNode; items: readonly { question: React.ReactNode; answer: React.ReactNode }[] };\n};\n\n/** A pricing page: plans (the featured one lifted), the comparison, credits, the questions. */\nexport function PricingPage({ brand, eyebrow, title, lead, toolbar, plansLabel, plans, compare, credits, faq, className, ...props }: PricingPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"plain\">\n        {toolbar}\n      </PageHero>\n      <Section aria-label={plansLabel} spacing=\"sm\">\n        <ul className=\"kz-tpl-plans\">\n          {plans.map((p) => (\n            <li key={p.id}>\n              <div className=\"kz-tpl-plan\" data-featured={p.featured ? \"\" : undefined}>\n                <div className=\"kz-tpl-collection-head\">\n                  <h2>{p.name}</h2>\n                  {p.badge && <span className=\"kz-fact\" data-tone=\"ok\">{p.badge}</span>}\n                </div>\n                <p className=\"kz-tpl-price\">\n                  {p.price}\n                  {p.unit && <small>{p.unit}</small>}\n                </p>\n                <ul>\n                  {p.features.map((f, i) => (\n                    <li key={i}>\n                      <CheckGlyph className=\"h-4 w-4\" />\n                      <span>{f}</span>\n                    </li>\n                  ))}\n                </ul>\n                <div>{p.action}</div>\n              </div>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {compare && (\n        <Section aria-label={typeof compare.caption === \"string\" ? compare.caption : undefined} spacing=\"sm\" divider>\n          <div className=\"kz-tpl-scroll\" tabIndex={0}>\n            <table className=\"kz-tpl-compare\">\n              <caption className=\"kz-label kz-tpl-caption\">{compare.caption}</caption>\n              <thead>\n                <tr>\n                  <td />\n                  {compare.columns.map((c, i) => (\n                    <th key={i} scope=\"col\">\n                      {c}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                {compare.rows.map((r, i) => (\n                  <tr key={i}>\n                    <th scope=\"row\">{r.feature}</th>\n                    {r.cells.map((cell, j) => (\n                      <td key={j}>{cell}</td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </Section>\n      )}\n      {credits && (\n        <Section id=\"credits\" title={credits.title} headingSize=\"sm\" spacing=\"sm\" divider>\n          {credits.children}\n        </Section>\n      )}\n      {faq && (\n        <Section id=\"faq\" title={faq.title} headingSize=\"sm\" spacing=\"sm\" divider>\n          <div className=\"kz-tpl-faq\">\n            {faq.items.map((q, i) => (\n              <details key={i}>\n                <summary>{q.question}</summary>\n                <div>{q.answer}</div>\n              </details>\n            ))}\n          </div>\n        </Section>\n      )}\n    </div>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":";;;;;AAGA,SAAS,eAAe;AACxB,SAAS,gBAAgB;;;ACKrB,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AAoDO,IAAM,aAAa,CAAC,MACzB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;;;ADtBI,gBAAAA,MAQU,QAAAC,aARV;AAHC,SAAS,YAAY,EAAE,OAAO,SAAS,OAAO,MAAM,SAAS,YAAY,OAAO,SAAS,SAAS,KAAK,WAAW,GAAG,MAAM,GAAqB;AACrJ,SACE,gBAAAA,MAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,oBAAAD,KAAC,YAAS,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,SAC3E,mBACH;AAAA,IACA,gBAAAA,KAAC,WAAQ,cAAY,YAAY,SAAQ,MACvC,0BAAAA,KAAC,QAAG,WAAU,gBACX,gBAAM,IAAI,CAAC,MACV,gBAAAA,KAAC,QACC,0BAAAC,MAAC,SAAI,WAAU,eAAc,iBAAe,EAAE,WAAW,KAAK,QAC5D;AAAA,sBAAAA,MAAC,SAAI,WAAU,0BACb;AAAA,wBAAAD,KAAC,QAAI,YAAE,MAAK;AAAA,QACX,EAAE,SAAS,gBAAAA,KAAC,UAAK,WAAU,WAAU,aAAU,MAAM,YAAE,OAAM;AAAA,SAChE;AAAA,MACA,gBAAAC,MAAC,OAAE,WAAU,gBACV;AAAA,UAAE;AAAA,QACF,EAAE,QAAQ,gBAAAD,KAAC,WAAO,YAAE,MAAK;AAAA,SAC5B;AAAA,MACA,gBAAAA,KAAC,QACE,YAAE,SAAS,IAAI,CAAC,GAAG,MAClB,gBAAAC,MAAC,QACC;AAAA,wBAAAD,KAAC,cAAW,WAAU,WAAU;AAAA,QAChC,gBAAAA,KAAC,UAAM,aAAE;AAAA,WAFF,CAGT,CACD,GACH;AAAA,MACA,gBAAAA,KAAC,SAAK,YAAE,QAAO;AAAA,OACjB,KAnBO,EAAE,EAoBX,CACD,GACH,GACF;AAAA,IACC,WACC,gBAAAA,KAAC,WAAQ,cAAY,OAAO,QAAQ,YAAY,WAAW,QAAQ,UAAU,QAAW,SAAQ,MAAK,SAAO,MAC1G,0BAAAA,KAAC,SAAI,WAAU,iBAAgB,UAAU,GACvC,0BAAAC,MAAC,WAAM,WAAU,kBACf;AAAA,sBAAAD,KAAC,aAAQ,WAAU,2BAA2B,kBAAQ,SAAQ;AAAA,MAC9D,gBAAAA,KAAC,WACC,0BAAAC,MAAC,QACC;AAAA,wBAAAD,KAAC,QAAG;AAAA,QACH,QAAQ,QAAQ,IAAI,CAAC,GAAG,MACvB,gBAAAA,KAAC,QAAW,OAAM,OACf,eADM,CAET,CACD;AAAA,SACH,GACF;AAAA,MACA,gBAAAA,KAAC,WACE,kBAAQ,KAAK,IAAI,CAAC,GAAG,MACpB,gBAAAC,MAAC,QACC;AAAA,wBAAAD,KAAC,QAAG,OAAM,OAAO,YAAE,SAAQ;AAAA,QAC1B,EAAE,MAAM,IAAI,CAAC,MAAM,MAClB,gBAAAA,KAAC,QAAY,kBAAJ,CAAS,CACnB;AAAA,WAJM,CAKT,CACD,GACH;AAAA,OACF,GACF,GACF;AAAA,IAED,WACC,gBAAAA,KAAC,WAAQ,IAAG,WAAU,OAAO,QAAQ,OAAO,aAAY,MAAK,SAAQ,MAAK,SAAO,MAC9E,kBAAQ,UACX;AAAA,IAED,OACC,gBAAAA,KAAC,WAAQ,IAAG,OAAM,OAAO,IAAI,OAAO,aAAY,MAAK,SAAQ,MAAK,SAAO,MACvE,0BAAAA,KAAC,SAAI,WAAU,cACZ,cAAI,MAAM,IAAI,CAAC,GAAG,MACjB,gBAAAC,MAAC,aACC;AAAA,sBAAAD,KAAC,aAAS,YAAE,UAAS;AAAA,MACrB,gBAAAA,KAAC,SAAK,YAAE,QAAO;AAAA,SAFH,CAGd,CACD,GACH,GACF;AAAA,KAEJ;AAEJ;","names":["jsx","jsxs"]}

package/dist/product-page.d.ts

@@ -0,0 +1,83 @@
+import { Decision } from '@krizaka/ui/decision-list';
+import { MascotBird } from '@krizaka/ui/mascots';
+import { Fact } from '@krizaka/ui/page';
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface ProductReason {
+    /** A stable key (the card's anchor). */
+    id: string;
+    /** Its name. */
+    title: React.ReactNode;
+    /** The trap elsewhere, in one line. */
+    trap: React.ReactNode;
+    /** The signature icon. */
+    icon?: React.ReactNode;
+    /** The bird in the corner (whose rule it is). */
+    mark?: React.ReactNode;
+    /** Where the long version lives (a page) — or nothing, and the card stays its face. */
+    href?: string;
+}
+type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */
+    brand?: string;
+    /** The product's mark and name, above the title. */
+    mark?: React.ReactNode;
+    /** The promise: the page's `h1`. */
+    title: React.ReactNode;
+    /** One or two sentences under it. */
+    lead?: React.ReactNode;
+    /** Facts under the lead (open source, a law it keeps). */
+    facts?: readonly Fact[];
+    /** The hero's actions. */
+    actions?: React.ReactNode;
+    /** The product alive, in a window beside the words. */
+    visual?: React.ReactNode;
+    /** The window's caption. */
+    visualLabel?: React.ReactNode;
+    /** The reasons' section heading. */
+    reasonsHeading: {
+        eyebrow?: React.ReactNode;
+        title: React.ReactNode;
+        lead?: React.ReactNode;
+    };
+    /** The words of the cards: the trap's label (read, not shown) and the way in. */
+    reasonLabels: {
+        trap: string;
+        more: React.ReactNode;
+    };
+    /** The traps it removes. */
+    reasons: readonly ProductReason[];
+    /** The decisions' section: heading, decisions and their four labels. */
+    decisions?: {
+        eyebrow?: React.ReactNode;
+        title: React.ReactNode;
+        items: readonly Decision[];
+        labels: {
+            chose: React.ReactNode;
+            refused: React.ReactNode;
+            because: React.ReactNode;
+            cost: React.ReactNode;
+        };
+    };
+    /** The promise a bird keeps, under the decisions. */
+    promise?: {
+        bird: MascotBird;
+        label: React.ReactNode;
+        text: React.ReactNode;
+    };
+    /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */
+    children?: React.ReactNode;
+    /** The closing call. */
+    closing?: {
+        title: React.ReactNode;
+        body?: React.ReactNode;
+        actions: React.ReactNode;
+    };
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */
+declare function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps): React.JSX.Element;
+
+export { ProductPage, type ProductPageProps, type ProductReason };

package/dist/product-page.js

@@ -0,0 +1,60 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/product-page/product-page.tsx
+import { ArgumentCard } from "@krizaka/ui/argument-card";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { DecisionList } from "@krizaka/ui/decision-list";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Facts, Page, Section } from "@krizaka/ui/page";
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(SectionBackdrop, { as: "header", grid: true, className: "kz-hero", children: /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs("div", { className: visual ? "kz-tpl-split" : void 0, children: [
+      /* @__PURE__ */ jsxs("div", { className: "kz-hero-text", children: [
+        mark && /* @__PURE__ */ jsx("p", { className: "kz-eyebrow", children: mark }),
+        /* @__PURE__ */ jsx("h1", { className: "kz-hero-title", children: title }),
+        lead && /* @__PURE__ */ jsx("p", { className: "kz-hero-lead", children: lead }),
+        (facts || actions) && /* @__PURE__ */ jsxs("div", { className: "kz-hero-extra", children: [
+          facts && /* @__PURE__ */ jsx(Facts, { items: facts }),
+          actions && /* @__PURE__ */ jsx("div", { className: "kz-tpl-actions", children: actions })
+        ] })
+      ] }),
+      visual && /* @__PURE__ */ jsxs("figure", { className: "kz-tpl-stage", children: [
+        /* @__PURE__ */ jsxs("div", { className: "kz-tpl-stage-bar", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("i", {}),
+          /* @__PURE__ */ jsx("i", {}),
+          /* @__PURE__ */ jsx("i", {}),
+          visualLabel && /* @__PURE__ */ jsx("span", { children: visualLabel })
+        ] }),
+        visual
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Section, { id: "why", eyebrow: reasonsHeading.eyebrow, title: reasonsHeading.title, lead: reasonsHeading.lead, reveal: true, children: /* @__PURE__ */ jsx(CardGrid, { min: 260, fit: "fit", children: reasons.map((r) => /* @__PURE__ */ jsx(
+      ArgumentCard,
+      {
+        id: `why-${r.id}`,
+        icon: r.icon,
+        title: r.title,
+        mark: r.mark,
+        hook: { label: reasonLabels.trap, text: r.trap },
+        more: r.href ? { href: r.href, label: reasonLabels.more } : void 0,
+        linkAs
+      },
+      r.id
+    )) }) }),
+    decisions && /* @__PURE__ */ jsxs(Section, { id: "decisions", eyebrow: decisions.eyebrow, title: decisions.title, divider: true, reveal: true, children: [
+      /* @__PURE__ */ jsx(DecisionList, { decisions: decisions.items, labels: decisions.labels }),
+      promise && /* @__PURE__ */ jsx("div", { className: "kz-tpl-promise", children: /* @__PURE__ */ jsx(MascotQuote, { variant: "callout", bird: promise.bird, mood: "welcome", label: promise.label, children: promise.text }) })
+    ] }),
+    children,
+    closing && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "product-closing", children: /* @__PURE__ */ jsx(CtaPanel, { id: "product-closing", title: closing.title, body: closing.body, reveal: true, children: closing.actions }) })
+  ] });
+}
+export {
+  ProductPage
+};
+//# sourceMappingURL=product-page.js.map

package/dist/product-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product-page/product-page.tsx"],"sourcesContent":["// Server-safe. A product's overview: the hero with the product's mark, its promise, facts and main action beside a live\n// window of the product; the traps it removes as compact argument cards; its decisions with their cost; the promise a\n// bird keeps; the closing call. Under the product's brand (`brand` → `.brand-<id>`).\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { type Decision, DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport type { MascotBird } from \"@krizaka/ui/mascots\";\nimport { type Fact, Facts, Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface ProductReason {\n  /** A stable key (the card's anchor). */\n  id: string;\n  /** Its name. */\n  title: React.ReactNode;\n  /** The trap elsewhere, in one line. */\n  trap: React.ReactNode;\n  /** The signature icon. */\n  icon?: React.ReactNode;\n  /** The bird in the corner (whose rule it is). */\n  mark?: React.ReactNode;\n  /** Where the long version lives (a page) — or nothing, and the card stays its face. */\n  href?: string;\n}\n\nexport type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */\n  brand?: string;\n  /** The product's mark and name, above the title. */\n  mark?: React.ReactNode;\n  /** The promise: the page's `h1`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** Facts under the lead (open source, a law it keeps). */\n  facts?: readonly Fact[];\n  /** The hero's actions. */\n  actions?: React.ReactNode;\n  /** The product alive, in a window beside the words. */\n  visual?: React.ReactNode;\n  /** The window's caption. */\n  visualLabel?: React.ReactNode;\n  /** The reasons' section heading. */\n  reasonsHeading: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n  /** The words of the cards: the trap's label (read, not shown) and the way in. */\n  reasonLabels: { trap: string; more: React.ReactNode };\n  /** The traps it removes. */\n  reasons: readonly ProductReason[];\n  /** The decisions' section: heading, decisions and their four labels. */\n  decisions?: { eyebrow?: React.ReactNode; title: React.ReactNode; items: readonly Decision[]; labels: { chose: React.ReactNode; refused: React.ReactNode; because: React.ReactNode; cost: React.ReactNode } };\n  /** The promise a bird keeps, under the decisions. */\n  promise?: { bird: MascotBird; label: React.ReactNode; text: React.ReactNode };\n  /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */\n  children?: React.ReactNode;\n  /** The closing call. */\n  closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */\nexport function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n        <Page>\n          <div className={visual ? \"kz-tpl-split\" : undefined}>\n            <div className=\"kz-hero-text\">\n              {mark && <p className=\"kz-eyebrow\">{mark}</p>}\n              <h1 className=\"kz-hero-title\">{title}</h1>\n              {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n              {(facts || actions) && (\n                <div className=\"kz-hero-extra\">\n                  {facts && <Facts items={facts} />}\n                  {actions && <div className=\"kz-tpl-actions\">{actions}</div>}\n                </div>\n              )}\n            </div>\n            {visual && (\n              <figure className=\"kz-tpl-stage\">\n                <div className=\"kz-tpl-stage-bar\" aria-hidden>\n                  <i />\n                  <i />\n                  <i />\n                  {visualLabel && <span>{visualLabel}</span>}\n                </div>\n                {visual}\n              </figure>\n            )}\n          </div>\n        </Page>\n      </SectionBackdrop>\n      <Section id=\"why\" eyebrow={reasonsHeading.eyebrow} title={reasonsHeading.title} lead={reasonsHeading.lead} reveal>\n        <CardGrid min={260} fit=\"fit\">\n          {reasons.map((r) => (\n            <ArgumentCard\n              key={r.id}\n              id={`why-${r.id}`}\n              icon={r.icon}\n              title={r.title}\n              mark={r.mark}\n              hook={{ label: reasonLabels.trap, text: r.trap }}\n              more={r.href ? { href: r.href, label: reasonLabels.more } : undefined}\n              linkAs={linkAs}\n            />\n          ))}\n        </CardGrid>\n      </Section>\n      {decisions && (\n        <Section id=\"decisions\" eyebrow={decisions.eyebrow} title={decisions.title} divider reveal>\n          <DecisionList decisions={decisions.items} labels={decisions.labels} />\n          {promise && (\n            <div className=\"kz-tpl-promise\">\n              <MascotQuote variant=\"callout\" bird={promise.bird} mood=\"welcome\" label={promise.label}>\n                {promise.text}\n              </MascotQuote>\n            </div>\n          )}\n        </Section>\n      )}\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"product-closing\">\n          <CtaPanel id=\"product-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAwB,oBAAoB;AAC5C,SAAS,mBAAmB;AAE5B,SAAoB,OAAO,MAAM,eAAe;AAEhD,SAAS,uBAAuB;AA+DT,cAIP,YAJO;AAPhB,SAAS,YAAY,EAAE,OAAO,MAAM,OAAO,MAAM,OAAO,SAAS,QAAQ,aAAa,gBAAgB,cAAc,SAAS,WAAW,SAAS,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1N,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,mBAAgB,IAAG,UAAS,MAAI,MAAC,WAAU,WAC1C,8BAAC,QACC,+BAAC,SAAI,WAAW,SAAS,iBAAiB,QACxC;AAAA,2BAAC,SAAI,WAAU,gBACZ;AAAA,gBAAQ,oBAAC,OAAE,WAAU,cAAc,gBAAK;AAAA,QACzC,oBAAC,QAAG,WAAU,iBAAiB,iBAAM;AAAA,QACpC,QAAQ,oBAAC,OAAE,WAAU,gBAAgB,gBAAK;AAAA,SACzC,SAAS,YACT,qBAAC,SAAI,WAAU,iBACZ;AAAA,mBAAS,oBAAC,SAAM,OAAO,OAAO;AAAA,UAC9B,WAAW,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,WACvD;AAAA,SAEJ;AAAA,MACC,UACC,qBAAC,YAAO,WAAU,gBAChB;AAAA,6BAAC,SAAI,WAAU,oBAAmB,eAAW,MAC3C;AAAA,8BAAC,OAAE;AAAA,UACH,oBAAC,OAAE;AAAA,UACH,oBAAC,OAAE;AAAA,UACF,eAAe,oBAAC,UAAM,uBAAY;AAAA,WACrC;AAAA,QACC;AAAA,SACH;AAAA,OAEJ,GACF,GACF;AAAA,IACA,oBAAC,WAAQ,IAAG,OAAM,SAAS,eAAe,SAAS,OAAO,eAAe,OAAO,MAAM,eAAe,MAAM,QAAM,MAC/G,8BAAC,YAAS,KAAK,KAAK,KAAI,OACrB,kBAAQ,IAAI,CAAC,MACZ;AAAA,MAAC;AAAA;AAAA,QAEC,IAAI,OAAO,EAAE,EAAE;AAAA,QACf,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,MAAM,EAAE;AAAA,QACR,MAAM,EAAE,OAAO,aAAa,MAAM,MAAM,EAAE,KAAK;AAAA,QAC/C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,aAAa,KAAK,IAAI;AAAA,QAC5D;AAAA;AAAA,MAPK,EAAE;AAAA,IAQT,CACD,GACH,GACF;AAAA,IACC,aACC,qBAAC,WAAQ,IAAG,aAAY,SAAS,UAAU,SAAS,OAAO,UAAU,OAAO,SAAO,MAAC,QAAM,MACxF;AAAA,0BAAC,gBAAa,WAAW,UAAU,OAAO,QAAQ,UAAU,QAAQ;AAAA,MACnE,WACC,oBAAC,SAAI,WAAU,kBACb,8BAAC,eAAY,SAAQ,WAAU,MAAM,QAAQ,MAAM,MAAK,WAAU,OAAO,QAAQ,OAC9E,kBAAQ,MACX,GACF;AAAA,OAEJ;AAAA,IAED;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,mBACpC,8BAAC,YAAS,IAAG,mBAAkB,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MAC5E,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/profile-card.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+interface ProfileStat {
+    /** What it measures (“Response rate”) — passed translated. */
+    label: string;
+    /** The value, between 0 and `max`. */
+    value: number;
+    /** The top of the range (default 100). */
+    max?: number;
+    /** The value in words (“92 %”, “4.8 / 5”); default: the percentage. */
+    valueText?: string;
+}
+type ProfileCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The portrait: an image, an avatar, a mark. Decorative — the name carries the meaning. */
+    visual: React.ReactNode;
+    /** The name (the card's heading). */
+    name: React.ReactNode;
+    /**
+     * The level of the name.
+     * @default "h3"
+     */
+    nameAs?: "h2" | "h3" | "h4" | "p";
+    /** A small glyph before the name (decorative): a verified mark, an emblem. */
+    icon?: React.ReactNode;
+    /** The headline gauge's label (“Profile complete”, arcade “Power”); without it, no headline gauge. */
+    statLabel?: string;
+    /**
+     * The headline gauge's value, 0–100.
+     * @default 100
+     */
+    value?: number;
+    /** The headline value in words; default: the percentage. */
+    valueText?: string;
+    /** What shows as the headline figure instead of `valueText`: a `NumberTicker` that climbs. Decorative. */
+    figure?: React.ReactNode;
+    /** More gauges under the headline one: two to four, each with its value in words. */
+    stats?: readonly ProfileStat[];
+    /** One line under the gauges: where they come from, what they do. */
+    caption?: React.ReactNode;
+    /** Under everything: actions (follow, message), chips. */
+    children?: React.ReactNode;
+    /**
+     * The diameter of the portrait, in pixels.
+     * @default 132 (arcade 196)
+     */
+    visualSize?: number;
+    /**
+     * `default`: a sober card. `arcade`: the fighter card — the brand's light, a ring and a breathing aura, a skewed gauge.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`): the accent and gradient become that brand's. */
+    brand?: string;
+};
+/** A profile at a glance: portrait, name, a headline gauge, stats with their values in words, a line and actions. */
+declare function ProfileCard({ visual, name, nameAs: Name, icon, statLabel, value, valueText, figure, stats, caption, children, visualSize, variant, brand, className, style, ...props }: ProfileCardProps): React.JSX.Element;
+
+type StatGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** What it measures (“Profile complete”, “Creator share”) — passed translated; the meter's accessible name. */
+    label: string;
+    /**
+     * The value, between 0 and `max`.
+     * @default 100
+     */
+    value?: number;
+    /**
+     * The top of the range.
+     * @default 100
+     */
+    max?: number;
+    /** The value in words (“12 of 15”); default: the percentage. Read by assistive technology, shown without `figure`. */
+    valueText?: string;
+    /** What shows as the figure instead of `valueText`: a `NumberTicker` that climbs, a formatted amount. Decorative. */
+    figure?: React.ReactNode;
+    /**
+     * Hides the label and the figure (the bar alone, named for assistive technology).
+     * @default false
+     */
+    hideLabel?: boolean;
+};
+/** A measured strength: label, figure and bar; `role="meter"` with `aria-valuetext`. */
+declare function StatGauge({ label, value, max, valueText, figure, hideLabel, className, style, ...props }: StatGaugeProps): React.JSX.Element;
+
+export { ProfileCard, type ProfileCardProps, type ProfileStat, StatGauge, type StatGaugeProps };

package/dist/profile-card.js

@@ -0,0 +1,87 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/profile-card/stat-gauge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var clamp = (n) => Math.min(1, Math.max(0, n));
+function StatGauge({ label, value = 100, max = 100, valueText, figure, hideLabel, className, style, ...props }) {
+  const ratio = clamp(value / (max || 1));
+  const words = valueText ?? `${Math.round(ratio * 100)} %`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(ratio * 100),
+      "aria-valuetext": words,
+      className: cn("kzs-stat", className),
+      style: { "--kzs-ratio": ratio, ...style },
+      ...props,
+      children: [
+        !hideLabel && /* @__PURE__ */ jsxs("span", { className: "kzs-stat-head", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("span", { className: "kzs-stat-label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "kzs-stat-value", children: figure ?? words })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "kzs-bar", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "kzs-bar-fill" }) })
+      ]
+    }
+  );
+}
+
+// src/profile-card/profile-card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ProfileCard({
+  visual,
+  name,
+  nameAs: Name = "h3",
+  icon,
+  statLabel,
+  value = 100,
+  valueText,
+  figure,
+  stats,
+  caption,
+  children,
+  visualSize,
+  variant,
+  brand,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "article",
+    {
+      className: cn("kzs-profile", storyVariantClass(variant), brandClass(brand), className),
+      style: visualSize ? { "--kzs-disc": `${visualSize}px`, ...style } : style,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "kzs-texture", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs2("div", { className: "kzs-profile-disc", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-ring" }),
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-aura kzs-loop" }),
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-flash" }),
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-visual", children: visual })
+        ] }),
+        /* @__PURE__ */ jsxs2(Name, { className: "kzs-profile-name", children: [
+          icon && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: icon }),
+          name
+        ] }),
+        statLabel && /* @__PURE__ */ jsx2(StatGauge, { label: statLabel, value, valueText, figure }),
+        stats && stats.length > 0 && /* @__PURE__ */ jsx2("ul", { className: "kzs-profile-stats", children: stats.map((s) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(StatGauge, { label: s.label, value: s.value, max: s.max, valueText: s.valueText }) }, s.label)) }),
+        caption && /* @__PURE__ */ jsx2("p", { className: "kzs-profile-caption", children: caption }),
+        children && /* @__PURE__ */ jsx2("div", { className: "kzs-profile-extra", children })
+      ]
+    }
+  );
+}
+export {
+  ProfileCard,
+  StatGauge
+};
+//# sourceMappingURL=profile-card.js.map

package/dist/profile-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/profile-card/stat-gauge.tsx","../src/profile-card/profile-card.tsx"],"sourcesContent":["// Server-safe. One measured strength: a label, its figure, a bar (story.css) — the gauge of a ProfileCard, also usable\n// alone (in a ChoiceGrid tile, a list). A `meter` with its value in words.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type StatGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /** What it measures (“Profile complete”, “Creator share”) — passed translated; the meter's accessible name. */\n  label: string;\n  /**\n   * The value, between 0 and `max`.\n   * @default 100\n   */\n  value?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“12 of 15”); default: the percentage. Read by assistive technology, shown without `figure`. */\n  valueText?: string;\n  /** What shows as the figure instead of `valueText`: a `NumberTicker` that climbs, a formatted amount. Decorative. */\n  figure?: React.ReactNode;\n  /**\n   * Hides the label and the figure (the bar alone, named for assistive technology).\n   * @default false\n   */\n  hideLabel?: boolean;\n};\n\nconst clamp = (n: number) => Math.min(1, Math.max(0, n));\n\n/** A measured strength: label, figure and bar; `role=\"meter\"` with `aria-valuetext`. */\nexport function StatGauge({ label, value = 100, max = 100, valueText, figure, hideLabel, className, style, ...props }: StatGaugeProps) {\n  const ratio = clamp(value / (max || 1));\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  return (\n    <div\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.round(ratio * 100)}\n      aria-valuetext={words}\n      className={cn(\"kzs-stat\", className)}\n      style={{ \"--kzs-ratio\": ratio, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {!hideLabel && (\n        <span className=\"kzs-stat-head\" aria-hidden>\n          <span className=\"kzs-stat-label\">{label}</span>\n          <span className=\"kzs-stat-value\">{figure ?? words}</span>\n        </span>\n      )}\n      <span className=\"kzs-bar\" aria-hidden>\n        <span className=\"kzs-bar-fill\" />\n      </span>\n    </div>\n  );\n}\n","// Server-safe. A profile at a glance (story.css): a portrait, a name, one headline gauge, a few stats, a line — a creator,\n// a match, a plan, a team member. In a `Scene` of a `ScrollStage` the card arrives and its gauges fill, once.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\nimport { StatGauge } from \"./stat-gauge\";\n\nexport interface ProfileStat {\n  /** What it measures (“Response rate”) — passed translated. */\n  label: string;\n  /** The value, between 0 and `max`. */\n  value: number;\n  /** The top of the range (default 100). */\n  max?: number;\n  /** The value in words (“92 %”, “4.8 / 5”); default: the percentage. */\n  valueText?: string;\n}\n\nexport type ProfileCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The portrait: an image, an avatar, a mark. Decorative — the name carries the meaning. */\n  visual: React.ReactNode;\n  /** The name (the card's heading). */\n  name: React.ReactNode;\n  /**\n   * The level of the name.\n   * @default \"h3\"\n   */\n  nameAs?: \"h2\" | \"h3\" | \"h4\" | \"p\";\n  /** A small glyph before the name (decorative): a verified mark, an emblem. */\n  icon?: React.ReactNode;\n  /** The headline gauge's label (“Profile complete”, arcade “Power”); without it, no headline gauge. */\n  statLabel?: string;\n  /**\n   * The headline gauge's value, 0–100.\n   * @default 100\n   */\n  value?: number;\n  /** The headline value in words; default: the percentage. */\n  valueText?: string;\n  /** What shows as the headline figure instead of `valueText`: a `NumberTicker` that climbs. Decorative. */\n  figure?: React.ReactNode;\n  /** More gauges under the headline one: two to four, each with its value in words. */\n  stats?: readonly ProfileStat[];\n  /** One line under the gauges: where they come from, what they do. */\n  caption?: React.ReactNode;\n  /** Under everything: actions (follow, message), chips. */\n  children?: React.ReactNode;\n  /**\n   * The diameter of the portrait, in pixels.\n   * @default 132 (arcade 196)\n   */\n  visualSize?: number;\n  /**\n   * `default`: a sober card. `arcade`: the fighter card — the brand's light, a ring and a breathing aura, a skewed gauge.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`): the accent and gradient become that brand's. */\n  brand?: string;\n};\n\n/** A profile at a glance: portrait, name, a headline gauge, stats with their values in words, a line and actions. */\nexport function ProfileCard({\n  visual,\n  name,\n  nameAs: Name = \"h3\",\n  icon,\n  statLabel,\n  value = 100,\n  valueText,\n  figure,\n  stats,\n  caption,\n  children,\n  visualSize,\n  variant,\n  brand,\n  className,\n  style,\n  ...props\n}: ProfileCardProps) {\n  return (\n    <article\n      className={cn(\"kzs-profile\", storyVariantClass(variant), brandClass(brand), className)}\n      style={visualSize ? ({ \"--kzs-disc\": `${visualSize}px`, ...style } as React.CSSProperties) : style}\n      {...props}\n    >\n      <span className=\"kzs-texture\" aria-hidden />\n      <div className=\"kzs-profile-disc\" aria-hidden>\n        <span className=\"kzs-profile-ring\" />\n        <span className=\"kzs-profile-aura kzs-loop\" />\n        <span className=\"kzs-profile-flash\" />\n        <span className=\"kzs-profile-visual\">{visual}</span>\n      </div>\n      <Name className=\"kzs-profile-name\">\n        {icon && <span aria-hidden>{icon}</span>}\n        {name}\n      </Name>\n      {statLabel && <StatGauge label={statLabel} value={value} valueText={valueText} figure={figure} />}\n      {stats && stats.length > 0 && (\n        <ul className=\"kzs-profile-stats\">\n          {stats.map((s) => (\n            <li key={s.label}>\n              <StatGauge label={s.label} value={s.value} max={s.max} valueText={s.valueText} />\n            </li>\n          ))}\n        </ul>\n      )}\n      {caption && <p className=\"kzs-profile-caption\">{caption}</p>}\n      {children && <div className=\"kzs-profile-extra\">{children}</div>}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;AAiDQ,SACE,KADF;AAnBR,IAAM,QAAQ,CAAC,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;AAGhD,SAAS,UAAU,EAAE,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW,QAAQ,WAAW,WAAW,OAAO,GAAG,MAAM,GAAmB;AACrI,QAAM,QAAQ,MAAM,SAAS,OAAO,EAAE;AACtC,QAAM,QAAQ,aAAa,GAAG,KAAK,MAAM,QAAQ,GAAG,CAAC;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,KAAK,MAAM,QAAQ,GAAG;AAAA,MACrC,kBAAgB;AAAA,MAChB,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,OAAO,EAAE,eAAe,OAAO,GAAG,MAAM;AAAA,MACvC,GAAG;AAAA,MAEH;AAAA,SAAC,aACA,qBAAC,UAAK,WAAU,iBAAgB,eAAW,MACzC;AAAA,8BAAC,UAAK,WAAU,kBAAkB,iBAAM;AAAA,UACxC,oBAAC,UAAK,WAAU,kBAAkB,oBAAU,OAAM;AAAA,WACpD;AAAA,QAEF,oBAAC,UAAK,WAAU,WAAU,eAAW,MACnC,8BAAC,UAAK,WAAU,gBAAe,GACjC;AAAA;AAAA;AAAA,EACF;AAEJ;;;AC6BM,gBAAAA,MACA,QAAAC,aADA;AAzBC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,QAAQ,OAAO;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,eAAe,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS;AAAA,MACrF,OAAO,aAAc,EAAE,cAAc,GAAG,UAAU,MAAM,GAAG,MAAM,IAA4B;AAAA,MAC5F,GAAG;AAAA,MAEJ;AAAA,wBAAAD,KAAC,UAAK,WAAU,eAAc,eAAW,MAAC;AAAA,QAC1C,gBAAAC,MAAC,SAAI,WAAU,oBAAmB,eAAW,MAC3C;AAAA,0BAAAD,KAAC,UAAK,WAAU,oBAAmB;AAAA,UACnC,gBAAAA,KAAC,UAAK,WAAU,6BAA4B;AAAA,UAC5C,gBAAAA,KAAC,UAAK,WAAU,qBAAoB;AAAA,UACpC,gBAAAA,KAAC,UAAK,WAAU,sBAAsB,kBAAO;AAAA,WAC/C;AAAA,QACA,gBAAAC,MAAC,QAAK,WAAU,oBACb;AAAA,kBAAQ,gBAAAD,KAAC,UAAK,eAAW,MAAE,gBAAK;AAAA,UAChC;AAAA,WACH;AAAA,QACC,aAAa,gBAAAA,KAAC,aAAU,OAAO,WAAW,OAAc,WAAsB,QAAgB;AAAA,QAC9F,SAAS,MAAM,SAAS,KACvB,gBAAAA,KAAC,QAAG,WAAU,qBACX,gBAAM,IAAI,CAAC,MACV,gBAAAA,KAAC,QACC,0BAAAA,KAAC,aAAU,OAAO,EAAE,OAAO,OAAO,EAAE,OAAO,KAAK,EAAE,KAAK,WAAW,EAAE,WAAW,KADxE,EAAE,KAEX,CACD,GACH;AAAA,QAED,WAAW,gBAAAA,KAAC,OAAE,WAAU,uBAAuB,mBAAQ;AAAA,QACvD,YAAY,gBAAAA,KAAC,SAAI,WAAU,qBAAqB,UAAS;AAAA;AAAA;AAAA,EAC5D;AAEJ;","names":["jsx","jsxs"]}

package/dist/promise-card.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+type PromiseCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** What kind of promise (“Our promise”, “Shortcut”, arcade “Special move”). */
+    label: React.ReactNode;
+    /** The promise itself, in a few words. */
+    promise: React.ReactNode;
+    /** The keys that call it, in order (`["⌘", "K"]`); in a stage they light one by one before the promise lands. Decorative. */
+    keys?: readonly string[];
+    /** Who carries it: a bird of the flock (`Mascot`, 48 px), an avatar. Decorative. */
+    bearer?: React.ReactNode;
+    /** Above the bearer's name (“In the corner”, “Kept by”). */
+    bearerLabel?: React.ReactNode;
+    /** The bearer's name and role. */
+    bearerName?: React.ReactNode;
+    /**
+     * `default`: a calm card with its keys as key-caps. `arcade`: the combo card — the keys pressed one by one, a flash.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orazaka` → `.brand-orazaka`). */
+    brand?: string;
+};
+/** A promise, the keys that call it and who carries it. */
+declare function PromiseCard({ label, promise, keys, bearer, bearerLabel, bearerName, variant, brand, className, ...props }: PromiseCardProps): React.JSX.Element;
+
+export { PromiseCard, type PromiseCardProps };

package/dist/promise-card.js

@@ -0,0 +1,29 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/promise-card/promise-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PromiseCard({ label, promise, keys, bearer, bearerLabel, bearerName, variant, brand, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("kzs-promise", storyVariantClass(variant), brandClass(brand), className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "kzs-promise-flash", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { className: "kzs-promise-head", children: [
+      /* @__PURE__ */ jsx("span", { className: "kzs-promise-label", children: label }),
+      keys && keys.length > 0 && /* @__PURE__ */ jsx("span", { className: "kzs-promise-keys", "aria-hidden": true, children: keys.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "kzs-key", style: { "--k": i }, children: k }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "kzs-promise-text", children: promise }),
+    (bearer || bearerName) && /* @__PURE__ */ jsxs("div", { className: "kzs-promise-bearer", children: [
+      bearer && /* @__PURE__ */ jsx("span", { className: "kzs-promise-bird", "aria-hidden": true, children: bearer }),
+      /* @__PURE__ */ jsxs("span", { className: "kzs-promise-who", children: [
+        bearerLabel && /* @__PURE__ */ jsx("span", { className: "kzs-promise-bearer-label", children: bearerLabel }),
+        bearerName && /* @__PURE__ */ jsx("span", { className: "kzs-promise-name", children: bearerName })
+      ] })
+    ] })
+  ] });
+}
+export {
+  PromiseCard
+};
+//# sourceMappingURL=promise-card.js.map

package/dist/promise-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/promise-card/promise-card.tsx"],"sourcesContent":["// Server-safe. A promise, the keys that call it, and who carries it (story.css): a product's guarantee, a shortcut and\n// what it does, a rule of the house — “Your data never leaves home”, called by ← ↙ ↓ ↘ → K, carried by the owl.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type PromiseCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** What kind of promise (“Our promise”, “Shortcut”, arcade “Special move”). */\n  label: React.ReactNode;\n  /** The promise itself, in a few words. */\n  promise: React.ReactNode;\n  /** The keys that call it, in order (`[\"⌘\", \"K\"]`); in a stage they light one by one before the promise lands. Decorative. */\n  keys?: readonly string[];\n  /** Who carries it: a bird of the flock (`Mascot`, 48 px), an avatar. Decorative. */\n  bearer?: React.ReactNode;\n  /** Above the bearer's name (“In the corner”, “Kept by”). */\n  bearerLabel?: React.ReactNode;\n  /** The bearer's name and role. */\n  bearerName?: React.ReactNode;\n  /**\n   * `default`: a calm card with its keys as key-caps. `arcade`: the combo card — the keys pressed one by one, a flash.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orazaka` → `.brand-orazaka`). */\n  brand?: string;\n};\n\n/** A promise, the keys that call it and who carries it. */\nexport function PromiseCard({ label, promise, keys, bearer, bearerLabel, bearerName, variant, brand, className, ...props }: PromiseCardProps) {\n  return (\n    <div className={cn(\"kzs-promise\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      <span className=\"kzs-promise-flash\" aria-hidden />\n      <div className=\"kzs-promise-head\">\n        <span className=\"kzs-promise-label\">{label}</span>\n        {keys && keys.length > 0 && (\n          <span className=\"kzs-promise-keys\" aria-hidden>\n            {keys.map((k, i) => (\n              <kbd key={i} className=\"kzs-key\" style={{ \"--k\": i } as React.CSSProperties}>\n                {k}\n              </kbd>\n            ))}\n          </span>\n        )}\n      </div>\n      <p className=\"kzs-promise-text\">{promise}</p>\n      {(bearer || bearerName) && (\n        <div className=\"kzs-promise-bearer\">\n          {bearer && (\n            <span className=\"kzs-promise-bird\" aria-hidden>\n              {bearer}\n            </span>\n          )}\n          <span className=\"kzs-promise-who\">\n            {bearerLabel && <span className=\"kzs-promise-bearer-label\">{bearerLabel}</span>}\n            {bearerName && <span className=\"kzs-promise-name\">{bearerName}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiCM,cACA,YADA;AAHC,SAAS,YAAY,EAAE,OAAO,SAAS,MAAM,QAAQ,aAAa,YAAY,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AAC5I,SACE,qBAAC,SAAI,WAAW,GAAG,eAAe,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS,GAAI,GAAG,OAC/F;AAAA,wBAAC,UAAK,WAAU,qBAAoB,eAAW,MAAC;AAAA,IAChD,qBAAC,SAAI,WAAU,oBACb;AAAA,0BAAC,UAAK,WAAU,qBAAqB,iBAAM;AAAA,MAC1C,QAAQ,KAAK,SAAS,KACrB,oBAAC,UAAK,WAAU,oBAAmB,eAAW,MAC3C,eAAK,IAAI,CAAC,GAAG,MACZ,oBAAC,SAAY,WAAU,WAAU,OAAO,EAAE,OAAO,EAAE,GAChD,eADO,CAEV,CACD,GACH;AAAA,OAEJ;AAAA,IACA,oBAAC,OAAE,WAAU,oBAAoB,mBAAQ;AAAA,KACvC,UAAU,eACV,qBAAC,SAAI,WAAU,sBACZ;AAAA,gBACC,oBAAC,UAAK,WAAU,oBAAmB,eAAW,MAC3C,kBACH;AAAA,MAEF,qBAAC,UAAK,WAAU,mBACb;AAAA,uBAAe,oBAAC,UAAK,WAAU,4BAA4B,uBAAY;AAAA,QACvE,cAAc,oBAAC,UAAK,WAAU,oBAAoB,sBAAW;AAAA,SAChE;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}