@krizaka/ui 3.5.0 → 3.7.0

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/app-shell.js

@@ -15,7 +15,7 @@ var TABS = [
 ];
 function NativeScreenAppShell() {
   const [tab, setTab] = useState("likes");
-  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Likes", subtitle: "4 people liked you" }), footer: /* @__PURE__ */ jsx(TabBar, { "aria-label": "Main sections", items: TABS, value: tab, onValueChange: setTab }), padding: 0, children: ["Elena, 29", "Noah, 31", "Mina, 27", "Alex, 33"].map((name) => /* @__PURE__ */ jsxs(View, { style: { gap: 2, paddingHorizontal: 16, paddingVertical: 12 }, children: [
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Likes", subtitle: "4 people liked you" }), footer: /* @__PURE__ */ jsx(TabBar, { "aria-label": "Main sections", items: TABS, value: tab, onValueChange: setTab }), padding: 0, children: ["Camille, 29", "Tom\xE1s, 31", "Noor, 27", "Ada, 33"].map((name) => /* @__PURE__ */ jsxs(View, { style: { gap: 2, paddingHorizontal: 16, paddingVertical: 12 }, children: [
     /* @__PURE__ */ jsx(Txt, { variant: "label", children: name }),
     /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "Liked you today" })
   ] }, name)) }) });

package/registry/examples/screen/native/app-shell.tsx

