@krizaka/ui 3.21.0 → 3.23.0

package/registry/examples/genui/table.tsx

@@ -0,0 +1,14 @@
+import { baseGenUiCatalog, GenUiStream } from "@krizaka/ui/genui";
+
+const ANSWER = [
+  "Three cities sold more than 100 passes this month.",
+  "```a2ui",
+  '{"version":"v0.9","createSurface":{"surfaceId":"s1","catalogId":"krizaka:genui/v1"}}',
+  '{"version":"v0.9","updateComponents":{"surfaceId":"s1","components":[{"id":"root","component":"Column","children":["note","grid"]},{"id":"note","component":"Callout","tone":"success","title":"Montréal leads","text":"412 passes, +18 % on last month."},{"id":"grid","component":"Table","caption":"Passes by city","columns":[{"key":"city","label":"City"},{"key":"passes","label":"Passes","format":"integer"}],"rows":{"path":"/cities"}}]}}',
+  '{"version":"v0.9","updateDataModel":{"surfaceId":"s1","path":"/cities","value":[{"city":"Montréal","passes":412},{"city":"Québec","passes":187},{"city":"Laval","passes":121}]}}',
+  "```",
+].join("\n");
+
+export default function GenUiTable() {
+  return <GenUiStream text={ANSWER} catalog={baseGenUiCatalog} />;
+}

package/registry/examples/link-card/hover-light.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/link-card/hover-light.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/link-card/hover-light.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+var shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev \u2014 then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
+];
+function LinkCardHoverLight() {
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { hover: "light", href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+}
+export {
+  LinkCardHoverLight as default
+};

package/registry/examples/link-card/hover-light.tsx

@@ -0,0 +1,20 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+const shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev — then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts — behind four gates." },
+] as const;
+
+// The default hover, said explicitly: the pointer's light and the coloured lift.
+export default function LinkCardHoverLight() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={260} reveal={false}>
+      {shortcuts.map((s) => (
+        <LinkCard key={s.id} hover="light" href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
+      ))}
+    </CardGrid>
+  );
+}

package/registry/examples/link-card/hover-quiet.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/link-card/hover-quiet.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/link-card/hover-quiet.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+var shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev \u2014 then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
+];
+function LinkCardHoverQuiet() {
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { hover: "quiet", href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+}
+export {
+  LinkCardHoverQuiet as default
+};

package/registry/examples/link-card/hover-quiet.tsx

@@ -0,0 +1,20 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+const shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev — then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts — behind four gates." },
+] as const;
+
+// The quiet hover on a card: no glow, a 2 px lift, one step of surface and border, a ring on focus.
+export default function LinkCardHoverQuiet() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={260} reveal={false}>
+      {shortcuts.map((s) => (
+        <LinkCard key={s.id} hover="quiet" href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
+      ))}
+    </CardGrid>
+  );
+}

package/registry/examples/meta-row/native/video.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/meta-row/native/video.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/meta-row/native/video.tsx
+import { Badge, MetaRow } from "@krizaka/ui/native";
+import { jsx } from "react/jsx-runtime";
+function NativeMetaRowVideo() {
+  return /* @__PURE__ */ jsx(MetaRow, { label: "Video", items: ["HD 720p", "9:16", "0:05", "Oct 16, 2026"], chips: [/* @__PURE__ */ jsx(Badge, { tone: "accent", size: "md", children: "AI-generated" }, "ai")] });
+}
+export {
+  NativeMetaRowVideo as default
+};

package/registry/examples/meta-row/native/video.tsx

@@ -0,0 +1,5 @@
+import { Badge, MetaRow } from "@krizaka/ui/native";
+
+export default function NativeMetaRowVideo() {
+  return <MetaRow label="Video" items={["HD 720p", "9:16", "0:05", "Oct 16, 2026"]} chips={[<Badge key="ai" tone="accent" size="md">AI-generated</Badge>]} />;
+}

package/registry/examples/meta-row/status.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/meta-row/status.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/meta-row/status.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { MetaRow } from "@krizaka/ui/meta-row";
+import { jsx } from "react/jsx-runtime";
+function MetaRowStatus() {
+  return /* @__PURE__ */ jsx(MetaRow, { "aria-label": "Video", size: "md", items: ["0:05", "Oct 16, 2026", null], chips: [/* @__PURE__ */ jsx(Badge, { tone: "warning", children: "Encoding" }, "s")] });
+}
+export {
+  MetaRowStatus as default
+};

package/registry/examples/meta-row/status.tsx

