@krizaka/ui 3.8.0 → 3.10.0

package/registry/examples/markdown/native/basic.tsx

@@ -0,0 +1,27 @@
+import { Markdown } from "@krizaka/ui/native/markdown";
+import { View } from "react-native";
+
+const text = `## What changed in 3.9
+
+The queue now **retries** a failed upload with a backoff, and \`pause\` keeps its place.
+
+- Pause, resume and retry per file
+- A 429 waits for its \`Retry-After\`
+
+| Entry | Size |
+| :--- | ---: |
+| \`@krizaka/pacer\` | 2 kB |
+
+\`\`\`ts title="uploads.ts"
+const queue = createQueue({ retries: 3 });
+\`\`\`
+`;
+
+// The same text as the web example, in Text and View; a link calls `onLinkPress` with its address.
+export default function NativeMarkdownBasic() {
+  return (
+    <View style={{ width: 340 }}>
+      <Markdown onLinkPress={() => {}}>{text}</Markdown>
+    </View>
+  );
+}

package/registry/examples/nav-bar/family-admin.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/nav-bar/family-admin.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/nav-bar/family-admin.tsx
+import { OrochiaLogo } from "@krizaka/ui";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavBarFamilyAdmin() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Console", floating: false, compactAfter: false, children: [
+    /* @__PURE__ */ jsxs(NavBar.Brand, { href: "#home", children: [
+      /* @__PURE__ */ jsx(OrochiaLogo, { size: 22 }),
+      "Orochia admin"
+    ] }),
+    /* @__PURE__ */ jsx(NavBar.Family, { current: "orochia", labels: familyLabels.en }),
+    /* @__PURE__ */ jsx(NavBar.Badge, { env: "DEV" }),
+    /* @__PURE__ */ jsx(NavBar.Actions, { children: /* @__PURE__ */ jsx(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: /* @__PURE__ */ jsx(NavBar.Family, { current: "orochia", labels: familyLabels.en }) }) })
+  ] });
+}
+export {
+  NavBarFamilyAdmin as default
+};

package/registry/examples/nav-bar/family-admin.tsx

@@ -0,0 +1,20 @@
+import { OrochiaLogo } from "@krizaka/ui";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+
+// admin.<product>: a console — the mark, the family and `DEV`, no sections, a full-width bar. The family still says
+// where the console belongs; the mobile panel holds only the family.
+export default function NavBarFamilyAdmin() {
+  return (
+    <NavBar.Root label="Console" floating={false} compactAfter={false}>
+      <NavBar.Brand href="#home"><OrochiaLogo size={22} />Orochia admin</NavBar.Brand>
+      <NavBar.Family current="orochia" labels={familyLabels.en} />
+      <NavBar.Badge env="DEV" />
+      <NavBar.Actions>
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          <NavBar.Family current="orochia" labels={familyLabels.en} />
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/family-java.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/nav-bar/family-java.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/nav-bar/family-java.tsx
+import { KrizakaLogo } from "@krizaka/ui";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+var links = [
+  { href: "#start", label: "Get started" },
+  { href: "#blocks", label: "Building blocks" },
+  { href: "#guides", label: "Guides" }
+];
+function NavBarFamilyJava() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", children: [
+    /* @__PURE__ */ jsxs(NavBar.Brand, { href: "#home", children: [
+      /* @__PURE__ */ jsx(KrizakaLogo, { size: 22 }),
+      "Krizaka Java"
+    ] }),
+    /* @__PURE__ */ jsx(NavBar.Family, { current: "java", labels: familyLabels.en }),
+    /* @__PURE__ */ jsx(NavBar.Badge, { version: "0.1.0" }),
+    /* @__PURE__ */ jsx(NavBar.Items, { children: links.map((l) => /* @__PURE__ */ jsx(NavBar.Link, { href: l.href, active: l.href === "#blocks", children: l.label }, l.href)) }),
+    /* @__PURE__ */ jsxs(NavBar.Actions, { children: [
+      /* @__PURE__ */ jsx(NavBar.Repo, { href: "https://github.com/krizaka/krizaka-build", label: "Source on GitHub" }),
+      /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+        links.map((l) => /* @__PURE__ */ jsx(NavBar.MobileLink, { href: l.href, children: l.label }, l.href)),
+        /* @__PURE__ */ jsx(NavBar.Family, { current: "java", labels: familyLabels.en })
+      ] })
+    ] })
+  ] });
+}
+export {
+  NavBarFamilyJava as default
+};

