@krizaka/ui 3.4.0 → 3.5.0

package/registry/examples/photo-grid/profile-photos.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/photo-grid/profile-photos.tsx
+import { PhotoGrid } from "@krizaka/ui/photo-grid";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var png = (data) => `data:image/png;base64,${data}`;
+function PhotoGridProfilePhotos() {
+  const [photos, setPhotos] = useState([
+    { id: "1", src: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), alt: "Elena at the beach" },
+    { id: "2", src: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg=="), alt: "Elena with her guitar" },
+    { id: "3", src: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg=="), alt: "Elena at a concert" }
+  ]);
+  return /* @__PURE__ */ jsx(
+    PhotoGrid,
+    {
+      className: "max-w-sm",
+      value: photos,
+      onValueChange: setPhotos,
+      onAdd: () => void 0,
+      required: 2,
+      labels: { add: "Add a photo", main: "Main", photo: (n) => `Photo ${n}`, moveEarlier: "Move earlier", moveLater: "Move later", remove: "Remove", moved: (n) => `Moved to place ${n}` }
+    }
+  );
+}
+export {
+  PhotoGridProfilePhotos as default
+};

package/registry/examples/photo-grid/profile-photos.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { type GridPhoto, PhotoGrid } from "@krizaka/ui/photo-grid";
+import { useState } from "react";
+
+const png = (data: string) => `data:image/png;base64,${data}`;
+
+// A profile's photos: drag one onto another, or its buttons; the first is the main one.
+export default function PhotoGridProfilePhotos() {
+  const [photos, setPhotos] = useState<GridPhoto[]>([
+    { id: "1", src: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), alt: "Elena at the beach" },
+    { id: "2", src: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg=="), alt: "Elena with her guitar" },
+    { id: "3", src: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg=="), alt: "Elena at a concert" },
+  ]);
+  return (
+    <PhotoGrid
+      className="max-w-sm"
+      value={photos}
+      onValueChange={setPhotos}
+      onAdd={() => undefined}
+      required={2}
+      labels={{ add: "Add a photo", main: "Main", photo: (n) => `Photo ${n}`, moveEarlier: "Move earlier", moveLater: "Move later", remove: "Remove", moved: (n) => `Moved to place ${n}` }}
+    />
+  );
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/screen/native/app-shell.tsx
+import { Header, Screen, TabBar, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+var icon = (d) => (on, color) => /* @__PURE__ */ jsx(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: on ? color : "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", children: /* @__PURE__ */ jsx(Path, { d }) });
+var TABS = [
+  { value: "discover", label: "Discover", icon: icon("M12 3l2.6 6.4L21 12l-6.4 2.6L12 21l-2.6-6.4L3 12l6.4-2.6z") },
+  { value: "likes", label: "Likes", badge: 4, badgeLabel: "4 new", icon: icon("M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z") },
+  { value: "chats", label: "Chats", badge: 2, badgeLabel: "2 unread", icon: icon("M4 5h16v11H8l-4 4z") },
+  { value: "me", label: "Me", icon: icon("M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0") }
+];
+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: [
+    /* @__PURE__ */ jsx(Txt, { variant: "label", children: name }),
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "Liked you today" })
+  ] }, name)) }) });
+}
+export {
+  NativeScreenAppShell as default
+};

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

@@ -0,0 +1,33 @@
+import { Header, Screen, TabBar, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+const icon = (d: string) => (on: boolean, color: string) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill={on ? color : "none"} stroke={color} strokeWidth={2} strokeLinejoin="round">
+    <Path d={d} />
+  </Svg>
+);
+const TABS = [
+  { value: "discover", label: "Discover", icon: icon("M12 3l2.6 6.4L21 12l-6.4 2.6L12 21l-2.6-6.4L3 12l6.4-2.6z") },
+  { value: "likes", label: "Likes", badge: 4, badgeLabel: "4 new", icon: icon("M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z") },
+  { value: "chats", label: "Chats", badge: 2, badgeLabel: "2 unread", icon: icon("M4 5h16v11H8l-4 4z") },
+  { value: "me", label: "Me", icon: icon("M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0") },
+];
+
+// The app shell: a header with its large title, the section's content, the tab bar clear of the home indicator.
+export default function NativeScreenAppShell() {
+  const [tab, setTab] = useState("likes");
+  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) => (
+          <View key={name} style={{ gap: 2, paddingHorizontal: 16, paddingVertical: 12 }}>
+            <Txt variant="label">{name}</Txt>
+            <Txt variant="caption" tone="secondary">Liked you today</Txt>
+          </View>
+        ))}
+      </Screen>
+    </View>
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/screen/native/auth.tsx
+import { Button, KrizakaMark, Screen, TextField, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeScreenAuth() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsxs(Screen, { footer: /* @__PURE__ */ jsxs(View, { style: { padding: 16, gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Button, { label: "Sign in", variant: "gradient", size: "lg" }),
+    /* @__PURE__ */ jsx(Button, { label: "Create an account", variant: "ghost" })
+  ] }), children: [
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 8, marginVertical: 24 }, children: [
+      /* @__PURE__ */ jsx(KrizakaMark, { size: 64 }),
+      /* @__PURE__ */ jsx(Txt, { variant: "display", children: "Welcome back" }),
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", style: { textAlign: "center" }, children: "Meet people who like what you like." })
+    ] }),
+    /* @__PURE__ */ jsx(TextField, { label: "Email", autoComplete: "email", keyboardType: "email-address", placeholder: "you@example.com" }),
+    /* @__PURE__ */ jsx(TextField, { label: "Password", hint: "At least 12 characters", autoComplete: "current-password", secureTextEntry: true }),
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", style: { textAlign: "center" }, children: "By continuing you accept the terms and the privacy policy." })
+  ] }) });
+}
+export {
+  NativeScreenAuth as default
+};

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

