@krizaka/ui 2.6.0 → 2.9.0

package/registry/examples/auth-layout/sign-in.js

@@ -0,0 +1,55 @@
+"use client";
+
+// registry/examples/auth-layout/sign-in.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 { Mascot } from "@krizaka/ui/mascots";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AuthLayoutSignIn() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia", children: /* @__PURE__ */ jsx(
+    AuthLayout,
+    {
+      brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 28, animated: false }),
+        " Orochia"
+      ] }),
+      promise: "Your fans pay you, not an algorithm.",
+      aside: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-3", children: [
+        /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "welcome", size: 64 }),
+        /* @__PURE__ */ jsx("p", { children: "\u201C90 % of every tip, unlock and auction reaches me \u2014 on Monday.\u201D \u2014 Elena, creator" })
+      ] }),
+      asideFooter: "\xA9 Krizaka \xB7 Montr\xE9al",
+      title: "Welcome back",
+      description: "Sign in to your studio.",
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "No account yet? ",
+        /* @__PURE__ */ jsx("a", { className: "font-semibold text-fg-accent", href: "#sign-up", children: "Create one" })
+      ] }),
+      legal: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "By signing in you accept the ",
+        /* @__PURE__ */ jsx("a", { className: "underline", href: "#terms", children: "terms" }),
+        " and the ",
+        /* @__PURE__ */ jsx("a", { className: "underline", href: "#privacy", children: "privacy policy" }),
+        "."
+      ] }),
+      children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "sign-in-email", children: "Email" }),
+          /* @__PURE__ */ jsx(Input, { id: "sign-in-email", type: "email", autoComplete: "email", placeholder: "you@example.com" })
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "sign-in-password", children: "Password" }),
+          /* @__PURE__ */ jsx(Input, { id: "sign-in-password", type: "password", autoComplete: "current-password" }),
+          /* @__PURE__ */ jsx(Field.Hint, { children: /* @__PURE__ */ jsx("a", { className: "text-fg-accent", href: "#reset", children: "Forgot it?" }) })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", shimmer: true, className: "w-full", children: "Sign in" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", shape: "cut", className: "w-full", children: "Use a passkey" })
+      ] })
+    }
+  ) });
+}
+export {
+  AuthLayoutSignIn as default
+};

package/registry/examples/auth-layout/sign-in.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 { Mascot } from "@krizaka/ui/mascots";
+
+// TEMPLATE — Orochia's sign-in: the brand panel (its gradient, the promise, a creator's sentence) beside a calm form;
+// on a phone one column, the mark above the form, the fields at full width with 44 px targets.
+export default function AuthLayoutSignIn() {
+  return (
+    <div className="brand-orochia">
+      <AuthLayout
+        brand={<><ProductLogo id="orochia" size={28} animated={false} /> Orochia</>}
+        promise="Your fans pay you, not an algorithm."
+        aside={
+          <div className="flex items-end gap-3">
+            <Mascot bird="flamingo" mood="welcome" size={64} />
+            <p>“90 % of every tip, unlock and auction reaches me — on Monday.” — Elena, creator</p>
+          </div>
+        }
+        asideFooter="© Krizaka · Montréal"
+        title="Welcome back"
+        description="Sign in to your studio."
+        footer={<>No account yet? <a className="font-semibold text-fg-accent" href="#sign-up">Create one</a></>}
+        legal={<>By signing in you accept the <a className="underline" href="#terms">terms</a> and the <a className="underline" href="#privacy">privacy policy</a>.</>}
+      >
+        <form className="flex flex-col gap-4">
+          <Field.Root>
+            <Field.Label htmlFor="sign-in-email">Email</Field.Label>
+            <Input id="sign-in-email" type="email" autoComplete="email" placeholder="you@example.com" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label htmlFor="sign-in-password">Password</Field.Label>
+            <Input id="sign-in-password" type="password" autoComplete="current-password" />
+            <Field.Hint><a className="text-fg-accent" href="#reset">Forgot it?</a></Field.Hint>
+          </Field.Root>
+          <Button type="submit" variant="primary" size="lg" shape="cut" shimmer className="w-full">
+            Sign in
+          </Button>
+          <Button type="button" variant="secondary" size="lg" shape="cut" className="w-full">
+            Use a passkey
+          </Button>
+        </form>
+      </AuthLayout>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/auth-layout/verify.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AuthLayoutVerify() {
+  return /* @__PURE__ */ jsx(AuthLayout, { brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ProductLogo, { id: "krizaka", size: 28, animated: false }),
+    " Krizaka"
+  ] }), title: "Check your email", description: "We sent a 6-digit code to eric@tremblay.ca.", children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { htmlFor: "verify-code", children: "Code" }),
+      /* @__PURE__ */ jsx(Input, { id: "verify-code", inputMode: "numeric", autoComplete: "one-time-code", maxLength: 6 })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", className: "w-full", children: "Verify" })
+  ] }) });
+}
+export {
+  AuthLayoutVerify as default
+};

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

