@krizaka/ui 2.8.0 → 2.9.0

package/registry/examples/promise-card/guarantee.tsx

@@ -0,0 +1,17 @@
+import { Mascot } from "@krizaka/ui/mascots";
+import { PromiseCard } from "@krizaka/ui/promise-card";
+
+// A product's guarantee with the bird that keeps it — the owl reads your documents and keeps them in the house.
+export default function PromiseCardGuarantee() {
+  return (
+    <PromiseCard
+      className="w-[30rem] max-w-full"
+      label="Our promise"
+      promise="Your documents never leave your servers."
+      keys={["⌘", "K"]}
+      bearer={<Mascot bird="owl" mood="success" size={48} animated={false} />}
+      bearerLabel="Kept by"
+      bearerName="The owl · reads, and keeps it in the house"
+    />
+  );
+}

package/registry/examples/scroll-stage/arcade.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/scroll-stage/arcade.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/scroll-stage/arcade.tsx
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScrollStageArcade() {
+  return /* @__PURE__ */ jsx(ScrollStage, { variant: "arcade", className: "grid w-full max-w-xl gap-8", children: /* @__PURE__ */ jsxs(Scene, { brand: "orochia", className: "grid justify-items-center gap-4 text-center", children: [
+    /* @__PURE__ */ jsx(StageBanner, { size: "lg", stage: "Final round", title: "Eight problems in the way", subtitle: "One by one, they fall." }),
+    /* @__PURE__ */ jsx(GoalGauge, { label: "Problems left", segments: 8, value: 0, mode: "drain", valueText: "0 of 8 left" })
+  ] }) });
+}
+export {
+  ScrollStageArcade as default
+};

package/registry/examples/scroll-stage/arcade.tsx

@@ -0,0 +1,15 @@
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+
+// `variant="arcade"` once on the stage: every storytelling component inside takes the cabinet flavour.
+export default function ScrollStageArcade() {
+  return (
+    <ScrollStage variant="arcade" className="grid w-full max-w-xl gap-8">
+      <Scene brand="orochia" className="grid justify-items-center gap-4 text-center">
+        <StageBanner size="lg" stage="Final round" title="Eight problems in the way" subtitle="One by one, they fall." />
+        <GoalGauge label="Problems left" segments={8} value={0} mode="drain" valueText="0 of 8 left" />
+      </Scene>
+    </ScrollStage>
+  );
+}