@@ -21,7 +21,7 @@ export default function NativeScreenAppShell() {
   return (
     <View style={{ width: 360, height: 640 }}>
       <Screen header={<Header title="Likes" subtitle="4 people liked you" />} footer={<TabBar aria-label="Main sections" items={TABS} value={tab} onValueChange={setTab} />} padding={0}>
-        {["Elena, 29", "Noah, 31", "Mina, 27", "Alex, 33"].map((name) => (
+        {["Camille, 29", "Tomás, 31", "Noor, 27", "Ada, 33"].map((name) => (
           <View key={name} style={{ gap: 2, paddingHorizontal: 16, paddingVertical: 12 }}>
             <Txt variant="label">{name}</Txt>
             <Txt variant="caption" tone="secondary">Liked you today</Txt>

package/registry/examples/screen/native/feed.js

@@ -1,23 +1,40 @@
 "use client";
 
 // registry/examples/screen/native/feed.tsx
-import { Avatar, Card, Header, Screen, Txt } from "@krizaka/ui/native";
+import { ShortFeed, VerticalVideo } from "@krizaka/ui/native/vertical-video";
 import { View } from "react-native";
-import { jsx, jsxs } from "react/jsx-runtime";
-var POSTS = [
-  { id: "1", who: "Elena", what: "Sunset session at Cabo da Roca", when: "2 h" },
-  { id: "2", who: "Noah", what: "Best ramen in Porto? I have a list.", when: "5 h" },
-  { id: "3", who: "Mina", what: "Free tickets for the jazz night!", when: "Yesterday" }
+import { jsx } from "react/jsx-runtime";
+var CDN = "https://krizaka-assets.b-cdn.net/site/people/ui";
+var CLIPS = [
+  { id: "1", who: "Camille", face: `${CDN}/camille-256.dc2943029a.webp`, poster: `${CDN}/camille-512.9573eaa0b8.webp`, caption: "Sunset session at Cabo da Roca." },
+  { id: "2", who: "Tom\xE1s", face: `${CDN}/tomas-256.7eaab80903.webp`, poster: `${CDN}/tomas-512.dd7c4fd230.webp`, caption: "Best ramen in Porto? I have a list." }
 ];
 function NativeScreenFeed() {
-  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Moments", subtitle: "From people you matched with" }), children: POSTS.map((p) => /* @__PURE__ */ jsx(Card.Root, { children: /* @__PURE__ */ jsxs(Card.Body, { children: [
-    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 10 }, children: [
-      /* @__PURE__ */ jsx(Avatar, { alt: p.who, size: "sm" }),
-      /* @__PURE__ */ jsx(Txt, { variant: "label", style: { flex: 1 }, children: p.who }),
-      /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: p.when })
-    ] }),
-    /* @__PURE__ */ jsx(Txt, { children: p.what })
-  ] }) }, p.id)) }) });
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(
+    ShortFeed,
+    {
+      label: "Moments",
+      height: 640,
+      items: CLIPS,
+      getId: (clip) => clip.id,
+      renderItem: (clip, { active }) => /* @__PURE__ */ jsx(
+        VerticalVideo,
+        {
+          title: `Video by ${clip.who}`,
+          active,
+          posterUri: clip.poster,
+          creator: { name: clip.who, avatarUri: clip.face },
+          caption: clip.caption,
+          likes: 1200,
+          comments: 48,
+          onLike: () => void 0,
+          onComment: () => void 0,
+          onShare: () => void 0,
+          style: { height: 640, aspectRatio: void 0 }
+        }
+      )
+    }
+  ) });
 }
 export {
   NativeScreenFeed as default

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

@@ -1,34 +1,38 @@
-import { Avatar, Card, Header, Screen, Txt } from "@krizaka/ui/native";
+import { ShortFeed, VerticalVideo } from "@krizaka/ui/native/vertical-video";
 import { View } from "react-native";
 
-const POSTS = [
-  { id: "1", who: "Elena", what: "Sunset session at Cabo da Roca", when: "2 h" },
-  { id: "2", who: "Noah", what: "Best ramen in Porto? I have a list.", when: "5 h" },
-  { id: "3", who: "Mina", what: "Free tickets for the jazz night!", when: "Yesterday" },
+const CDN = "https://krizaka-assets.b-cdn.net/site/people/ui";
+const CLIPS = [
+  { id: "1", who: "Camille", face: `${CDN}/camille-256.dc2943029a.webp`, poster: `${CDN}/camille-512.9573eaa0b8.webp`, caption: "Sunset session at Cabo da Roca." },
+  { id: "2", who: "Tomás", face: `${CDN}/tomas-256.7eaab80903.webp`, poster: `${CDN}/tomas-512.dd7c4fd230.webp`, caption: "Best ramen in Porto? I have a list." },
 ];
 
-// A feed: a large title, cards under it (a long feed uses the list of `@krizaka/ui/native/list` in `scroll={false}`).
+// A feed in the vertical format: one clip per screen with the action rail on the right and the caption bottom-left; the one
+// in view plays and the others pause (`uri` is your clip — here the poster stands for it).
 export default function NativeScreenFeed() {
   return (
     <View style={{ width: 360, height: 640 }}>
-      <Screen header={<Header title="Moments" subtitle="From people you matched with" />}>
-        {POSTS.map((p) => (
-          <Card.Root key={p.id}>
-            <Card.Body>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                <Avatar alt={p.who} size="sm" />
-                <Txt variant="label" style={{ flex: 1 }}>
-                  {p.who}
-                </Txt>
-                <Txt variant="caption" tone="secondary">
-                  {p.when}
-                </Txt>
-              </View>
-              <Txt>{p.what}</Txt>
-            </Card.Body>
-          </Card.Root>
-        ))}
-      </Screen>
+      <ShortFeed
+        label="Moments"
+        height={640}
+        items={CLIPS}
+        getId={(clip) => clip.id}
+        renderItem={(clip, { active }) => (
+          <VerticalVideo
+            title={`Video by ${clip.who}`}
+            active={active}
+            posterUri={clip.poster}
+            creator={{ name: clip.who, avatarUri: clip.face }}
+            caption={clip.caption}
+            likes={1200}
+            comments={48}
+            onLike={() => undefined}
+            onComment={() => undefined}
+            onShare={() => undefined}
+            style={{ height: 640, aspectRatio: undefined }}
+          />
+        )}
+      />
     </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/screen/native/profile.js

@@ -10,9 +10,9 @@ function NativeScreenProfile() {
     /* @__PURE__ */ jsx(Button, { label: "Preview", variant: "outline", style: { flex: 1 } })
   ] }), children: [
     /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 6 }, children: [
-      /* @__PURE__ */ jsx(Avatar, { src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII=", alt: "Elena", size: 112, ring: "story" }),
+      /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/camille-512.9573eaa0b8.webp", alt: "Camille", size: 112, ring: "story" }),
       /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
-        /* @__PURE__ */ jsx(Txt, { variant: "title", children: "Elena, 29" }),
+        /* @__PURE__ */ jsx(Txt, { variant: "title", children: "Camille, 29" }),
         /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified", size: 18 })
       ] }),
       /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Lisbon \xB7 Sound engineer" })

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

@@ -7,9 +7,9 @@ export default function NativeScreenProfile() {
     <View style={{ width: 360, height: 640 }}>
       <Screen footer={<View style={{ flexDirection: "row", gap: 8, padding: 16 }}><Button label="Edit profile" style={{ flex: 1 }} /><Button label="Preview" variant="outline" style={{ flex: 1 }} /></View>}>
         <View style={{ alignItems: "center", gap: 6 }}>
-          <Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII=" alt="Elena" size={112} ring="story" />
+          <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/camille-512.9573eaa0b8.webp" alt="Camille" size={112} ring="story" />
           <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-            <Txt variant="title">Elena, 29</Txt>
+            <Txt variant="title">Camille, 29</Txt>
             <VerifiedBadge label="Verified" size={18} />
           </View>
           <Txt tone="secondary">Lisbon · Sound engineer</Txt>

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;

package/registry/examples/split-view/nearby.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/split-view/nearby.tsx
+import { Map, Marker, StaticMap } from "@krizaka/ui/map";
+import { SplitView } from "@krizaka/ui/split-view";
+import * as React from "react";
+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: "jean-talon", label: "March\xE9 Jean-Talon", where: "Little Italy \xB7 1.2 km", position: [-73.6147, 45.5363] },
+  { id: "parc", label: "Parc La Fontaine", where: "Plateau \xB7 2 km", position: [-73.5695, 45.5268] }
+];
+function SplitViewNearby() {
+  const [chosen, setChosen] = React.useState("olimpico");
+  return /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      className: "w-full",
+      listTitle: "Pick-up points",
+      showDetail: true,
+      back: /* @__PURE__ */ jsx("a", { href: "#list", className: "text-sm font-medium text-fg-secondary", children: "\u2190 Pick-up points" }),
+      list: /* @__PURE__ */ jsx("ul", { children: SPOTS.map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": s.id === chosen, onClick: () => setChosen(s.id), className: "flex w-full flex-col items-start gap-0.5 border-b border-border-subtle px-4 py-3 text-left text-sm hover:bg-surface-2 aria-pressed:bg-accent-soft", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-fg", children: s.label }),
+        /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: s.where })
+      ] }) }, s.id)) }),
+      detailHead: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-fg", children: "Map" }),
+      detail: /* @__PURE__ */ jsx(Map, { label: "Pick-up points in Montr\xE9al", center: [-73.592, 45.528], zoom: 12.5, className: "h-96 w-full", fallback: /* @__PURE__ */ jsx(StaticMap, { label: "Pick-up points in Montr\xE9al", center: [-73.592, 45.528], zoom: 12.5, places: SPOTS }), children: SPOTS.map((s) => /* @__PURE__ */ jsx(Marker, { position: s.position, label: s.label, selected: s.id === chosen, onPress: () => setChosen(s.id) }, s.id)) })
+    }
+  );
+}
+export {
+  SplitViewNearby as default
+};

