@krizaka/ui 3.53.0 → 3.55.0

package/dist/product-page.js.map

@@ -1 +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                  {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,4BAAC,SAAI,WAAU,oBAAmB,eAAW,MAC1C,yBAAe,oBAAC,UAAM,uBAAY,GACrC;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":[]}
+{"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\";\nimport { warnDeprecated } from \"../deprecated\";\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/**\n * A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps) {\n  warnDeprecated(\"product-page\");\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                  {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;AAoET,cAIP,YAJO;AARhB,SAAS,YAAY,EAAE,OAAO,MAAM,OAAO,MAAM,OAAO,SAAS,QAAQ,aAAa,gBAAgB,cAAc,SAAS,WAAW,SAAS,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1N,iBAAe,cAAc;AAC7B,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,4BAAC,SAAI,WAAU,oBAAmB,eAAW,MAC1C,yBAAe,oBAAC,UAAM,uBAAY,GACrC;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

@@ -1,6 +1,124 @@
+import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
 
+declare const profileBanner: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            scrim?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            identity?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            cover?: tailwind_variants.ClassValue;
+            avatar?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            scrim?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            identity?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            cover?: tailwind_variants.ClassValue;
+            avatar?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    cover: string;
+    scrim: string;
+    body: string;
+    identity: string;
+    avatar: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            scrim?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            identity?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            cover?: tailwind_variants.ClassValue;
+            avatar?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    cover: string;
+    scrim: string;
+    body: string;
+    identity: string;
+    avatar: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    cover: string;
+    scrim: string;
+    body: string;
+    identity: string;
+    avatar: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+}>>;
+type ProfileBannerProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /** The cover: an `<img alt="">` (decorative) or your framework's image. Absent: a tint of the brand's accent. */
+    banner?: React.ReactNode;
+    /** The avatar overlapping the cover: `Avatar` with the family's default (`defaultAvatar: { brand, seed }`, #598) when there is no photo. */
+    avatar: React.ReactNode;
+    /** A mono line above the name: what it is (« Client », « Shop »), an id. */
+    eyebrow?: React.ReactNode;
+    /** The name: the page's heading. */
+    title: React.ReactNode;
+    /**
+     * The level of the name.
+     * @default "h1"
+     */
+    titleAs?: "h1" | "h2";
+    /** Beside the name: a status (`Badge`), a verified mark. */
+    status?: React.ReactNode;
+    /** Under the name: its facts (a handle, a city, « client since 2024 »). */
+    meta?: React.ReactNode;
+    /** The actions (message, book, edit): at the right from `sm`, under the name on a phone. */
+    actions?: React.ReactNode;
+    /** A brand scope (`akinaza` → `.brand-akinaza`): the default cover takes that brand's accent. */
+    brand?: string;
+};
+/** A person's or a place's banner: cover, overlapping avatar, eyebrow, name (h1), facts and actions — the words never on the cover. */
+declare function ProfileBanner({ banner, avatar, eyebrow, title, titleAs: Title, status, meta, actions, brand, className, ...props }: ProfileBannerProps): React.JSX.Element;
+
 interface ProfileStat {
     /** What it measures (“Response rate”) — passed translated. */
     label: string;
@@ -82,4 +200,4 @@ type StatGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
 /** 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 };
+export { ProfileBanner, type ProfileBannerProps, ProfileCard, type ProfileCardProps, type ProfileStat, StatGauge, type StatGaugeProps, profileBanner };

package/dist/profile-card.js

@@ -4,13 +4,58 @@ import {
   storyVariantClass
 } from "./chunk-XVFQZ3ZG.js";
 
-// src/profile-card/stat-gauge.tsx
+// src/profile-card/banner.tsx
+import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
+var profileBanner = tv({
+  slots: {
+    root: "relative flex w-full min-w-0 flex-col",
+    // The brand's accent, as a calm tint, when there is no picture; a picture fills it (`object-cover`).
+    cover: "relative h-28 w-full overflow-hidden rounded-xl bg-accent-soft bg-linear-to-br from-accent/30 via-accent-soft to-surface-2 sm:h-44 [&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
+    scrim: "pointer-events-none absolute inset-0 bg-linear-to-t from-surface-0/70 via-transparent to-transparent",
+    body: "relative flex min-w-0 flex-col gap-3 px-1 sm:flex-row sm:items-end sm:justify-between sm:px-2",
+    identity: "flex min-w-0 items-end gap-4",
+    // The avatar overlaps the cover's lower edge by the same share at every width; the ring is the page's colour.
+    avatar: "relative -mt-10 h-20 w-20 shrink-0 overflow-hidden rounded-2xl bg-surface-3 ring-4 ring-surface-0 sm:-mt-14 sm:h-28 sm:w-28 [&>*]:h-full! [&>*]:w-full! [&_img]:h-full [&_img]:w-full [&_img]:object-cover",
+    text: "flex min-w-0 flex-1 flex-col gap-1 pb-1",
+    eyebrow: "font-mono text-[11px] font-semibold text-fg-accent",
+    titleRow: "flex min-w-0 flex-wrap items-center gap-2",
+    title: "min-w-0 font-display text-xl font-extrabold tracking-tight break-words text-fg sm:text-3xl",
+    meta: "flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-fg-secondary",
+    actions: "flex shrink-0 flex-wrap items-center gap-2 sm:justify-end sm:pb-1"
+  }
+});
+var s = profileBanner();
+function ProfileBanner({ banner, avatar, eyebrow, title, titleAs: Title = "h1", status, meta, actions, brand, className, ...props }) {
+  return /* @__PURE__ */ jsxs("section", { className: s.root({ className: cn(brandClass(brand), className) }), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { "data-cover": "", className: s.cover(), children: [
+      banner,
+      banner ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.scrim() }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.body(), children: [
+      /* @__PURE__ */ jsxs("div", { className: s.identity(), children: [
+        /* @__PURE__ */ jsx("div", { "data-avatar": "", className: s.avatar(), children: avatar }),
+        /* @__PURE__ */ jsxs("div", { className: s.text(), children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: s.eyebrow(), children: eyebrow }),
+          /* @__PURE__ */ jsxs("div", { className: s.titleRow(), children: [
+            /* @__PURE__ */ jsx(Title, { className: s.title(), children: title }),
+            status
+          ] }),
+          meta && /* @__PURE__ */ jsx("div", { className: s.meta(), children: meta })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    ] })
+  ] });
+}
+
+// src/profile-card/stat-gauge.tsx
+import { jsx as jsx2, jsxs as jsxs2 } 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(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       role: "meter",
@@ -23,18 +68,18 @@ function StatGauge({ label, value = 100, max = 100, valueText, figure, hideLabel
       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 })
+        !hideLabel && /* @__PURE__ */ jsxs2("span", { className: "kzs-stat-head", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx2("span", { className: "kzs-stat-label", children: label }),
+          /* @__PURE__ */ jsx2("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" }) })
+        /* @__PURE__ */ jsx2("span", { className: "kzs-bar", "aria-hidden": true, children: /* @__PURE__ */ jsx2("span", { className: "kzs-bar-fill" }) })
       ]
     }
   );
 }
 
 // src/profile-card/profile-card.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ProfileCard({
   visual,
   name,