@@ -0,0 +1,20 @@
+import { Button, KrizakaMark, Screen, TextField, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Sign in: the mark, the promise, two fields, the main action pinned above the keyboard, the legal words.
+export default function NativeScreenAuth() {
+  return (
+    <View style={{ width: 360, height: 640 }}>
+      <Screen footer={<View style={{ padding: 16, gap: 8 }}><Button label="Sign in" variant="gradient" size="lg" /><Button label="Create an account" variant="ghost" /></View>}>
+        <View style={{ alignItems: "center", gap: 8, marginVertical: 24 }}>
+          <KrizakaMark size={64} />
+          <Txt variant="display">Welcome back</Txt>
+          <Txt tone="secondary" style={{ textAlign: "center" }}>Meet people who like what you like.</Txt>
+        </View>
+        <TextField label="Email" autoComplete="email" keyboardType="email-address" placeholder="you@example.com" />
+        <TextField label="Password" hint="At least 12 characters" autoComplete="current-password" secureTextEntry />
+        <Txt variant="caption" tone="secondary" style={{ textAlign: "center" }}>By continuing you accept the terms and the privacy policy.</Txt>
+      </Screen>
+    </View>
+  );
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/screen/native/chat.tsx
+import { Avatar, Header, MessageBubble, MessageComposer, Screen, TypingIndicator } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeScreenChat() {
+  const [draft, setDraft] = useState("");
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsxs(
+    Screen,
+    {
+      header: /* @__PURE__ */ jsx(Header, { size: "inline", title: "Elena", backLabel: "Chats", onBack: () => void 0, actions: /* @__PURE__ */ jsx(Avatar, { alt: "Elena, online", size: "sm", presence: "online", presenceLabel: "online" }) }),
+      footer: /* @__PURE__ */ jsx(MessageComposer, { value: draft, onValueChange: setDraft, onSend: () => setDraft(""), placeholder: "Message", sendLabel: "Send" }),
+      contentStyle: { gap: 4, justifyContent: "flex-end", flexGrow: 1 },
+      children: [
+        /* @__PURE__ */ jsx(MessageBubble, { text: "Hey! Loved your sunset photo \u{1F305}", time: "19:02" }),
+        /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "Thanks! Cabo da Roca, last Sunday", time: "19:05", grouped: "first" }),
+        /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "We should go together", time: "19:05", grouped: "last", status: "delivered", showStatus: true }),
+        /* @__PURE__ */ jsx(TypingIndicator, { label: "Elena is typing" })
+      ]
+    }
+  ) });
+}
+export {
+  NativeScreenChat as default
+};

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

@@ -0,0 +1,22 @@
+import { Avatar, Header, MessageBubble, MessageComposer, Screen, TypingIndicator } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// A chat: the person in the header with their presence, the messages, the composer above the keyboard.
+export default function NativeScreenChat() {
+  const [draft, setDraft] = useState("");
+  return (
+    <View style={{ width: 360, height: 640 }}>
+      <Screen
+        header={<Header size="inline" title="Elena" backLabel="Chats" onBack={() => undefined} actions={<Avatar alt="Elena, online" size="sm" presence="online" presenceLabel="online" />} />}
+        footer={<MessageComposer value={draft} onValueChange={setDraft} onSend={() => setDraft("")} placeholder="Message" sendLabel="Send" />}
+        contentStyle={{ gap: 4, justifyContent: "flex-end", flexGrow: 1 }}
+      >
+        <MessageBubble text="Hey! Loved your sunset photo 🌅" time="19:02" />
+        <MessageBubble mine text="Thanks! Cabo da Roca, last Sunday" time="19:05" grouped="first" />
+        <MessageBubble mine text="We should go together" time="19:05" grouped="last" status="delivered" showStatus />
+        <TypingIndicator label="Elena is typing" />
+      </Screen>
+    </View>
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/screen/native/feed.tsx
+import { Avatar, Card, Header, Screen, Txt } from "@krizaka/ui/native";
+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" }
+];
+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)) }) });
+}
+export {
+  NativeScreenFeed as default
+};

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

@@ -0,0 +1,34 @@
+import { Avatar, Card, Header, Screen, Txt } from "@krizaka/ui/native";
+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" },
+];
+
+// A feed: a large title, cards under it (a long feed uses the list of `@krizaka/ui/native/list` in `scroll={false}`).
+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>
+    </View>
+  );
+}

package/registry/examples/screen/native/profile.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/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/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
+};