@@ -0,0 +1,19 @@
+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";
+
+// The smallest entry screen: no promise, the brand panel still carries the product's gradient on a desktop.
+export default function AuthLayoutVerify() {
+  return (
+    <AuthLayout brand={<><ProductLogo id="krizaka" size={28} animated={false} /> Krizaka</>} title="Check your email" description="We sent a 6-digit code to eric@tremblay.ca.">
+      <form className="flex flex-col gap-4">
+        <Field.Root>
+          <Field.Label htmlFor="verify-code">Code</Field.Label>
+          <Input id="verify-code" inputMode="numeric" autoComplete="one-time-code" maxLength={6} />
+        </Field.Root>
+        <Button type="submit" variant="primary" size="lg" shape="cut" className="w-full">Verify</Button>
+      </form>
+    </AuthLayout>
+  );
+}

package/registry/examples/choice-grid/line-up.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/choice-grid/line-up.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/choice-grid/line-up.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { ChoiceGrid } from "@krizaka/ui/choice-grid";
+import { StatGauge } from "@krizaka/ui/profile-card";
+import { jsx } from "react/jsx-runtime";
+var LINE_UP = [
+  { id: "orazaka", name: "Orazaka", title: "Sovereign AI", stat: "Data kept at home", value: 100 },
+  { id: "orochia", name: "Orochia", title: "Creator video", stat: "Creator share", value: 90 }
+];
+function ChoiceGridLineUp() {
+  return /* @__PURE__ */ jsx(
+    ChoiceGrid,
+    {
+      variant: "arcade",
+      label: "The products",
+      tag: "Team select",
+      caption: "One studio",
+      prompt: "Choose your fighter",
+      items: LINE_UP.map((p, i) => ({
+        id: p.id,
+        brand: p.id,
+        badge: `P${i + 1}`,
+        visual: /* @__PURE__ */ jsx(ProductLogo, { id: p.id, size: 84, animated: false }),
+        name: p.name,
+        title: p.title,
+        extra: /* @__PURE__ */ jsx(StatGauge, { label: p.stat, value: p.value }),
+        meta: `Stage 0${i + 1} \u2193`,
+        href: `#${p.id}`
+      }))
+    }
+  );
+}
+export {
+  ChoiceGridLineUp as default
+};

package/registry/examples/choice-grid/line-up.tsx

@@ -0,0 +1,32 @@
+import { ProductLogo } from "@krizaka/ui";
+import { ChoiceGrid } from "@krizaka/ui/choice-grid";
+import { StatGauge } from "@krizaka/ui/profile-card";
+
+const LINE_UP = [
+  { id: "orazaka", name: "Orazaka", title: "Sovereign AI", stat: "Data kept at home", value: 100 },
+  { id: "orochia", name: "Orochia", title: "Creator video", stat: "Creator share", value: 90 },
+] as const;
+
+// The select screen of a told page: each card in its brand, a gauge, and a link to its chapter.
+export default function ChoiceGridLineUp() {
+  return (
+    <ChoiceGrid
+      variant="arcade"
+      label="The products"
+      tag="Team select"
+      caption="One studio"
+      prompt="Choose your fighter"
+      items={LINE_UP.map((p, i) => ({
+        id: p.id,
+        brand: p.id,
+        badge: `P${i + 1}`,
+        visual: <ProductLogo id={p.id} size={84} animated={false} />,
+        name: p.name,
+        title: p.title,
+        extra: <StatGauge label={p.stat} value={p.value} />,
+        meta: `Stage 0${i + 1} ↓`,
+        href: `#${p.id}`,
+      }))}
+    />
+  );
+}