@@ -54,34 +99,36 @@ function ProfileCard({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "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__ */ jsx3("span", { className: "kzs-texture", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs3("div", { className: "kzs-profile-disc", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx3("span", { className: "kzs-profile-ring" }),
+          /* @__PURE__ */ jsx3("span", { className: "kzs-profile-aura kzs-loop" }),
+          /* @__PURE__ */ jsx3("span", { className: "kzs-profile-flash" }),
+          /* @__PURE__ */ jsx3("span", { className: "kzs-profile-visual", children: visual })
         ] }),
-        /* @__PURE__ */ jsxs2(Name, { className: "kzs-profile-name", children: [
-          icon && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsxs3(Name, { className: "kzs-profile-name", children: [
+          icon && /* @__PURE__ */ jsx3("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 })
+        statLabel && /* @__PURE__ */ jsx3(StatGauge, { label: statLabel, value, valueText, figure }),
+        stats && stats.length > 0 && /* @__PURE__ */ jsx3("ul", { className: "kzs-profile-stats", children: stats.map((s2) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(StatGauge, { label: s2.label, value: s2.value, max: s2.max, valueText: s2.valueText }) }, s2.label)) }),
+        caption && /* @__PURE__ */ jsx3("p", { className: "kzs-profile-caption", children: caption }),
+        children && /* @__PURE__ */ jsx3("div", { className: "kzs-profile-extra", children })
       ]
     }
   );
 }
 export {
+  ProfileBanner,
   ProfileCard,
-  StatGauge
+  StatGauge,
+  profileBanner
 };
 //# sourceMappingURL=profile-card.js.map

package/dist/profile-card.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/profile-card/banner.tsx","../src/profile-card/stat-gauge.tsx","../src/profile-card/profile-card.tsx"],"sourcesContent":["// Server-safe: no hook. The top of a page about one person or place — a client, a shop, a creator, a building\n// (extracted from Orochia's ProfileHero, #650, #515): a slim cover, the avatar overlapping its lower edge, then the\n// eyebrow, the name (the page's h1), its facts and the actions. No text ever sits on the cover: the words are under it,\n// so a photo never costs their contrast (a scrim fades the photo's foot into the page all the same).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { brandClass } from \"../story-variant\";\n\nexport const profileBanner = tv({\n  slots: {\n    root: \"relative flex w-full min-w-0 flex-col\",\n    // The brand's accent, as a calm tint, when there is no picture; a picture fills it (`object-cover`).\n    cover:\n      \"relative h-28 w-full overflow-hidden rounded-xl bg-accent-soft bg-linear-to-br from-accent/30 via-accent-soft to-surface-2 sm:h-44 \" +\n      \"[&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    scrim: \"pointer-events-none absolute inset-0 bg-linear-to-t from-surface-0/70 via-transparent to-transparent\",\n    body: \"relative flex min-w-0 flex-col gap-3 px-1 sm:flex-row sm:items-end sm:justify-between sm:px-2\",\n    identity: \"flex min-w-0 items-end gap-4\",\n    // The avatar overlaps the cover's lower edge by the same share at every width; the ring is the page's colour.\n    avatar:\n      \"relative -mt-10 h-20 w-20 shrink-0 overflow-hidden rounded-2xl bg-surface-3 ring-4 ring-surface-0 sm:-mt-14 sm:h-28 sm:w-28 \" +\n      \"[&>*]:h-full! [&>*]:w-full! [&_img]:h-full [&_img]:w-full [&_img]:object-cover\",\n    text: \"flex min-w-0 flex-1 flex-col gap-1 pb-1\",\n    eyebrow: \"font-mono text-[11px] font-semibold text-fg-accent\",\n    titleRow: \"flex min-w-0 flex-wrap items-center gap-2\",\n    title: \"min-w-0 font-display text-xl font-extrabold tracking-tight break-words text-fg sm:text-3xl\",\n    meta: \"flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2 sm:justify-end sm:pb-1\",\n  },\n});\nconst s = profileBanner();\n\nexport type ProfileBannerProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The cover: an `<img alt=\"\">` (decorative) or your framework's image. Absent: a tint of the brand's accent. */\n  banner?: React.ReactNode;\n  /** The avatar overlapping the cover: `Avatar` with the family's default (`defaultAvatar: { brand, seed }`, #598) when there is no photo. */\n  avatar: React.ReactNode;\n  /** A mono line above the name: what it is (« Client », « Shop »), an id. */\n  eyebrow?: React.ReactNode;\n  /** The name: the page's heading. */\n  title: React.ReactNode;\n  /**\n   * The level of the name.\n   * @default \"h1\"\n   */\n  titleAs?: \"h1\" | \"h2\";\n  /** Beside the name: a status (`Badge`), a verified mark. */\n  status?: React.ReactNode;\n  /** Under the name: its facts (a handle, a city, « client since 2024 »). */\n  meta?: React.ReactNode;\n  /** The actions (message, book, edit): at the right from `sm`, under the name on a phone. */\n  actions?: React.ReactNode;\n  /** A brand scope (`akinaza` → `.brand-akinaza`): the default cover takes that brand's accent. */\n  brand?: string;\n};\n\n/** A person's or a place's banner: cover, overlapping avatar, eyebrow, name (h1), facts and actions — the words never on the cover. */\nexport function ProfileBanner({ banner, avatar, eyebrow, title, titleAs: Title = \"h1\", status, meta, actions, brand, className, ...props }: ProfileBannerProps) {\n  return (\n    <section className={s.root({ className: cn(brandClass(brand), className) })} {...props}>\n      <div data-cover=\"\" className={s.cover()}>\n        {banner}\n        {banner ? <span aria-hidden className={s.scrim()} /> : null}\n      </div>\n      <div className={s.body()}>\n        <div className={s.identity()}>\n          <div data-avatar=\"\" className={s.avatar()}>\n            {avatar}\n          </div>\n          <div className={s.text()}>\n            {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n            <div className={s.titleRow()}>\n              <Title className={s.title()}>{title}</Title>\n              {status}\n            </div>\n            {meta && <div className={s.meta()}>{meta}</div>}\n          </div>\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n    </section>\n  );\n}\n","// 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":";;;;;;;AAKA,SAAS,UAAU;AAyDb,SAEY,KAFZ;AApDC,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IAEN,OACE;AAAA,IAEF,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,IAEV,QACE;AAAA,IAEF,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,cAAc;AA2BjB,SAAS,cAAc,EAAE,QAAQ,QAAQ,SAAS,OAAO,SAAS,QAAQ,MAAM,QAAQ,MAAM,SAAS,OAAO,WAAW,GAAG,MAAM,GAAuB;AAC9J,SACE,qBAAC,aAAQ,WAAW,EAAE,KAAK,EAAE,WAAW,GAAG,WAAW,KAAK,GAAG,SAAS,EAAE,CAAC,GAAI,GAAG,OAC/E;AAAA,yBAAC,SAAI,cAAW,IAAG,WAAW,EAAE,MAAM,GACnC;AAAA;AAAA,MACA,SAAS,oBAAC,UAAK,eAAW,MAAC,WAAW,EAAE,MAAM,GAAG,IAAK;AAAA,OACzD;AAAA,IACA,qBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,2BAAC,SAAI,WAAW,EAAE,SAAS,GACzB;AAAA,4BAAC,SAAI,eAAY,IAAG,WAAW,EAAE,OAAO,GACrC,kBACH;AAAA,QACA,qBAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,qBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,UAChD,qBAAC,SAAI,WAAW,EAAE,SAAS,GACzB;AAAA,gCAAC,SAAM,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,YACnC;AAAA,aACH;AAAA,UACC,QAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,WAC3C;AAAA,SACF;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,KACF;AAEJ;;;ACnCQ,SACE,OAAAA,MADF,QAAAC,aAAA;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,gBAAAA;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,gBAAAA,MAAC,UAAK,WAAU,iBAAgB,eAAW,MACzC;AAAA,0BAAAD,KAAC,UAAK,WAAU,kBAAkB,iBAAM;AAAA,UACxC,gBAAAA,KAAC,UAAK,WAAU,kBAAkB,oBAAU,OAAM;AAAA,WACpD;AAAA,QAEF,gBAAAA,KAAC,UAAK,WAAU,WAAU,eAAW,MACnC,0BAAAA,KAAC,UAAK,WAAU,gBAAe,GACjC;AAAA;AAAA;AAAA,EACF;AAEJ;;;AC6BM,gBAAAE,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,CAACE,OACV,gBAAAF,KAAC,QACC,0BAAAA,KAAC,aAAU,OAAOE,GAAE,OAAO,OAAOA,GAAE,OAAO,KAAKA,GAAE,KAAK,WAAWA,GAAE,WAAW,KADxEA,GAAE,KAEX,CACD,GACH;AAAA,QAED,WAAW,gBAAAF,KAAC,OAAE,WAAU,uBAAuB,mBAAQ;AAAA,QACvD,YAAY,gBAAAA,KAAC,SAAI,WAAU,qBAAqB,UAAS;AAAA;AAAA;AAAA,EAC5D;AAEJ;","names":["jsx","jsxs","jsx","jsxs","s"]}

package/dist/promise-card.d.ts

@@ -22,7 +22,10 @@ type PromiseCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
     /** A brand scope (`orazaka` → `.brand-orazaka`). */
     brand?: string;
 };
