@krizaka/ui 3.3.0 → 3.4.0

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/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/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/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;

package/registry/examples/tab-bar/native/main-sections.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/tab-bar/native/main-sections.tsx
+import { TabBar } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx } 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 }) });
+function NativeTabBarMainSections() {
+  const [tab, setTab] = useState("home");
+  return /* @__PURE__ */ jsx(View, { style: { width: 360 }, children: /* @__PURE__ */ jsx(
+    TabBar,
+    {
+      "aria-label": "Main sections",
+      value: tab,
+      onValueChange: setTab,
+      items: [
+        { value: "home", label: "Home", icon: icon("M3 11 12 4l9 7v9h-6v-6H9v6H3z") },
+        { value: "auctions", label: "Auctions", icon: icon("M14 4l6 6-3 3-6-6zM11 7l-8 8 3 3 8-8M4 21h9") },
+        { value: "messages", label: "Messages", badge: 3, badgeLabel: "3 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") }
+      ]
+    }
+  ) });
+}
+export {
+  NativeTabBarMainSections as default
+};

package/registry/examples/tab-bar/native/main-sections.tsx

@@ -0,0 +1,30 @@
+import { TabBar } 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>
+);
+
+// Orochia's main sections: the current one in the accent, a badge on Messages, a tick on change.
+export default function NativeTabBarMainSections() {
+  const [tab, setTab] = useState<"home" | "auctions" | "messages" | "me">("home");
+  return (
+    <View style={{ width: 360 }}>
+      <TabBar
+        aria-label="Main sections"
+        value={tab}
+        onValueChange={setTab}
+        items={[
+          { value: "home", label: "Home", icon: icon("M3 11 12 4l9 7v9h-6v-6H9v6H3z") },
+          { value: "auctions", label: "Auctions", icon: icon("M14 4l6 6-3 3-6-6zM11 7l-8 8 3 3 8-8M4 21h9") },
+          { value: "messages", label: "Messages", badge: 3, badgeLabel: "3 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") },
+        ]}
+      />
+    </View>
+  );
+}

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

package/registry/examples/tabs/native/sections.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/tabs/native/sections.tsx
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeTabsSections() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      "aria-label": "Elena's page",
+      items: [
+        { value: "videos", label: "Videos", count: 42, content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "42 videos, newest first." }) },
+        { value: "auctions", label: "Auctions", count: 3, content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "3 auctions running." }) },
+        { value: "challenges", label: "Challenges", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Dares from fans." }) },
+        { value: "about", label: "About", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Covers and live sessions." }) }
+      ]
+    }
+  ) });
+}
+export {
+  NativeTabsSections as default
+};

package/registry/examples/tabs/native/sections.tsx

@@ -0,0 +1,19 @@
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A creator's page: sections that scroll sideways when they do not fit, a count after the words.
+export default function NativeTabsSections() {
+  return (
+    <View style={{ width: 340 }}>
+      <Tabs
+        aria-label="Elena's page"
+        items={[
+          { value: "videos", label: "Videos", count: 42, content: <Txt tone="secondary">42 videos, newest first.</Txt> },
+          { value: "auctions", label: "Auctions", count: 3, content: <Txt tone="secondary">3 auctions running.</Txt> },
+          { value: "challenges", label: "Challenges", content: <Txt tone="secondary">Dares from fans.</Txt> },
+          { value: "about", label: "About", content: <Txt tone="secondary">Covers and live sessions.</Txt> },
+        ]}
+      />
+    </View>
+  );
+}

package/registry/examples/tabs/native/segmented.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/tabs/native/segmented.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/tabs/native/segmented.tsx
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeTabsSegmented() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      variant: "segmented",
+      "aria-label": "Story insights",
+      items: [
+        { value: "viewers", label: "Viewers", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "312 people watched." }) },
+        { value: "tips", label: "Tips", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "$46 from 9 fans." }) }
+      ]
+    }
+  ) });
+}
+export {
+  NativeTabsSegmented as default
+};

package/registry/examples/tabs/native/segmented.tsx

@@ -0,0 +1,18 @@
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Two views of the same content: `variant="segmented"`.
+export default function NativeTabsSegmented() {
+  return (
+    <View style={{ width: 320 }}>
+      <Tabs
+        variant="segmented"
+        aria-label="Story insights"
+        items={[
+          { value: "viewers", label: "Viewers", content: <Txt tone="secondary">312 people watched.</Txt> },
+          { value: "tips", label: "Tips", content: <Txt tone="secondary">$46 from 9 fans.</Txt> },
+        ]}
+      />
+    </View>
+  );
+}

package/registry/examples/toast/native/snackbar.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/toast/native/snackbar.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/toast/native/snackbar.tsx
+import { Button, toast, Toaster } from "@krizaka/ui/native";
+import { useEffect } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var archive = () => toast("Conversation archived", { id: "archived", action: { label: "Undo", onPress: () => void 0 } });
+function NativeToastSnackbar({ defaultOpen = false }) {
+  useEffect(() => {
+    if (!defaultOpen) return;
+    toast.dismiss();
+    archive();
+    return () => toast.dismiss();
+  }, [defaultOpen]);
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, height: 200 }, children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", label: "Archive", onPress: archive }),
+    /* @__PURE__ */ jsx(Toaster, { closeLabel: "Dismiss", position: "bottom", offset: 16, duration: defaultOpen ? Number.POSITIVE_INFINITY : 5e3 })
+  ] });
+}
+export {
+  NativeToastSnackbar as default
+};

package/registry/examples/toast/native/snackbar.tsx

@@ -0,0 +1,21 @@
+import { Button, toast, Toaster } from "@krizaka/ui/native";
+import { useEffect } from "react";
+import { View } from "react-native";
+
+const archive = () => toast("Conversation archived", { id: "archived", action: { label: "Undo", onPress: () => undefined } });
+
+// A snackbar: at the bottom, above the tab bar (`offset`), one action; swipe it away, a tick for its tone.
+export default function NativeToastSnackbar({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  useEffect(() => {
+    if (!defaultOpen) return;
+    toast.dismiss();
+    archive();
+    return () => toast.dismiss();
+  }, [defaultOpen]);
+  return (
+    <View style={{ width: 360, height: 200 }}>
+      <Button variant="outline" label="Archive" onPress={archive} />
+      <Toaster closeLabel="Dismiss" position="bottom" offset={16} duration={defaultOpen ? Number.POSITIVE_INFINITY : 5000} />
+    </View>
+  );
+}

package/registry/examples/tree-view/docs.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;