package/registry/examples/choice-grid/plans.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/choice-grid/plans.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/choice-grid/plans.tsx
+import { Emblem } from "@krizaka/ui/achievement";
+import { ChoiceGrid } from "@krizaka/ui/choice-grid";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function ChoiceGridPlans() {
+  const [plan, setPlan] = useState("creator");
+  return /* @__PURE__ */ jsx(
+    ChoiceGrid,
+    {
+      label: "Choose your plan",
+      tag: "Step 1 of 3",
+      caption: "You can change it at any time.",
+      value: plan,
+      onValueChange: setPlan,
+      items: [
+        { id: "starter", visual: /* @__PURE__ */ jsx(Emblem, { kind: "sword", size: 34 }), name: "Starter", title: "Publish and get paid" },
+        { id: "creator", visual: /* @__PURE__ */ jsx(Emblem, { kind: "jewel", size: 34 }), name: "Creator", title: "Challenges and auctions" },
+        { id: "studio", visual: /* @__PURE__ */ jsx(Emblem, { kind: "mirror", size: 34 }), name: "Studio", title: "A team, shared earnings" }
+      ]
+    }
+  );
+}
+export {
+  ChoiceGridPlans as default
+};

package/registry/examples/choice-grid/plans.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Emblem } from "@krizaka/ui/achievement";
+import { ChoiceGrid } from "@krizaka/ui/choice-grid";
+import { useState } from "react";
+
+// Selectable: a radio group — one tab stop, the arrow keys move and choose.
+export default function ChoiceGridPlans() {
+  const [plan, setPlan] = useState("creator");
+  return (
+    <ChoiceGrid
+      label="Choose your plan"
+      tag="Step 1 of 3"
+      caption="You can change it at any time."
+      value={plan}
+      onValueChange={setPlan}
+      items={[
+        { id: "starter", visual: <Emblem kind="sword" size={34} />, name: "Starter", title: "Publish and get paid" },
+        { id: "creator", visual: <Emblem kind="jewel" size={34} />, name: "Creator", title: "Challenges and auctions" },
+        { id: "studio", visual: <Emblem kind="mirror" size={34} />, name: "Studio", title: "A team, shared earnings" },
+      ]}
+    />
+  );
+}

package/registry/examples/continue-prompt/arcade.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/continue-prompt/arcade.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/continue-prompt/arcade.tsx
+import { ContinuePrompt } from "@krizaka/ui/continue-prompt";
+import { jsx } from "react/jsx-runtime";
+function ContinuePromptArcade() {
+  return /* @__PURE__ */ jsx(
+    ContinuePrompt,
+    {
+      variant: "arcade",
+      brand: "krizaka",
+      className: "w-[36rem] max-w-full",
+      caption: "Krizaka \xB7 Cabinet 01",
+      highlight: "Insert coin",
+      hint: "1 credit = 1 story",
+      status: "Credit 01",
+      title: "Continue?",
+      countdown: { from: 9, to: 7 },
+      actionKey: "1P Start",
+      actionLabel: "Back to the top",
+      onAction: () => window.scrollTo({ top: 0, behavior: "smooth" }),
+      children: /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: "Round one is over." })
+    }
+  );
+}
+export {
+  ContinuePromptArcade as default
+};