-/** A promise, the keys that call it and who carries it. */
+/**
+ * A promise, the keys that call it and who carries it.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 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

@@ -1,3 +1,6 @@
+import {
+  warnDeprecated
+} from "./chunk-KGLRZMCY.js";
 import {
   brandClass,
   cn,
@@ -7,6 +10,7 @@ import {
 // 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 }) {
+  warnDeprecated("promise-card");
   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: [

package/dist/promise-card.js.map

@@ -1 +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":[]}
+{"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 { warnDeprecated } from \"../deprecated\";\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/**\n * A promise, the keys that call it and who carries it.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function PromiseCard({ label, promise, keys, bearer, bearerLabel, bearerName, variant, brand, className, ...props }: PromiseCardProps) {\n  warnDeprecated(\"promise-card\");\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":";;;;;;;;;;AAsCM,cACA,YADA;AAJC,SAAS,YAAY,EAAE,OAAO,SAAS,MAAM,QAAQ,aAAa,YAAY,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AAC5I,iBAAe,cAAc;AAC7B,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":[]}

package/dist/quota-meter.d.ts

@@ -0,0 +1,113 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const quotaMeter: tailwind_variants.TVReturnType<{
+    level: {
+        ok: {
+            status: string;
+        };
+        warning: {
+            status: string;
+        };
+        critical: {
+            status: string;
+        };
+        full: {
+            status: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    title: string;
+    icon: string;
+    plan: string;
+    used: string;
+    status: string;
+    details: string;
+}, undefined, {
+    level: {
+        ok: {
+            status: string;
+        };
+        warning: {
+            status: string;
+        };
+        critical: {
+            status: string;
+        };
+        full: {
+            status: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    title: string;
+    icon: string;
+    plan: string;
+    used: string;
+    status: string;
+    details: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    level: {
+        ok: {
+            status: string;
+        };
+        warning: {
+            status: string;
+        };
+        critical: {
+            status: string;
+        };
+        full: {
+            status: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    title: string;
+    icon: string;
+    plan: string;
+    used: string;
+    status: string;
+    details: string;
+}>>;
+type QuotaLevel = "ok" | "warning" | "critical" | "full";
+/** Where the meter turns amber and red, as shares of the limit. */
+declare const QUOTA_THRESHOLDS: {
+    readonly low: 0.8;
+    readonly high: 0.95;
+};
+type QuotaMeterProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /** What is measured (`Storage`), with an optional icon before it. */
+    title: React.ReactNode;
+    /** A glyph before the title (decorative). */
+    icon?: React.ReactNode;
+    /** The plan's name, on the right of the title. */
+    plan?: React.ReactNode;
+    /** Used so far, in the unit of `max`. */
+    value: number;
+    /** The limit; `null` for no limit (no meter is drawn). */
+    max: number | null;
+    /** « 3.2 GB of 10 GB », said once for the eye and once for the meter's value. */
+    usedText: string;
+    /** The meter's accessible name. */
+    meterLabel: string;
+    /** Where the level stands: tones the sentence and gives an alarming one a status role. */
+    level?: QuotaLevel;
+    /** The sentence for that level (« You are close to your limit »). */
+    statusText?: React.ReactNode;
+    /** More sentences that matter (« 2 uploads on hold », « uploads are paused »), each a status. */
+    notices?: readonly React.ReactNode[];
+    /** Small figures under the meter (minutes, today's uploads). Left out when the card is compact. */
+    details?: readonly React.ReactNode[];
+    /** The way out, shown under the figures (a link to manage). */
+    action?: React.ReactNode;
+    /** Leaves out the footer (the small figures and the action): the title, the used line, the meter, the sentence and the notices stay. */
+    compact?: boolean;
+};
+declare function QuotaMeter({ title, icon, plan, value, max, usedText, meterLabel, level, statusText, notices, details, action, compact, className, ...props }: QuotaMeterProps): React.JSX.Element;
+
+export { QUOTA_THRESHOLDS, type QuotaLevel, QuotaMeter, type QuotaMeterProps, quotaMeter };

