@krizaka/ui 3.2.0 → 3.4.0

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>
+  );
+}

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/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/radio-group/buttons.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/radio-group/buttons.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/radio-group/buttons.tsx
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { jsx } from "react/jsx-runtime";
+var TIPS = [
+  ["10", "10 %", "$4.20"],
+  ["15", "15 %", "$6.30"],
+  ["20", "20 %", "$8.40"],
+  ["0", "No tip", "\u2014"]
+];
+function RadioGroupButtons() {
+  return /* @__PURE__ */ jsx(RadioGroup.Root, { label: "Tip", defaultValue: "15", variant: "buttons", children: TIPS.map(([value, label, amount]) => /* @__PURE__ */ jsx(RadioGroup.Button, { value, hint: amount, className: "w-24", children: label }, value)) });
+}
+export {
+  RadioGroupButtons as default
+};

package/registry/examples/radio-group/buttons.tsx

@@ -0,0 +1,21 @@
+import { RadioGroup } from "@krizaka/ui/radio-group";
+
+const TIPS = [
+  ["10", "10 %", "$4.20"],
+  ["15", "15 %", "$6.30"],
+  ["20", "20 %", "$8.40"],
+  ["0", "No tip", "—"],
+];
+
+// Tactile keys: raised on their ledge, pressed in while held — the chosen one stays sunk, lit in the accent.
+export default function RadioGroupButtons() {
+  return (
+    <RadioGroup.Root label="Tip" defaultValue="15" variant="buttons">
+      {TIPS.map(([value, label, amount]) => (
+        <RadioGroup.Button key={value} value={value} hint={amount} className="w-24">
+          {label}
+        </RadioGroup.Button>
+      ))}
+    </RadioGroup.Root>
+  );
+}

package/registry/examples/radio-group/cards.js

@@ -9,7 +9,7 @@ var AMOUNTS = [
   ["50", "$50", "A night out"]
 ];
 function RadioGroupCards() {
-  return /* @__PURE__ */ jsx(RadioGroup.Root, { label: "Amount", defaultValue: "20", className: "grid w-[30rem] max-w-full grid-cols-3 gap-3", children: AMOUNTS.map(([value, amount, hint]) => /* @__PURE__ */ jsxs(RadioGroup.Card, { value, children: [
+  return /* @__PURE__ */ jsx(RadioGroup.Root, { label: "Amount", defaultValue: "20", variant: "cards", className: "w-[30rem] max-w-full grid-cols-3", children: AMOUNTS.map(([value, amount, hint]) => /* @__PURE__ */ jsxs(RadioGroup.Card, { value, children: [
     /* @__PURE__ */ jsx("span", { className: "font-display text-lg font-bold", children: amount }),
     /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-secondary", children: hint })
   ] }, value)) });

package/registry/examples/radio-group/cards.tsx

@@ -6,10 +6,10 @@ const AMOUNTS = [
   ["50", "$50", "A night out"],
 ];
 
-// Whole cards: the chosen one carries the accent border and tint.
+// Whole cards: the chosen one carries the accent border, its tint and its lit check.
 export default function RadioGroupCards() {
   return (
-    <RadioGroup.Root label="Amount" defaultValue="20" className="grid w-[30rem] max-w-full grid-cols-3 gap-3">
+    <RadioGroup.Root label="Amount" defaultValue="20" variant="cards" className="w-[30rem] max-w-full grid-cols-3">
       {AMOUNTS.map(([value, amount, hint]) => (
         <RadioGroup.Card key={value} value={value}>
           <span className="font-display text-lg font-bold">{amount}</span>

package/registry/examples/radio-group/native/buttons.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/radio-group/native/buttons.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/radio-group/native/buttons.tsx
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeRadioGroupButtons() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      label: "Tip",
+      variant: "buttons",
+      defaultValue: "15",
+      options: [
+        { value: "10", label: "10 %", hint: "$4.20" },
+        { value: "15", label: "15 %", hint: "$6.30" },
+        { value: "20", label: "20 %", hint: "$8.40" },
+        { value: "0", label: "None" }
+      ]
+    }
+  ) });
+}
+export {
+  NativeRadioGroupButtons as default
+};