package/registry/examples/continue-prompt/arcade.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ContinuePrompt } from "@krizaka/ui/continue-prompt";
+
+// The cabinet at the end of a told page: the closing call on a CRT that switches on, 9 → 7 once, back to the top.
+export default function ContinuePromptArcade() {
+  return (
+    <ContinuePrompt
+      variant="arcade"
+      brand="krizaka"
+      className="w-[36rem] max-w-full"
+      caption="Krizaka · Cabinet 01"
+      highlight="Insert coin"
+      hint="1 credit = 1 story"
+      status="Credit 01"
+      title="Continue?"
+      countdown={{ from: 9, to: 7 }}
+      actionKey="1P Start"
+      actionLabel="Back to the top"
+      onAction={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+    >
+      <p className="text-lg font-semibold">Round one is over.</p>
+    </ContinuePrompt>
+  );
+}

package/registry/examples/continue-prompt/offer.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/continue-prompt/offer.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/continue-prompt/offer.tsx
+import { ContinuePrompt } from "@krizaka/ui/continue-prompt";
+import { jsx } from "react/jsx-runtime";
+function ContinuePromptOffer() {
+  return /* @__PURE__ */ jsx(
+    ContinuePrompt,
+    {
+      className: "w-[28rem] max-w-full",
+      caption: "Your trial",
+      highlight: "3 days left",
+      status: "All features on",
+      title: "Keep your studio?",
+      count: "3",
+      actionLabel: "Continue with Creator",
+      href: "#plans",
+      children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "Your videos, challenges and earnings stay exactly where they are." })
+    }
+  );
+}
+export {
+  ContinuePromptOffer as default
+};

package/registry/examples/continue-prompt/offer.tsx

@@ -0,0 +1,19 @@
+import { ContinuePrompt } from "@krizaka/ui/continue-prompt";
+
+// The end of a trial: the question, what counts, a line, and the one action that continues (a link with `href`).
+export default function ContinuePromptOffer() {
+  return (
+    <ContinuePrompt
+      className="w-[28rem] max-w-full"
+      caption="Your trial"
+      highlight="3 days left"
+      status="All features on"
+      title="Keep your studio?"
+      count="3"
+      actionLabel="Continue with Creator"
+      href="#plans"
+    >
+      <p className="text-sm text-fg-secondary">Your videos, challenges and earnings stay exactly where they are.</p>
+    </ContinuePrompt>
+  );
+}

package/registry/examples/dashboard-layout/orazaka-eric.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/dashboard-layout/orazaka-eric.js

@@ -0,0 +1,58 @@
+"use client";
+
+// registry/examples/dashboard-layout/orazaka-eric.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { Chip } from "@krizaka/ui/chip";
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { Meter } from "@krizaka/ui/meter";
+import { Progress } from "@krizaka/ui/progress";
+import { Stat } from "@krizaka/ui/stat";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var JOBS = [
+  { name: "Catalogue summaries", studio: "Writing studio", value: 72, eta: "about 2 min" },
+  { name: "Product shots, autumn", studio: "Image studio", value: 35, eta: "about 6 min" }
+];
+var PACKS = [
+  { name: "Customer support", runs: "412 answers this week" },
+  { name: "Law 25 review", runs: "38 documents checked" }
+];
+function DashboardLayoutOrazakaEric() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orazaka w-full", children: /* @__PURE__ */ jsxs(
+    DashboardLayout,
+    {
+      eyebrow: "Tremblay & associ\xE9s \xB7 on-premise",
+      title: "Good morning, Eric",
+      description: "Nothing left your server this week: 1,284 requests, all answered locally.",
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", shape: "cut", children: "Add a pack" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "New job" })
+      ] }),
+      toolbar: /* @__PURE__ */ jsxs(Chip.Group, { type: "single", label: "Period", defaultValue: "7d", required: true, children: [
+        /* @__PURE__ */ jsx(Chip, { value: "today", children: "Today" }),
+        /* @__PURE__ */ jsx(Chip, { value: "7d", children: "7 days" }),
+        /* @__PURE__ */ jsx(Chip, { value: "30d", children: "30 days" })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(Widget, { title: "Requests", children: /* @__PURE__ */ jsx(Stat, { label: "7 days", value: "1,284", trend: "up", trendLabel: "+6 %" }) }),
+        /* @__PURE__ */ jsx(Widget, { title: "Answered locally", children: /* @__PURE__ */ jsx(Stat, { label: "No cloud call", value: "100 %", hint: "sovereign mode" }) }),
+        /* @__PURE__ */ jsx(Widget, { title: "Median answer", children: /* @__PURE__ */ jsx(Stat, { label: "Chat", value: "1.8 s", trend: "down", trendLabel: "\u22120.3 s" }) }),
+        /* @__PURE__ */ jsx(Widget, { title: "Credits", description: "Workspace plan", children: /* @__PURE__ */ jsx(Meter, { label: "Credits used", value: 3800, max: 12e3, valueText: "3,800 of 12,000", showLabel: true }) }),
+        /* @__PURE__ */ jsx(Widget, { title: "Running now", span: 2, action: /* @__PURE__ */ jsx(Badge, { tone: "accent", dot: true, children: "2 jobs" }), children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-4", children: JOBS.map((j) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-baseline justify-between gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-fg", children: j.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-secondary", children: j.studio })
+          ] }),
+          /* @__PURE__ */ jsx(Progress, { value: j.value, label: j.name, eta: j.eta, size: "sm" })
+        ] }, j.name)) }) }),
+        /* @__PURE__ */ jsx(Widget, { title: "Packs at work", span: 2, action: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", children: "All packs" }), children: /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border-subtle", children: PACKS.map((p) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3 py-2.5 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-fg", children: p.name }),
+          /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: p.runs })
+        ] }, p.name)) }) })
+      ]
+    }
+  ) });
+}
+export {
+  DashboardLayoutOrazakaEric as default
+};