package/registry/examples/nav-bar/family-java.tsx

@@ -0,0 +1,34 @@
+import { KrizakaLogo } from "@krizaka/ui";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+
+const links = [
+  { href: "#start", label: "Get started" },
+  { href: "#blocks", label: "Building blocks" },
+  { href: "#guides", label: "Guides" },
+];
+
+// java.krizaka.com: Krizaka Java, the version of the building blocks, three sections, the repository.
+export default function NavBarFamilyJava() {
+  return (
+    <NavBar.Root label="Main">
+      <NavBar.Brand href="#home"><KrizakaLogo size={22} />Krizaka Java</NavBar.Brand>
+      <NavBar.Family current="java" labels={familyLabels.en} />
+      <NavBar.Badge version="0.1.0" />
+      <NavBar.Items>
+        {links.map((l) => (
+          <NavBar.Link key={l.href} href={l.href} active={l.href === "#blocks"}>{l.label}</NavBar.Link>
+        ))}
+      </NavBar.Items>
+      <NavBar.Actions>
+        <NavBar.Repo href="https://github.com/krizaka/krizaka-build" label="Source on GitHub" />
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          {links.map((l) => (
+            <NavBar.MobileLink key={l.href} href={l.href}>{l.label}</NavBar.MobileLink>
+          ))}
+          <NavBar.Family current="java" labels={familyLabels.en} />
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/family-product.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/nav-bar/family-product.js

@@ -0,0 +1,35 @@
+"use client";
+
+// registry/examples/nav-bar/family-product.tsx
+import { OrazakaLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+var links = [
+  { href: "#how", label: "How it works" },
+  { href: "#demo", label: "Demo" },
+  { href: "#docs", label: "Docs" }
+];
+function NavBarFamilyProduct() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", children: [
+    /* @__PURE__ */ jsxs(NavBar.Brand, { href: "#home", children: [
+      /* @__PURE__ */ jsx(OrazakaLogo, { size: 22 }),
+      "Orazaka"
+    ] }),
+    /* @__PURE__ */ jsx(NavBar.Family, { current: "orazaka", labels: familyLabels.en }),
+    /* @__PURE__ */ jsx(NavBar.Badge, { env: "DEV", version: "1.2.3" }),
+    /* @__PURE__ */ jsx(NavBar.Items, { children: links.map((l) => /* @__PURE__ */ jsx(NavBar.Link, { href: l.href, active: l.href === "#how", children: l.label }, l.href)) }),
+    /* @__PURE__ */ jsxs(NavBar.Actions, { children: [
+      /* @__PURE__ */ jsx(NavBar.Repo, { href: "https://github.com/krizaka/orazaka", label: "Source on GitHub" }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "primary", size: "sm", shape: "pill", className: "hidden sm:inline-flex", children: /* @__PURE__ */ jsx("a", { href: "https://www.krizaka.com/contact?topic=orazaka", children: "Talk to us" }) }),
+      /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+        links.map((l) => /* @__PURE__ */ jsx(NavBar.MobileLink, { href: l.href, children: l.label }, l.href)),
+        /* @__PURE__ */ jsx(NavBar.Family, { current: "orazaka", labels: familyLabels.en })
+      ] })
+    ] })
+  ] });
+}
+export {
+  NavBarFamilyProduct as default
+};

package/registry/examples/nav-bar/family-product.tsx

