@krizaka/ui 3.3.0 → 3.5.0

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

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/screen/native/profile.tsx
+import { Avatar, Button, Chip, Screen, Txt, VerifiedBadge } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeScreenProfile() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsxs(Screen, { footer: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8, padding: 16 }, children: [
+    /* @__PURE__ */ jsx(Button, { label: "Edit profile", style: { flex: 1 } }),
+    /* @__PURE__ */ jsx(Button, { label: "Preview", variant: "outline", style: { flex: 1 } })
+  ] }), children: [
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ jsx(Avatar, { src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII=", alt: "Elena", size: 112, ring: "story" }),
+      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "title", children: "Elena, 29" }),
+        /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified", size: 18 })
+      ] }),
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Lisbon \xB7 Sound engineer" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", justifyContent: "center", gap: 32 }, children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "label", children: "128 likes" }),
+      /* @__PURE__ */ jsx(Txt, { variant: "label", children: "14 matches" })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: ["Music", "Surf", "Travel", "Vinyl"].map((t) => /* @__PURE__ */ jsx(Chip, { children: t }, t)) })
+  ] }) });
+}
+export {
+  NativeScreenProfile as default
+};

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

@@ -0,0 +1,27 @@
+import { Avatar, Button, Chip, Screen, Txt, VerifiedBadge } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A profile: the photo with its story ring, the name and seal, the facts, the interests, the actions.
+export default function NativeScreenProfile() {
+  return (
+    <View style={{ width: 360, height: 640 }}>
+      <Screen footer={<View style={{ flexDirection: "row", gap: 8, padding: 16 }}><Button label="Edit profile" style={{ flex: 1 }} /><Button label="Preview" variant="outline" style={{ flex: 1 }} /></View>}>
+        <View style={{ alignItems: "center", gap: 6 }}>
+          <Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII=" alt="Elena" size={112} ring="story" />
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+            <Txt variant="title">Elena, 29</Txt>
+            <VerifiedBadge label="Verified" size={18} />
+          </View>
+          <Txt tone="secondary">Lisbon · Sound engineer</Txt>
+        </View>
+        <View style={{ flexDirection: "row", justifyContent: "center", gap: 32 }}>
+          <Txt variant="label">128 likes</Txt>
+          <Txt variant="label">14 matches</Txt>
+        </View>
+        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+          {["Music", "Surf", "Travel", "Vinyl"].map((t) => <Chip key={t}>{t}</Chip>)}
+        </View>
+      </Screen>
+    </View>
+  );
+}

package/registry/examples/screen/native/settings.d.ts

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

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

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

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

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

package/registry/examples/search-field/native/cancel.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/search-field/native/cancel.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/search-field/native/cancel.tsx
+import { SearchField } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSearchFieldCancel() {
+  const [query, setQuery] = useState("acoustic");
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(SearchField, { label: "Search creators", placeholder: "Search creators", value: query, onValueChange: setQuery, clearLabel: "Clear search", cancelLabel: "Cancel", onCancel: () => void 0 }) });
+}
+export {
+  NativeSearchFieldCancel as default
+};

package/registry/examples/search-field/native/cancel.tsx

@@ -0,0 +1,13 @@
+import { SearchField } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// A search bar with its Cancel button: shown while there is a query, it clears it and closes the keyboard.
+export default function NativeSearchFieldCancel() {
+  const [query, setQuery] = useState("acoustic");
+  return (
+    <View style={{ width: 340 }}>
+      <SearchField label="Search creators" placeholder="Search creators" value={query} onValueChange={setQuery} clearLabel="Clear search" cancelLabel="Cancel" onCancel={() => undefined} />
+    </View>
+  );
+}