package/registry/examples/scroll-stage/chapters.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/scroll-stage/chapters.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/scroll-stage/chapters.tsx
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScrollStageChapters() {
+  return /* @__PURE__ */ jsxs(ScrollStage, { className: "grid w-full max-w-xl gap-10", children: [
+    /* @__PURE__ */ jsxs(Scene, { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsx(StageBanner, { stage: "Step 01", name: "Your profile" }),
+      /* @__PURE__ */ jsxs("div", { "data-kzs-reveal": true, children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-fg", children: "Say who you are, in your words" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "Three questions, two photos. Nothing is public until you say so." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Scene, { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsx(StageBanner, { stage: "Step 02", name: "Your first goal" }),
+      /* @__PURE__ */ jsx(GoalGauge, { label: "Backers", segments: 10, value: 6, valueText: "6 of 10 backers" })
+    ] })
+  ] });
+}
+export {
+  ScrollStageChapters as default
+};

package/registry/examples/scroll-stage/chapters.tsx

@@ -0,0 +1,22 @@
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+
+// A told page: each chapter plays once as it scrolls in — the banner, then the words (`data-kzs-reveal`), then the gauge.
+export default function ScrollStageChapters() {
+  return (
+    <ScrollStage className="grid w-full max-w-xl gap-10">
+      <Scene className="grid gap-3">
+        <StageBanner stage="Step 01" name="Your profile" />
+        <div data-kzs-reveal>
+          <h3 className="text-lg font-semibold text-fg">Say who you are, in your words</h3>
+          <p className="text-sm text-fg-secondary">Three questions, two photos. Nothing is public until you say so.</p>
+        </div>
+      </Scene>
+      <Scene className="grid gap-3">
+        <StageBanner stage="Step 02" name="Your first goal" />
+        <GoalGauge label="Backers" segments={10} value={6} valueText="6 of 10 backers" />
+      </Scene>
+    </ScrollStage>
+  );
+}

package/registry/examples/settings-layout/account.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/settings-layout/account.js

@@ -0,0 +1,51 @@
+"use client";
+
+// registry/examples/settings-layout/account.tsx
+import { Button } from "@krizaka/ui/button";
+import { Field, Input, Select } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+import { Switch } from "@krizaka/ui/switch";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NAV = [
+  { id: "profile", label: "Profile", href: "#profile", current: true },
+  { id: "notifications", label: "Notifications", href: "#notifications" },
+  { id: "payouts", label: "Payouts", href: "#payouts" },
+  { id: "security", label: "Security", href: "#security" }
+];
+function SettingsLayoutAccount() {
+  return /* @__PURE__ */ jsxs(SettingsLayout, { className: "w-full", title: "Settings", description: "Your profile, what we tell you and how you are paid.", nav: NAV, navLabel: "Settings sections", children: [
+    /* @__PURE__ */ jsxs(
+      SettingsSection,
+      {
+        id: "profile",
+        title: "Profile",
+        description: "What your fans see.",
+        footer: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Save the profile" }),
+        children: [
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "settings-name", children: "Display name" }),
+            /* @__PURE__ */ jsx(Input, { id: "settings-name", defaultValue: "Elena Varga" })
+          ] }),
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "settings-language", children: "Language" }),
+            /* @__PURE__ */ jsxs(Select, { id: "settings-language", defaultValue: "fr", children: [
+              /* @__PURE__ */ jsx("option", { value: "en", children: "English" }),
+              /* @__PURE__ */ jsx("option", { value: "fr", children: "Fran\xE7ais" })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(SettingsSection, { id: "notifications", title: "Notifications", description: "Only what you ask for.", children: [
+      { id: "unlock", label: "A fan unlocks a video", on: true },
+      { id: "auction", label: "An auction ends", on: true },
+      { id: "weekly", label: "Weekly summary by email", on: false }
+    ].map((n) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 text-sm text-fg", children: [
+      /* @__PURE__ */ jsx("span", { id: `notify-${n.id}`, children: n.label }),
+      /* @__PURE__ */ jsx(Switch, { "aria-labelledby": `notify-${n.id}`, defaultChecked: n.on })
+    ] }, n.id)) })
+  ] });
+}
+export {
+  SettingsLayoutAccount as default
+};

package/registry/examples/settings-layout/account.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@krizaka/ui/button";
+import { Field, Input, Select } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+import { Switch } from "@krizaka/ui/switch";
+
+const NAV = [
+  { id: "profile", label: "Profile", href: "#profile", current: true },
+  { id: "notifications", label: "Notifications", href: "#notifications" },
+  { id: "payouts", label: "Payouts", href: "#payouts" },
+  { id: "security", label: "Security", href: "#security" },
+];
+
+// TEMPLATE — account settings: the sections on the left (a row of chips that scrolls on a phone), each form a titled
+// card with its own save, so a change in one never waits for another.
+export default function SettingsLayoutAccount() {
+  return (
+    <SettingsLayout className="w-full" title="Settings" description="Your profile, what we tell you and how you are paid." nav={NAV} navLabel="Settings sections">
+      <SettingsSection
+        id="profile"
+        title="Profile"
+        description="What your fans see."
+        footer={<Button size="sm" variant="primary" shape="cut">Save the profile</Button>}
+      >
+        <Field.Root>
+          <Field.Label htmlFor="settings-name">Display name</Field.Label>
+          <Input id="settings-name" defaultValue="Elena Varga" />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label htmlFor="settings-language">Language</Field.Label>
+          <Select id="settings-language" defaultValue="fr">
+            <option value="en">English</option>
+            <option value="fr">Français</option>
+          </Select>
+        </Field.Root>
+      </SettingsSection>
+      <SettingsSection id="notifications" title="Notifications" description="Only what you ask for.">
+        {[
+          { id: "unlock", label: "A fan unlocks a video", on: true },
+          { id: "auction", label: "An auction ends", on: true },
+          { id: "weekly", label: "Weekly summary by email", on: false },
+        ].map((n) => (
+          <div key={n.id} className="flex items-center justify-between gap-4 text-sm text-fg">
+            <span id={`notify-${n.id}`}>{n.label}</span>
+            <Switch aria-labelledby={`notify-${n.id}`} defaultChecked={n.on} />
+          </div>
+        ))}
+      </SettingsSection>
+    </SettingsLayout>
+  );
+}