@@ -0,0 +1,39 @@
+import { OrazakaLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+
+const links = [
+  { href: "#how", label: "How it works" },
+  { href: "#demo", label: "Demo" },
+  { href: "#docs", label: "Docs" },
+];
+
+// dev.orazaka.com: the product's mark and the family, `DEV · v1.2.3`, three sections, and “Talk to us” on
+// krizaka.com while sign-up is closed.
+export default function NavBarFamilyProduct() {
+  return (
+    <NavBar.Root label="Main">
+      <NavBar.Brand href="#home"><OrazakaLogo size={22} />Orazaka</NavBar.Brand>
+      <NavBar.Family current="orazaka" labels={familyLabels.en} />
+      <NavBar.Badge env="DEV" version="1.2.3" />
+      <NavBar.Items>
+        {links.map((l) => (
+          <NavBar.Link key={l.href} href={l.href} active={l.href === "#how"}>{l.label}</NavBar.Link>
+        ))}
+      </NavBar.Items>
+      <NavBar.Actions>
+        <NavBar.Repo href="https://github.com/krizaka/orazaka" label="Source on GitHub" />
+        <Button asChild variant="primary" size="sm" shape="pill" className="hidden sm:inline-flex">
+          <a href="https://www.krizaka.com/contact?topic=orazaka">Talk to us</a>
+        </Button>
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          {links.map((l) => (
+            <NavBar.MobileLink key={l.href} href={l.href}>{l.label}</NavBar.MobileLink>
+          ))}
+          <NavBar.Family current="orazaka" labels={familyLabels.en} />
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/family-ui.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/nav-bar/family-ui.js

@@ -0,0 +1,34 @@
+"use client";
+
+// registry/examples/nav-bar/family-ui.tsx
+import { KrizakaLogo } from "@krizaka/ui";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+var links = [
+  { href: "#start", label: "Get started" },
+  { href: "#foundations", label: "Foundations" },
+  { href: "#components", label: "Components" },
+  { href: "#templates", label: "Templates" }
+];
+function NavBarFamilyUi() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", children: [
+    /* @__PURE__ */ jsxs(NavBar.Brand, { href: "#home", children: [
+      /* @__PURE__ */ jsx(KrizakaLogo, { size: 22 }),
+      "Krizaka UI"
+    ] }),
+    /* @__PURE__ */ jsx(NavBar.Family, { current: "ui", labels: familyLabels.en }),
+    /* @__PURE__ */ jsx(NavBar.Badge, { version: "3.9.0" }),
+    /* @__PURE__ */ jsx(NavBar.Items, { children: links.map((l) => /* @__PURE__ */ jsx(NavBar.Link, { href: l.href, active: l.href === "#components", children: l.label }, l.href)) }),
+    /* @__PURE__ */ jsxs(NavBar.Actions, { children: [
+      /* @__PURE__ */ jsx(NavBar.Repo, { href: "https://github.com/krizaka/krizaka-ui", label: "Source on GitHub" }),
+      /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+        links.map((l) => /* @__PURE__ */ jsx(NavBar.MobileLink, { href: l.href, children: l.label }, l.href)),
+        /* @__PURE__ */ jsx(NavBar.Family, { current: "ui", labels: familyLabels.en })
+      ] })
+    ] })
+  ] });
+}
+export {
+  NavBarFamilyUi as default
+};

package/registry/examples/nav-bar/family-ui.tsx

