@krizaka/ui 3.4.0 → 3.6.0

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

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/screen/native/profile.tsx
+import { Avatar, Button, Chip, Screen, Txt, VerifiedBadge } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeScreenProfile() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsxs(Screen, { footer: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8, padding: 16 }, children: [
+    /* @__PURE__ */ jsx(Button, { label: "Edit profile", style: { flex: 1 } }),
+    /* @__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__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "title", children: "Elena, 29" }),
+        /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified", size: 18 })
+      ] }),
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Lisbon \xB7 Sound engineer" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", justifyContent: "center", gap: 32 }, children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "label", children: "128 likes" }),
+      /* @__PURE__ */ jsx(Txt, { variant: "label", children: "14 matches" })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: ["Music", "Surf", "Travel", "Vinyl"].map((t) => /* @__PURE__ */ jsx(Chip, { children: t }, t)) })
+  ] }) });
+}
+export {
+  NativeScreenProfile as default
+};

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

@@ -0,0 +1,27 @@
+import { Avatar, Button, Chip, Screen, Txt, VerifiedBadge } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A profile: the photo with its story ring, the name and seal, the facts, the interests, the actions.
+export default function NativeScreenProfile() {
+  return (
+    <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" />
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+            <Txt variant="title">Elena, 29</Txt>
+            <VerifiedBadge label="Verified" size={18} />
+          </View>
+          <Txt tone="secondary">Lisbon · Sound engineer</Txt>
+        </View>
+        <View style={{ flexDirection: "row", justifyContent: "center", gap: 32 }}>
+          <Txt variant="label">128 likes</Txt>
+          <Txt variant="label">14 matches</Txt>
+        </View>
+        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+          {["Music", "Surf", "Travel", "Vinyl"].map((t) => <Chip key={t}>{t}</Chip>)}
+        </View>
+      </Screen>
+    </View>
+  );
+}

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

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/screen/native/settings.tsx
+import { Header, Screen, Switch, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeScreenSettings() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsxs(Screen, { header: /* @__PURE__ */ jsx(Header, { size: "inline", title: "Settings", backLabel: "Me", onBack: () => void 0 }), children: [
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", role: "heading", children: "DISCOVERY" }),
+    /* @__PURE__ */ jsx(Switch, { label: "Show me in Discover", defaultChecked: true }),
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", role: "heading", children: "NOTIFICATIONS" }),
+    /* @__PURE__ */ jsx(Switch, { label: "New likes", defaultChecked: true }),
+    /* @__PURE__ */ jsx(Switch, { label: "Messages", description: "Even when the app is closed", defaultChecked: true }),
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", role: "heading", children: "ACCOUNT" }),
+    /* @__PURE__ */ jsx(Switch, { label: "Show my distance", description: "Rounded to the kilometre" })
+  ] }) });
+}
+export {
+  NativeScreenSettings as default
+};

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

@@ -0,0 +1,19 @@
+import { Header, Screen, Switch, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Settings: sections with their headings, switches that apply at once.
+export default function NativeScreenSettings() {
+  return (
+    <View style={{ width: 360, height: 640 }}>
+      <Screen header={<Header size="inline" title="Settings" backLabel="Me" onBack={() => undefined} />}>
+        <Txt variant="caption" tone="secondary" role="heading">DISCOVERY</Txt>
+        <Switch label="Show me in Discover" defaultChecked />
+        <Txt variant="caption" tone="secondary" role="heading">NOTIFICATIONS</Txt>
+        <Switch label="New likes" defaultChecked />
+        <Switch label="Messages" description="Even when the app is closed" defaultChecked />
+        <Txt variant="caption" tone="secondary" role="heading">ACCOUNT</Txt>
+        <Switch label="Show my distance" description="Rounded to the kilometre" />
+      </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;

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

package/registry/examples/status-page/maintenance.tsx

@@ -0,0 +1,24 @@
+import { Mascot } from "@krizaka/ui/mascots";
+import { StatusPage } from "@krizaka/ui/status-page";
+
+// TEMPLATE — planned maintenance: what is paused, until when, and what still works — said before the visitor wonders.
+// The state is in words and colour; the pigeon waits with the message.
+export default function StatusPageMaintenance() {
+  return (
+    <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={<Mascot bird="pigeon" mood="empty" size={112} />}
+      state="degraded"
+      stateLabel="Planned maintenance"
+      checked="Until 06:00 (Montréal)"
+      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" },
+      ]}
+    />
+  );
+}

package/registry/examples/step-progress/native/sign-up.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/step-progress/native/sign-up.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/step-progress/native/sign-up.tsx
+import { Button, StepProgress } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeStepProgressSignUp() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360 }, children: /* @__PURE__ */ jsx(StepProgress, { step: 2, total: 5, label: (n, total) => `Step ${n} of ${total}`, backLabel: "Back", onBack: () => void 0, trailing: /* @__PURE__ */ jsx(Button, { label: "Skip", variant: "ghost", size: "sm" }) }) });
+}
+export {
+  NativeStepProgressSignUp as default
+};

package/registry/examples/step-progress/native/sign-up.tsx