package/registry/examples/dashboard-layout/orazaka-eric.tsx

@@ -0,0 +1,80 @@
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { Chip } from "@krizaka/ui/chip";
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { Meter } from "@krizaka/ui/meter";
+import { Progress } from "@krizaka/ui/progress";
+import { Stat } from "@krizaka/ui/stat";
+
+const JOBS = [
+  { name: "Catalogue summaries", studio: "Writing studio", value: 72, eta: "about 2 min" },
+  { name: "Product shots, autumn", studio: "Image studio", value: 35, eta: "about 6 min" },
+];
+const PACKS = [
+  { name: "Customer support", runs: "412 answers this week" },
+  { name: "Law 25 review", runs: "38 documents checked" },
+];
+
+// TEMPLATE — Orazaka's console, Eric's morning (an accountant who runs his firm's AI on its own server): what the
+// engine did, what is running now, the credits left, the packs at work. The period is a single-choice chip group above the grid;
+// on a phone everything stacks in reading order, the running jobs first after the figures.
+export default function DashboardLayoutOrazakaEric() {
+  return (
+    <div className="brand-orazaka w-full">
+      <DashboardLayout
+        eyebrow="Tremblay & associés · on-premise"
+        title="Good morning, Eric"
+        description="Nothing left your server this week: 1,284 requests, all answered locally."
+        actions={
+          <>
+            <Button size="sm" variant="secondary" shape="cut">Add a pack</Button>
+            <Button size="sm" variant="primary" shape="cut">New job</Button>
+          </>
+        }
+        toolbar={
+          <Chip.Group type="single" label="Period" defaultValue="7d" required>
+            <Chip value="today">Today</Chip>
+            <Chip value="7d">7 days</Chip>
+            <Chip value="30d">30 days</Chip>
+          </Chip.Group>
+        }
+      >
+        <Widget title="Requests">
+          <Stat label="7 days" value="1,284" trend="up" trendLabel="+6 %" />
+        </Widget>
+        <Widget title="Answered locally">
+          <Stat label="No cloud call" value="100 %" hint="sovereign mode" />
+        </Widget>
+        <Widget title="Median answer">
+          <Stat label="Chat" value="1.8 s" trend="down" trendLabel="−0.3 s" />
+        </Widget>
+        <Widget title="Credits" description="Workspace plan">
+          <Meter label="Credits used" value={3800} max={12000} valueText="3,800 of 12,000" showLabel />
+        </Widget>
+        <Widget title="Running now" span={2} action={<Badge tone="accent" dot>2 jobs</Badge>}>
+          <ul className="flex flex-col gap-4">
+            {JOBS.map((j) => (
+              <li key={j.name} className="flex flex-col gap-1.5">
+                <span className="flex items-baseline justify-between gap-2 text-sm">
+                  <span className="font-medium text-fg">{j.name}</span>
+                  <span className="text-xs text-fg-secondary">{j.studio}</span>
+                </span>
+                <Progress value={j.value} label={j.name} eta={j.eta} size="sm" />
+              </li>
+            ))}
+          </ul>
+        </Widget>
+        <Widget title="Packs at work" span={2} action={<Button size="sm" variant="ghost">All packs</Button>}>
+          <ul className="divide-y divide-border-subtle">
+            {PACKS.map((p) => (
+              <li key={p.name} className="flex items-center justify-between gap-3 py-2.5 text-sm">
+                <span className="font-medium text-fg">{p.name}</span>
+                <span className="text-fg-secondary">{p.runs}</span>
+              </li>
+            ))}
+          </ul>
+        </Widget>
+      </DashboardLayout>
+    </div>
+  );
+}

