@krizaka/ui 3.4.0 → 3.6.0

package/registry/examples/chat/inbox.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/chat/inbox.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/chat/inbox.tsx
+import { ConversationItem } from "@krizaka/ui/chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChatInbox() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-w-md flex-col rounded-xl border border-border-default bg-surface-0 py-1", children: [
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Elena", online: true, onlineLabel: "online", preview: "typing\u2026", typing: true, time: "19:06", unread: 2, unreadLabel: "2 unread", href: "#/chats/elena" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Noah", preview: "See you Saturday then!", time: "Mon", href: "#/chats/noah" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Mina", preview: "You: haha same", time: "Sun", href: "#/chats/mina" })
+  ] });
+}
+export {
+  ChatInbox as default
+};

package/registry/examples/chat/inbox.tsx

@@ -0,0 +1,12 @@
+import { ConversationItem } from "@krizaka/ui/chat";
+
+// The inbox: online, the last message or “typing…”, the time, the unread count.
+export default function ChatInbox() {
+  return (
+    <div className="flex max-w-md flex-col rounded-xl border border-border-default bg-surface-0 py-1">
+      <ConversationItem name="Elena" online onlineLabel="online" preview="typing…" typing time="19:06" unread={2} unreadLabel="2 unread" href="#/chats/elena" />
+      <ConversationItem name="Noah" preview="See you Saturday then!" time="Mon" href="#/chats/noah" />
+      <ConversationItem name="Mina" preview="You: haha same" time="Sun" href="#/chats/mina" />
+    </div>
+  );
+}

package/registry/examples/chat/native/conversation.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/chat/native/conversation.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/chat/native/conversation.tsx
+import { MessageBubble, MessageComposer, TypingIndicator } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChatConversation() {
+  const [draft, setDraft] = useState("");
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, gap: 4 }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { padding: 12, gap: 4 }, children: [
+      /* @__PURE__ */ jsx(MessageBubble, { text: "Hey! Loved your sunset photo \u{1F305}", time: "19:02", grouped: "first" }),
+      /* @__PURE__ */ jsx(MessageBubble, { text: "Was it Cabo da Roca?", time: "19:02", grouped: "last" }),
+      /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "It was! Have you been?", time: "19:05", grouped: "first" }),
+      /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "We should go this weekend", time: "19:05", grouped: "last", status: "read", showStatus: true, labels: { status: { read: "Read" } } }),
+      /* @__PURE__ */ jsx(TypingIndicator, { label: "Elena is typing" })
+    ] }),
+    /* @__PURE__ */ jsx(MessageComposer, { value: draft, onValueChange: setDraft, onSend: () => setDraft(""), placeholder: "Message", sendLabel: "Send" })
+  ] });
+}
+export {
+  NativeChatConversation as default
+};

package/registry/examples/chat/native/conversation.tsx

@@ -0,0 +1,20 @@
+import { MessageBubble, MessageComposer, TypingIndicator } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// A conversation: runs grouped, the time inside, the receipt under the last of yours, the typing dots, the composer.
+export default function NativeChatConversation() {
+  const [draft, setDraft] = useState("");
+  return (
+    <View style={{ width: 360, gap: 4 }}>
+      <View style={{ padding: 12, gap: 4 }}>
+        <MessageBubble text="Hey! Loved your sunset photo 🌅" time="19:02" grouped="first" />
+        <MessageBubble text="Was it Cabo da Roca?" time="19:02" grouped="last" />
+        <MessageBubble mine text="It was! Have you been?" time="19:05" grouped="first" />
+        <MessageBubble mine text="We should go this weekend" time="19:05" grouped="last" status="read" showStatus labels={{ status: { read: "Read" } }} />
+        <TypingIndicator label="Elena is typing" />
+      </View>
+      <MessageComposer value={draft} onValueChange={setDraft} onSend={() => setDraft("")} placeholder="Message" sendLabel="Send" />
+    </View>
+  );
+}

package/registry/examples/chat/native/inbox.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/chat/native/inbox.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/chat/native/inbox.tsx
+import { ConversationItem } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChatInbox() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360 }, children: [
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Elena", presence: "online", presenceLabel: "online", preview: "typing\u2026", typing: true, time: "19:06", unread: 2, unreadLabel: "2 unread" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Noah", presence: "away", presenceLabel: "away", preview: "See you Saturday then!", time: "Mon" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Mina", preview: "You: haha same", time: "Sun" })
+  ] });
+}
+export {
+  NativeChatInbox as default
+};