@@ -0,0 +1,35 @@
+import { KrizakaLogo } from "@krizaka/ui";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+
+const links = [
+  { href: "#start", label: "Get started" },
+  { href: "#foundations", label: "Foundations" },
+  { href: "#components", label: "Components" },
+  { href: "#templates", label: "Templates" },
+];
+
+// ui.krizaka.com: Krizaka UI and its family switcher, the version of the packages, four sections, the repository.
+export default function NavBarFamilyUi() {
+  return (
+    <NavBar.Root label="Main">
+      <NavBar.Brand href="#home"><KrizakaLogo size={22} />Krizaka UI</NavBar.Brand>
+      <NavBar.Family current="ui" labels={familyLabels.en} />
+      <NavBar.Badge version="3.9.0" />
+      <NavBar.Items>
+        {links.map((l) => (
+          <NavBar.Link key={l.href} href={l.href} active={l.href === "#components"}>{l.label}</NavBar.Link>
+        ))}
+      </NavBar.Items>
+      <NavBar.Actions>
+        <NavBar.Repo href="https://github.com/krizaka/krizaka-ui" label="Source on GitHub" />
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          {links.map((l) => (
+            <NavBar.MobileLink key={l.href} href={l.href}>{l.label}</NavBar.MobileLink>
+          ))}
+          <NavBar.Family current="ui" labels={familyLabels.en} />
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/family-www.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/nav-bar/family-www.js

@@ -0,0 +1,34 @@
+"use client";
+
+// registry/examples/nav-bar/family-www.tsx
+import { KrizakaLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+var links = [
+  { href: "#products", label: "Products" },
+  { href: "#open-source", label: "Open source" },
+  { href: "#story", label: "Our story" }
+];
+function NavBarFamilyWww({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", className: defaultOpen ? "mb-[30rem]" : void 0, children: [
+    /* @__PURE__ */ jsxs(NavBar.Brand, { href: "#home", children: [
+      /* @__PURE__ */ jsx(KrizakaLogo, { size: 22 }),
+      "Krizaka"
+    ] }),
+    /* @__PURE__ */ jsx(NavBar.Family, { current: "krizaka", labels: familyLabels.en, defaultOpen }),
+    /* @__PURE__ */ jsx(NavBar.Items, { children: links.map((l) => /* @__PURE__ */ jsx(NavBar.Link, { href: l.href, active: l.href === "#products", children: l.label }, l.href)) }),
+    /* @__PURE__ */ jsxs(NavBar.Actions, { children: [
+      /* @__PURE__ */ jsx(NavBar.Repo, { href: "https://github.com/krizaka/krizaka-com", label: "Source on GitHub" }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", shape: "pill", className: "hidden sm:inline-flex", children: "Contact" }),
+      /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+        links.map((l) => /* @__PURE__ */ jsx(NavBar.MobileLink, { href: l.href, children: l.label }, l.href)),
+        /* @__PURE__ */ jsx(NavBar.Family, { current: "krizaka", labels: familyLabels.en })
+      ] })
+    ] })
+  ] });
+}
+export {
+  NavBarFamilyWww as default
+};

package/registry/examples/nav-bar/family-www.tsx

@@ -0,0 +1,36 @@
+import { KrizakaLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { familyLabels } from "@krizaka/ui/sites";
+
+const links = [
+  { href: "#products", label: "Products" },
+  { href: "#open-source", label: "Open source" },
+  { href: "#story", label: "Our story" },
+];
+
+// www.krizaka.com: who I am (the mark and the family switcher) · this site (three sections) · tools (the repository,
+// one action). The chevron opens the family; the mobile panel ends with it.
+export default function NavBarFamilyWww({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <NavBar.Root label="Main" className={defaultOpen ? "mb-[30rem]" : undefined}>
+      <NavBar.Brand href="#home"><KrizakaLogo size={22} />Krizaka</NavBar.Brand>
+      <NavBar.Family current="krizaka" labels={familyLabels.en} defaultOpen={defaultOpen} />
+      <NavBar.Items>
+        {links.map((l) => (
+          <NavBar.Link key={l.href} href={l.href} active={l.href === "#products"}>{l.label}</NavBar.Link>
+        ))}
+      </NavBar.Items>
+      <NavBar.Actions>
+        <NavBar.Repo href="https://github.com/krizaka/krizaka-com" label="Source on GitHub" />
+        <Button variant="primary" size="sm" shape="pill" className="hidden sm:inline-flex">Contact</Button>
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          {links.map((l) => (
+            <NavBar.MobileLink key={l.href} href={l.href}>{l.label}</NavBar.MobileLink>
+          ))}
+          <NavBar.Family current="krizaka" labels={familyLabels.en} />
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/recipes/tone-chip.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/recipes/tone-chip.js

@@ -0,0 +1,46 @@
+"use client";
+
+// registry/examples/recipes/tone-chip.tsx
+import { defineRecipe, nativeRecipe } from "@krizaka/ui/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var recipe = defineRecipe({
+  base: "inline-flex items-center rounded-full font-semibold",
+  variants: {
+    tone: { calm: "bg-surface-3 text-fg-secondary", loud: "bg-accent text-on-accent hover:bg-accent-hover" },
+    size: { sm: "h-7 px-3 text-xs", md: "h-9 px-4 text-sm" }
+  },
+  defaultVariants: { tone: "calm", size: "md" }
+});
+var phone = nativeRecipe(recipe);
+var theme = { accent: "accent-colour", onAccent: "on-accent-colour", surface3: "surface-colour", textSecondary: "text-colour" };
+function RecipeToneChip() {
+  return /* @__PURE__ */ jsx("ul", { className: "grid gap-2 text-sm text-fg", children: ["calm", "loud"].flatMap(
+    (tone) => ["sm", "md"].map((size) => {
+      const { frame, text, ignored } = phone.resolve({ tone, size }, theme).base;
+      return /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsxs("b", { children: [
+          tone,
+          " \xB7 ",
+          size
+        ] }),
+        ": ",
+        frame.height,
+        " pt high, ",
+        frame.paddingHorizontal,
+        " pt sides, ",
+        text.fontSize,
+        " pt type, ",
+        frame.backgroundColor,
+        " behind ",
+        text.color,
+        /* @__PURE__ */ jsxs("span", { className: "text-fg-secondary", children: [
+          " \u2014 web only: ",
+          ignored.join(" ")
+        ] })
+      ] }, `${tone}-${size}`);
+    })
+  ) });
+}
+export {
+  RecipeToneChip as default
+};

