@krizaka/ui 3.3.0 → 3.4.0

package/registry/examples/map/location-picker.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/map/location-picker.tsx
+import { LocationPicker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function MapLocationPicker() {
+  const [point, setPoint] = React.useState([-73.5673, 45.5017]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    LocationPicker,
+    {
+      label: "Meeting point",
+      locale: "en-CA",
+      value: point,
+      onValueChange: setPoint,
+      origin: [-73.5794, 45.5048],
+      radius: 1e3,
+      fallback: /* @__PURE__ */ jsx(StaticMap, { label: "Meeting point", center: point, zoom: 14, places: [{ position: point, label: "Meeting point" }] })
+    }
+  ) });
+}
+export {
+  MapLocationPicker as default
+};

package/registry/examples/map/location-picker.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { type LngLat, LocationPicker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+
+// A meeting point picked by moving the map under the pin: its distance from the person, a 1-km zone, "Near me" on request.
+export default function MapLocationPicker() {
+  const [point, setPoint] = React.useState<LngLat>([-73.5673, 45.5017]);
+  return (
+    <div className="w-full max-w-xl">
+      <LocationPicker
+        label="Meeting point"
+        locale="en-CA"
+        value={point}
+        onValueChange={setPoint}
+        origin={[-73.5794, 45.5048]}
+        radius={1000}
+        fallback={<StaticMap label="Meeting point" center={point} zoom={14} places={[{ position: point, label: "Meeting point" }]} />}
+      />
+    </div>
+  );
+}

package/registry/examples/map/native/location-picker.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/map/native/location-picker.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/map/native/location-picker.tsx
+import { LocationPicker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeMapLocationPicker() {
+  const [point, setPoint] = React.useState([-73.5673, 45.5017]);
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(LocationPicker, { label: "Meeting point", locale: "en-CA", value: point, onValueChange: setPoint, origin: [-73.5794, 45.5048], radius: 1e3 }) });
+}
+export {
+  NativeMapLocationPicker as default
+};

package/registry/examples/map/native/location-picker.tsx

@@ -0,0 +1,13 @@
+import { type LngLat, LocationPicker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+
+// A meeting point under the pin; "Near me" asks for the location only when pressed, the distance follows.
+export default function NativeMapLocationPicker() {
+  const [point, setPoint] = React.useState<LngLat>([-73.5673, 45.5017]);
+  return (
+    <View style={{ width: 340 }}>
+      <LocationPicker label="Meeting point" locale="en-CA" value={point} onValueChange={setPoint} origin={[-73.5794, 45.5048]} radius={1000} />
+    </View>
+  );
+}

package/registry/examples/map/native/places.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/map/native/places.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/map/native/places.tsx
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import { Map, Marker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SPOTS = [
+  { id: "olimpico", label: "Caf\xE9 Olimpico", address: "124 Rue Saint-Viateur O", position: [-73.6005, 45.5229] },
+  { id: "parc", label: "Parc La Fontaine", address: "3933 Av. du Parc-La Fontaine", position: [-73.5695, 45.5268] }
+];
+function NativeMapPlaces() {
+  const [open, setOpen] = React.useState(null);
+  return /* @__PURE__ */ jsxs(View, { style: { width: 340 }, children: [
+    /* @__PURE__ */ jsx(Map, { label: "Pick-up points in Montr\xE9al", center: [-73.585, 45.524], zoom: 12.5, 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?.address }),
+      /* @__PURE__ */ jsx(Button, { label: "Choose this point", variant: "primary", onPress: () => setOpen(null) })
+    ] })
+  ] });
+}
+export {
+  NativeMapPlaces as default
+};

package/registry/examples/map/native/places.tsx