package/registry/examples/chat/native/inbox.tsx

@@ -0,0 +1,13 @@
+import { ConversationItem } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The inbox: presence, the last message or “typing…”, the time, the unread count.
+export default function NativeChatInbox() {
+  return (
+    <View style={{ width: 360 }}>
+      <ConversationItem name="Elena" presence="online" presenceLabel="online" preview="typing…" typing time="19:06" unread={2} unreadLabel="2 unread" />
+      <ConversationItem name="Noah" presence="away" presenceLabel="away" preview="See you Saturday then!" time="Mon" />
+      <ConversationItem name="Mina" preview="You: haha same" time="Sun" />
+    </View>
+  );
+}

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

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/detail-layout/checkout.tsx
+import { Button } from "@krizaka/ui/button";
+import { Chip } from "@krizaka/ui/chip";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { Field, Textarea } from "@krizaka/ui/field";
+import { Stat } from "@krizaka/ui/stat";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AMOUNTS = [3, 5, 10, 20];
+function DetailLayoutCheckout() {
+  const [amount, setAmount] = React.useState("5");
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia w-full", children: /* @__PURE__ */ jsx(
+    DetailLayout,
+    {
+      back: /* @__PURE__ */ jsx("a", { href: "#elena", children: "\u2190 Elena's page" }),
+      eyebrow: "Tip",
+      title: "Say thanks to Elena",
+      meta: "She keeps 90 %. Paid out every Monday.",
+      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: "You pay", value: `\u20AC${amount}`, hint: "no fee added on top" }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", className: "w-full", children: `Tip \u20AC${amount}` })
+      ] }),
+      children: /* @__PURE__ */ jsxs("form", { className: "flex max-w-lg flex-col gap-5", onSubmit: (e) => e.preventDefault(), children: [
+        /* @__PURE__ */ jsx(Chip.Group, { type: "single", label: "Amount", value: amount, onValueChange: (v) => v && setAmount(v), required: true, children: AMOUNTS.map((a) => /* @__PURE__ */ jsx(Chip, { value: String(a), children: `\u20AC${a}` }, a)) }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "note", children: "A word for her (optional)" }),
+          /* @__PURE__ */ jsx(Textarea, { id: "note", rows: 3, placeholder: "The rooftop scene was incredible." })
+        ] })
+      ] })
+    }
+  ) });
+}
+export {
+  DetailLayoutCheckout as default
+};

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { Chip } from "@krizaka/ui/chip";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { Field, Textarea } from "@krizaka/ui/field";
+import { Stat } from "@krizaka/ui/stat";
+import * as React from "react";
+
+const AMOUNTS = [3, 5, 10, 20];
+
+// TEMPLATE — tipping a creator (Orochia): who is paid, the amount in one tap, an optional word, the summary beside the
+// action — under the form on a phone, where the pay button stays last. The total is always said before the button.
+export default function DetailLayoutCheckout() {
+  const [amount, setAmount] = React.useState("5");
+  return (
+    <div className="brand-orochia w-full">
+      <DetailLayout
+        back={<a href="#elena">← Elena's page</a>}
+        eyebrow="Tip"
+        title="Say thanks to Elena"
+        meta="She keeps 90 %. Paid out every Monday."
+        aside={
+          <div className="flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
+            <Stat label="You pay" value={`€${amount}`} hint="no fee added on top" />
+            <Button variant="primary" shape="cut" className="w-full">{`Tip €${amount}`}</Button>
+          </div>
+        }
+      >
+        <form className="flex max-w-lg flex-col gap-5" onSubmit={(e) => e.preventDefault()}>
+          <Chip.Group type="single" label="Amount" value={amount} onValueChange={(v) => v && setAmount(v)} required>
+            {AMOUNTS.map((a) => (
+              <Chip key={a} value={String(a)}>{`€${a}`}</Chip>
+            ))}
+          </Chip.Group>
+          <Field.Root>
+            <Field.Label htmlFor="note">A word for her (optional)</Field.Label>
+            <Textarea id="note" rows={3} placeholder="The rooftop scene was incredible." />
+          </Field.Root>
+        </form>
+      </DetailLayout>
+    </div>
+  );
+}

package/registry/examples/docs-article-page/faq.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/docs-article-page/faq.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/docs-article-page/faq.tsx
+import { DocsArticlePage } from "@krizaka/ui/docs-article-page";
+import { jsx, jsxs } from "react/jsx-runtime";
+var QUESTIONS = [
+  { id: "cloud", q: "Does anything leave my server?", a: "No. Requests are answered by models on your machine; the only calls out are the ones you configure yourself." },
+  { id: "models", q: "Which models can I run?", a: "Any model your hardware can hold. Orazaka lists the ones that fit before you download them." },
+  { id: "price", q: "How is it priced?", a: "A plan with a monthly credit allowance. Credits are spent per job, and what is left is always shown." }
+];
+function DocsArticlePageFaq() {
+  return /* @__PURE__ */ jsx(
+    DocsArticlePage,
+    {
+      className: "brand-orazaka pt-6",
+      sidebarLabel: "Pages of the documentation",
+      sidebar: /* @__PURE__ */ jsx("nav", { "aria-label": "Orazaka documentation", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 text-sm", children: ["Getting started", "The CLI", "Questions"].map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: `#${p}`, "aria-current": p === "Questions" ? "page" : void 0, className: "block rounded-md px-3 py-2 text-fg-secondary no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg", children: p }) }, p)) }) }),
+      breadcrumb: [{ href: "#docs", label: "Docs" }, { href: "#orazaka", label: "Orazaka" }],
+      title: "Questions, answered",
+      lead: "What people ask before they install.",
+      toc: { label: "Questions", items: QUESTIONS.map((x) => ({ id: x.id, label: x.q })) },
+      children: QUESTIONS.map((x) => /* @__PURE__ */ jsxs("details", { id: x.id, className: "group border-b border-border-subtle py-3", children: [
+        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer rounded-md py-1 font-semibold text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", children: x.q }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-fg-secondary", children: x.a })
+      ] }, x.id))
+    }
+  );
+}
+export {
+  DocsArticlePageFaq as default
+};

package/registry/examples/docs-article-page/faq.tsx

@@ -0,0 +1,40 @@
+import { DocsArticlePage } from "@krizaka/ui/docs-article-page";
+
+const QUESTIONS = [
+  { id: "cloud", q: "Does anything leave my server?", a: "No. Requests are answered by models on your machine; the only calls out are the ones you configure yourself." },
+  { id: "models", q: "Which models can I run?", a: "Any model your hardware can hold. Orazaka lists the ones that fit before you download them." },
+  { id: "price", q: "How is it priced?", a: "A plan with a monthly credit allowance. Credits are spent per job, and what is left is always shown." },
+];
+
+// TEMPLATE — a FAQ: the questions as a list of disclosures, each answer one short paragraph, the contents beside them.
+// Open by the address (`#price`), reachable by keyboard; one column on a phone.
+export default function DocsArticlePageFaq() {
+  return (
+    <DocsArticlePage
+      className="brand-orazaka pt-6"
+      sidebarLabel="Pages of the documentation"
+      sidebar={
+        <nav aria-label="Orazaka documentation">
+          <ul className="flex flex-col gap-1 text-sm">
+            {["Getting started", "The CLI", "Questions"].map((p) => (
+              <li key={p}>
+                <a href={`#${p}`} aria-current={p === "Questions" ? "page" : undefined} className="block rounded-md px-3 py-2 text-fg-secondary no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg">{p}</a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      }
+      breadcrumb={[{ href: "#docs", label: "Docs" }, { href: "#orazaka", label: "Orazaka" }]}
+      title="Questions, answered"
+      lead="What people ask before they install."
+      toc={{ label: "Questions", items: QUESTIONS.map((x) => ({ id: x.id, label: x.q })) }}
+    >
+      {QUESTIONS.map((x) => (
+        <details key={x.id} id={x.id} className="group border-b border-border-subtle py-3">
+          <summary className="cursor-pointer rounded-md py-1 font-semibold text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">{x.q}</summary>
+          <p className="mt-2 text-fg-secondary">{x.a}</p>
+        </details>
+      ))}
+    </DocsArticlePage>
+  );
+}

package/registry/examples/empty-state/library.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/empty-state/library.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/empty-state/library.tsx
+import { Button } from "@krizaka/ui/button";
+import { EmptyState } from "@krizaka/ui/empty-state";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Page } from "@krizaka/ui/page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EmptyStateLibrary() {
+  return /* @__PURE__ */ jsxs(Page, { className: "brand-orochia", children: [
+    /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-extrabold tracking-tight text-fg", children: "Library" }),
+    /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "empty", size: 96 }),
+        title: "Nothing here yet",
+        description: "Your videos, once published, wait here with their sales. The first one takes about ten minutes.",
+        action: /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", children: "Publish a first video" })
+      }
+    )
+  ] });
+}
+export {
+  EmptyStateLibrary as default
+};