package/registry/examples/recipes/tone-chip.tsx

@@ -0,0 +1,32 @@
+import { defineRecipe, nativeRecipe } from "@krizaka/ui/recipes";
+
+// A recipe is data: the classes of the tokens, written once. `tv(recipe)` makes the web's classes from it; the phone
+// reads the same classes into styles on the roles of its theme.
+const recipe = defineRecipe({
+  base: "inline-flex items-center rounded-full font-semibold",
+  variants: {
+    tone: { calm: "bg-surface-3 text-fg-secondary", loud: "bg-accent text-on-accent hover:bg-accent-hover" },
+    size: { sm: "h-7 px-3 text-xs", md: "h-9 px-4 text-sm" },
+  },
+  defaultVariants: { tone: "calm", size: "md" },
+});
+const phone = nativeRecipe(recipe);
+const theme = { accent: "accent-colour", onAccent: "on-accent-colour", surface3: "surface-colour", textSecondary: "text-colour" };
+
+export default function RecipeToneChip() {
+  return (
+    <ul className="grid gap-2 text-sm text-fg">
+      {(["calm", "loud"] as const).flatMap((tone) =>
+        (["sm", "md"] as const).map((size) => {
+          const { frame, text, ignored } = phone.resolve({ tone, size }, theme).base!;
+          return (
+            <li key={`${tone}-${size}`}>
+              <b>{tone} · {size}</b>: {frame.height} pt high, {frame.paddingHorizontal} pt sides, {text.fontSize} pt type, {frame.backgroundColor} behind {text.color}
+              <span className="text-fg-secondary"> — web only: {ignored.join(" ")}</span>
+            </li>
+          );
+        }),
+      )}
+    </ul>
+  );
+}

package/registry/examples/showcase/native/slides.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/showcase/native/slides.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/showcase/native/slides.tsx
+import { Showcase, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var SLIDES = [
+  { id: "1", title: "Describe it", body: "Write what you want in a sentence." },
+  { id: "2", title: "Generate it", body: "The model runs on your own machine." },
+  { id: "3", title: "Reproduce it", body: "Every result keeps its prompt and its seed." }
+];
+function NativeShowcaseSlides() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360 }, children: /* @__PURE__ */ jsx(
+    Showcase,
+    {
+      label: "How it works",
+      items: SLIDES,
+      getId: (s) => s.id,
+      getTitle: (s) => s.title,
+      interval: 5e3,
+      renderItem: (s) => /* @__PURE__ */ jsx(View, { style: { padding: 24 }, children: /* @__PURE__ */ jsx(Txt, { children: s.body }) })
+    }
+  ) });
+}
+export {
+  NativeShowcaseSlides as default
+};

package/registry/examples/showcase/native/slides.tsx