@@ -0,0 +1,27 @@
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import { Map, Marker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+
+const SPOTS = [
+  { id: "olimpico", label: "Café Olimpico", address: "124 Rue Saint-Viateur O", position: [-73.6005, 45.5229] as const },
+  { id: "parc", label: "Parc La Fontaine", address: "3933 Av. du Parc-La Fontaine", position: [-73.5695, 45.5268] as const },
+];
+
+// Pick-up points: a marker pressed opens its details in a bottom sheet.
+export default function NativeMapPlaces() {
+  const [open, setOpen] = React.useState<(typeof SPOTS)[number] | null>(null);
+  return (
+    <View style={{ width: 340 }}>
+      <Map label="Pick-up points in Montréal" center={[-73.585, 45.524]} zoom={12.5}>
+        {SPOTS.map((s) => (
+          <Marker key={s.id} position={s.position} label={s.label} selected={open?.id === s.id} onPress={() => setOpen(s)} />
+        ))}
+      </Map>
+      <Sheet open={Boolean(open)} onOpenChange={(o) => !o && setOpen(null)} title={open?.label}>
+        <Txt tone="secondary">{open?.address}</Txt>
+        <Button label="Choose this point" variant="primary" onPress={() => setOpen(null)} />
+      </Sheet>
+    </View>
+  );
+}

package/registry/examples/map/places.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/map/places.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/map/places.tsx
+import { Map, Marker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var SPOTS = [
+  { id: "olimpico", label: "Caf\xE9 Olimpico, Mile End", position: [-73.6005, 45.5229] },
+  { id: "jean-talon", label: "March\xE9 Jean-Talon", position: [-73.6147, 45.5363] },
+  { id: "parc", label: "Parc La Fontaine", position: [-73.5695, 45.5268] }
+];
+function MapPlaces() {
+  const [chosen, setChosen] = React.useState("olimpico");
+  return /* @__PURE__ */ jsx(
+    Map,
+    {
+      label: "Pick-up points in Montr\xE9al",
+      center: [-73.592, 45.528],
+      zoom: 12.5,
+      className: "h-80 w-full max-w-xl",
+      fallback: /* @__PURE__ */ jsx(StaticMap, { label: "Pick-up points in Montr\xE9al", center: [-73.592, 45.528], zoom: 12.5, places: SPOTS }),
+      children: SPOTS.map((s) => /* @__PURE__ */ jsx(Marker, { position: s.position, label: s.label, selected: s.id === chosen, onPress: () => setChosen(s.id) }, s.id))
+    }
+  );
+}
+export {
+  MapPlaces as default
+};

package/registry/examples/map/places.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Map, Marker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+
+const SPOTS = [
+  { id: "olimpico", label: "Café Olimpico, Mile End", position: [-73.6005, 45.5229] as const },
+  { id: "jean-talon", label: "Marché Jean-Talon", position: [-73.6147, 45.5363] as const },
+  { id: "parc", label: "Parc La Fontaine", position: [-73.5695, 45.5268] as const },
+];
+
+// Pick-up points in Montréal: markers are buttons, the chosen one shows its name; the places are a list for screen readers.
+export default function MapPlaces() {
+  const [chosen, setChosen] = React.useState("olimpico");
+  return (
+    <Map
+      label="Pick-up points in Montréal"
+      center={[-73.592, 45.528]}
+      zoom={12.5}
+      className="h-80 w-full max-w-xl"
+      fallback={<StaticMap label="Pick-up points in Montréal" center={[-73.592, 45.528]} zoom={12.5} places={SPOTS} />}
+    >
+      {SPOTS.map((s) => (
+        <Marker key={s.id} position={s.position} label={s.label} selected={s.id === chosen} onPress={() => setChosen(s.id)} />
+      ))}
+    </Map>
+  );
+}

package/registry/examples/map/static.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/map/static.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/map/static.tsx
+import { StaticMap } from "@krizaka/ui/map";
+import { jsx } from "react/jsx-runtime";
+function MapStatic() {
+  return /* @__PURE__ */ jsx("div", { className: "h-56 w-full max-w-md overflow-hidden rounded-2xl border border-border-default", children: /* @__PURE__ */ jsx(
+    StaticMap,
+    {
+      label: "Your two pick-up points",
+      center: [-73.585, 45.524],
+      zoom: 13,
+      places: [
+        { position: [-73.6005, 45.5229], label: "Caf\xE9 Olimpico" },
+        { position: [-73.5695, 45.5268], label: "Parc La Fontaine" }
+      ]
+    }
+  ) });
+}
+export {
+  MapStatic as default
+};

package/registry/examples/map/static.tsx

@@ -0,0 +1,18 @@
+import { StaticMap } from "@krizaka/ui/map";
+
+// A still map without an engine: the places projected on the map's paper — a card, a list item, the fallback of a Map.
+export default function MapStatic() {
+  return (
+    <div className="h-56 w-full max-w-md overflow-hidden rounded-2xl border border-border-default">
+      <StaticMap
+        label="Your two pick-up points"
+        center={[-73.585, 45.524]}
+        zoom={13}
+        places={[
+          { position: [-73.6005, 45.5229], label: "Café Olimpico" },
+          { position: [-73.5695, 45.5268], label: "Parc La Fontaine" },
+        ]}
+      />
+    </div>
+  );
+}

package/registry/examples/media-picker/native/story.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/media-picker/native/story.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/media-picker/native/story.tsx
+import { MediaPicker } from "@krizaka/ui/native/media-picker";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeMediaPickerStory() {
+  const [media, setMedia] = useState([]);
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    MediaPicker,
+    {
+      value: media,
+      onValueChange: setMedia,
+      max: 4,
+      labels: {
+        add: "Add",
+        source: "Add from",
+        library: "Photo library",
+        camera: "Take a photo",
+        cancel: "Cancel",
+        remove: (n) => `Remove photo ${n}`,
+        count: (n, max) => `${n} of ${max}`
+      }
+    }
+  ) });
+}
+export {
+  NativeMediaPickerStory as default
+};