package/registry/examples/empty-state/library.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@krizaka/ui/button";
+import { EmptyState } from "@krizaka/ui/empty-state";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Page } from "@krizaka/ui/page";
+
+// TEMPLATE — a page with nothing in it yet (a creator's library): the page keeps its title and place, the bird says it is
+// empty, one sentence tells what will fill it, one button does the first thing. Never a blank screen.
+export default function EmptyStateLibrary() {
+  return (
+    <Page className="brand-orochia">
+      <h1 className="font-display text-2xl font-extrabold tracking-tight text-fg">Library</h1>
+      <EmptyState
+        icon={<Mascot bird="flamingo" mood="empty" size={96} />}
+        title="Nothing here yet"
+        description="Your videos, once published, wait here with their sales. The first one takes about ten minutes."
+        action={<Button variant="primary" shape="cut">Publish a first video</Button>}
+      />
+    </Page>
+  );
+}

package/registry/examples/loader/branded.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/loader/branded.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/loader/branded.tsx
+import { OrochiaLogo } from "@krizaka/ui";
+import { Loader } from "@krizaka/ui/loader";
+import { jsx } from "react/jsx-runtime";
+function LoaderBranded() {
+  return /* @__PURE__ */ jsx(Loader, { label: "Loading your videos", delay: 0, variant: "block", mark: /* @__PURE__ */ jsx(OrochiaLogo, { animated: true }) });
+}
+export {
+  LoaderBranded as default
+};

