@krizaka/ui 3.9.0 → 3.11.0

package/registry/examples/card-grid/aligned.tsx

@@ -0,0 +1,16 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Facts } from "@krizaka/ui/page";
+
+// A row of cards whose sentences have different lengths: the cells share one height and each card pins its facts
+// and its way in to the bottom, so the status and the link of every card sit on the same line.
+export default function CardGridAligned() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={220} columns={3} reveal={false}>
+      <LinkCard layout="stack" href="#orazaka" icon={<ProductLogo id="orazaka" size={28} animated={false} />} title="Orazaka" description="Sovereign AI on your own servers: chat, image, video and voice." extra={<Facts items={[{ label: "Dev preview", tone: "ok" }]} />} cta="Open orazaka" />
+      <LinkCard layout="stack" href="#orochia" icon={<ProductLogo id="orochia" size={28} animated={false} />} title="Orochia" description="Creators, paid." extra={<Facts items={[{ label: "Coming soon", tone: "wip" }]} />} cta="Open orochia" />
+      <LinkCard layout="stack" href="#yororis" icon={<ProductLogo id="yororis" size={28} animated={false} />} title="Yororis" description="A quiet place to keep what matters to you, built around the moments of a day and the threads between them." extra={<Facts items={[{ label: "Under construction", tone: "wip" }]} />} cta="Open yororis" />
+    </CardGrid>
+  );
+}

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/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;

package/registry/examples/showcase/slides.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/showcase/slides.tsx
+import { Showcase } from "@krizaka/ui/showcase";
+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 ShowcaseSlides() {
+  return /* @__PURE__ */ jsx(
+    Showcase,
+    {
+      label: "How it works",
+      className: "w-full max-w-md",
+      items: SLIDES,
+      getId: (s) => s.id,
+      getTitle: (s) => s.title,
+      interval: 4e3,
+      transition: "slide",
+      loop: false,
+      renderItem: (s) => /* @__PURE__ */ jsx("p", { className: "m-0 rounded-xl border border-border-default bg-surface-1 p-6 text-fg", children: s.body })
+    }
+  );
+}
+export {
+  ShowcaseSlides as default
+};

package/registry/examples/showcase/slides.tsx

@@ -0,0 +1,24 @@
+import { Showcase } from "@krizaka/ui/showcase";
+
+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." },
+];
+
+// Any content in a slide; 4 s each, a slide effect, no loop back to the first. The pointer, a keyboard focus and a hidden tab hold it still.
+export default function ShowcaseSlides() {
+  return (
+    <Showcase
+      label="How it works"
+      className="w-full max-w-md"
+      items={SLIDES}
+      getId={(s) => s.id}
+      getTitle={(s) => s.title}
+      interval={4000}
+      transition="slide"
+      loop={false}
+      renderItem={(s) => <p className="m-0 rounded-xl border border-border-default bg-surface-1 p-6 text-fg">{s.body}</p>}
+    />
+  );
+}

package/registry/examples/site-footer/company.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/site-footer/company.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/site-footer/company.tsx
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SiteFooterCompany() {
+  return /* @__PURE__ */ jsx(
+    SiteFooter,
+    {
+      current: "krizaka",
+      labels: familyLabels.en,
+      legal: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#privacy", children: "Privacy" }),
+        /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#terms", children: "Terms" })
+      ] }),
+      children: /* @__PURE__ */ jsxs(SiteFooter.Column, { title: "Company", children: [
+        /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#story", active: true, children: "Our story" }),
+        /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#contact", children: "Contact" })
+      ] })
+    }
+  );
+}
+export {
+  SiteFooterCompany as default
+};

package/registry/examples/site-footer/company.tsx

@@ -0,0 +1,23 @@
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+
+// www.krizaka.com: “A Krizaka company”, the company's own columns, the legal links at the end of the signature line.
+export default function SiteFooterCompany() {
+  return (
+    <SiteFooter
+      current="krizaka"
+      labels={familyLabels.en}
+      legal={
+        <>
+          <SiteFooter.Link href="#privacy">Privacy</SiteFooter.Link>
+          <SiteFooter.Link href="#terms">Terms</SiteFooter.Link>
+        </>
+      }
+    >
+      <SiteFooter.Column title="Company">
+        <SiteFooter.Link href="#story" active>Our story</SiteFooter.Link>
+        <SiteFooter.Link href="#contact">Contact</SiteFooter.Link>
+      </SiteFooter.Column>
+    </SiteFooter>
+  );
+}