package/registry/examples/media-picker/native/story.tsx

@@ -0,0 +1,26 @@
+import { MediaPicker,type PickedMedia } from "@krizaka/ui/native/media-picker";
+import { useState } from "react";
+import { View } from "react-native";
+
+// Up to four photos for a story: from the library or the camera, removed with the cross.
+export default function NativeMediaPickerStory() {
+  const [media, setMedia] = useState<PickedMedia[]>([]);
+  return (
+    <View style={{ width: 340 }}>
+      <MediaPicker
+        value={media}
+        onValueChange={setMedia}
+        max={4}
+        labels={{
+          add: "Add",
+          source: "Add from",
+          library: "Photo library",
+          camera: "Take a photo",
+          cancel: "Cancel",
+          remove: (n) => `Remove photo ${n}`,
+          count: (n, max) => `${n} of ${max}`,
+        }}
+      />
+    </View>
+  );
+}

package/registry/examples/meter/native/credits.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/meter/native/credits.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/meter/native/credits.tsx
+import { Meter } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeMeterCredits() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 20 }, children: [
+    /* @__PURE__ */ jsx(Meter, { label: "Credits this month", value: 4120, max: 5e3, valueText: "4,120 of 5,000", thresholds: { low: 0.8, high: 0.95 }, showLabel: true }),
+    /* @__PURE__ */ jsx(Meter, { label: "Storage", value: 18, max: 50, valueText: "18 GB of 50 GB", showLabel: true, size: "sm" })
+  ] });
+}
+export {
+  NativeMeterCredits as default
+};

package/registry/examples/meter/native/credits.tsx

@@ -0,0 +1,12 @@
+import { Meter } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Credits used this month: warning past 80 %, danger past 95 %.
+export default function NativeMeterCredits() {
+  return (
+    <View style={{ width: 320, gap: 20 }}>
+      <Meter label="Credits this month" value={4_120} max={5_000} valueText="4,120 of 5,000" thresholds={{ low: 0.8, high: 0.95 }} showLabel />
+      <Meter label="Storage" value={18} max={50} valueText="18 GB of 50 GB" showLabel size="sm" />
+    </View>
+  );
+}

package/registry/examples/meter/native/split-ring.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/meter/native/split-ring.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/meter/native/split-ring.tsx
+import { Meter, Txt } from "@krizaka/ui/native";
+import { jsx } from "react/jsx-runtime";
+function NativeMeterSplitRing() {
+  return /* @__PURE__ */ jsx(
+    Meter,
+    {
+      label: "Split of a tip",
+      variant: "ring",
+      max: 1e3,
+      parts: [
+        { label: "To the creator", value: 850, valueText: "$8.50" },
+        { label: "Platform", value: 100, valueText: "$1.00" },
+        { label: "Payment fees", value: 50, valueText: "$0.50" }
+      ],
+      children: /* @__PURE__ */ jsx(Txt, { variant: "title", children: "$10" })
+    }
+  );
+}
+export {
+  NativeMeterSplitRing as default
+};

package/registry/examples/meter/native/split-ring.tsx

@@ -0,0 +1,19 @@
+import { Meter, Txt } from "@krizaka/ui/native";
+
+// Where a $10 tip goes: a ring split into parts, with its legend.
+export default function NativeMeterSplitRing() {
+  return (
+    <Meter
+      label="Split of a tip"
+      variant="ring"
+      max={1000}
+      parts={[
+        { label: "To the creator", value: 850, valueText: "$8.50" },
+        { label: "Platform", value: 100, valueText: "$1.00" },
+        { label: "Payment fees", value: 50, valueText: "$0.50" },
+      ]}
+    >
+      <Txt variant="title">$10</Txt>
+    </Meter>
+  );
+}