package/registry/examples/split-view/nearby.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Map, Marker, StaticMap } from "@krizaka/ui/map";
+import { SplitView } from "@krizaka/ui/split-view";
+import * as React from "react";
+
+const SPOTS = [
+  { id: "olimpico", label: "Café Olimpico", where: "Mile End · 450 m", position: [-73.6005, 45.5229] as const },
+  { id: "jean-talon", label: "Marché Jean-Talon", where: "Little Italy · 1.2 km", position: [-73.6147, 45.5363] as const },
+  { id: "parc", label: "Parc La Fontaine", where: "Plateau · 2 km", position: [-73.5695, 45.5268] as const },
+];
+
+// TEMPLATE — find a place near you: the map is the page, the list beside it says the same in words (a screen reader reads
+// the list); choosing in one moves the other. On a phone the list replaces the map with the way back.
+export default function SplitViewNearby() {
+  const [chosen, setChosen] = React.useState("olimpico");
+  return (
+    <SplitView
+      className="w-full"
+      listTitle="Pick-up points"
+      showDetail
+      back={<a href="#list" className="text-sm font-medium text-fg-secondary">← Pick-up points</a>}
+      list={
+        <ul>
+          {SPOTS.map((s) => (
+            <li key={s.id}>
+              <button type="button" aria-pressed={s.id === chosen} onClick={() => setChosen(s.id)} className="flex w-full flex-col items-start gap-0.5 border-b border-border-subtle px-4 py-3 text-left text-sm hover:bg-surface-2 aria-pressed:bg-accent-soft">
+                <span className="font-semibold text-fg">{s.label}</span>
+                <span className="text-fg-secondary">{s.where}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      }
+      detailHead={<span className="text-sm font-bold text-fg">Map</span>}
+      detail={
+        <Map label="Pick-up points in Montréal" center={[-73.592, 45.528]} zoom={12.5} className="h-96 w-full" fallback={<StaticMap label="Pick-up points in Montréal" center={[-73.592, 45.528]} zoom={12.5} places={SPOTS} />}>
+          {SPOTS.map((s) => (
+            <Marker key={s.id} position={s.position} label={s.label} selected={s.id === chosen} onPress={() => setChosen(s.id)} />
+          ))}
+        </Map>
+      }
+    />
+  );
+}

package/registry/examples/split-view/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/split-view/notifications.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/split-view/notifications.tsx
+import { ActivityFeed } from "@krizaka/ui/activity-feed";
+import { Button } from "@krizaka/ui/button";
+import { SplitView } from "@krizaka/ui/split-view";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NOW = /* @__PURE__ */ new Date("2026-10-13T10:00:00Z");
+var EVENTS = [
+  { id: "n1", at: "2026-10-13T09:40:00Z", title: "Mina unlocked \u201CNight shoot, part 2\u201D", tone: "success" },
+  { id: "n2", at: "2026-10-13T08:15:00Z", title: "Your payout of \u20AC120 was sent", tone: "info" },
+  { id: "n3", at: "2026-10-12T19:02:00Z", title: "L\xE9a bid \u20AC25 on the auction", tone: "accent" }
+];
+function SplitViewNotifications() {
+  return /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      className: "brand-orochia w-full",
+      listTitle: "Notifications",
+      showDetail: false,
+      back: /* @__PURE__ */ jsx("a", { href: "#notifications", className: "text-sm font-medium text-fg-secondary", children: "\u2190 Notifications" }),
+      list: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3", children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", className: "w-fit", children: "Mark all as read" }),
+        /* @__PURE__ */ jsx(ActivityFeed, { "aria-label": "Notifications", events: EVENTS, now: NOW, ticking: false })
+      ] }),
+      detailHead: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-fg", children: "Mina unlocked \u201CNight shoot, part 2\u201D" }),
+      detail: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "\u20AC4.99 unlocked at 09:40. Your share, \u20AC4.49, is paid out on Monday." })
+    }
+  );
+}
+export {
+  SplitViewNotifications as default
+};

