@krizaka/ui 3.5.0 → 3.6.0

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/pull-to-refresh/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/pull-to-refresh/native/branded.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/pull-to-refresh/native/branded.tsx
+import { BrandedRefresh, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativePullToRefreshBranded() {
+  const [refreshing, setRefreshing] = useState(true);
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 240 }, children: /* @__PURE__ */ jsx(BrandedRefresh, { product: "orochia", refreshing, onRefresh: () => setRefreshing(true), label: "Refreshing your videos", children: (scroll) => /* @__PURE__ */ jsx(ScrollView, { ...scroll, contentContainerStyle: { paddingTop: 56 }, children: ["Sunset session \xB7 Elena \xB7 2.4K views", "Acoustic dare \xB7 Alex \xB7 918 views"].map((line) => /* @__PURE__ */ jsx(Txt, { style: { padding: 16 }, children: line }, line)) }) }) });
+}
+export {
+  NativePullToRefreshBranded as default
+};

package/registry/examples/pull-to-refresh/native/branded.tsx

@@ -0,0 +1,23 @@
+import { BrandedRefresh, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+
+// The product's mark as the pull: it grows into place as you pull and turns while it refreshes.
+export default function NativePullToRefreshBranded() {
+  const [refreshing, setRefreshing] = useState(true);
+  return (
+    <View style={{ width: 360, height: 240 }}>
+      <BrandedRefresh product="orochia" refreshing={refreshing} onRefresh={() => setRefreshing(true)} label="Refreshing your videos">
+        {(scroll) => (
+          <ScrollView {...scroll} contentContainerStyle={{ paddingTop: 56 }}>
+            {["Sunset session · Elena · 2.4K views", "Acoustic dare · Alex · 918 views"].map((line) => (
+              <Txt key={line} style={{ padding: 16 }}>
+                {line}
+              </Txt>
+            ))}
+          </ScrollView>
+        )}
+      </BrandedRefresh>
+    </View>
+  );
+}

package/registry/examples/screen/native/map.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/screen/native/map.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/screen/native/map.tsx
+import { Button, Header, Screen, Sheet, Txt } from "@krizaka/ui/native";
+import { Map, Marker } from "@krizaka/ui/native/map";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SPOTS = [
+  { id: "olimpico", label: "Caf\xE9 Olimpico", where: "Mile End \xB7 450 m", position: [-73.6005, 45.5229] },
+  { id: "parc", label: "Parc La Fontaine", where: "Plateau \xB7 2 km", position: [-73.5695, 45.5268] },
+  { id: "talon", label: "March\xE9 Jean-Talon", where: "Little Italy \xB7 1.2 km", position: [-73.6147, 45.5363] }
+];
+function NativeScreenMap() {
+  const [open, setOpen] = useState(null);
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, height: 640 }, children: [
+    /* @__PURE__ */ jsx(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Pick-up points", subtitle: "Near Mile End" }), scroll: false, padding: 0, children: /* @__PURE__ */ jsx(Map, { label: "Pick-up points in Montr\xE9al", center: [-73.59, 45.527], zoom: 12.5, style: { flex: 1 }, children: SPOTS.map((s) => /* @__PURE__ */ jsx(Marker, { position: s.position, label: s.label, selected: open?.id === s.id, onPress: () => setOpen(s) }, s.id)) }) }),
+    /* @__PURE__ */ jsxs(Sheet, { open: Boolean(open), onOpenChange: (o) => !o && setOpen(null), title: open?.label, children: [
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: open?.where }),
+      /* @__PURE__ */ jsx(Button, { label: "Pick up here", variant: "primary", onPress: () => setOpen(null) })
+    ] })
+  ] });
+}
+export {
+  NativeScreenMap as default
+};

package/registry/examples/screen/native/map.tsx

@@ -0,0 +1,31 @@
+import { Button, Header, Screen, Sheet, Txt } from "@krizaka/ui/native";
+import { Map, Marker } from "@krizaka/ui/native/map";
+import { useState } from "react";
+import { View } from "react-native";
+
+const SPOTS = [
+  { id: "olimpico", label: "Café Olimpico", where: "Mile End · 450 m", position: [-73.6005, 45.5229] as const },
+  { id: "parc", label: "Parc La Fontaine", where: "Plateau · 2 km", position: [-73.5695, 45.5268] as const },
+  { id: "talon", label: "Marché Jean-Talon", where: "Little Italy · 1.2 km", position: [-73.6147, 45.5363] as const },
+];
+
+// A map-centric screen: the map fills the screen under a header, a marker pressed opens its place in a bottom sheet
+// with the one action; every marker is also a named button, so the places are read as a list.
+export default function NativeScreenMap() {
+  const [open, setOpen] = useState<(typeof SPOTS)[number] | null>(null);
+  return (
+    <View style={{ width: 360, height: 640 }}>
+      <Screen header={<Header title="Pick-up points" subtitle="Near Mile End" />} scroll={false} padding={0}>
+        <Map label="Pick-up points in Montréal" center={[-73.59, 45.527]} zoom={12.5} style={{ flex: 1 }}>
+          {SPOTS.map((s) => (
+            <Marker key={s.id} position={s.position} label={s.label} selected={open?.id === s.id} onPress={() => setOpen(s)} />
+          ))}
+        </Map>
+      </Screen>
+      <Sheet open={Boolean(open)} onOpenChange={(o) => !o && setOpen(null)} title={open?.label}>
+        <Txt tone="secondary">{open?.where}</Txt>
+        <Button label="Pick up here" variant="primary" onPress={() => setOpen(null)} />
+      </Sheet>
+    </View>
+  );
+}