@@ -0,0 +1,7 @@
+import { Badge } from "@krizaka/ui/badge";
+import { MetaRow } from "@krizaka/ui/meta-row";
+
+// A chip only for the state that is not the usual one: here the video is still encoding.
+export default function MetaRowStatus() {
+  return <MetaRow aria-label="Video" size="md" items={["0:05", "Oct 16, 2026", null]} chips={[<Badge key="s" tone="warning">Encoding</Badge>]} />;
+}

package/registry/examples/meta-row/video.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/meta-row/video.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/meta-row/video.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { MetaRow } from "@krizaka/ui/meta-row";
+import { jsx } from "react/jsx-runtime";
+function MetaRowVideo() {
+  return /* @__PURE__ */ jsx(MetaRow, { "aria-label": "Video", items: ["HD 720p", "9:16", "0:05", "24 fps", "Oct 16, 2026"], chips: [/* @__PURE__ */ jsx(Badge, { tone: "accent", size: "md", children: "AI-generated" }, "ai")] });
+}
+export {
+  MetaRowVideo as default
+};

package/registry/examples/meta-row/video.tsx

@@ -0,0 +1,7 @@
+import { Badge } from "@krizaka/ui/badge";
+import { MetaRow } from "@krizaka/ui/meta-row";
+
+// Under a title: five short facts and the one chip that matters. Everything is already translated.
+export default function MetaRowVideo() {
+  return <MetaRow aria-label="Video" items={["HD 720p", "9:16", "0:05", "24 fps", "Oct 16, 2026"]} chips={[<Badge key="ai" tone="accent" size="md">AI-generated</Badge>]} />;
+}

package/registry/examples/rail-nav/expandable.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/rail-nav/expandable.js

@@ -0,0 +1,34 @@
+"use client";
+
+// registry/examples/rail-nav/expandable.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { RailNav } from "@krizaka/ui/rail-nav";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dot = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7" }) });
+function RailNavExpandable() {
+  return /* @__PURE__ */ jsxs(RailNav.Shell, { children: [
+    /* @__PURE__ */ jsxs(
+      RailNav.Root,
+      {
+        label: "Studio",
+        accent: "orochia",
+        expandable: true,
+        expandLabels: ["Show the words", "Hide the words"],
+        mark: /* @__PURE__ */ jsx("a", { href: "#home", "aria-label": "Orochia, home", children: /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 26, animated: false }) }),
+        children: [
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#home", icon: dot, label: "Home", current: true }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#videos", icon: dot, label: "Videos" }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#earnings", icon: dot, label: "Earnings" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(RailNav.Body, { children: [
+      /* @__PURE__ */ jsx(AppHeader, { name: "Orochia", mark: /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 22, animated: false }) }),
+      /* @__PURE__ */ jsx("main", { id: "content", className: "p-6 text-sm text-fg-secondary", children: "The screen's content." })
+    ] })
+  ] });
+}
+export {
+  RailNavExpandable as default
+};

package/registry/examples/rail-nav/expandable.tsx

@@ -0,0 +1,28 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { RailNav } from "@krizaka/ui/rail-nav";
+
+const dot = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><circle cx="12" cy="12" r="7" /></svg>;
+
+// `expandable` adds a button that widens the rail to show the words (desktop). The state can be kept with `expanded`.
+export default function RailNavExpandable() {
+  return (
+    <RailNav.Shell>
+      <RailNav.Root
+        label="Studio"
+        accent="orochia"
+        expandable
+        expandLabels={["Show the words", "Hide the words"]}
+        mark={<a href="#home" aria-label="Orochia, home"><ProductLogo id="orochia" size={26} animated={false} /></a>}
+      >
+        <RailNav.Item href="#home" icon={dot} label="Home" current />
+        <RailNav.Item href="#videos" icon={dot} label="Videos" />
+        <RailNav.Item href="#earnings" icon={dot} label="Earnings" />
+      </RailNav.Root>
+      <RailNav.Body>
+        <AppHeader name="Orochia" mark={<ProductLogo id="orochia" size={22} animated={false} />} />
+        <main id="content" className="p-6 text-sm text-fg-secondary">The screen's content.</main>
+      </RailNav.Body>
+    </RailNav.Shell>
+  );
+}

package/registry/examples/rail-nav/studio.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/rail-nav/studio.js

