@krizaka/ui 2.8.0 → 2.10.0

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/component-page/button.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/component-page/button.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/component-page/button.tsx
+import { Button } from "@krizaka/ui/button";
+import { ComponentPage } from "@krizaka/ui/component-page";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ComponentPageButton() {
+  return /* @__PURE__ */ jsx(
+    ComponentPage,
+    {
+      className: "w-full",
+      back: /* @__PURE__ */ jsx("a", { href: "#catalogue", children: "\u2190 Components" }),
+      eyebrow: "Actions",
+      title: "Button",
+      summary: "The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.",
+      facts: [{ label: "Web + Mobile", tone: "ok" }, { label: "Stable" }],
+      preview: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 p-8", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", shimmer: true, children: "Publish" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", shape: "cut", children: "Save a draft" })
+      ] }),
+      install: { code: 'import { Button } from "@krizaka/ui/button";', language: "ts", copyLabel: "Copy", copiedLabel: "Copied" },
+      sections: [
+        { id: "when", title: "When to use", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "For the action a block is about; links that look like actions use `asChild`." }) },
+        { id: "a11y", title: "Accessibility", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "A real button; while loading it says so in a live region." }) }
+      ],
+      aside: /* @__PURE__ */ jsx(LinkCard, { href: "#confirm-button", title: "Confirm button", description: "A destructive action in two presses.", titleAs: "span" })
+    }
+  );
+}
+export {
+  ComponentPageButton as default
+};

package/registry/examples/component-page/button.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@krizaka/ui/button";
+import { ComponentPage } from "@krizaka/ui/component-page";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+// TEMPLATE — a component's page (what krizaka.com/docs/ui generates from the registry): name, summary, status and
+// platforms, the live preview, the import line, its sections; related components aside (under it on a phone).
+export default function ComponentPageButton() {
+  return (
+    <ComponentPage
+      className="w-full"
+      back={<a href="#catalogue">← Components</a>}
+      eyebrow="Actions"
+      title="Button"
+      summary="The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in."
+      facts={[{ label: "Web + Mobile", tone: "ok" }, { label: "Stable" }]}
+      preview={
+        <div className="flex flex-wrap items-center justify-center gap-3 p-8">
+          <Button variant="primary" shape="cut" shimmer>Publish</Button>
+          <Button variant="secondary" shape="cut">Save a draft</Button>
+        </div>
+      }
+      install={{ code: 'import { Button } from "@krizaka/ui/button";', language: "ts", copyLabel: "Copy", copiedLabel: "Copied" }}
+      sections={[
+        { id: "when", title: "When to use", children: <p className="text-sm text-fg-secondary">For the action a block is about; links that look like actions use `asChild`.</p> },
+        { id: "a11y", title: "Accessibility", children: <p className="text-sm text-fg-secondary">A real button; while loading it says so in a live region.</p> },
+      ]}
+      aside={<LinkCard href="#confirm-button" title="Confirm button" description="A destructive action in two presses." titleAs="span" />}
+    />
+  );
+}

package/registry/examples/contact-page/team.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/contact-page/team.js

@@ -0,0 +1,39 @@
+"use client";
+
+// registry/examples/contact-page/team.tsx
+import { Button } from "@krizaka/ui/button";
+import { ContactPage } from "@krizaka/ui/contact-page";
+import { Field, Input, Textarea } from "@krizaka/ui/field";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ContactPageTeam() {
+  return /* @__PURE__ */ jsx(
+    ContactPage,
+    {
+      eyebrow: "Contact",
+      title: "Talk to the people who build it",
+      lead: "A person answers within two working days, in English or in French.",
+      aside: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "welcome", size: 112 }),
+      channels: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(LinkCard, { href: "https://github.com/orgs/krizaka/discussions", title: "Discussions", description: "Questions and ideas, in public.", titleAs: "span" }),
+        /* @__PURE__ */ jsx(LinkCard, { href: "https://github.com/krizaka", title: "Report a problem", description: "An issue on the repository.", titleAs: "span" })
+      ] }),
+      form: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "contact-email", children: "Email" }),
+          /* @__PURE__ */ jsx(Input, { id: "contact-email", type: "email", autoComplete: "email" })
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "contact-message", children: "Message" }),
+          /* @__PURE__ */ jsx(Textarea, { id: "contact-message", rows: 4 })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "Send" })
+      ] }),
+      next: { title: "What happens next", steps: [{ title: "We read it", text: "The same day, on working days." }, { title: "We answer", text: "Within two working days." }] }
+    }
+  );
+}
+export {
+  ContactPageTeam as default
+};