package/registry/examples/stat/grid.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/stat/grid.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/stat/grid.tsx
+import { Meter } from "@krizaka/ui/meter";
+import { Stat, StatGrid } from "@krizaka/ui/stat";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatGridExample() {
+  return /* @__PURE__ */ jsxs(StatGrid, { children: [
+    /* @__PURE__ */ jsx(Stat, { label: "Gross volume", value: "$21,045", trend: "up", trendLabel: "+15 %", hint: "vs September" }),
+    /* @__PURE__ */ jsx(Stat, { label: "Creator earnings", value: "$17,888", trend: "up", trendLabel: "+16 %", hint: "net of fees" }),
+    /* @__PURE__ */ jsx(Stat, { label: "Open reports", value: "7", trend: "down", trendLabel: "\u22123", hint: "since yesterday" }),
+    /* @__PURE__ */ jsx(Stat, { label: "Storage", value: "1.74 TB", hint: "of 2 TB", chart: /* @__PURE__ */ jsx(Meter, { label: "Storage used", value: 87, thresholds: { low: 0.8, high: 0.95 } }) })
+  ] });
+}
+export {
+  StatGridExample as default
+};

package/registry/examples/stat/grid.tsx

@@ -0,0 +1,14 @@
+import { Meter } from "@krizaka/ui/meter";
+import { Stat, StatGrid } from "@krizaka/ui/stat";
+
+// The console's head: figures that wrap with the width, hairlines between them; a meter under the storage.
+export default function StatGridExample() {
+  return (
+    <StatGrid>
+      <Stat label="Gross volume" value="$21,045" trend="up" trendLabel="+15 %" hint="vs September" />
+      <Stat label="Creator earnings" value="$17,888" trend="up" trendLabel="+16 %" hint="net of fees" />
+      <Stat label="Open reports" value="7" trend="down" trendLabel="−3" hint="since yesterday" />
+      <Stat label="Storage" value="1.74 TB" hint="of 2 TB" chart={<Meter label="Storage used" value={87} thresholds={{ low: 0.8, high: 0.95 }} />} />
+    </StatGrid>
+  );
+}

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/stepper/native/run.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/stepper/native/run.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/stepper/native/run.tsx
+import { Progress, Stepper } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeStepperRun() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      "aria-label": "Run of the dubbing studio",
+      current: 2,
+      steps: [
+        { title: "Transcribe", description: "French \xB7 2 min 14 s" },
+        { title: "Translate", description: "English, Spanish" },
+        { title: "Synthesise voices", value: 0.6, content: /* @__PURE__ */ jsx(Progress, { label: "Voices", value: 60, size: "sm" }) },
+        { title: "Mix and export" }
+      ]
+    }
+  ) });
+}
+export {
+  NativeStepperRun as default
+};

package/registry/examples/stepper/native/run.tsx

@@ -0,0 +1,20 @@
+import { Progress, Stepper } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// An Orazaka studio run: two steps done, the third tracing its progress, the last to come.
+export default function NativeStepperRun() {
+  return (
+    <View style={{ width: 320 }}>
+      <Stepper
+        aria-label="Run of the dubbing studio"
+        current={2}
+        steps={[
+          { title: "Transcribe", description: "French · 2 min 14 s" },
+          { title: "Translate", description: "English, Spanish" },
+          { title: "Synthesise voices", value: 0.6, content: <Progress label="Voices" value={60} size="sm" /> },
+          { title: "Mix and export" },
+        ]}
+      />
+    </View>
+  );
+}

package/registry/examples/swipe-deck/discover.d.ts

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

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

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

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

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

package/registry/examples/swipe-deck/native/discover.d.ts

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

package/registry/examples/swipe-deck/native/discover.js