package/registry/examples/settings-layout/sections.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/settings-layout/sections.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/settings-layout/sections.tsx
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsLayoutSections() {
+  return /* @__PURE__ */ jsx(
+    SettingsLayout,
+    {
+      className: "w-full",
+      nav: [
+        { id: "workspace", label: "Workspace", href: "#workspace", current: true },
+        { id: "models", label: "Models", href: "#models" }
+      ],
+      navLabel: "Settings sections",
+      children: /* @__PURE__ */ jsx(SettingsSection, { title: "Workspace", footer: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Save" }), children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { htmlFor: "sections-name", children: "Name" }),
+        /* @__PURE__ */ jsx(Input, { id: "sections-name", defaultValue: "Tremblay & associ\xE9s" })
+      ] }) })
+    }
+  );
+}
+export {
+  SettingsLayoutSections as default
+};

package/registry/examples/settings-layout/sections.tsx

@@ -0,0 +1,24 @@
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+
+// One section per page: the navigation's links are pages, the current one is marked.
+export default function SettingsLayoutSections() {
+  return (
+    <SettingsLayout
+      className="w-full"
+      nav={[
+        { id: "workspace", label: "Workspace", href: "#workspace", current: true },
+        { id: "models", label: "Models", href: "#models" },
+      ]}
+      navLabel="Settings sections"
+    >
+      <SettingsSection title="Workspace" footer={<Button size="sm" variant="primary" shape="cut">Save</Button>}>
+        <Field.Root>
+          <Field.Label htmlFor="sections-name">Name</Field.Label>
+          <Input id="sections-name" defaultValue="Tremblay & associés" />
+        </Field.Root>
+      </SettingsSection>
+    </SettingsLayout>
+  );
+}

package/registry/examples/split-view/empty.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/split-view/empty.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/split-view/empty.tsx
+import { SplitView } from "@krizaka/ui/split-view";
+import { jsx } from "react/jsx-runtime";
+function SplitViewEmpty() {
+  return /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      className: "w-full",
+      listTitle: "Moderation",
+      list: /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-fg-secondary", children: "5 comments waiting." }),
+      empty: "Choose a comment to review it."
+    }
+  );
+}
+export {
+  SplitViewEmpty as default
+};

package/registry/examples/split-view/empty.tsx

@@ -0,0 +1,13 @@
+import { SplitView } from "@krizaka/ui/split-view";
+
+// Nothing open yet: the detail pane says what to do (desktop); on a phone only the list shows.
+export default function SplitViewEmpty() {
+  return (
+    <SplitView
+      className="w-full"
+      listTitle="Moderation"
+      list={<p className="p-4 text-sm text-fg-secondary">5 comments waiting.</p>}
+      empty="Choose a comment to review it."
+    />
+  );
+}

package/registry/examples/split-view/messages.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/split-view/messages.js

