@krizaka/ui 3.3.0 → 3.5.0

package/registry/examples/otp-input/native/verify.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/otp-input/native/verify.tsx
+import { OtpInput, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeOtpInputVerify() {
+  const [code, setCode] = useState("4821");
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 12 }, children: [
+    /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Enter the code sent to +33 6 \u2022\u2022 \u2022\u2022 42 18" }),
+    /* @__PURE__ */ jsx(OtpInput, { label: "Verification code", value: code, onValueChange: setCode, onComplete: () => void 0 })
+  ] });
+}
+export {
+  NativeOtpInputVerify as default
+};

package/registry/examples/otp-input/native/verify.tsx

@@ -0,0 +1,14 @@
+import { OtpInput, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// The code sent by text message: the keyboard suggests it, one tap fills every box.
+export default function NativeOtpInputVerify() {
+  const [code, setCode] = useState("4821");
+  return (
+    <View style={{ gap: 12 }}>
+      <Txt tone="secondary">Enter the code sent to +33 6 •• •• 42 18</Txt>
+      <OtpInput label="Verification code" value={code} onValueChange={setCode} onComplete={() => undefined} />
+    </View>
+  );
+}

package/registry/examples/permission-prompt/native/blocked.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/permission-prompt/native/blocked.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/permission-prompt/native/blocked.tsx
+import { PermissionPrompt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativePermissionPromptBlocked() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    PermissionPrompt,
+    {
+      status: "blocked",
+      mascot: "pigeon",
+      title: "Know when you are outbid",
+      description: "Turn on notifications to hear about your auctions.",
+      blockedDescription: "Notifications are off for Orochia. Turn them on in the settings to hear when you are outbid.",
+      allowLabel: "Turn on notifications",
+      onAllow: () => void 0,
+      settingsLabel: "Open the settings",
+      onOpenSettings: () => void 0
+    }
+  ) });
+}
+export {
+  NativePermissionPromptBlocked as default
+};

package/registry/examples/permission-prompt/native/blocked.tsx

@@ -0,0 +1,21 @@
+import { PermissionPrompt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The system will not ask again: the way to the settings, the pigeon for notifications.
+export default function NativePermissionPromptBlocked() {
+  return (
+    <View style={{ width: 340 }}>
+      <PermissionPrompt
+        status="blocked"
+        mascot="pigeon"
+        title="Know when you are outbid"
+        description="Turn on notifications to hear about your auctions."
+        blockedDescription="Notifications are off for Orochia. Turn them on in the settings to hear when you are outbid."
+        allowLabel="Turn on notifications"
+        onAllow={() => undefined}
+        settingsLabel="Open the settings"
+        onOpenSettings={() => undefined}
+      />
+    </View>
+  );
+}

package/registry/examples/permission-prompt/native/camera.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/permission-prompt/native/camera.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/permission-prompt/native/camera.tsx
+import { PermissionPrompt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativePermissionPromptCamera() {
+  const [status, setStatus] = useState("undetermined");
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    PermissionPrompt,
+    {
+      status,
+      title: "Film your answer",
+      description: "Orochia uses the camera only while you record a challenge. Nothing is filmed before you press record.",
+      allowLabel: "Allow the camera",
+      onAllow: () => setStatus("granted"),
+      dismissLabel: "Not now",
+      onDismiss: () => void 0
+    }
+  ) });
+}
+export {
+  NativePermissionPromptCamera as default
+};

package/registry/examples/permission-prompt/native/camera.tsx

@@ -0,0 +1,21 @@
+import { PermissionPrompt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// Before the system asks: why the camera, the button that asks, a way out.
+export default function NativePermissionPromptCamera() {
+  const [status, setStatus] = useState<"undetermined" | "granted">("undetermined");
+  return (
+    <View style={{ width: 340 }}>
+      <PermissionPrompt
+        status={status}
+        title="Film your answer"
+        description="Orochia uses the camera only while you record a challenge. Nothing is filmed before you press record."
+        allowLabel="Allow the camera"
+        onAllow={() => setStatus("granted")}
+        dismissLabel="Not now"
+        onDismiss={() => undefined}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/pull-to-refresh/native/feed.tsx
+import { PullToRefresh, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativePullToRefreshFeed() {
+  const [refreshing, setRefreshing] = useState(true);
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 240 }, children: /* @__PURE__ */ jsx(ScrollView, { refreshControl: /* @__PURE__ */ jsx(PullToRefresh, { refreshing, onRefresh: () => setRefreshing(false), label: "Pull to refresh" }), 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 {
+  NativePullToRefreshFeed as default
+};

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

@@ -0,0 +1,19 @@
+import { PullToRefresh, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+
+// The platform's pull to refresh, in the accent: the `refreshControl` of any ScrollView.
+export default function NativePullToRefreshFeed() {
+  const [refreshing, setRefreshing] = useState(true);
+  return (
+    <View style={{ width: 360, height: 240 }}>
+      <ScrollView refreshControl={<PullToRefresh refreshing={refreshing} onRefresh={() => setRefreshing(false)} label="Pull to refresh" />}>
+        {["Sunset session · Elena · 2.4K views", "Acoustic dare · Alex · 918 views"].map((line) => (
+          <Txt key={line} style={{ padding: 16 }}>
+            {line}
+          </Txt>
+        ))}
+      </ScrollView>
+    </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/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;