@@ -0,0 +1,43 @@
+"use client";
+
+// registry/examples/rail-nav/studio.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { Badge } from "@krizaka/ui/badge";
+import { RailNav } from "@krizaka/ui/rail-nav";
+import { jsx, jsxs } from "react/jsx-runtime";
+var icon = (d) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d }) });
+function RailNavStudio() {
+  return /* @__PURE__ */ jsxs(RailNav.Shell, { children: [
+    /* @__PURE__ */ jsxs(
+      RailNav.Root,
+      {
+        label: "Orazaka",
+        accent: "orazaka",
+        mark: /* @__PURE__ */ jsx("a", { href: "#home", "aria-label": "Orazaka, home", children: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 26, animated: false }) }),
+        footer: /* @__PURE__ */ jsx(RailNav.Item, { href: "#settings", icon: icon("M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19 12l2-1-2-4-2 1-2-1-1-2h-4l-1 2-2 1-2-1-2 4 2 1v2l-2 1 2 4 2-1 2 1 1 2h4l1-2 2-1 2 1 2-4-2-1z"), label: "Settings" }),
+        children: [
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#home", icon: icon("M4 11 12 4l8 7v9H4z"), label: "Home", current: true }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#studios", icon: icon("M4 5h16v11H4zM8 20h8"), label: "Studios" }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#chat", icon: icon("M4 5h16v11H9l-5 4z"), label: "Chat", badge: 2, badgeLabel: "2 unread" }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#jobs", icon: icon("M5 6h14M5 12h14M5 18h9"), label: "Jobs" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(RailNav.Body, { children: [
+      /* @__PURE__ */ jsx(
+        AppHeader,
+        {
+          name: "Orazaka",
+          mark: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 22, animated: false }),
+          href: "#home",
+          chips: /* @__PURE__ */ jsx(Badge, { tone: "success", dot: true, children: "Local \xB7 Sovereign" })
+        }
+      ),
+      /* @__PURE__ */ jsx("main", { id: "content", className: "p-6 text-sm text-fg-secondary", children: "The screen's content." })
+    ] })
+  ] });
+}
+export {
+  RailNavStudio as default
+};

package/registry/examples/rail-nav/studio.tsx

@@ -0,0 +1,38 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { Badge } from "@krizaka/ui/badge";
+import { RailNav } from "@krizaka/ui/rail-nav";
+
+const icon = (d: string) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d={d} />
+  </svg>
+);
+
+// The mark lives in the rail; the header carries the name (and the mark on a phone, where the rail is the tab bar).
+export default function RailNavStudio() {
+  return (
+    <RailNav.Shell>
+      <RailNav.Root
+        label="Orazaka"
+        accent="orazaka"
+        mark={<a href="#home" aria-label="Orazaka, home"><ProductLogo id="orazaka" size={26} animated={false} /></a>}
+        footer={<RailNav.Item href="#settings" icon={icon("M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19 12l2-1-2-4-2 1-2-1-1-2h-4l-1 2-2 1-2-1-2 4 2 1v2l-2 1 2 4 2-1 2 1 1 2h4l1-2 2-1 2 1 2-4-2-1z")} label="Settings" />}
+      >
+        <RailNav.Item href="#home" icon={icon("M4 11 12 4l8 7v9H4z")} label="Home" current />
+        <RailNav.Item href="#studios" icon={icon("M4 5h16v11H4zM8 20h8")} label="Studios" />
+        <RailNav.Item href="#chat" icon={icon("M4 5h16v11H9l-5 4z")} label="Chat" badge={2} badgeLabel="2 unread" />
+        <RailNav.Item href="#jobs" icon={icon("M5 6h14M5 12h14M5 18h9")} label="Jobs" />
+      </RailNav.Root>
+      <RailNav.Body>
+        <AppHeader
+          name="Orazaka"
+          mark={<ProductLogo id="orazaka" size={22} animated={false} />}
+          href="#home"
+          chips={<Badge tone="success" dot>Local · Sovereign</Badge>}
+        />
+        <main id="content" className="p-6 text-sm text-fg-secondary">The screen's content.</main>
+      </RailNav.Body>
+    </RailNav.Shell>
+  );
+}