@@ -0,0 +1,11 @@
+import { Button, StepProgress } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The head of the sign-up: back, five segments, the position in words, Skip.
+export default function NativeStepProgressSignUp() {
+  return (
+    <View style={{ width: 360 }}>
+      <StepProgress step={2} total={5} label={(n, total) => `Step ${n} of ${total}`} backLabel="Back" onBack={() => undefined} trailing={<Button label="Skip" variant="ghost" size="sm" />} />
+    </View>
+  );
+}

package/registry/examples/step-progress/sign-up.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/step-progress/sign-up.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/step-progress/sign-up.tsx
+import { Button } from "@krizaka/ui/button";
+import { StepProgress } from "@krizaka/ui/step-progress";
+import { jsx } from "react/jsx-runtime";
+function StepProgressSignUp() {
+  return /* @__PURE__ */ jsx(
+    StepProgress,
+    {
+      className: "max-w-md",
+      step: 2,
+      total: 5,
+      label: (n, total) => `Step ${n} of ${total}`,
+      back: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: "Back" }),
+      trailing: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: "Skip" })
+    }
+  );
+}
+export {
+  StepProgressSignUp as default
+};

package/registry/examples/step-progress/sign-up.tsx

@@ -0,0 +1,16 @@
+import { Button } from "@krizaka/ui/button";
+import { StepProgress } from "@krizaka/ui/step-progress";
+
+// The head of the sign-up: back, five segments, the position in words, Skip.
+export default function StepProgressSignUp() {
+  return (
+    <StepProgress
+      className="max-w-md"
+      step={2}
+      total={5}
+      label={(n, total) => `Step ${n} of ${total}`}
+      back={<Button variant="ghost" size="sm">Back</Button>}
+      trailing={<Button variant="ghost" size="sm">Skip</Button>}
+    />
+  );
+}

package/registry/examples/swipe-deck/discover.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/swipe-deck/discover.js

@@ -0,0 +1,41 @@
+"use client";
+
+// registry/examples/swipe-deck/discover.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { PersonCard, SwipeDeck } from "@krizaka/ui/swipe-deck";
+import { VerifiedBadge } from "@krizaka/ui/verified-badge";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var png = (data) => `data:image/png;base64,${data}`;
+var PEOPLE = [
+  { id: "e", name: "Elena", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg==")] },
+  { id: "n", name: "Noah", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg==")] }
+];
+function SwipeDeckDiscover() {
+  const [people, setPeople] = useState(PEOPLE);
+  return /* @__PURE__ */ jsx(
+    SwipeDeck,
+    {
+      items: people,
+      getId: (p) => p.id,
+      getName: (p) => p.name,
+      onSwipe: (p) => setPeople((all) => all.filter((x) => x.id !== p.id)),
+      labels: { like: "Like", pass: "Pass", deck: "Profiles. Right arrow to like, left arrow to pass.", likeStamp: "Like", passStamp: "Nope" },
+      renderCard: (p) => /* @__PURE__ */ jsx(
+        PersonCard,
+        {
+          photos: p.photos.map((src) => ({ src })),
+          name: p.name,
+          age: p.age,
+          badge: /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified", onMedia: true, size: "lg" }),
+          meta: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: `${p.km} km away` }),
+          bio: p.bio,
+          footer: p.tags.map((t) => /* @__PURE__ */ jsx(Badge, { tone: "scrim", children: t }, t))
+        }
+      )
+    }
+  );
+}
+export {
+  SwipeDeckDiscover as default
+};

package/registry/examples/swipe-deck/discover.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { PersonCard, SwipeDeck } from "@krizaka/ui/swipe-deck";
+import { VerifiedBadge } from "@krizaka/ui/verified-badge";
+import { useState } from "react";
+
+const png = (data: string) => `data:image/png;base64,${data}`;
+const PEOPLE = [
+  { id: "e", name: "Elena", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg==")] },
+  { id: "n", name: "Noah", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg==")] },
+];
+
+// Discover: drag right to like, left to pass, the buttons, or ← → on the focused deck.
+export default function SwipeDeckDiscover() {
+  const [people, setPeople] = useState(PEOPLE);
+  return (
+    <SwipeDeck
+      items={people}
+      getId={(p) => p.id}
+      getName={(p) => p.name}
+      onSwipe={(p) => setPeople((all) => all.filter((x) => x.id !== p.id))}
+      labels={{ like: "Like", pass: "Pass", deck: "Profiles. Right arrow to like, left arrow to pass.", likeStamp: "Like", passStamp: "Nope" }}
+      renderCard={(p) => (
+        <PersonCard
+          photos={p.photos.map((src) => ({ src }))}
+          name={p.name}
+          age={p.age}
+          badge={<VerifiedBadge label="Verified" onMedia size="lg" />}
+          meta={<span className="text-xs font-semibold">{`${p.km} km away`}</span>}
+          bio={p.bio}
+          footer={p.tags.map((t) => <Badge key={t} tone="scrim">{t}</Badge>)}
+        />
+      )}
+    />
+  );
+}

package/registry/examples/swipe-deck/native/discover.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;