@@ -0,0 +1,28 @@
+import { Showcase, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+const SLIDES = [
+  { id: "1", title: "Describe it", body: "Write what you want in a sentence." },
+  { id: "2", title: "Generate it", body: "The model runs on your own machine." },
+  { id: "3", title: "Reproduce it", body: "Every result keeps its prompt and its seed." },
+];
+
+// Swipe or wait: the bar fills over 5 s and moves on; every segment is a button, the pause button stops it.
+export default function NativeShowcaseSlides() {
+  return (
+    <View style={{ width: 360 }}>
+      <Showcase
+        label="How it works"
+        items={SLIDES}
+        getId={(s) => s.id}
+        getTitle={(s) => s.title}
+        interval={5000}
+        renderItem={(s) => (
+          <View style={{ padding: 24 }}>
+            <Txt>{s.body}</Txt>
+          </View>
+        )}
+      />
+    </View>
+  );
+}

package/registry/examples/showcase/prompt-image.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/showcase/prompt-image.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/showcase/prompt-image.tsx
+import { Button } from "@krizaka/ui/button";
+import { Showcase, useTypedText } from "@krizaka/ui/showcase";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CDN = "https://krizaka-assets.b-cdn.net/site/people/ui";
+var SHOTS = [
+  { id: "a", title: "Golden-hour editorial", prompt: "A woman on a rooftop at golden hour, soft rim light, 85mm.", src: `${CDN}/camille-512.9573eaa0b8.webp` },
+  { id: "b", title: "Sunday market", prompt: "A man choosing peaches at a market stall, warm morning haze.", src: `${CDN}/tomas-256.7eaab80903.webp` },
+  { id: "c", title: "Backstage", prompt: "A singer in a dressing-room mirror, tungsten bulbs, grain.", src: `${CDN}/noor-256.c340c41421.webp` }
+];
+function Slide({ shot, active }) {
+  const typed = useTypedText(shot.prompt, { active });
+  return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-6 sm:grid-cols-2", children: [
+    /* @__PURE__ */ jsx("img", { src: shot.src, alt: shot.title, className: "aspect-square w-full rounded-xl object-cover" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "sr-only", children: shot.prompt }),
+      /* @__PURE__ */ jsx("p", { "aria-hidden": true, className: "m-0 min-h-20 font-mono text-sm text-fg", children: typed.text }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Reproduce it" })
+    ] })
+  ] });
+}
+function ShowcasePromptImage() {
+  return /* @__PURE__ */ jsx(Showcase, { label: "Prompt to image", className: "w-full max-w-3xl", items: SHOTS, getId: (s) => s.id, getTitle: (s) => s.title, renderItem: (shot, { active }) => /* @__PURE__ */ jsx(Slide, { shot, active }) });
+}
+export {
+  ShowcasePromptImage as default
+};

package/registry/examples/showcase/prompt-image.tsx

@@ -0,0 +1,28 @@
+import { Button } from "@krizaka/ui/button";
+import { Showcase, useTypedText } from "@krizaka/ui/showcase";
+
+const CDN = "https://krizaka-assets.b-cdn.net/site/people/ui";
+const SHOTS = [
+  { id: "a", title: "Golden-hour editorial", prompt: "A woman on a rooftop at golden hour, soft rim light, 85mm.", src: `${CDN}/camille-512.9573eaa0b8.webp` },
+  { id: "b", title: "Sunday market", prompt: "A man choosing peaches at a market stall, warm morning haze.", src: `${CDN}/tomas-256.7eaab80903.webp` },
+  { id: "c", title: "Backstage", prompt: "A singer in a dressing-room mirror, tungsten bulbs, grain.", src: `${CDN}/noor-256.c340c41421.webp` },
+];
+
+function Slide({ shot, active }: { shot: (typeof SHOTS)[number]; active: boolean }) {
+  const typed = useTypedText(shot.prompt, { active });
+  return (
+    <div className="grid items-center gap-6 sm:grid-cols-2">
+      <img src={shot.src} alt={shot.title} className="aspect-square w-full rounded-xl object-cover" />
+      <div className="flex flex-col items-start gap-3">
+        <p className="sr-only">{shot.prompt}</p>
+        <p aria-hidden className="m-0 min-h-20 font-mono text-sm text-fg">{typed.text}</p>
+        <Button variant="secondary" size="sm">Reproduce it</Button>
+      </div>
+    </div>
+  );
+}
+
+// Image left, prompt and action right; the bar below fills over 6 s and moves on, every segment is a button.
+export default function ShowcasePromptImage() {
+  return <Showcase label="Prompt to image" className="w-full max-w-3xl" items={SHOTS} getId={(s) => s.id} getTitle={(s) => s.title} renderItem={(shot, { active }) => <Slide shot={shot} active={active} />} />;
+}

package/registry/examples/showcase/slides.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;