@@ -0,0 +1,39 @@
+"use client";
+
+// registry/examples/swipe-deck/native/discover.tsx
+import { Badge, PersonCard, SwipeDeck, Txt, VerifiedBadge } 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}`;
+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 NativeSwipeDeckDiscover() {
+  const [people, setPeople] = useState(PEOPLE);
+  return /* @__PURE__ */ jsx(View, { style: { width: 340, height: 560 }, children: /* @__PURE__ */ jsx(
+    SwipeDeck,
+    {
+      items: people,
+      getId: (p) => p.id,
+      onSwipe: (p) => setPeople((all) => all.filter((x) => x.id !== p.id)),
+      labels: { like: "Like", pass: "Pass", likeStamp: "LIKE", passStamp: "NOPE" },
+      renderCard: (p) => /* @__PURE__ */ jsx(
+        PersonCard,
+        {
+          photos: p.photos.map((uri) => ({ uri })),
+          name: p.name,
+          age: p.age,
+          badge: /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified", on: "media", size: 20 }),
+          meta: /* @__PURE__ */ jsx(Txt, { tone: "onMedia", variant: "caption", children: `${p.km} km away` }),
+          bio: p.bio,
+          footer: p.tags.map((t) => /* @__PURE__ */ jsx(Badge, { tone: "scrim", children: t }, t))
+        }
+      )
+    }
+  ) });
+}
+export {
+  NativeSwipeDeckDiscover as default
+};

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

@@ -0,0 +1,35 @@
+import { Badge, PersonCard, SwipeDeck, Txt, VerifiedBadge } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+const png = (data: string) => `data:image/png;base64,${data}`;
+const PEOPLE = [
+  { id: "e", name: "Elena", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg==")] },
+  { id: "n", name: "Noah", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg==")] },
+];
+
+// Discover: drag right to like, left to pass — or the buttons; the next card waits under.
+export default function NativeSwipeDeckDiscover() {
+  const [people, setPeople] = useState(PEOPLE);
+  return (
+    <View style={{ width: 340, height: 560 }}>
+      <SwipeDeck
+        items={people}
+        getId={(p) => p.id}
+        onSwipe={(p) => setPeople((all) => all.filter((x) => x.id !== p.id))}
+        labels={{ like: "Like", pass: "Pass", likeStamp: "LIKE", passStamp: "NOPE" }}
+        renderCard={(p) => (
+          <PersonCard
+            photos={p.photos.map((uri) => ({ uri }))}
+            name={p.name}
+            age={p.age}
+            badge={<VerifiedBadge label="Verified" on="media" size={20} />}
+            meta={<Txt tone="onMedia" variant="caption">{`${p.km} km away`}</Txt>}
+            bio={p.bio}
+            footer={p.tags.map((t) => <Badge key={t} tone="scrim">{t}</Badge>)}
+          />
+        )}
+      />
+    </View>
+  );
+}

package/registry/examples/swipeable-row/native/conversation.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/swipeable-row/native/conversation.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/swipeable-row/native/conversation.tsx
+import { Avatar, SwipeableRow, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSwipeableRowConversation() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360 }, children: /* @__PURE__ */ jsx(
+    SwipeableRow,
+    {
+      leading: [{ label: "Pin", tone: "accent", onPress: () => void 0 }],
+      trailing: [
+        { label: "Delete", tone: "danger", onPress: () => void 0 },
+        { label: "Archive", onPress: () => void 0 }
+      ],
+      onActivate: () => void 0,
+      children: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12, padding: 12 }, children: [
+        /* @__PURE__ */ jsx(Avatar, { alt: "Elena", presence: "online", presenceLabel: "online" }),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Txt, { variant: "label", children: "Elena" }),
+          /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "Sending the stems tonight \u{1F3A7}" })
+        ] }),
+        /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "2 min" })
+      ] })
+    }
+  ) });
+}
+export {
+  NativeSwipeableRowConversation as default
+};

package/registry/examples/swipeable-row/native/conversation.tsx

@@ -0,0 +1,27 @@
+import { Avatar, SwipeableRow, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Swipe left to archive or delete, right to pin; screen readers find the same actions in the rotor.
+export default function NativeSwipeableRowConversation() {
+  return (
+    <View style={{ width: 360 }}>
+      <SwipeableRow
+        leading={[{ label: "Pin", tone: "accent", onPress: () => undefined }]}
+        trailing={[
+          { label: "Delete", tone: "danger", onPress: () => undefined },
+          { label: "Archive", onPress: () => undefined },
+        ]}
+        onActivate={() => undefined}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 12, padding: 12 }}>
+          <Avatar alt="Elena" presence="online" presenceLabel="online" />
+          <View style={{ flex: 1 }}>
+            <Txt variant="label">Elena</Txt>
+            <Txt variant="caption" tone="secondary">Sending the stems tonight 🎧</Txt>
+          </View>
+          <Txt variant="caption" tone="secondary">2 min</Txt>
+        </View>
+      </SwipeableRow>
+    </View>
+  );
+}

package/registry/examples/tab-bar/native/main-sections.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;