@krizaka/ui 3.9.0 → 3.10.0

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>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/site-footer/open-source-fr.tsx
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SiteFooterOpenSourceFr() {
+  return /* @__PURE__ */ jsx(SiteFooter, { current: "ui", labels: familyLabels.fr, version: "3.9.0", children: /* @__PURE__ */ jsxs(SiteFooter.Column, { title: "Documentation", children: [
+    /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#start", children: "D\xE9marrer" }),
+    /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#foundations", children: "Fondations" }),
+    /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#components", children: "Composants" }),
+    /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#templates", children: "Mod\xE8les" })
+  ] }) });
+}
+export {
+  SiteFooterOpenSourceFr as default
+};

package/registry/examples/site-footer/open-source-fr.tsx

@@ -0,0 +1,17 @@
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+
+// ui.krizaka.com in French: « Un projet open source de Krizaka », the version of the packages, the words of the family
+// from `familyLabels.fr`.
+export default function SiteFooterOpenSourceFr() {
+  return (
+    <SiteFooter current="ui" labels={familyLabels.fr} version="3.9.0">
+      <SiteFooter.Column title="Documentation">
+        <SiteFooter.Link href="#start">Démarrer</SiteFooter.Link>
+        <SiteFooter.Link href="#foundations">Fondations</SiteFooter.Link>
+        <SiteFooter.Link href="#components">Composants</SiteFooter.Link>
+        <SiteFooter.Link href="#templates">Modèles</SiteFooter.Link>
+      </SiteFooter.Column>
+    </SiteFooter>
+  );
+}

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

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/site-footer/product.tsx
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SiteFooterProduct() {
+  return /* @__PURE__ */ jsxs(SiteFooter, { current: "orazaka", labels: familyLabels.en, env: "DEV", version: "1.2.3", children: [
+    /* @__PURE__ */ jsxs(SiteFooter.Column, { title: "Orazaka", children: [
+      /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#how", children: "How it works" }),
+      /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#demo", children: "Demo" }),
+      /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#docs", children: "Docs" })
+    ] }),
+    /* @__PURE__ */ jsxs(SiteFooter.Column, { title: "Talk to us", children: [
+      /* @__PURE__ */ jsx(SiteFooter.Link, { href: "https://www.krizaka.com/contact?topic=orazaka", children: "Contact" }),
+      /* @__PURE__ */ jsx(SiteFooter.Link, { href: "https://github.com/krizaka/orazaka", children: "Source" })
+    ] })
+  ] });
+}
+export {
+  SiteFooterProduct as default
+};

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

@@ -0,0 +1,19 @@
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+
+// A product's footer (dev.orazaka.com): its own columns, the family, “A Krizaka product”, the version it runs.
+export default function SiteFooterProduct() {
+  return (
+    <SiteFooter current="orazaka" labels={familyLabels.en} env="DEV" version="1.2.3">
+      <SiteFooter.Column title="Orazaka">
+        <SiteFooter.Link href="#how">How it works</SiteFooter.Link>
+        <SiteFooter.Link href="#demo">Demo</SiteFooter.Link>
+        <SiteFooter.Link href="#docs">Docs</SiteFooter.Link>
+      </SiteFooter.Column>
+      <SiteFooter.Column title="Talk to us">
+        <SiteFooter.Link href="https://www.krizaka.com/contact?topic=orazaka">Contact</SiteFooter.Link>
+        <SiteFooter.Link href="https://github.com/krizaka/orazaka">Source</SiteFooter.Link>
+      </SiteFooter.Column>
+    </SiteFooter>
+  );
+}

package/registry/examples/sites/family.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/sites/family.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/sites/family.tsx
+import { familyLabels, sitesByGroup } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SitesFamily() {
+  const t = familyLabels.en;
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-xl gap-5 sm:grid-cols-2", children: sitesByGroup().map(({ group, sites }) => /* @__PURE__ */ jsxs("section", { "aria-label": t.groups[group], className: "grid content-start gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary", children: t.groups[group] }),
+    /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: sites.map((site) => /* @__PURE__ */ jsxs("li", { className: "rounded-xl border border-border-subtle bg-surface-1 p-3", children: [
+      /* @__PURE__ */ jsx("a", { href: site.url, className: "text-sm font-semibold text-fg", children: site.name }),
+      /* @__PURE__ */ jsx("span", { className: "ml-2 font-mono text-xs text-fg-secondary", children: site.host }),
+      site.status !== "released" && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-surface-3 px-1.5 text-[10px] font-semibold uppercase text-fg-secondary", children: t.status[site.status] }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-fg-secondary", children: t.descriptions[site.id] })
+    ] }, site.id)) })
+  ] }, group)) });
+}
+export {
+  SitesFamily as default
+};

package/registry/examples/sites/family.tsx

@@ -0,0 +1,30 @@
+import { familyLabels, sitesByGroup } from "@krizaka/ui/sites";
+
+// The family as data: every site of Krizaka, grouped as the bar's switcher and the footer show it. A new site is one
+// release of @krizaka/ui — every bar and every footer follow.
+export default function SitesFamily() {
+  const t = familyLabels.en;
+  return (
+    <div className="grid w-full max-w-xl gap-5 sm:grid-cols-2">
+      {sitesByGroup().map(({ group, sites }) => (
+        <section key={group} aria-label={t.groups[group]} className="grid content-start gap-2">
+          <h3 className="text-[11px] font-semibold uppercase tracking-wider text-fg-secondary">{t.groups[group]}</h3>
+          <ul className="grid gap-2">
+            {sites.map((site) => (
+              <li key={site.id} className="rounded-xl border border-border-subtle bg-surface-1 p-3">
+                <a href={site.url} className="text-sm font-semibold text-fg">{site.name}</a>
+                <span className="ml-2 font-mono text-xs text-fg-secondary">{site.host}</span>
+                {site.status !== "released" && (
+                  <span className="ml-2 rounded-full bg-surface-3 px-1.5 text-[10px] font-semibold uppercase text-fg-secondary">
+                    {t.status[site.status]}
+                  </span>
+                )}
+                <p className="mt-1 text-xs text-fg-secondary">{t.descriptions[site.id]}</p>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </div>
+  );
+}

package/registry/examples/sites/french.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/sites/french.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/sites/french.tsx
+import { familyLabels, siteById } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ids = ["orazaka", "orochia", "yasakia", "yororis"];
+function SitesFrench() {
+  const t = familyLabels.fr;
+  return /* @__PURE__ */ jsx("dl", { className: "grid w-full max-w-md gap-3", children: ids.map((id) => {
+    const site = siteById(id);
+    return /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+      /* @__PURE__ */ jsxs("dt", { className: "text-sm font-semibold text-fg", children: [
+        site.name,
+        site.status !== "released" && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs font-normal text-fg-secondary", children: [
+          "\xB7 ",
+          t.status[site.status]
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("dd", { className: "text-xs text-fg-secondary", children: t.descriptions[id] })
+    ] }, id);
+  }) });
+}
+export {
+  SitesFrench as default
+};