package/registry/examples/screen/native/notifications.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/screen/native/notifications.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/screen/native/notifications.tsx
+import { ActivityFeed, Button, Header, Screen } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EVENTS = [
+  { id: "e1", at: "2026-10-13T09:40:00Z", title: "Mina unlocked \u201CNight shoot, part 2\u201D", tone: "success" },
+  { id: "e2", at: "2026-10-13T08:15:00Z", title: "Your payout of \u20AC120 was sent", tone: "info" },
+  { id: "e3", at: "2026-10-12T19:02:00Z", title: "L\xE9a bid \u20AC25 on the auction", tone: "accent" },
+  { id: "e4", at: "2026-10-12T11:30:00Z", title: "Clip job failed", description: "The source is too short", tone: "danger" }
+];
+function NativeScreenNotifications() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsxs(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Notifications", subtitle: "2 new" }), children: [
+    /* @__PURE__ */ jsx(Button, { label: "Mark all as read", variant: "ghost", size: "sm" }),
+    /* @__PURE__ */ jsx(ActivityFeed, { "aria-label": "Notifications", events: EVENTS, now: /* @__PURE__ */ new Date("2026-10-13T10:00:00Z") })
+  ] }) });
+}
+export {
+  NativeScreenNotifications as default
+};

package/registry/examples/screen/native/notifications.tsx

@@ -0,0 +1,21 @@
+import { ActivityFeed, Button, Header, Screen } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+const EVENTS = [
+  { id: "e1", at: "2026-10-13T09:40:00Z", title: "Mina unlocked “Night shoot, part 2”", tone: "success" as const },
+  { id: "e2", at: "2026-10-13T08:15:00Z", title: "Your payout of €120 was sent", tone: "info" as const },
+  { id: "e3", at: "2026-10-12T19:02:00Z", title: "Léa bid €25 on the auction", tone: "accent" as const },
+  { id: "e4", at: "2026-10-12T11:30:00Z", title: "Clip job failed", description: "The source is too short", tone: "danger" as const },
+];
+
+// A notifications centre: what happened, newest first, grouped by day; marking all as read is a button, never a hidden gesture.
+export default function NativeScreenNotifications() {
+  return (
+    <View style={{ width: 360, height: 640 }}>
+      <Screen header={<Header title="Notifications" subtitle="2 new" />}>
+        <Button label="Mark all as read" variant="ghost" size="sm" />
+        <ActivityFeed aria-label="Notifications" events={EVENTS} now={new Date("2026-10-13T10:00:00Z")} />
+      </Screen>
+    </View>
+  );
+}

package/registry/examples/skip-link/default.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/skip-link/default.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/skip-link/default.tsx
+import { SkipLink } from "@krizaka/ui/skip-link";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SkipLinkDefault() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(SkipLink, { href: "#skip-link-content", children: "Skip to content" }),
+    /* @__PURE__ */ jsxs("nav", { "aria-label": "Main", className: "flex gap-4 text-sm", children: [
+      /* @__PURE__ */ jsx("a", { href: "#home", children: "Home" }),
+      /* @__PURE__ */ jsx("a", { href: "#docs", children: "Docs" }),
+      /* @__PURE__ */ jsx("a", { href: "#contact", children: "Contact" })
+    ] }),
+    /* @__PURE__ */ jsx("main", { id: "skip-link-content", className: "rounded-lg border border-border-default p-4 text-sm text-fg-secondary", children: "The content starts here." })
+  ] });
+}
+export {
+  SkipLinkDefault as default
+};

package/registry/examples/skip-link/default.tsx

@@ -0,0 +1,12 @@
+import { SkipLink } from "@krizaka/ui/skip-link";
+
+// Press Tab: the link appears, Enter lands on the content. Put it first in the shell, label already translated.
+export default function SkipLinkDefault() {
+  return (
+    <div className="flex flex-col gap-3">
+      <SkipLink href="#skip-link-content">Skip to content</SkipLink>
+      <nav aria-label="Main" className="flex gap-4 text-sm"><a href="#home">Home</a><a href="#docs">Docs</a><a href="#contact">Contact</a></nav>
+      <main id="skip-link-content" className="rounded-lg border border-border-default p-4 text-sm text-fg-secondary">The content starts here.</main>
+    </div>
+  );
+}

package/registry/examples/splash-handoff/native/default.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/splash-handoff/native/default.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/splash-handoff/native/default.tsx
+import { SplashHandoff } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSplashHandoffDefault() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(SplashHandoff, { product: "orochia", ready: false, label: "Orochia is opening" }) });
+}
+export {
+  NativeSplashHandoffDefault as default
+};

package/registry/examples/splash-handoff/native/default.tsx

@@ -0,0 +1,11 @@
+import { SplashHandoff } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Over the app's root: the mark sits where the native splash icon was; `ready` (the session and fonts loaded) dissolves it.
+export default function NativeSplashHandoffDefault() {
+  return (
+    <View style={{ width: 360, height: 640 }}>
+      <SplashHandoff product="orochia" ready={false} label="Orochia is opening" />
+    </View>
+  );
+}

package/registry/examples/split-view/nearby.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;