package/registry/examples/dashboard-layout/widgets.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/dashboard-layout/widgets.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/dashboard-layout/widgets.tsx
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { Stat } from "@krizaka/ui/stat";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DashboardLayoutWidgets() {
+  return /* @__PURE__ */ jsxs(DashboardLayout, { className: "w-full", title: "Overview", description: "The last 7 days.", children: [
+    /* @__PURE__ */ jsx(Widget, { title: "Requests", children: /* @__PURE__ */ jsx(Stat, { label: "Today", value: "1,284", trend: "up", trendLabel: "+6 %" }) }),
+    /* @__PURE__ */ jsx(Widget, { title: "Credits left", children: /* @__PURE__ */ jsx(Stat, { label: "Workspace", value: "8,200" }) }),
+    /* @__PURE__ */ jsx(Widget, { title: "Usage", span: 2, children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "A chart of @krizaka/charts goes here." }) }),
+    /* @__PURE__ */ jsx(Widget, { title: "Recent jobs", span: "full", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "A DataTable goes here." }) })
+  ] });
+}
+export {
+  DashboardLayoutWidgets as default
+};

package/registry/examples/dashboard-layout/widgets.tsx

@@ -0,0 +1,22 @@
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { Stat } from "@krizaka/ui/stat";
+
+// The grid: one column on a phone, two from `sm`, four from `xl`; `span` makes a widget wider (it keeps its order).
+export default function DashboardLayoutWidgets() {
+  return (
+    <DashboardLayout className="w-full" title="Overview" description="The last 7 days.">
+      <Widget title="Requests">
+        <Stat label="Today" value="1,284" trend="up" trendLabel="+6 %" />
+      </Widget>
+      <Widget title="Credits left">
+        <Stat label="Workspace" value="8,200" />
+      </Widget>
+      <Widget title="Usage" span={2}>
+        <p className="text-sm text-fg-secondary">A chart of @krizaka/charts goes here.</p>
+      </Widget>
+      <Widget title="Recent jobs" span="full">
+        <p className="text-sm text-fg-secondary">A DataTable goes here.</p>
+      </Widget>
+    </DashboardLayout>
+  );
+}

package/registry/examples/detail-layout/job.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/detail-layout/job.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/detail-layout/job.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { jsx } from "react/jsx-runtime";
+function DetailLayoutJob() {
+  return /* @__PURE__ */ jsx(
+    DetailLayout,
+    {
+      className: "w-full",
+      back: /* @__PURE__ */ jsx("a", { href: "#jobs", children: "\u2190 Jobs" }),
+      eyebrow: "Job \xB7 job-4822",
+      title: "Podcast transcript",
+      status: /* @__PURE__ */ jsx(Badge, { tone: "accent", dot: true, children: "Running" }),
+      meta: "Whisper large \xB7 started 5 min ago",
+      actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", shape: "cut", children: "Cancel" }),
+      children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "The transcript appears here as it is written." })
+    }
+  );
+}
+export {
+  DetailLayoutJob as default
+};