package/registry/examples/loader/branded.tsx

@@ -0,0 +1,7 @@
+import { OrochiaLogo } from "@krizaka/ui";
+import { Loader } from "@krizaka/ui/loader";
+
+// The product's mark in place of the Krizaka glyph: Orochia waits with its own animated mark. Words, delay and ending stay.
+export default function LoaderBranded() {
+  return <Loader label="Loading your videos" delay={0} variant="block" mark={<OrochiaLogo animated />} />;
+}

package/registry/examples/loader/native/branded.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/loader/native/branded.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/loader/native/branded.tsx
+import { Loader } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeLoaderBranded() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(Loader, { label: "Loading your videos", product: "orochia", variant: "block", delay: 0 }) });
+}
+export {
+  NativeLoaderBranded as default
+};

package/registry/examples/loader/native/branded.tsx

@@ -0,0 +1,11 @@
+import { Loader } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The app's own mark waits for you: the animated `ProductMark` of Orochia, still when the system reduces motion.
+export default function NativeLoaderBranded() {
+  return (
+    <View style={{ width: 340 }}>
+      <Loader label="Loading your videos" product="orochia" variant="block" delay={0} />
+    </View>
+  );
+}

package/registry/examples/longform-page/case-study.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/longform-page/case-study.js

@@ -0,0 +1,41 @@
+"use client";
+
+// registry/examples/longform-page/case-study.tsx
+import { LongformPage } from "@krizaka/ui/longform-page";
+import { Stat } from "@krizaka/ui/stat";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LongformPageCaseStudy() {
+  return /* @__PURE__ */ jsx(
+    LongformPage,
+    {
+      brand: "orazaka",
+      eyebrow: "Case study \xB7 Notary",
+      title: "Eleven leases a day, none of them leaving the office",
+      lead: "A four-person firm in Laval summarises contracts with its own AI, on its own server.",
+      chapters: [
+        {
+          id: "before",
+          title: "Before",
+          pull: "The summary took twenty minutes. The cloud tools took the lease with them.",
+          children: /* @__PURE__ */ jsx("p", { children: "Each lease was read twice by hand. Pasting it into a public chatbot was faster, and not an option." })
+        },
+        {
+          id: "after",
+          title: "What changed",
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { children: "Orazaka runs on a Mac mini in the back room. A pack reads the lease and drafts the summary; the notary signs it." }),
+            /* @__PURE__ */ jsx("p", { children: "Nothing is sent outside the building, and every request is logged for the audit." })
+          ] }),
+          figure: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [
+            /* @__PURE__ */ jsx(Stat, { label: "Per lease", value: "2 min", trend: "down", trendLabel: "was 20 min" }),
+            /* @__PURE__ */ jsx(Stat, { label: "Sent outside", value: "0", hint: "all answered locally" }),
+            /* @__PURE__ */ jsx(Stat, { label: "Hours a week", value: "14", trend: "up", trendLabel: "given back" })
+          ] })
+        }
+      ]
+    }
+  );
+}
+export {
+  LongformPageCaseStudy as default
+};