package/registry/examples/number-ticker/native/balance.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/number-ticker/native/balance.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/number-ticker/native/balance.tsx
+import { Button, NumberTicker, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeNumberTickerBalance() {
+  const [cents, setCents] = useState(12840);
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 8, alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "Balance" }),
+    /* @__PURE__ */ jsx(NumberTicker, { value: cents / 100, locale: "en-US", format: { style: "currency", currency: "USD" }, trigger: "change", announce: true }),
+    /* @__PURE__ */ jsx(Button, { label: "Receive a $5 tip", size: "sm", onPress: () => setCents((c) => c + 500) })
+  ] });
+}
+export {
+  NativeNumberTickerBalance as default
+};

package/registry/examples/number-ticker/native/balance.tsx

@@ -0,0 +1,17 @@
+import { Button, NumberTicker, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// A wallet's balance: it climbs at first, then rolls on every tip received — and says it.
+export default function NativeNumberTickerBalance() {
+  const [cents, setCents] = useState(12_840);
+  return (
+    <View style={{ gap: 8, alignItems: "flex-start" }}>
+      <Txt variant="caption" tone="secondary">
+        Balance
+      </Txt>
+      <NumberTicker value={cents / 100} locale="en-US" format={{ style: "currency", currency: "USD" }} trigger="change" announce />
+      <Button label="Receive a $5 tip" size="sm" onPress={() => setCents((c) => c + 500)} />
+    </View>
+  );
+}

package/registry/examples/onboarding/native/first-launch.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/onboarding/native/first-launch.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/onboarding/native/first-launch.tsx
+import { Mascot, Onboarding } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeOnboardingFirstLaunch() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 560 }, children: /* @__PURE__ */ jsx(
+    Onboarding,
+    {
+      slides: [
+        { visual: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "welcome", size: 140 }), title: "Get paid for what you love", description: "Tips, auctions and dares from your fans \u2014 paid out every week." },
+        { visual: /* @__PURE__ */ jsx(Mascot, { bird: "falcon", mood: "thinking", size: 140 }), title: "Your money, watched over", description: "Pledges wait in escrow until the challenge is done." },
+        { visual: /* @__PURE__ */ jsx(Mascot, { bird: "pigeon", mood: "success", size: 140 }), title: "Never miss a bid", description: "Hear when you are outbid, wherever you are." }
+      ],
+      labels: { next: "Next", done: "Get started", skip: "Skip", position: (n, total) => `Step ${n} of ${total}` },
+      onDone: () => void 0
+    }
+  ) });
+}
+export {
+  NativeOnboardingFirstLaunch as default
+};

package/registry/examples/onboarding/native/first-launch.tsx

@@ -0,0 +1,19 @@
+import { Mascot, Onboarding } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Three promises, a bird each; Skip at any time, Get started on the last.
+export default function NativeOnboardingFirstLaunch() {
+  return (
+    <View style={{ width: 360, height: 560 }}>
+      <Onboarding
+        slides={[
+          { visual: <Mascot bird="flamingo" mood="welcome" size={140} />, title: "Get paid for what you love", description: "Tips, auctions and dares from your fans — paid out every week." },
+          { visual: <Mascot bird="falcon" mood="thinking" size={140} />, title: "Your money, watched over", description: "Pledges wait in escrow until the challenge is done." },
+          { visual: <Mascot bird="pigeon" mood="success" size={140} />, title: "Never miss a bid", description: "Hear when you are outbid, wherever you are." },
+        ]}
+        labels={{ next: "Next", done: "Get started", skip: "Skip", position: (n, total) => `Step ${n} of ${total}` }}
+        onDone={() => undefined}
+      />
+    </View>
+  );
+}

package/registry/examples/otp-input/native/invalid.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/otp-input/native/invalid.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/otp-input/native/invalid.tsx
+import { OtpInput, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeOtpInputInvalid() {
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 8 }, children: [
+    /* @__PURE__ */ jsx(OtpInput, { label: "Verification code", value: "AB12C9", mode: "text", invalid: true }),
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "danger", children: "This code has expired. We sent you a new one." })
+  ] });
+}
+export {
+  NativeOtpInputInvalid as default
+};

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

@@ -0,0 +1,14 @@
+import { OtpInput, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A refused code: the boxes in danger, the words under them, an error tick.
+export default function NativeOtpInputInvalid() {
+  return (
+    <View style={{ gap: 8 }}>
+      <OtpInput label="Verification code" value="AB12C9" mode="text" invalid />
+      <Txt variant="caption" tone="danger">
+        This code has expired. We sent you a new one.
+      </Txt>
+    </View>
+  );
+}

package/registry/examples/otp-input/native/verify.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/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>
+  );
+}