@@ -0,0 +1,49 @@
+"use client";
+
+// registry/examples/split-view/messages.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { Field, Textarea } from "@krizaka/ui/field";
+import { SplitView } from "@krizaka/ui/split-view";
+import { jsx, jsxs } from "react/jsx-runtime";
+var THREADS = [
+  { id: "lea", name: "L\xE9a M.", last: "Will part 3 be out before Friday?", time: "09:12", unread: true },
+  { id: "samir", name: "Samir K.", last: "Thanks for the backstage cut!", time: "Yesterday" },
+  { id: "ines", name: "In\xE8s B.", last: "I won the auction \u{1F389}", time: "Mon" }
+];
+function SplitViewMessages() {
+  return /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      className: "w-full",
+      listTitle: "Messages",
+      showDetail: true,
+      back: /* @__PURE__ */ jsx("a", { href: "#messages", className: "text-sm font-medium text-fg-secondary", children: "\u2190 Messages" }),
+      list: /* @__PURE__ */ jsx("ul", { children: THREADS.map((t, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: `#${t.id}`, "aria-current": i === 0 ? "page" : void 0, className: "flex items-center gap-3 border-b border-border-subtle px-4 py-3 text-sm no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft", children: [
+        /* @__PURE__ */ jsx(Avatar, { fallback: t.name.slice(0, 2), size: "sm" }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-fg", children: t.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-secondary", children: t.time })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: t.unread ? "block truncate font-medium text-fg" : "block truncate text-fg-secondary", children: t.last })
+        ] })
+      ] }) }, t.id)) }),
+      detailHead: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-fg", children: "L\xE9a M." }),
+      detail: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "max-w-[80%] rounded-2xl rounded-bl-md bg-surface-2 px-3.5 py-2 text-sm text-fg", children: "Will part 3 be out before Friday?" }),
+        /* @__PURE__ */ jsx("p", { className: "ml-auto max-w-[80%] rounded-2xl rounded-br-md bg-accent-soft px-3.5 py-2 text-sm text-fg", children: "Thursday evening \u2014 you'll be the first to know." }),
+        /* @__PURE__ */ jsxs("form", { className: "mt-auto flex items-end gap-2", children: [
+          /* @__PURE__ */ jsxs(Field.Root, { className: "flex-1", children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "reply", className: "sr-only", children: "Reply to L\xE9a" }),
+            /* @__PURE__ */ jsx(Textarea, { id: "reply", rows: 2, placeholder: "Write a reply\u2026" })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", shape: "cut", children: "Send" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  SplitViewMessages as default
+};

package/registry/examples/split-view/messages.tsx

@@ -0,0 +1,52 @@
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { Field, Textarea } from "@krizaka/ui/field";
+import { SplitView } from "@krizaka/ui/split-view";
+
+const THREADS = [
+  { id: "lea", name: "Léa M.", last: "Will part 3 be out before Friday?", time: "09:12", unread: true },
+  { id: "samir", name: "Samir K.", last: "Thanks for the backstage cut!", time: "Yesterday" },
+  { id: "ines", name: "Inès B.", last: "I won the auction 🎉", time: "Mon" },
+];
+
+// TEMPLATE — a creator's messages (Orochia): the threads beside the open one; on a phone the open thread replaces the
+// list (`showDetail`, from the address) with the way back above it. The reply box stays at the foot of the thread.
+export default function SplitViewMessages() {
+  return (
+    <SplitView
+      className="w-full"
+      listTitle="Messages"
+      showDetail
+      back={<a href="#messages" className="text-sm font-medium text-fg-secondary">← Messages</a>}
+      list={
+        <ul>
+          {THREADS.map((t, i) => (
+            <li key={t.id}>
+              <a href={`#${t.id}`} aria-current={i === 0 ? "page" : undefined} className="flex items-center gap-3 border-b border-border-subtle px-4 py-3 text-sm no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft">
+                <Avatar fallback={t.name.slice(0, 2)} size="sm" />
+                <span className="min-w-0 flex-1">
+                  <span className="flex justify-between gap-2"><span className="font-semibold text-fg">{t.name}</span><span className="text-xs text-fg-secondary">{t.time}</span></span>
+                  <span className={t.unread ? "block truncate font-medium text-fg" : "block truncate text-fg-secondary"}>{t.last}</span>
+                </span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      }
+      detailHead={<span className="text-sm font-bold text-fg">Léa M.</span>}
+      detail={
+        <div className="flex h-full flex-col gap-4">
+          <p className="max-w-[80%] rounded-2xl rounded-bl-md bg-surface-2 px-3.5 py-2 text-sm text-fg">Will part 3 be out before Friday?</p>
+          <p className="ml-auto max-w-[80%] rounded-2xl rounded-br-md bg-accent-soft px-3.5 py-2 text-sm text-fg">Thursday evening — you'll be the first to know.</p>
+          <form className="mt-auto flex items-end gap-2">
+            <Field.Root className="flex-1">
+              <Field.Label htmlFor="reply" className="sr-only">Reply to Léa</Field.Label>
+              <Textarea id="reply" rows={2} placeholder="Write a reply…" />
+            </Field.Root>
+            <Button type="submit" variant="primary" shape="cut">Send</Button>
+          </form>
+        </div>
+      }
+    />
+  );
+}

package/registry/examples/stage-banner/round.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/stage-banner/round.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/stage-banner/round.tsx
+import { StageBanner } from "@krizaka/ui/stage-banner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StageBannerRound() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-10", children: [
+    /* @__PURE__ */ jsx(StageBanner, { size: "lg", titleAs: "h3", stage: "Chapter 3", title: "Get paid on your terms", subtitle: "Tips, challenges and auctions \u2014 90 % to you." }),
+    /* @__PURE__ */ jsx(StageBanner, { size: "lg", variant: "arcade", stage: "Final round", title: "The last boss", subtitle: "Eight heads, one by one." })
+  ] });
+}
+export {
+  StageBannerRound as default
+};

package/registry/examples/stage-banner/round.tsx

@@ -0,0 +1,11 @@
+import { StageBanner } from "@krizaka/ui/stage-banner";
+
+// `size="lg"`: a section's opening — the stage, a title (a heading here) and a line.
+export default function StageBannerRound() {
+  return (
+    <div className="grid gap-10">
+      <StageBanner size="lg" titleAs="h3" stage="Chapter 3" title="Get paid on your terms" subtitle="Tips, challenges and auctions — 90 % to you." />
+      <StageBanner size="lg" variant="arcade" stage="Final round" title="The last boss" subtitle="Eight heads, one by one." />
+    </div>
+  );
+}

package/registry/examples/stage-banner/steps.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/stage-banner/steps.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/stage-banner/steps.tsx
+import { StageBanner } from "@krizaka/ui/stage-banner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StageBannerSteps() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid justify-items-start gap-4", children: [
+    /* @__PURE__ */ jsx(StageBanner, { stage: "Step 02", name: "Payments" }),
+    /* @__PURE__ */ jsx(StageBanner, { variant: "arcade", stage: "Stage 02", name: "Orazaka" })
+  ] });
+}
+export {
+  StageBannerSteps as default
+};

package/registry/examples/stage-banner/steps.tsx

@@ -0,0 +1,11 @@
+import { StageBanner } from "@krizaka/ui/stage-banner";
+
+// Before a chapter's heading: where the reader is. Sober by default; `variant="arcade"` for a told page.
+export default function StageBannerSteps() {
+  return (
+    <div className="grid justify-items-start gap-4">
+      <StageBanner stage="Step 02" name="Payments" />
+      <StageBanner variant="arcade" stage="Stage 02" name="Orazaka" />
+    </div>
+  );
+}

package/registry/field.json

@@ -147,7 +147,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"action-bar\"\n  | \"alert\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [

package/registry/file-upload.json

@@ -279,7 +279,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"action-bar\"\n  | \"alert\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [