@krizaka/ui 2.6.0 → 2.9.0

package/registry/examples/achievement/arcade.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/achievement/arcade.tsx
+import { Achievement, AchievementList, Emblem } from "@krizaka/ui/achievement";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AchievementArcade() {
+  return /* @__PURE__ */ jsxs(AchievementList, { variant: "arcade", brand: "orochia", className: "w-full max-w-2xl", children: [
+    /* @__PURE__ */ jsx(Achievement, { icon: /* @__PURE__ */ jsx(Emblem, { kind: "sword", size: 14 }), eyebrow: "Head 01", badge: "Sealed", replaced: "Data sent abroad", title: "Everything runs on your machine" }),
+    /* @__PURE__ */ jsx(Achievement, { icon: /* @__PURE__ */ jsx(Emblem, { kind: "mirror", size: 14 }), eyebrow: "Head 02", badge: "Sealed", replaced: "A bill per token", title: "One price, no meter" }),
+    /* @__PURE__ */ jsx(Achievement, { icon: /* @__PURE__ */ jsx(Emblem, { kind: "jewel", size: 14 }), eyebrow: "Head 03", badge: "Sealed", replaced: "A closed box", title: "Open source, end to end" })
+  ] });
+}
+export {
+  AchievementArcade as default
+};

package/registry/examples/achievement/arcade.tsx

@@ -0,0 +1,12 @@
+import { Achievement, AchievementList, Emblem } from "@krizaka/ui/achievement";
+
+// The arcade flavour: each card's stamp slams in, one after the other, in time with a GoalGauge in the same scene.
+export default function AchievementArcade() {
+  return (
+    <AchievementList variant="arcade" brand="orochia" className="w-full max-w-2xl">
+      <Achievement icon={<Emblem kind="sword" size={14} />} eyebrow="Head 01" badge="Sealed" replaced="Data sent abroad" title="Everything runs on your machine" />
+      <Achievement icon={<Emblem kind="mirror" size={14} />} eyebrow="Head 02" badge="Sealed" replaced="A bill per token" title="One price, no meter" />
+      <Achievement icon={<Emblem kind="jewel" size={14} />} eyebrow="Head 03" badge="Sealed" replaced="A closed box" title="Open source, end to end" />
+    </AchievementList>
+  );
+}

package/registry/examples/achievement/milestones.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/achievement/milestones.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/achievement/milestones.tsx
+import { Achievement, AchievementList } from "@krizaka/ui/achievement";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AchievementMilestones() {
+  return /* @__PURE__ */ jsxs(AchievementList, { className: "w-full max-w-2xl", children: [
+    /* @__PURE__ */ jsx(Achievement, { eyebrow: "Milestone 01", badge: "Done", replaced: "Paying 30 % to a platform", title: "90 % of every tip to you" }),
+    /* @__PURE__ */ jsx(Achievement, { eyebrow: "Milestone 02", badge: "Done", replaced: "Fans who vanish after a like", title: "Challenges they back with credits" }),
+    /* @__PURE__ */ jsx(Achievement, { eyebrow: "Milestone 03", badge: "Locked", locked: true, title: "Your first auction" })
+  ] });
+}
+export {
+  AchievementMilestones as default
+};

package/registry/examples/achievement/milestones.tsx

@@ -0,0 +1,12 @@
+import { Achievement, AchievementList } from "@krizaka/ui/achievement";
+
+// Milestones: what each one replaced, struck through; the next one locked — said in its badge too.
+export default function AchievementMilestones() {
+  return (
+    <AchievementList className="w-full max-w-2xl">
+      <Achievement eyebrow="Milestone 01" badge="Done" replaced="Paying 30 % to a platform" title="90 % of every tip to you" />
+      <Achievement eyebrow="Milestone 02" badge="Done" replaced="Fans who vanish after a like" title="Challenges they back with credits" />
+      <Achievement eyebrow="Milestone 03" badge="Locked" locked title="Your first auction" />
+    </AchievementList>
+  );
+}

package/registry/examples/app-shell/admin-console.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/app-shell/admin-console.js

@@ -0,0 +1,52 @@
+"use client";
+
+// registry/examples/app-shell/admin-console.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { DataTable } from "@krizaka/ui/data-table";
+import { Fragment, 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 }) });
+var REQUESTS = [
+  { id: "v-1042", creator: "Elena Varga", kind: "Identity check", status: "pending", age: "12 min" },
+  { id: "v-1041", creator: "Noah Petit", kind: "Payout account", status: "pending", age: "40 min" },
+  { id: "v-1039", creator: "Maya Chen", kind: "Identity check", status: "approved", age: "2 h" },
+  { id: "v-1036", creator: "Tom Lebrun", kind: "Age check (18+)", status: "refused", age: "5 h" }
+];
+var tone = { pending: "warning", approved: "success", refused: "danger" };
+var columns = [
+  { id: "creator", header: "Creator", sortable: true, card: "title" },
+  { id: "kind", header: "Request" },
+  { id: "status", header: "Status", cell: (r) => /* @__PURE__ */ jsx(Badge, { tone: tone[r.status], dot: true, children: r.status }) },
+  { id: "age", header: "Waiting", align: "end" }
+];
+function AppShellAdminConsole() {
+  return /* @__PURE__ */ jsxs(AppShell.Root, { children: [
+    /* @__PURE__ */ jsxs(AppShell.Sidebar, { label: "Administration", brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 24, animated: false }),
+      " Admin"
+    ] }), closeLabel: "Close the menu", collapseLabels: ["Collapse", "Expand"], children: [
+      /* @__PURE__ */ jsx(AppShell.Group, { children: "Review" }),
+      /* @__PURE__ */ jsx(AppShell.Item, { href: "#verification", icon: icon("M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z"), label: "Verification", current: true, badge: 2 }),
+      /* @__PURE__ */ jsx(AppShell.Item, { href: "#moderation", icon: icon("M4 5h16v11H9l-5 4z"), label: "Moderation", badge: 5 }),
+      /* @__PURE__ */ jsx(AppShell.Group, { children: "Money" }),
+      /* @__PURE__ */ jsx(AppShell.Item, { href: "#payouts", icon: icon("M3 7h18v10H3zM12 12h.01"), label: "Payouts" }),
+      /* @__PURE__ */ jsx(AppShell.Item, { href: "#ledger", icon: icon("M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"), label: "Ledger" }),
+      /* @__PURE__ */ jsx(AppShell.Group, { children: "System" }),
+      /* @__PURE__ */ jsx(AppShell.Item, { href: "#backups", icon: icon("M4 7c0-2 16-2 16 0v10c0 2-16 2-16 0zM4 12c0 2 16 2 16 0"), label: "Backups" })
+    ] }),
+    /* @__PURE__ */ jsxs(AppShell.Body, { children: [
+      /* @__PURE__ */ jsx(AppShell.Header, { title: "Verification", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", shape: "cut", children: "Export" }) }),
+      /* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsxs(DashboardLayout, { headingAs: "h2", title: "Requests to review", description: "Oldest first. A decision is logged with your name.", children: [
+        /* @__PURE__ */ jsx(Widget, { level: 3, title: "Pending", description: "identity and payout", children: /* @__PURE__ */ jsx("p", { className: "font-display text-3xl font-extrabold text-fg", children: "2" }) }),
+        /* @__PURE__ */ jsx(Widget, { level: 3, title: "Oldest wait", children: /* @__PURE__ */ jsx("p", { className: "font-display text-3xl font-extrabold text-fg", children: "40 min" }) }),
+        /* @__PURE__ */ jsx(Widget, { level: 3, title: "Queue", span: "full", children: /* @__PURE__ */ jsx(DataTable, { caption: "Verification requests", rows: REQUESTS, columns, getRowId: (r) => r.id, rowLabel: (r) => `${r.creator}, ${r.kind}`, selectable: true }) })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  AppShellAdminConsole as default
+};

package/registry/examples/app-shell/admin-console.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ProductLogo } from "@krizaka/ui";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+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>
+);
+
+type Request = { id: string; creator: string; kind: string; status: "pending" | "approved" | "refused"; age: string };
+const REQUESTS: Request[] = [
+  { id: "v-1042", creator: "Elena Varga", kind: "Identity check", status: "pending", age: "12 min" },
+  { id: "v-1041", creator: "Noah Petit", kind: "Payout account", status: "pending", age: "40 min" },
+  { id: "v-1039", creator: "Maya Chen", kind: "Identity check", status: "approved", age: "2 h" },
+  { id: "v-1036", creator: "Tom Lebrun", kind: "Age check (18+)", status: "refused", age: "5 h" },
+];
+const tone = { pending: "warning", approved: "success", refused: "danger" } as const;
+const columns: DataTableColumn<Request>[] = [
+  { id: "creator", header: "Creator", sortable: true, card: "title" },
+  { id: "kind", header: "Request" },
+  { id: "status", header: "Status", cell: (r) => <Badge tone={tone[r.status]} dot>{r.status}</Badge> },
+  { id: "age", header: "Waiting", align: "end" },
+];
+
+// TEMPLATE — an administration console (Orochia admin): the shell with the console's sections, a queue of requests to
+// review as a sortable table with bulk actions — cards on a phone — and the counts that say how long the queue is.
+export default function AppShellAdminConsole() {
+  return (
+    <AppShell.Root>
+      <AppShell.Sidebar label="Administration" brand={<><ProductLogo id="orochia" size={24} animated={false} /> Admin</>} closeLabel="Close the menu" collapseLabels={["Collapse", "Expand"]}>
+        <AppShell.Group>Review</AppShell.Group>
+        <AppShell.Item href="#verification" icon={icon("M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z")} label="Verification" current badge={2} />
+        <AppShell.Item href="#moderation" icon={icon("M4 5h16v11H9l-5 4z")} label="Moderation" badge={5} />
+        <AppShell.Group>Money</AppShell.Group>
+        <AppShell.Item href="#payouts" icon={icon("M3 7h18v10H3zM12 12h.01")} label="Payouts" />
+        <AppShell.Item href="#ledger" icon={icon("M5 4h14v16H5zM8 8h8M8 12h8M8 16h5")} label="Ledger" />
+        <AppShell.Group>System</AppShell.Group>
+        <AppShell.Item href="#backups" icon={icon("M4 7c0-2 16-2 16 0v10c0 2-16 2-16 0zM4 12c0 2 16 2 16 0")} label="Backups" />
+      </AppShell.Sidebar>
+      <AppShell.Body>
+        <AppShell.Header title="Verification" menuLabel="Open the menu" actions={<Button size="sm" variant="secondary" shape="cut">Export</Button>} />
+        <AppShell.Main>
+          <DashboardLayout headingAs="h2" title="Requests to review" description="Oldest first. A decision is logged with your name.">
+            <Widget level={3} title="Pending" description="identity and payout">
+              <p className="font-display text-3xl font-extrabold text-fg">2</p>
+            </Widget>
+            <Widget level={3} title="Oldest wait">
+              <p className="font-display text-3xl font-extrabold text-fg">40 min</p>
+            </Widget>
+            <Widget level={3} title="Queue" span="full">
+              <DataTable caption="Verification requests" rows={REQUESTS} columns={columns} getRowId={(r) => r.id} rowLabel={(r) => `${r.creator}, ${r.kind}`} selectable />
+            </Widget>
+          </DashboardLayout>
+        </AppShell.Main>
+      </AppShell.Body>
+    </AppShell.Root>
+  );
+}

package/registry/examples/app-shell/basic.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/app-shell/basic.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/app-shell/basic.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Button } from "@krizaka/ui/button";
+import { Fragment, 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 AppShellBasic() {
+  return /* @__PURE__ */ jsxs(AppShell.Root, { className: "min-h-[32rem]", children: [
+    /* @__PURE__ */ jsxs(
+      AppShell.Sidebar,
+      {
+        label: "Studio",
+        brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 24, animated: false }),
+          " Studio"
+        ] }),
+        collapseLabels: ["Collapse", "Expand"],
+        closeLabel: "Close the menu",
+        children: [
+          /* @__PURE__ */ jsx(AppShell.Item, { href: "#home", icon: dot, label: "Home", current: true }),
+          /* @__PURE__ */ jsx(AppShell.Item, { href: "#videos", icon: dot, label: "Videos", badge: 3 }),
+          /* @__PURE__ */ jsx(AppShell.Group, { children: "Money" }),
+          /* @__PURE__ */ jsx(AppShell.Item, { href: "#earnings", icon: dot, label: "Earnings" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(AppShell.Body, { children: [
+      /* @__PURE__ */ jsx(AppShell.Header, { title: "Home", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Upload" }) }),
+      /* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "The screen's content." }) })
+    ] })
+  ] });
+}
+export {
+  AppShellBasic as default
+};

package/registry/examples/app-shell/basic.tsx

@@ -0,0 +1,31 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Button } from "@krizaka/ui/button";
+
+const dot = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><circle cx="12" cy="12" r="7" /></svg>;
+
+// The shell alone: the sidebar (it collapses to its icons on a desktop, opens as a drawer on a phone), the header, the
+// content. Your router's links go in `AppShell.Item asChild`.
+export default function AppShellBasic() {
+  return (
+    <AppShell.Root className="min-h-[32rem]">
+      <AppShell.Sidebar
+        label="Studio"
+        brand={<><ProductLogo id="orochia" size={24} animated={false} /> Studio</>}
+        collapseLabels={["Collapse", "Expand"]}
+        closeLabel="Close the menu"
+      >
+        <AppShell.Item href="#home" icon={dot} label="Home" current />
+        <AppShell.Item href="#videos" icon={dot} label="Videos" badge={3} />
+        <AppShell.Group>Money</AppShell.Group>
+        <AppShell.Item href="#earnings" icon={dot} label="Earnings" />
+      </AppShell.Sidebar>
+      <AppShell.Body>
+        <AppShell.Header title="Home" menuLabel="Open the menu" actions={<Button size="sm" variant="primary" shape="cut">Upload</Button>} />
+        <AppShell.Main>
+          <p className="text-sm text-fg-secondary">The screen's content.</p>
+        </AppShell.Main>
+      </AppShell.Body>
+    </AppShell.Root>
+  );
+}

package/registry/examples/app-shell/orochia-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/app-shell/orochia-studio.js

@@ -0,0 +1,89 @@
+"use client";
+
+// registry/examples/app-shell/orochia-studio.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Avatar } from "@krizaka/ui/avatar";
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { Meter } from "@krizaka/ui/meter";
+import { Stat } from "@krizaka/ui/stat";
+import { Fragment, 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 }) });
+var NAV = [
+  { id: "home", label: "Home", d: "M4 11 12 4l8 7v9H4z", current: true },
+  { id: "videos", label: "Videos", d: "M4 6h12v12H4zM16 10l4-2v8l-4-2", badge: 2 },
+  { id: "auctions", label: "Auctions", d: "M5 19h10M8 5l6 6M11 2l6 6M6 13l4-4" },
+  { id: "challenges", label: "Challenges", d: "M12 3v18M5 7h10l-2 3 2 3H5" }
+];
+var MONEY = [
+  { id: "earnings", label: "Earnings", d: "M4 18h16M7 14l3-3 3 2 5-6" },
+  { id: "payouts", label: "Payouts", d: "M3 7h18v10H3zM12 12h.01" }
+];
+var SALES = [
+  { what: "Unlock \xB7 \u201CNight shoot, part 2\u201D", who: "L\xE9a M.", net: "\u20AC4.50" },
+  { what: "Tip", who: "Samir K.", net: "\u20AC9.00" },
+  { what: "Auction won \xB7 \u201CBackstage cut\u201D", who: "In\xE8s B.", net: "\u20AC61.20" }
+];
+function AppShellOrochiaStudio() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia", children: /* @__PURE__ */ jsxs(AppShell.Root, { children: [
+    /* @__PURE__ */ jsxs(
+      AppShell.Sidebar,
+      {
+        label: "Studio",
+        brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 24, animated: false }),
+          " Orochia"
+        ] }),
+        collapseLabels: ["Collapse", "Expand"],
+        closeLabel: "Close the menu",
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-2 py-2 text-sm", children: [
+          /* @__PURE__ */ jsx(Avatar, { fallback: "EV", size: "sm" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium", children: "Elena Varga" })
+        ] }),
+        children: [
+          NAV.map((n) => /* @__PURE__ */ jsx(AppShell.Item, { href: `#${n.id}`, icon: icon(n.d), label: n.label, current: n.current, badge: n.badge }, n.id)),
+          /* @__PURE__ */ jsx(AppShell.Group, { children: "Money" }),
+          MONEY.map((n) => /* @__PURE__ */ jsx(AppShell.Item, { href: `#${n.id}`, icon: icon(n.d), label: n.label }, n.id))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(AppShell.Body, { children: [
+      /* @__PURE__ */ jsx(
+        AppShell.Header,
+        {
+          title: "Studio",
+          menuLabel: "Open the menu",
+          actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Upload a video" })
+        }
+      ),
+      /* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsxs(DashboardLayout, { headingAs: "h2", eyebrow: "This week", title: "Good morning, Elena", description: "Three sales since yesterday \u2014 your auction ends tonight.", children: [
+        /* @__PURE__ */ jsx(Widget, { level: 3, title: "Your week", span: "full", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-6 md:grid-cols-4", children: [
+          /* @__PURE__ */ jsx(Stat, { label: "Views", value: "12.4k", trend: "up", trendLabel: "+8 %", hint: "7 days" }),
+          /* @__PURE__ */ jsx(Stat, { label: "Supporters", value: "318", trend: "up", trendLabel: "+21", hint: "7 days" }),
+          /* @__PURE__ */ jsx(Stat, { label: "Earned", value: "\u20AC902", trend: "up", trendLabel: "+14 %", hint: "after the 10 % fee" }),
+          /* @__PURE__ */ jsx(Stat, { label: "Unlocks", value: "146", trend: "flat", trendLabel: "\xB10", hint: "7 days" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Widget, { level: 3, title: "Next payout", description: "Every Monday, from \u20AC20", span: 2, children: [
+          /* @__PURE__ */ jsx(Meter, { label: "Towards your payout", value: 74, max: 100, valueText: "\u20AC74 of \u20AC100 goal", showLabel: true }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-fg-secondary", children: "\u20AC902 will reach your bank on Monday." })
+        ] }),
+        /* @__PURE__ */ jsxs(Widget, { level: 3, title: "Auction", description: "\u201CBackstage cut\u201D", span: 2, action: /* @__PURE__ */ jsx(Badge, { tone: "accent", dot: true, children: "Open" }), children: [
+          /* @__PURE__ */ jsx("p", { className: "font-display text-3xl font-extrabold text-fg", children: "\u20AC68" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "7 bids \xB7 ends tonight at 21:00" })
+        ] }),
+        /* @__PURE__ */ jsx(Widget, { level: 3, title: "Latest sales", span: "full", action: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", children: "See all" }), children: /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border-subtle", children: SALES.map((s) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3 py-2.5 text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate font-medium text-fg", children: s.what }),
+            /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: s.who })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-fg-success", children: s.net })
+        ] }, s.what)) }) })
+      ] }) })
+    ] })
+  ] }) });
+}
+export {
+  AppShellOrochiaStudio as default
+};

package/registry/examples/app-shell/orochia-studio.tsx

@@ -0,0 +1,101 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Avatar } from "@krizaka/ui/avatar";
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { Meter } from "@krizaka/ui/meter";
+import { Stat } from "@krizaka/ui/stat";
+
+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>
+);
+const NAV = [
+  { id: "home", label: "Home", d: "M4 11 12 4l8 7v9H4z", current: true },
+  { id: "videos", label: "Videos", d: "M4 6h12v12H4zM16 10l4-2v8l-4-2", badge: 2 },
+  { id: "auctions", label: "Auctions", d: "M5 19h10M8 5l6 6M11 2l6 6M6 13l4-4" },
+  { id: "challenges", label: "Challenges", d: "M12 3v18M5 7h10l-2 3 2 3H5" },
+];
+const MONEY = [
+  { id: "earnings", label: "Earnings", d: "M4 18h16M7 14l3-3 3 2 5-6" },
+  { id: "payouts", label: "Payouts", d: "M3 7h18v10H3zM12 12h.01" },
+];
+const SALES = [
+  { what: "Unlock · “Night shoot, part 2”", who: "Léa M.", net: "€4.50" },
+  { what: "Tip", who: "Samir K.", net: "€9.00" },
+  { what: "Auction won · “Backstage cut”", who: "Inès B.", net: "€61.20" },
+];
+
+// TEMPLATE — Orochia's creator studio, Elena's home: the shell (sidebar of the studio, drawer on a phone) around a
+// dashboard — this week's figures, the payout on its way, the latest sales, the next auction. On a phone the sidebar
+// is a drawer, the stats stack two by two, every widget takes the full width.
+export default function AppShellOrochiaStudio() {
+  return (
+    <div className="brand-orochia">
+      <AppShell.Root>
+        <AppShell.Sidebar
+          label="Studio"
+          brand={<><ProductLogo id="orochia" size={24} animated={false} /> Orochia</>}
+          collapseLabels={["Collapse", "Expand"]}
+          closeLabel="Close the menu"
+          footer={
+            <div className="flex items-center gap-2.5 px-2 py-2 text-sm">
+              <Avatar fallback="EV" size="sm" />
+              <span className="min-w-0 truncate font-medium">Elena Varga</span>
+            </div>
+          }
+        >
+          {NAV.map((n) => (
+            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} current={n.current} badge={n.badge} />
+          ))}
+          <AppShell.Group>Money</AppShell.Group>
+          {MONEY.map((n) => (
+            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} />
+          ))}
+        </AppShell.Sidebar>
+        <AppShell.Body>
+          <AppShell.Header
+            title="Studio"
+            menuLabel="Open the menu"
+            actions={<Button size="sm" variant="primary" shape="cut">Upload a video</Button>}
+          />
+          <AppShell.Main>
+            <DashboardLayout headingAs="h2" eyebrow="This week" title="Good morning, Elena" description="Three sales since yesterday — your auction ends tonight.">
+              <Widget level={3} title="Your week" span="full">
+                <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+                  <Stat label="Views" value="12.4k" trend="up" trendLabel="+8 %" hint="7 days" />
+                  <Stat label="Supporters" value="318" trend="up" trendLabel="+21" hint="7 days" />
+                  <Stat label="Earned" value="€902" trend="up" trendLabel="+14 %" hint="after the 10 % fee" />
+                  <Stat label="Unlocks" value="146" trend="flat" trendLabel="±0" hint="7 days" />
+                </div>
+              </Widget>
+              <Widget level={3} title="Next payout" description="Every Monday, from €20" span={2}>
+                <Meter label="Towards your payout" value={74} max={100} valueText="€74 of €100 goal" showLabel />
+                <p className="mt-3 text-sm text-fg-secondary">€902 will reach your bank on Monday.</p>
+              </Widget>
+              <Widget level={3} title="Auction" description="“Backstage cut”" span={2} action={<Badge tone="accent" dot>Open</Badge>}>
+                <p className="font-display text-3xl font-extrabold text-fg">€68</p>
+                <p className="text-sm text-fg-secondary">7 bids · ends tonight at 21:00</p>
+              </Widget>
+              <Widget level={3} title="Latest sales" span="full" action={<Button size="sm" variant="ghost">See all</Button>}>
+                <ul className="divide-y divide-border-subtle">
+                  {SALES.map((s) => (
+                    <li key={s.what} className="flex items-center justify-between gap-3 py-2.5 text-sm">
+                      <span className="min-w-0">
+                        <span className="block truncate font-medium text-fg">{s.what}</span>
+                        <span className="text-fg-secondary">{s.who}</span>
+                      </span>
+                      <span className="font-mono font-semibold text-fg-success">{s.net}</span>
+                    </li>
+                  ))}
+                </ul>
+              </Widget>
+            </DashboardLayout>
+          </AppShell.Main>
+        </AppShell.Body>
+      </AppShell.Root>
+    </div>
+  );
+}

package/registry/examples/auth-layout/onboarding.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/auth-layout/onboarding.js

@@ -0,0 +1,56 @@
+"use client";
+
+// registry/examples/auth-layout/onboarding.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Stepper } from "@krizaka/ui/stepper";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var labels = { done: "Done", current: "Current step", upcoming: "Upcoming", error: "Failed" };
+function AuthLayoutOnboarding() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia", children: /* @__PURE__ */ jsxs(
+    AuthLayout,
+    {
+      brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 28, animated: false }),
+        " Orochia"
+      ] }),
+      promise: "Three steps, then your first video.",
+      aside: /* @__PURE__ */ jsx("p", { children: "Your identity is checked once, by a person, and never shown to your fans." }),
+      asideFooter: "\xA9 Krizaka \xB7 Montr\xE9al",
+      title: "Your payout account",
+      description: "Where your earnings go every Monday.",
+      children: [
+        /* @__PURE__ */ jsx(
+          Stepper,
+          {
+            "aria-label": "Onboarding",
+            orientation: "horizontal",
+            labels,
+            current: 1,
+            steps: [{ title: "Profile" }, { title: "Payouts" }, { title: "Identity" }]
+          }
+        ),
+        /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "onboarding-holder", children: "Account holder" }),
+            /* @__PURE__ */ jsx(Input, { id: "onboarding-holder", autoComplete: "name", defaultValue: "Elena Varga" })
+          ] }),
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "onboarding-iban", children: "IBAN" }),
+            /* @__PURE__ */ jsx(Input, { id: "onboarding-iban", inputMode: "text", placeholder: "FR76 \u2026", "aria-describedby": "onboarding-iban-hint" }),
+            /* @__PURE__ */ jsx(Field.Hint, { id: "onboarding-iban-hint", children: "Checked before your first payout." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", shape: "cut", className: "flex-1", children: "Back" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", className: "flex-1", children: "Continue" })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  AuthLayoutOnboarding as default
+};

package/registry/examples/auth-layout/onboarding.tsx

@@ -0,0 +1,47 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Stepper } from "@krizaka/ui/stepper";
+
+const labels = { done: "Done", current: "Current step", upcoming: "Upcoming", error: "Failed" };
+
+// TEMPLATE — onboarding a creator (Orochia): the steps said in words above the form of the current one; the brand panel
+// says why it is worth it. On a phone the steps stay horizontal and compact above the fields.
+export default function AuthLayoutOnboarding() {
+  return (
+    <div className="brand-orochia">
+      <AuthLayout
+        brand={<><ProductLogo id="orochia" size={28} animated={false} /> Orochia</>}
+        promise="Three steps, then your first video."
+        aside={<p>Your identity is checked once, by a person, and never shown to your fans.</p>}
+        asideFooter="© Krizaka · Montréal"
+        title="Your payout account"
+        description="Where your earnings go every Monday."
+      >
+        <Stepper
+          aria-label="Onboarding"
+          orientation="horizontal"
+          labels={labels}
+          current={1}
+          steps={[{ title: "Profile" }, { title: "Payouts" }, { title: "Identity" }]}
+        />
+        <form className="flex flex-col gap-4">
+          <Field.Root>
+            <Field.Label htmlFor="onboarding-holder">Account holder</Field.Label>
+            <Input id="onboarding-holder" autoComplete="name" defaultValue="Elena Varga" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label htmlFor="onboarding-iban">IBAN</Field.Label>
+            <Input id="onboarding-iban" inputMode="text" placeholder="FR76 …" aria-describedby="onboarding-iban-hint" />
+            <Field.Hint id="onboarding-iban-hint">Checked before your first payout.</Field.Hint>
+          </Field.Root>
+          <div className="flex gap-2">
+            <Button type="button" variant="secondary" size="lg" shape="cut" className="flex-1">Back</Button>
+            <Button type="submit" variant="primary" size="lg" shape="cut" className="flex-1">Continue</Button>
+          </div>
+        </form>
+      </AuthLayout>
+    </div>
+  );
+}

package/registry/examples/auth-layout/sign-in.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;