package/dist/quota-meter.js

@@ -0,0 +1,58 @@
+import {
+  Meter
+} from "./chunk-HEKDKM5Y.js";
+
+// src/quota-meter/quota-meter.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var quotaMeter = tv({
+  slots: {
+    root: "flex flex-col gap-2 rounded-2xl border border-border-default bg-surface-1 p-5",
+    head: "flex items-center justify-between gap-3",
+    title: "flex items-center gap-2 font-mono text-xs text-fg-secondary",
+    icon: "inline-flex shrink-0 [&>svg]:h-3.5 [&>svg]:w-3.5",
+    plan: "text-xs text-fg-secondary",
+    used: "font-mono text-lg font-black text-fg",
+    status: "flex items-start gap-1.5 text-xs leading-relaxed",
+    details: "flex flex-wrap items-center justify-between gap-2 text-xs text-fg-secondary"
+  },
+  variants: {
+    level: {
+      ok: { status: "text-fg-secondary" },
+      warning: { status: "text-fg-warning" },
+      critical: { status: "text-fg-danger" },
+      full: { status: "text-fg-danger" }
+    }
+  },
+  defaultVariants: { level: "ok" }
+});
+var QUOTA_THRESHOLDS = { low: 0.8, high: 0.95 };
+function QuotaMeter({ title, icon, plan, value, max, usedText, meterLabel, level = "ok", statusText, notices = [], details = [], action, compact = false, className, ...props }) {
+  const s = quotaMeter({ level });
+  const alarming = level !== "ok";
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": titleId, className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.head(), children: [
+      /* @__PURE__ */ jsxs("h3", { id: titleId, className: s.title(), children: [
+        icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.icon(), children: icon }),
+        title
+      ] }),
+      plan && /* @__PURE__ */ jsx("span", { className: s.plan(), children: plan })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: s.used(), children: usedText }),
+    max !== null && /* @__PURE__ */ jsx(Meter, { size: "sm", value: Math.min(value, max), max, label: meterLabel, valueText: usedText, thresholds: QUOTA_THRESHOLDS }),
+    statusText && /* @__PURE__ */ jsx("p", { className: s.status(), role: alarming ? "status" : void 0, children: statusText }),
+    notices.map((n, i) => /* @__PURE__ */ jsx("p", { className: quotaMeter({ level: "critical" }).status(), role: "status", children: n }, i)),
+    !compact && (details.length > 0 || action) && /* @__PURE__ */ jsxs("div", { className: s.details(), children: [
+      details.map((d, i) => /* @__PURE__ */ jsx("span", { children: d }, i)),
+      action
+    ] })
+  ] });
+}
+export {
+  QUOTA_THRESHOLDS,
+  QuotaMeter,
+  quotaMeter
+};
+//# sourceMappingURL=quota-meter.js.map