package/registry/examples/contact-page/team.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@krizaka/ui/button";
+import { ContactPage } from "@krizaka/ui/contact-page";
+import { Field, Input, Textarea } from "@krizaka/ui/field";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Mascot } from "@krizaka/ui/mascots";
+
+// TEMPLATE — reaching the team: the public channels as cards beside the private form, then what happens after sending.
+// On a phone the form comes after the channels, its fields at full width.
+export default function ContactPageTeam() {
+  return (
+    <ContactPage
+      eyebrow="Contact"
+      title="Talk to the people who build it"
+      lead="A person answers within two working days, in English or in French."
+      aside={<Mascot bird="flamingo" mood="welcome" size={112} />}
+      channels={
+        <>
+          <LinkCard href="https://github.com/orgs/krizaka/discussions" title="Discussions" description="Questions and ideas, in public." titleAs="span" />
+          <LinkCard href="https://github.com/krizaka" title="Report a problem" description="An issue on the repository." titleAs="span" />
+        </>
+      }
+      form={
+        <form className="flex flex-col gap-4">
+          <Field.Root>
+            <Field.Label htmlFor="contact-email">Email</Field.Label>
+            <Input id="contact-email" type="email" autoComplete="email" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label htmlFor="contact-message">Message</Field.Label>
+            <Textarea id="contact-message" rows={4} />
+          </Field.Root>
+          <Button type="submit" variant="primary" size="lg" shape="cut" shimmer>Send</Button>
+        </form>
+      }
+      next={{ title: "What happens next", steps: [{ title: "We read it", text: "The same day, on working days." }, { title: "We answer", text: "Within two working days." }] }}
+    />
+  );
+}

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

package/registry/examples/detail-layout/job.tsx

@@ -0,0 +1,20 @@
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+
+// Without tabs or side panel: an object's header and its content.
+export default function DetailLayoutJob() {
+  return (
+    <DetailLayout
+      className="w-full"
+      back={<a href="#jobs">← Jobs</a>}
+      eyebrow="Job · job-4822"
+      title="Podcast transcript"
+      status={<Badge tone="accent" dot>Running</Badge>}
+      meta="Whisper large · started 5 min ago"
+      actions={<Button size="sm" variant="danger" shape="cut">Cancel</Button>}
+    >
+      <p className="text-sm text-fg-secondary">The transcript appears here as it is written.</p>
+    </DetailLayout>
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+// registry/examples/detail-layout/video.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { Facts } from "@krizaka/ui/page";
+import { Stat } from "@krizaka/ui/stat";
+import { Tabs } from "@krizaka/ui/tabs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DetailLayoutVideo() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia w-full", children: /* @__PURE__ */ jsx(Tabs.Root, { defaultValue: "overview", children: /* @__PURE__ */ jsxs(
+    DetailLayout,
+    {
+      back: /* @__PURE__ */ jsx("a", { href: "#videos", children: "\u2190 Videos" }),
+      media: /* @__PURE__ */ jsx("div", { className: "aspect-video w-40 bg-linear-to-br from-accent to-accent-2" }),
+      eyebrow: "Video \xB7 v-2087",
+      title: "Night shoot, part 2",
+      status: /* @__PURE__ */ jsx(Badge, { tone: "success", dot: true, children: "Published" }),
+      meta: /* @__PURE__ */ jsx(Facts, { items: [{ label: "12:48" }, { label: "Unlock \u20AC4.99" }, { label: "18+ checked", tone: "ok" }] }),
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", shape: "cut", children: "Edit" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Share" })
+      ] }),
+      tabs: /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Video", children: [
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "overview", children: "Overview" }),
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "sales", children: "Sales" }),
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "comments", children: "Comments" })
+      ] }),
+      aside: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+        /* @__PURE__ */ jsx(Stat, { label: "Unlocks", value: "146", trend: "up", trendLabel: "+12", hint: "7 days" }),
+        /* @__PURE__ */ jsx(Stat, { label: "Earned", value: "\u20AC653", hint: "after the 10 % fee" })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "overview", className: "text-sm leading-relaxed text-fg-secondary", children: "The second half of the night shoot in Old Montr\xE9al: the rooftop, the rain, the last take at dawn." }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "sales", className: "text-sm text-fg-secondary", children: "146 unlocks, 3 tips." }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "comments", className: "text-sm text-fg-secondary", children: "28 comments, 2 waiting for moderation." })
+      ]
+    }
+  ) }) });
+}
+export {
+  DetailLayoutVideo as default
+};