package/registry/examples/split-view/notifications.tsx

@@ -0,0 +1,31 @@
+import { ActivityFeed } from "@krizaka/ui/activity-feed";
+import { Button } from "@krizaka/ui/button";
+import { SplitView } from "@krizaka/ui/split-view";
+
+const NOW = new Date("2026-10-13T10:00:00Z");
+const EVENTS = [
+  { id: "n1", at: "2026-10-13T09:40:00Z", title: "Mina unlocked “Night shoot, part 2”", tone: "success" as const },
+  { id: "n2", at: "2026-10-13T08:15:00Z", title: "Your payout of €120 was sent", tone: "info" as const },
+  { id: "n3", at: "2026-10-12T19:02:00Z", title: "Léa bid €25 on the auction", tone: "accent" as const },
+];
+
+// TEMPLATE — a notifications centre: what happened, newest first, grouped by day; the selected one opens beside the list
+// (a screen of its own on a phone). Marking all as read is one button, never a hidden gesture.
+export default function SplitViewNotifications() {
+  return (
+    <SplitView
+      className="brand-orochia w-full"
+      listTitle="Notifications"
+      showDetail={false}
+      back={<a href="#notifications" className="text-sm font-medium text-fg-secondary">← Notifications</a>}
+      list={
+        <div className="flex flex-col gap-3 p-3">
+          <Button size="sm" variant="ghost" className="w-fit">Mark all as read</Button>
+          <ActivityFeed aria-label="Notifications" events={EVENTS} now={NOW} ticking={false} />
+        </div>
+      }
+      detailHead={<span className="text-sm font-bold text-fg">Mina unlocked “Night shoot, part 2”</span>}
+      detail={<p className="text-sm text-fg-secondary">€4.99 unlocked at 09:40. Your share, €4.49, is paid out on Monday.</p>}
+    />
+  );
+}

package/registry/examples/status-page/maintenance.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/status-page/maintenance.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/status-page/maintenance.tsx
+import { Mascot } from "@krizaka/ui/mascots";
+import { StatusPage } from "@krizaka/ui/status-page";
+import { jsx } from "react/jsx-runtime";
+function StatusPageMaintenance() {
+  return /* @__PURE__ */ jsx(
+    StatusPage,
+    {
+      eyebrow: "Maintenance",
+      title: "Back at 06:00",
+      lead: "We are moving the database to a bigger machine. Nothing is lost; writes are paused.",
+      aside: /* @__PURE__ */ jsx(Mascot, { bird: "pigeon", mood: "empty", size: 112 }),
+      state: "degraded",
+      stateLabel: "Planned maintenance",
+      checked: "Until 06:00 (Montr\xE9al)",
+      servicesLabel: "Services",
+      services: [
+        { id: "watch", name: "Watching videos", state: "operational", label: "Works" },
+        { id: "unlock", name: "Unlocks and tips", state: "degraded", label: "Paused" },
+        { id: "upload", name: "Uploads", state: "degraded", label: "Paused" }
+      ]
+    }
+  );
+}
+export {
+  StatusPageMaintenance as default
+};