package/registry/examples/settings-layout/flat.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/flat.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/settings-layout/flat.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { Input } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsRow, SettingsSection } from "@krizaka/ui/settings-layout";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NAV = [
+  { id: "account", label: "Account", href: "/settings/account", current: true },
+  { id: "appearance", label: "Appearance", href: "/settings/appearance" },
+  { id: "integrations", label: "Integrations", href: "/settings/integrations" }
+];
+function SettingsLayoutFlat() {
+  return /* @__PURE__ */ jsxs(SettingsLayout, { className: "w-full", variant: "flat", title: "Settings", nav: NAV, navLabel: "Settings sections", children: [
+    /* @__PURE__ */ jsxs(SettingsSection, { variant: "flat", id: "account", title: "Account", description: "Who you are in this workspace.", children: [
+      /* @__PURE__ */ jsx(SettingsRow, { label: "Username", description: "Shown to your team.", htmlFor: "flat-username", children: /* @__PURE__ */ jsx(Input, { id: "flat-username", defaultValue: "oussama", className: "w-56" }) }),
+      /* @__PURE__ */ jsx(SettingsRow, { label: "Email", children: "oussama@krizaka.com" }),
+      /* @__PURE__ */ jsx(SettingsRow, { label: "Role", children: /* @__PURE__ */ jsx(Badge, { children: "Admin" }) })
+    ] }),
+    /* @__PURE__ */ jsx(SettingsSection, { variant: "flat", title: "Danger zone", children: /* @__PURE__ */ jsx(SettingsRow, { label: "Sign out everywhere", description: "Ends every session on every device.", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: "Sign out" }) }) })
+  ] });
+}
+export {
+  SettingsLayoutFlat as default
+};

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

@@ -0,0 +1,30 @@
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { Input } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsRow, SettingsSection } from "@krizaka/ui/settings-layout";
+
+const NAV = [
+  { id: "account", label: "Account", href: "/settings/account", current: true },
+  { id: "appearance", label: "Appearance", href: "/settings/appearance" },
+  { id: "integrations", label: "Integrations", href: "/settings/integrations" },
+];
+
+// TEMPLATE — calm settings: sections on the left, one column of rows (label and help left, control right) divided by hairlines.
+export default function SettingsLayoutFlat() {
+  return (
+    <SettingsLayout className="w-full" variant="flat" title="Settings" nav={NAV} navLabel="Settings sections">
+      <SettingsSection variant="flat" id="account" title="Account" description="Who you are in this workspace.">
+        <SettingsRow label="Username" description="Shown to your team." htmlFor="flat-username">
+          <Input id="flat-username" defaultValue="oussama" className="w-56" />
+        </SettingsRow>
+        <SettingsRow label="Email">oussama@krizaka.com</SettingsRow>
+        <SettingsRow label="Role"><Badge>Admin</Badge></SettingsRow>
+      </SettingsSection>
+      <SettingsSection variant="flat" title="Danger zone">
+        <SettingsRow label="Sign out everywhere" description="Ends every session on every device.">
+          <Button size="sm" variant="secondary">Sign out</Button>
+        </SettingsRow>
+      </SettingsSection>
+    </SettingsLayout>
+  );
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/site-footer/app.tsx
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SiteFooterApp() {
+  return /* @__PURE__ */ jsx(
+    SiteFooter,
+    {
+      variant: "app",
+      current: "orazaka",
+      labels: familyLabels.en,
+      env: "DEV",
+      version: "1.2.3",
+      legal: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#privacy", children: "Privacy" }),
+        /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#terms", children: "Terms" })
+      ] })
+    }
+  );
+}
+export {
+  SiteFooterApp as default
+};

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

@@ -0,0 +1,22 @@
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+
+// The footer inside a signed-in product (dev.orazaka.com/dashboard): one slim line — the publisher line, the version it
+// runs and the legal links. Rendered once, in the layout; where the app shell has a sidebar that holds them, none.
+export default function SiteFooterApp() {
+  return (
+    <SiteFooter
+      variant="app"
+      current="orazaka"
+      labels={familyLabels.en}
+      env="DEV"
+      version="1.2.3"
+      legal={
+        <>
+          <SiteFooter.Link href="#privacy">Privacy</SiteFooter.Link>
+          <SiteFooter.Link href="#terms">Terms</SiteFooter.Link>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/site-footer/docs.tsx
+import { SiteFooter } from "@krizaka/ui/site-footer";
+import { familyLabels } from "@krizaka/ui/sites";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SiteFooterDocs() {
+  return /* @__PURE__ */ jsxs(
+    SiteFooter,
+    {
+      variant: "docs",
+      current: "ui",
+      labels: familyLabels.en,
+      version: "1.2.3",
+      legal: /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#privacy", children: "Privacy" }),
+      children: [
+        /* @__PURE__ */ jsxs(SiteFooter.Column, { title: "Guides", children: [
+          /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#start", children: "Get started" }),
+          /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#tokens", children: "Tokens" })
+        ] }),
+        /* @__PURE__ */ jsxs(SiteFooter.Column, { title: "Project", children: [
+          /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#changelog", children: "Changelog" }),
+          /* @__PURE__ */ jsx(SiteFooter.Link, { href: "#source", children: "Source" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  SiteFooterDocs as default
+};