package/dist/quota-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/quota-meter/quota-meter.tsx"],"sourcesContent":["// Server-safe. Space or time used against a plan: what is used in words, a Meter that turns amber then red, the sentence\n// that says what to do before the limit (and a status role once it matters), the small figures and the way out.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Meter } from \"../meter\";\n\nexport const quotaMeter = tv({\n  slots: {\n    root: \"flex flex-col gap-2 rounded-2xl border border-border-default bg-surface-1 p-5\",\n    head: \"flex items-center justify-between gap-3\",\n    title: \"flex items-center gap-2 font-mono text-xs text-fg-secondary\",\n    icon: \"inline-flex shrink-0 [&>svg]:h-3.5 [&>svg]:w-3.5\",\n    plan: \"text-xs text-fg-secondary\",\n    used: \"font-mono text-lg font-black text-fg\",\n    status: \"flex items-start gap-1.5 text-xs leading-relaxed\",\n    details: \"flex flex-wrap items-center justify-between gap-2 text-xs text-fg-secondary\",\n  },\n  variants: {\n    level: {\n      ok: { status: \"text-fg-secondary\" },\n      warning: { status: \"text-fg-warning\" },\n      critical: { status: \"text-fg-danger\" },\n      full: { status: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { level: \"ok\" },\n});\n\nexport type QuotaLevel = \"ok\" | \"warning\" | \"critical\" | \"full\";\n\n/** Where the meter turns amber and red, as shares of the limit. */\nexport const QUOTA_THRESHOLDS = { low: 0.8, high: 0.95 } as const;\n\nexport type QuotaMeterProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** What is measured (`Storage`), with an optional icon before it. */\n  title: React.ReactNode;\n  /** A glyph before the title (decorative). */\n  icon?: React.ReactNode;\n  /** The plan's name, on the right of the title. */\n  plan?: React.ReactNode;\n  /** Used so far, in the unit of `max`. */\n  value: number;\n  /** The limit; `null` for no limit (no meter is drawn). */\n  max: number | null;\n  /** « 3.2 GB of 10 GB », said once for the eye and once for the meter's value. */\n  usedText: string;\n  /** The meter's accessible name. */\n  meterLabel: string;\n  /** Where the level stands: tones the sentence and gives an alarming one a status role. */\n  level?: QuotaLevel;\n  /** The sentence for that level (« You are close to your limit »). */\n  statusText?: React.ReactNode;\n  /** More sentences that matter (« 2 uploads on hold », « uploads are paused »), each a status. */\n  notices?: readonly React.ReactNode[];\n  /** Small figures under the meter (minutes, today's uploads). Left out when the card is compact. */\n  details?: readonly React.ReactNode[];\n  /** The way out, shown under the figures (a link to manage). */\n  action?: React.ReactNode;\n  /** Leaves out the footer (the small figures and the action): the title, the used line, the meter, the sentence and the notices stay. */\n  compact?: boolean;\n};\n\nexport function QuotaMeter({ title, icon, plan, value, max, usedText, meterLabel, level = \"ok\", statusText, notices = [], details = [], action, compact = false, className, ...props }: QuotaMeterProps) {\n  const s = quotaMeter({ level });\n  const alarming = level !== \"ok\";\n  const titleId = React.useId();\n  return (\n    <section aria-labelledby={titleId} className={s.root({ className })} {...props}>\n      <div className={s.head()}>\n        <h3 id={titleId} className={s.title()}>\n          {icon && (\n            <span aria-hidden className={s.icon()}>\n              {icon}\n            </span>\n          )}\n          {title}\n        </h3>\n        {plan && <span className={s.plan()}>{plan}</span>}\n      </div>\n      <p className={s.used()}>{usedText}</p>\n      {max !== null && <Meter size=\"sm\" value={Math.min(value, max)} max={max} label={meterLabel} valueText={usedText} thresholds={QUOTA_THRESHOLDS} />}\n      {statusText && (\n        <p className={s.status()} role={alarming ? \"status\" : undefined}>\n          {statusText}\n        </p>\n      )}\n      {notices.map((n, i) => (\n        <p key={i} className={quotaMeter({ level: \"critical\" }).status()} role=\"status\">\n          {n}\n        </p>\n      ))}\n      {!compact && (details.length > 0 || action) && (\n        <div className={s.details()}>\n          {details.map((d, i) => (\n            <span key={i}>{d}</span>\n          ))}\n          {action}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;AAEA,YAAY,WAAW;AACvB,SAAS,UAAU;AAmEX,SAEI,KAFJ;AA/DD,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,QAAQ,oBAAoB;AAAA,MAClC,SAAS,EAAE,QAAQ,kBAAkB;AAAA,MACrC,UAAU,EAAE,QAAQ,iBAAiB;AAAA,MACrC,MAAM,EAAE,QAAQ,iBAAiB;AAAA,IACnC;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,OAAO,KAAK;AACjC,CAAC;AAKM,IAAM,mBAAmB,EAAE,KAAK,KAAK,MAAM,KAAK;AA+BhD,SAAS,WAAW,EAAE,OAAO,MAAM,MAAM,OAAO,KAAK,UAAU,YAAY,QAAQ,MAAM,YAAY,UAAU,CAAC,GAAG,UAAU,CAAC,GAAG,QAAQ,UAAU,OAAO,WAAW,GAAG,MAAM,GAAoB;AACvM,QAAM,IAAI,WAAW,EAAE,MAAM,CAAC;AAC9B,QAAM,WAAW,UAAU;AAC3B,QAAM,UAAgB,YAAM;AAC5B,SACE,qBAAC,aAAQ,mBAAiB,SAAS,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACvE;AAAA,yBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,2BAAC,QAAG,IAAI,SAAS,WAAW,EAAE,MAAM,GACjC;AAAA,gBACC,oBAAC,UAAK,eAAW,MAAC,WAAW,EAAE,KAAK,GACjC,gBACH;AAAA,QAED;AAAA,SACH;AAAA,MACC,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IACA,oBAAC,OAAE,WAAW,EAAE,KAAK,GAAI,oBAAS;AAAA,IACjC,QAAQ,QAAQ,oBAAC,SAAM,MAAK,MAAK,OAAO,KAAK,IAAI,OAAO,GAAG,GAAG,KAAU,OAAO,YAAY,WAAW,UAAU,YAAY,kBAAkB;AAAA,IAC9I,cACC,oBAAC,OAAE,WAAW,EAAE,OAAO,GAAG,MAAM,WAAW,WAAW,QACnD,sBACH;AAAA,IAED,QAAQ,IAAI,CAAC,GAAG,MACf,oBAAC,OAAU,WAAW,WAAW,EAAE,OAAO,WAAW,CAAC,EAAE,OAAO,GAAG,MAAK,UACpE,eADK,CAER,CACD;AAAA,IACA,CAAC,YAAY,QAAQ,SAAS,KAAK,WAClC,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACvB;AAAA,cAAQ,IAAI,CAAC,GAAG,MACf,oBAAC,UAAc,eAAJ,CAAM,CAClB;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}