package/registry/examples/longform-page/case-study.tsx

@@ -0,0 +1,40 @@
+import { LongformPage } from "@krizaka/ui/longform-page";
+import { Stat } from "@krizaka/ui/stat";
+
+// TEMPLATE — a case study (a notary's office on Orazaka): the situation, what was done, the figures that prove it. Chapters
+// in a reading column, the result as a figure that breaks out of the column; one column on a phone.
+export default function LongformPageCaseStudy() {
+  return (
+    <LongformPage
+      brand="orazaka"
+      eyebrow="Case study · Notary"
+      title="Eleven leases a day, none of them leaving the office"
+      lead="A four-person firm in Laval summarises contracts with its own AI, on its own server."
+      chapters={[
+        {
+          id: "before",
+          title: "Before",
+          pull: "The summary took twenty minutes. The cloud tools took the lease with them.",
+          children: <p>Each lease was read twice by hand. Pasting it into a public chatbot was faster, and not an option.</p>,
+        },
+        {
+          id: "after",
+          title: "What changed",
+          children: (
+            <>
+              <p>Orazaka runs on a Mac mini in the back room. A pack reads the lease and drafts the summary; the notary signs it.</p>
+              <p>Nothing is sent outside the building, and every request is logged for the audit.</p>
+            </>
+          ),
+          figure: (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <Stat label="Per lease" value="2 min" trend="down" trendLabel="was 20 min" />
+              <Stat label="Sent outside" value="0" hint="all answered locally" />
+              <Stat label="Hours a week" value="14" trend="up" trendLabel="given back" />
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}

package/registry/examples/match-dialog/its-a-match.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/match-dialog/its-a-match.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/match-dialog/its-a-match.tsx
+import { Button } from "@krizaka/ui/button";
+import { MatchDialog } from "@krizaka/ui/match-dialog";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MatchDialogItsAMatch({ defaultOpen = false }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: () => setOpen(true), children: "Like Elena" }),
+    /* @__PURE__ */ jsx(
+      MatchDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        title: "It's a match!",
+        description: "You and Elena liked each other.",
+        people: [{ name: "You" }, { name: "Elena" }],
+        primaryLabel: "Send a message",
+        onPrimary: () => void 0,
+        secondaryLabel: "Keep swiping"
+      }
+    )
+  ] });
+}
+export {
+  MatchDialogItsAMatch as default
+};

package/registry/examples/match-dialog/its-a-match.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { MatchDialog } from "@krizaka/ui/match-dialog";
+import { useState } from "react";
+
+// Two people liked each other: the next step is a message.
+export default function MatchDialogItsAMatch({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Like Elena</Button>
+      <MatchDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="It's a match!"
+        description="You and Elena liked each other."
+        people={[{ name: "You" }, { name: "Elena" }]}
+        primaryLabel="Send a message"
+        onPrimary={() => undefined}
+        secondaryLabel="Keep swiping"
+      />
+    </>
+  );
+}

package/registry/examples/match-dialog/native/its-a-match.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/match-dialog/native/its-a-match.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/match-dialog/native/its-a-match.tsx
+import { Button, MatchDialog } from "@krizaka/ui/native";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function NativeMatchDialogItsAMatch({ defaultOpen = false }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { label: "Like Elena", onPress: () => setOpen(true) }),
+    /* @__PURE__ */ jsx(
+      MatchDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        title: "It's a match!",
+        description: "You and Elena liked each other.",
+        people: [{ name: "You" }, { name: "Elena" }],
+        primaryLabel: "Send a message",
+        onPrimary: () => void 0,
+        secondaryLabel: "Keep swiping"
+      }
+    )
+  ] });
+}
+export {
+  NativeMatchDialogItsAMatch as default
+};