@krizaka/ui 3.2.0 → 3.4.0

package/registry/examples/slider/vertical.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/slider/vertical.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SliderVertical() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-48 gap-8", children: [
+    /* @__PURE__ */ jsx(Slider, { label: "Voice", orientation: "vertical", tone: "solid", defaultValue: 70, step: 10, ticks: true, formatValue: (v) => `${v} %` }),
+    /* @__PURE__ */ jsx(Slider, { label: "Music", orientation: "vertical", tone: "solid", defaultValue: 40, step: 10, ticks: true, formatValue: (v) => `${v} %` }),
+    /* @__PURE__ */ jsx(Slider, { label: "Effects", orientation: "vertical", defaultValue: 55, step: 10, ticks: true, formatValue: (v) => `${v} %` })
+  ] });
+}
+export {
+  SliderVertical as default
+};

package/registry/examples/slider/vertical.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// Vertical faders: a mixer's channels, the accent alone, steps marked.
+export default function SliderVertical() {
+  return (
+    <div className="flex h-48 gap-8">
+      <Slider label="Voice" orientation="vertical" tone="solid" defaultValue={70} step={10} ticks formatValue={(v) => `${v} %`} />
+      <Slider label="Music" orientation="vertical" tone="solid" defaultValue={40} step={10} ticks formatValue={(v) => `${v} %`} />
+      <Slider label="Effects" orientation="vertical" defaultValue={55} step={10} ticks formatValue={(v) => `${v} %`} />
+    </div>
+  );
+}

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/switch/native/default.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/switch/native/default.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/switch/native/default.tsx
+import { Switch } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSwitchDefault() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Switch, { label: "Dark mode", defaultChecked: true }),
+    /* @__PURE__ */ jsx(Switch, { label: "Sounds" }),
+    /* @__PURE__ */ jsx(Switch, { label: "Compact", size: "sm", defaultChecked: true })
+  ] });
+}
+export {
+  NativeSwitchDefault as default
+};

package/registry/examples/switch/native/default.tsx

@@ -0,0 +1,13 @@
+import { Switch } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The switch alone, named by `label`: md and sm, on and off.
+export default function NativeSwitchDefault() {
+  return (
+    <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
+      <Switch label="Dark mode" defaultChecked />
+      <Switch label="Sounds" />
+      <Switch label="Compact" size="sm" defaultChecked />
+    </View>
+  );
+}

package/registry/examples/switch/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/switch/native/settings.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/switch/native/settings.tsx
+import { Switch } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSwitchSettings() {
+  const [push, setPush] = React.useState(true);
+  const [auctions, setAuctions] = React.useState(true);
+  const [digest, setDigest] = React.useState(false);
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 4 }, children: [
+    /* @__PURE__ */ jsx(Switch, { label: "Push notifications", description: "On this phone, even when the app is closed.", showLabel: true, checked: push, onCheckedChange: setPush }),
+    /* @__PURE__ */ jsx(Switch, { label: "Auctions you follow", description: "Outbid, ending soon, won.", showLabel: true, checked: auctions, onCheckedChange: setAuctions, disabled: !push }),
+    /* @__PURE__ */ jsx(Switch, { label: "Weekly digest", description: "One e-mail on Monday morning.", showLabel: true, checked: digest, onCheckedChange: setDigest })
+  ] });
+}
+export {
+  NativeSwitchSettings as default
+};

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

@@ -0,0 +1,17 @@
+import { Switch } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// Notification preferences: settings rows, the whole row pressable, a selection haptic as each one flips.
+export default function NativeSwitchSettings() {
+  const [push, setPush] = React.useState(true);
+  const [auctions, setAuctions] = React.useState(true);
+  const [digest, setDigest] = React.useState(false);
+  return (
+    <View style={{ width: 320, gap: 4 }}>
+      <Switch label="Push notifications" description="On this phone, even when the app is closed." showLabel checked={push} onCheckedChange={setPush} />
+      <Switch label="Auctions you follow" description="Outbid, ending soon, won." showLabel checked={auctions} onCheckedChange={setAuctions} disabled={!push} />
+      <Switch label="Weekly digest" description="One e-mail on Monday morning." showLabel checked={digest} onCheckedChange={setDigest} />
+    </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;

package/registry/examples/tree-view/docs.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/tree-view/docs.tsx
+import { TreeView } from "@krizaka/ui/tree-view";
+import { jsx } from "react/jsx-runtime";
+var nodes = [
+  {
+    id: "orazaka",
+    label: "Orazaka",
+    children: [
+      { id: "getting-started", label: "Getting started" },
+      { id: "studios", label: "Studios", meta: "12", children: [{ id: "dubbing", label: "Dubbing" }, { id: "transcript", label: "Transcript" }, { id: "clips", label: "Clips" }] },
+      { id: "api", label: "API reference" }
+    ]
+  },
+  { id: "orochia", label: "Orochia", children: [{ id: "auctions", label: "Auctions" }, { id: "challenges", label: "Challenges" }] },
+  { id: "ui", label: "Krizaka UI", children: [{ id: "components", label: "Components" }] }
+];
+function TreeViewDocs() {
+  return /* @__PURE__ */ jsx(TreeView, { "aria-label": "Documentation", nodes, defaultExpanded: ["orazaka", "studios"], defaultSelected: "dubbing", className: "max-w-xs" });
+}
+export {
+  TreeViewDocs as default
+};

package/registry/examples/tree-view/docs.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { TreeView } from "@krizaka/ui/tree-view";
+
+const nodes = [
+  {
+    id: "orazaka",
+    label: "Orazaka",
+    children: [
+      { id: "getting-started", label: "Getting started" },
+      { id: "studios", label: "Studios", meta: "12", children: [{ id: "dubbing", label: "Dubbing" }, { id: "transcript", label: "Transcript" }, { id: "clips", label: "Clips" }] },
+      { id: "api", label: "API reference" },
+    ],
+  },
+  { id: "orochia", label: "Orochia", children: [{ id: "auctions", label: "Auctions" }, { id: "challenges", label: "Challenges" }] },
+  { id: "ui", label: "Krizaka UI", children: [{ id: "components", label: "Components" }] },
+];
+
+// The documentation's sections: one tab stop, the arrows walk and open, a letter jumps.
+export default function TreeViewDocs() {
+  return <TreeView aria-label="Documentation" nodes={nodes} defaultExpanded={["orazaka", "studios"]} defaultSelected="dubbing" className="max-w-xs" />;
+}

package/registry/examples/tree-view/lazy.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/tree-view/lazy.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/tree-view/lazy.tsx
+import { TreeView } from "@krizaka/ui/tree-view";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function TreeViewLazy() {
+  const [nodes, setNodes] = useState([
+    { id: "voices", label: "Voices", hasChildren: true, meta: "3" },
+    { id: "glossaries", label: "Glossaries", hasChildren: true, meta: "2" },
+    { id: "readme", label: "README.md" }
+  ]);
+  const load = (node) => setTimeout(() => {
+    const files = Array.from({ length: Number(node.meta) }, (_, i) => ({ id: `${node.id}-${i}`, label: `${node.label.toLowerCase()}-${i + 1}.json` }));
+    setNodes((all) => all.map((n) => n.id === node.id ? { ...n, children: files } : n));
+  }, 600);
+  return /* @__PURE__ */ jsx(TreeView, { "aria-label": "Datasets", nodes, onLoadChildren: load, loadingLabel: "Loading the files", className: "max-w-xs" });
+}
+export {
+  TreeViewLazy as default
+};