@krizaka/ui 3.4.0 → 3.6.0

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

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

package/registry/examples/photo-grid/native/profile-photos.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/photo-grid/native/profile-photos.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/photo-grid/native/profile-photos.tsx
+import { PhotoGrid } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var png = (data) => `data:image/png;base64,${data}`;
+function NativePhotoGridProfilePhotos() {
+  const [photos, setPhotos] = useState([
+    { id: "1", uri: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), alt: "Elena at the beach" },
+    { id: "2", uri: 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" }
+  ]);
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    PhotoGrid,
+    {
+      value: photos,
+      onValueChange: setPhotos,
+      onAdd: () => void 0,
+      required: 2,
+      labels: { add: "Add a photo", main: "Main", photo: (n) => `Photo ${n}`, makeMain: "Make it the main photo", moveEarlier: "Move earlier", moveLater: "Move later", remove: "Remove", cancel: "Cancel" }
+    }
+  ) });
+}
+export {
+  NativePhotoGridProfilePhotos as default
+};

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

@@ -0,0 +1,24 @@
+import { type GridPhoto, PhotoGrid } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+const png = (data: string) => `data:image/png;base64,${data}`;
+
+// A profile's photos: the first is the main one; a tap opens its menu (main, earlier, later, remove).
+export default function NativePhotoGridProfilePhotos() {
+  const [photos, setPhotos] = useState<GridPhoto[]>([
+    { id: "1", uri: png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), alt: "Elena at the beach" },
+    { id: "2", uri: 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" },
+  ]);
+  return (
+    <View style={{ width: 340 }}>
+      <PhotoGrid
+        value={photos}
+        onValueChange={setPhotos}
+        onAdd={() => undefined}
+        required={2}
+        labels={{ add: "Add a photo", main: "Main", photo: (n) => `Photo ${n}`, makeMain: "Make it the main photo", moveEarlier: "Move earlier", moveLater: "Move later", remove: "Remove", cancel: "Cancel" }}
+      />
+    </View>
+  );
+}

package/registry/examples/photo-grid/profile-photos.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/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/pull-to-refresh/native/branded.d.ts

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

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

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

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

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

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