@krizaka/ui 3.3.0 → 3.4.0

package/registry/examples/description-list/receipt.tsx

@@ -0,0 +1,17 @@
+import { DescriptionList } from "@krizaka/ui/description-list";
+
+// Inline: a tip's breakdown, read like a receipt.
+export default function DescriptionListReceipt() {
+  return (
+    <DescriptionList
+      layout="inline"
+      className="max-w-sm"
+      items={[
+        { term: "Tip from @mina", details: "$10.00" },
+        { term: "Payment fees", details: "−$0.50" },
+        { term: "Platform", details: "−$1.00" },
+        { term: "To you", details: "$8.50", hint: "paid on Oct 15" },
+      ]}
+    />
+  );
+}

package/registry/examples/fab/native/extended.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/fab/native/extended.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/fab/native/extended.tsx
+import { Fab, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeFabExtended() {
+  const { theme } = useTheme();
+  const plus = /* @__PURE__ */ jsx(Svg, { width: 22, height: 22, viewBox: "0 0 24 24", stroke: theme.onAccent, strokeWidth: 2.4, strokeLinecap: "round", children: /* @__PURE__ */ jsx(Path, { d: "M12 5v14M5 12h14" }) });
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, height: 200, flexDirection: "row" }, children: [
+    /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Fab, { label: "New challenge", icon: plus, extended: true, onPress: () => void 0 }) }),
+    /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Fab, { label: "New challenge", icon: plus, onPress: () => void 0 }) })
+  ] });
+}
+export {
+  NativeFabExtended as default
+};

package/registry/examples/fab/native/extended.tsx

@@ -0,0 +1,23 @@
+import { Fab, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+// The screen's one main action, floating over the list, above the tab bar (`offset`).
+export default function NativeFabExtended() {
+  const { theme } = useTheme();
+  const plus = (
+    <Svg width={22} height={22} viewBox="0 0 24 24" stroke={theme.onAccent} strokeWidth={2.4} strokeLinecap="round">
+      <Path d="M12 5v14M5 12h14" />
+    </Svg>
+  );
+  return (
+    <View style={{ width: 360, height: 200, flexDirection: "row" }}>
+      <View style={{ flex: 1 }}>
+        <Fab label="New challenge" icon={plus} extended onPress={() => undefined} />
+      </View>
+      <View style={{ flex: 1 }}>
+        <Fab label="New challenge" icon={plus} onPress={() => undefined} />
+      </View>
+    </View>
+  );
+}

package/registry/examples/header/native/large-title.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/header/native/large-title.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/header/native/large-title.tsx
+import { Header, IconButton, SearchField, Txt, useCollapsingHeader, useTheme } from "@krizaka/ui/native";
+import { Animated, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DAYS = ["Today", "Yesterday", "Monday", "Sunday", "Saturday", "Friday", "Thursday"];
+function NativeHeaderLargeTitle() {
+  const { scrollY, onScroll } = useCollapsingHeader();
+  const { theme } = useTheme();
+  const plus = /* @__PURE__ */ jsx(Svg, { width: 20, height: 20, viewBox: "0 0 24 24", stroke: theme.textPrimary, strokeWidth: 2.4, strokeLinecap: "round", children: /* @__PURE__ */ jsx(Path, { d: "M12 5v14M5 12h14" }) });
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, height: 420 }, children: [
+    /* @__PURE__ */ jsx(Header, { title: "Earnings", subtitle: "$1,990.40 this year", scrollY, actions: /* @__PURE__ */ jsx(IconButton, { label: "Withdraw", icon: plus, variant: "ghost" }), children: /* @__PURE__ */ jsx(SearchField, { label: "Search payouts", placeholder: "Search payouts", clearLabel: "Clear" }) }),
+    /* @__PURE__ */ jsx(Animated.ScrollView, { tabIndex: 0, onScroll, scrollEventThrottle: 16, children: DAYS.map((day) => /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 14 }, children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "label", children: `Tips \xB7 ${day}` }),
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "$24.00" })
+    ] }, day)) })
+  ] });
+}
+export {
+  NativeHeaderLargeTitle as default
+};

package/registry/examples/header/native/large-title.tsx

@@ -0,0 +1,31 @@
+import { Header, IconButton, SearchField, Txt, useCollapsingHeader, useTheme } from "@krizaka/ui/native";
+import { Animated, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+const DAYS = ["Today", "Yesterday", "Monday", "Sunday", "Saturday", "Friday", "Thursday"];
+
+// A large title that folds into the bar as the list scrolls under it.
+export default function NativeHeaderLargeTitle() {
+  const { scrollY, onScroll } = useCollapsingHeader();
+  const { theme } = useTheme();
+  const plus = (
+    <Svg width={20} height={20} viewBox="0 0 24 24" stroke={theme.textPrimary} strokeWidth={2.4} strokeLinecap="round">
+      <Path d="M12 5v14M5 12h14" />
+    </Svg>
+  );
+  return (
+    <View style={{ width: 360, height: 420 }}>
+      <Header title="Earnings" subtitle="$1,990.40 this year" scrollY={scrollY} actions={<IconButton label="Withdraw" icon={plus} variant="ghost" />}>
+        <SearchField label="Search payouts" placeholder="Search payouts" clearLabel="Clear" />
+      </Header>
+      <Animated.ScrollView tabIndex={0} onScroll={onScroll} scrollEventThrottle={16}>
+        {DAYS.map((day) => (
+          <View key={day} style={{ flexDirection: "row", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 14 }}>
+            <Txt variant="label">{`Tips · ${day}`}</Txt>
+            <Txt tone="secondary">$24.00</Txt>
+          </View>
+        ))}
+      </Animated.ScrollView>
+    </View>
+  );
+}

package/registry/examples/image-viewer/native/gallery.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/image-viewer/native/gallery.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/image-viewer/native/gallery.tsx
+import { Button, ImageViewer } from "@krizaka/ui/native";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var png = (data) => `data:image/png;base64,${data}`;
+var PHOTOS = [
+  { uri: png("iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAIAAACDRijCAAAB90lEQVR42nVU247TMBCdGU/s3CilhdXy0C28sRLfwf//BLtspV6gbZzYjoeHdFOnLNI82Nbo6Nxk/P7xB5EwwesIEzACM2iFRa4Ko0xGKFFCkNATRobpMgEhsCIhAnUZGQ6MoBVWZbb8UCwWRZlnvffnP4092t55kjhuDkMorBVQgj3Q0Qx1yXd39Xq9WK3m72rT2W7ztN/83B33x945upIChUIEA5CMEAPh0qjlovj6ZfHt8f5hvawq3Vo3n+VGwbOE8yFI3w8QF2kErJXQFUWYQDNWOX9alKvV/GG9vP/83hh2LigQb607nqS1oYsEcSRFNEjDiXNaQa6xKnhWm7rSxmRZRohYVaauTJmz0UhBEnWDNIJpaqAJFIgE79qus513noCDC67tQttJ7xkiKiBIUptIu5IS7EN7ara/9puZUYRlqZ1126ftYbN3pwZjYBROnB3NnjaIQEnfnezueZsrCbarau2sO7zsDi9b3zRKeqXSfG5Sw4QXinh/Ppw2Errjucg5+tCezu7cgPcZpvsylYa3ZWWM4p39HaRtG0aEiH3AGBljGnHiEU2lJTVjEIoxdn0IwChEwjghMk3t32YnTWMCpnjli7ebTDKanaZ2A5EqfYPI+H5lpC7b8gbE/4lMmq1oABJFoPD2G7gMptfXM16vRPAXAU4Dl1f5CK8AAAAASUVORK5CYII="), alt: "Elena on stage, backlit", caption: "Sunset session \xB7 Lisbon" },
+  { uri: png("iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAIAAACDRijCAAAB6klEQVR42o2T3W4TQQyF7eOZnexmq2wiaLmgrbgB2ifgjvd/AwrlCokmNEXpNtn/8XCR5q/dApIvrNGx9dnjw6PzzwSwCEQYAhGIEIRYWIQYDGEIi2wTwrNHwDCwDiPiXDRwxlirxI3nVtkzmLHVbEIOAwQYNoYBa0yauNfj5GScDOOobMPtspsvu6INSo+VdMi1l4ABA7Fikcbu9Pjo4ix7/zbLjlxe+G/T1Zeb8ud9UzRBaVtw0IX2R4MxA2ePJ8OL88mnj68uz8ajYZQX3WQUs31ofzxM77vaM/WD7HIjNooH0ckk/XCaXZ6N371JE2fKxhNkUdFsqYu66poQCD0gh0TWRFGSuCx1ozRKnHFWiHk0tFnqkjiykYduNtU34CMRiwSWynNeaV5q2SgTl63mteZVqD0rG5YAQi/IJocJkEZ5vvTXv6rJqCAgi21e+6tZ9X1ez1ehURD4BRCh3R2JbQl3hV5NK5blogrZMMorvZ43X2/b3yV1W5YeENkRQUxglB3f5F1L5WwVhgNbepqv9K7Q0nOA4CWQTRcGDBvLgDKKDrOlX7SNNeoZjXKnrPx3kINlr10iCqlV2obZE4MJIP4XyMH3rxttnsLasfhPkK1y47Ve0Ra776yfLxt7UqAvnnp9bfcnsj/xIr3biGqZngAAAABJRU5ErkJggg=="), alt: "The crowd at the front" },
+  { uri: png("iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAIAAACDRijCAAABrklEQVR42o1Ty3LbMAwEFiCpR5vY1iVOT+2pP9H//5lOHfklmc8ebDmexEpyIQEMZrmLBfnXn98Aq7CAFSy3sUyVmeI1BljPF6b8zSlgAeSTBgZYjQKYfW2OwpWgCiYgYdxvwnuZc9pfGX2RiBFMDRCQTLgAq5WL2k+JGIUzWhk1KqBSKDMV5qKTNOALE7EitbOPbbNo2sqZnOLgx5Mfc44MOks7z+ijiRhB4+zq+8Nz1z0tlk3lQvD/dv1mvzkMh1wiM6m9YTRnTWV00bY/uu7n03q97GpnQ/APTe0M/nIZ/DGXfMf+NyhG0Ti7/NauV8vnVdc9PFrRmCKAlH0IA1EIKX5g/2VHjMCpNM62VdU4a9UowMy1s42ramsGL0zp1f65HTHKIlRKitH7EGKKzJJyCjHE5Imzgkjx3v4LkVtcpuTD0B/6za4W4crYmML28LI/bkMcmbMKXey/8yevuGBw8fHUH3qrSDnUzsXkt4ft/tindBIuLLjazyK4a9w5oJLG03GzKzGO1hgqyccxhBOVbIQZrAJg/ltfU2bKOY6noeSoCmEiSkwZYAAA/wd2L6cjlMdGoAAAAABJRU5ErkJggg=="), alt: "The band packing up" }
+];
+function NativeImageViewerGallery({ defaultOpen = false }) {
+  const [index, setIndex] = useState(defaultOpen ? 0 : null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { label: "Open the photos", onPress: () => setIndex(0) }),
+    /* @__PURE__ */ jsx(ImageViewer, { images: PHOTOS, index, onIndexChange: setIndex, closeLabel: "Close", positionLabel: (n, total) => `${n} of ${total}` })
+  ] });
+}
+export {
+  NativeImageViewerGallery as default
+};

package/registry/examples/image-viewer/native/gallery.tsx

@@ -0,0 +1,21 @@
+import { Button, ImageViewer } from "@krizaka/ui/native";
+import { useState } from "react";
+
+// Stand-in photos (an app passes its CDN's URIs): tiny PNGs, so the example runs offline.
+const png = (data: string) => `data:image/png;base64,${data}`;
+const PHOTOS = [
+  { uri: png("iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAIAAACDRijCAAAB90lEQVR42nVU247TMBCdGU/s3CilhdXy0C28sRLfwf//BLtspV6gbZzYjoeHdFOnLNI82Nbo6Nxk/P7xB5EwwesIEzACM2iFRa4Ko0xGKFFCkNATRobpMgEhsCIhAnUZGQ6MoBVWZbb8UCwWRZlnvffnP4092t55kjhuDkMorBVQgj3Q0Qx1yXd39Xq9WK3m72rT2W7ztN/83B33x945upIChUIEA5CMEAPh0qjlovj6ZfHt8f5hvawq3Vo3n+VGwbOE8yFI3w8QF2kErJXQFUWYQDNWOX9alKvV/GG9vP/83hh2LigQb607nqS1oYsEcSRFNEjDiXNaQa6xKnhWm7rSxmRZRohYVaauTJmz0UhBEnWDNIJpaqAJFIgE79qus513noCDC67tQttJ7xkiKiBIUptIu5IS7EN7ara/9puZUYRlqZ1126ftYbN3pwZjYBROnB3NnjaIQEnfnezueZsrCbarau2sO7zsDi9b3zRKeqXSfG5Sw4QXinh/Ppw2Errjucg5+tCezu7cgPcZpvsylYa3ZWWM4p39HaRtG0aEiH3AGBljGnHiEU2lJTVjEIoxdn0IwChEwjghMk3t32YnTWMCpnjli7ebTDKanaZ2A5EqfYPI+H5lpC7b8gbE/4lMmq1oABJFoPD2G7gMptfXM16vRPAXAU4Dl1f5CK8AAAAASUVORK5CYII="), alt: "Elena on stage, backlit", caption: "Sunset session · Lisbon" },
+  { uri: png("iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAIAAACDRijCAAAB6klEQVR42o2T3W4TQQyF7eOZnexmq2wiaLmgrbgB2ifgjvd/AwrlCokmNEXpNtn/8XCR5q/dApIvrNGx9dnjw6PzzwSwCEQYAhGIEIRYWIQYDGEIi2wTwrNHwDCwDiPiXDRwxlirxI3nVtkzmLHVbEIOAwQYNoYBa0yauNfj5GScDOOobMPtspsvu6INSo+VdMi1l4ABA7Fikcbu9Pjo4ix7/zbLjlxe+G/T1Zeb8ud9UzRBaVtw0IX2R4MxA2ePJ8OL88mnj68uz8ajYZQX3WQUs31ofzxM77vaM/WD7HIjNooH0ckk/XCaXZ6N371JE2fKxhNkUdFsqYu66poQCD0gh0TWRFGSuCx1ozRKnHFWiHk0tFnqkjiykYduNtU34CMRiwSWynNeaV5q2SgTl63mteZVqD0rG5YAQi/IJocJkEZ5vvTXv6rJqCAgi21e+6tZ9X1ez1ehURD4BRCh3R2JbQl3hV5NK5blogrZMMorvZ43X2/b3yV1W5YeENkRQUxglB3f5F1L5WwVhgNbepqv9K7Q0nOA4CWQTRcGDBvLgDKKDrOlX7SNNeoZjXKnrPx3kINlr10iCqlV2obZE4MJIP4XyMH3rxttnsLasfhPkK1y47Ve0Ra776yfLxt7UqAvnnp9bfcnsj/xIr3biGqZngAAAABJRU5ErkJggg=="), alt: "The crowd at the front" },
+  { uri: png("iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAIAAACDRijCAAABrklEQVR42o1Ty3LbMAwEFiCpR5vY1iVOT+2pP9H//5lOHfklmc8ebDmexEpyIQEMZrmLBfnXn98Aq7CAFSy3sUyVmeI1BljPF6b8zSlgAeSTBgZYjQKYfW2OwpWgCiYgYdxvwnuZc9pfGX2RiBFMDRCQTLgAq5WL2k+JGIUzWhk1KqBSKDMV5qKTNOALE7EitbOPbbNo2sqZnOLgx5Mfc44MOks7z+ijiRhB4+zq+8Nz1z0tlk3lQvD/dv1mvzkMh1wiM6m9YTRnTWV00bY/uu7n03q97GpnQ/APTe0M/nIZ/DGXfMf+NyhG0Ti7/NauV8vnVdc9PFrRmCKAlH0IA1EIKX5g/2VHjMCpNM62VdU4a9UowMy1s42ramsGL0zp1f65HTHKIlRKitH7EGKKzJJyCjHE5Imzgkjx3v4LkVtcpuTD0B/6za4W4crYmML28LI/bkMcmbMKXey/8yevuGBw8fHUH3qrSDnUzsXkt4ft/tindBIuLLjazyK4a9w5oJLG03GzKzGO1hgqyccxhBOVbIQZrAJg/ltfU2bKOY6noeSoCmEiSkwZYAAA/wd2L6cjlMdGoAAAAABJRU5ErkJggg=="), alt: "The band packing up" },
+];
+
+// Full screen: pinch or double tap to zoom, swipe between photos, swipe down to close.
+export default function NativeImageViewerGallery({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  const [index, setIndex] = useState<number | null>(defaultOpen ? 0 : null);
+  return (
+    <>
+      <Button label="Open the photos" onPress={() => setIndex(0)} />
+      <ImageViewer images={PHOTOS} index={index} onIndexChange={setIndex} closeLabel="Close" positionLabel={(n, total) => `${n} of ${total}`} />
+    </>
+  );
+}

package/registry/examples/kanban/moderation.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/kanban/moderation.js

@@ -0,0 +1,35 @@
+"use client";
+
+// registry/examples/kanban/moderation.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Kanban } from "@krizaka/ui/kanban";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var columns = [
+  { id: "open", title: "To review", limit: 3 },
+  { id: "reviewing", title: "Reviewing" },
+  { id: "resolved", title: "Resolved" }
+];
+function KanbanModeration() {
+  const [reports, setReports] = useState([
+    { id: "r1", video: "Backflip on the beach", reason: "Dangerous act", status: "open" },
+    { id: "r2", video: "Cover of the summer hit", reason: "Copyright", status: "open" },
+    { id: "r3", video: "Night drive", reason: "Copyright", status: "reviewing" },
+    { id: "r4", video: "Q&A with fans", reason: "Spam", status: "resolved" }
+  ]);
+  const move = ({ cardId, to, index }) => setReports((all) => {
+    const card = { ...all.find((r) => r.id === cardId), status: to };
+    const rest = all.filter((r) => r.id !== cardId);
+    const before = rest.filter((r) => r.status === to).slice(0, index);
+    const at = before.length ? rest.indexOf(before[before.length - 1]) + 1 : rest.findIndex((r) => r.status === to);
+    return [...rest.slice(0, Math.max(0, at)), card, ...rest.slice(Math.max(0, at))];
+  });
+  const render = (r) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: r.video }),
+    /* @__PURE__ */ jsx(Badge, { tone: r.reason === "Copyright" ? "warning" : "neutral", children: r.reason })
+  ] });
+  return /* @__PURE__ */ jsx(Kanban, { "aria-label": "Moderation queue", columns, cards: reports, getId: (r) => r.id, getColumn: (r) => r.status, getTitle: (r) => r.video, renderCard: render, onMove: move });
+}
+export {
+  KanbanModeration as default
+};

package/registry/examples/kanban/moderation.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { Kanban, type KanbanMove } from "@krizaka/ui/kanban";
+import { useState } from "react";
+
+type Report = { id: string; video: string; reason: string; status: string };
+const columns = [
+  { id: "open", title: "To review", limit: 3 },
+  { id: "reviewing", title: "Reviewing" },
+  { id: "resolved", title: "Resolved" },
+];
+
+// The moderation queue: drag a report, or press Space and the arrow keys — every move announced.
+export default function KanbanModeration() {
+  const [reports, setReports] = useState<Report[]>([
+    { id: "r1", video: "Backflip on the beach", reason: "Dangerous act", status: "open" },
+    { id: "r2", video: "Cover of the summer hit", reason: "Copyright", status: "open" },
+    { id: "r3", video: "Night drive", reason: "Copyright", status: "reviewing" },
+    { id: "r4", video: "Q&A with fans", reason: "Spam", status: "resolved" },
+  ]);
+  const move = ({ cardId, to, index }: KanbanMove) =>
+    setReports((all) => {
+      const card = { ...all.find((r) => r.id === cardId)!, status: to };
+      const rest = all.filter((r) => r.id !== cardId);
+      const before = rest.filter((r) => r.status === to).slice(0, index);
+      const at = before.length ? rest.indexOf(before[before.length - 1]!) + 1 : rest.findIndex((r) => r.status === to);
+      return [...rest.slice(0, Math.max(0, at)), card, ...rest.slice(Math.max(0, at))];
+    });
+  const render = (r: Report) => (
+    <div className="flex flex-col items-start gap-1.5">
+      <span className="font-semibold">{r.video}</span>
+      <Badge tone={r.reason === "Copyright" ? "warning" : "neutral"}>{r.reason}</Badge>
+    </div>
+  );
+  return <Kanban aria-label="Moderation queue" columns={columns} cards={reports} getId={(r) => r.id} getColumn={(r) => r.status} getTitle={(r) => r.video} renderCard={render} onMove={move} />;
+}

package/registry/examples/list/jobs.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/list/jobs.js

@@ -0,0 +1,35 @@
+"use client";
+
+// registry/examples/list/jobs.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { List } from "@krizaka/ui/list";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var jobs = [
+  { id: "j1", name: "Dub \u201CSunset session\u201D into English", studio: "Dubbing studio", status: "running", when: "now" },
+  { id: "j2", name: "Transcribe the interview with Elena", studio: "Transcript studio", status: "done", when: "14:02" },
+  { id: "j3", name: "Clip the five best moments", studio: "Clips studio", status: "failed", when: "12:15" }
+];
+var TONE = { running: "accent", done: "success", failed: "danger" };
+function ListJobs() {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      "aria-label": "Jobs",
+      items: jobs,
+      getId: (j) => j.id,
+      chevrons: true,
+      row: (j) => ({
+        title: j.name,
+        description: j.studio,
+        href: `#/jobs/${j.id}`,
+        meta: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Badge, { tone: TONE[j.status], children: j.status }),
+          /* @__PURE__ */ jsx("span", { children: j.when })
+        ] })
+      })
+    }
+  );
+}
+export {
+  ListJobs as default
+};

package/registry/examples/list/jobs.tsx

@@ -0,0 +1,33 @@
+import { Badge } from "@krizaka/ui/badge";
+import { List } from "@krizaka/ui/list";
+
+type Job = { id: string; name: string; studio: string; status: "running" | "done" | "failed"; when: string };
+const jobs: Job[] = [
+  { id: "j1", name: "Dub “Sunset session” into English", studio: "Dubbing studio", status: "running", when: "now" },
+  { id: "j2", name: "Transcribe the interview with Elena", studio: "Transcript studio", status: "done", when: "14:02" },
+  { id: "j3", name: "Clip the five best moments", studio: "Clips studio", status: "failed", when: "12:15" },
+];
+const TONE = { running: "accent", done: "success", failed: "danger" } as const;
+
+// Orazaka's jobs: each row opens its run; the status and the time beside it.
+export default function ListJobs() {
+  return (
+    <List
+      aria-label="Jobs"
+      items={jobs}
+      getId={(j) => j.id}
+      chevrons
+      row={(j) => ({
+        title: j.name,
+        description: j.studio,
+        href: `#/jobs/${j.id}`,
+        meta: (
+          <>
+            <Badge tone={TONE[j.status]}>{j.status}</Badge>
+            <span>{j.when}</span>
+          </>
+        ),
+      })}
+    />
+  );
+}

package/registry/examples/list/selectable.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/list/selectable.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/list/selectable.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { List } from "@krizaka/ui/list";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var viewers = [
+  { id: "u1", name: "Mina Okafor", handle: "@mina", tipped: "$12" },
+  { id: "u2", name: "Alex Moreau", handle: "@alex", tipped: "$5" },
+  { id: "u3", name: "Elena Ruiz", handle: "@elena", tipped: "\u2014" }
+];
+function ListSelectable() {
+  const [selected, setSelected] = useState(["u1"]);
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      "aria-label": "Viewers of your story",
+      density: "compact",
+      items: viewers,
+      getId: (v) => v.id,
+      selectable: true,
+      selected,
+      onSelectedChange: setSelected,
+      row: (v) => ({ title: v.name, description: v.handle, leading: /* @__PURE__ */ jsx(Avatar, { alt: v.name, fallback: v.name.charAt(0), size: "sm" }), meta: v.tipped }),
+      footer: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", disabled: selected.length === 0, children: `Thank ${selected.length}` })
+    }
+  );
+}
+export {
+  ListSelectable as default
+};

package/registry/examples/list/selectable.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { List } from "@krizaka/ui/list";
+import { useState } from "react";
+
+const viewers = [
+  { id: "u1", name: "Mina Okafor", handle: "@mina", tipped: "$12" },
+  { id: "u2", name: "Alex Moreau", handle: "@alex", tipped: "$5" },
+  { id: "u3", name: "Elena Ruiz", handle: "@elena", tipped: "—" },
+];
+
+// Compact and selectable: who watched a story, a thank-you for the ones you pick.
+export default function ListSelectable() {
+  const [selected, setSelected] = useState<string[]>(["u1"]);
+  return (
+    <List
+      aria-label="Viewers of your story"
+      density="compact"
+      items={viewers}
+      getId={(v) => v.id}
+      selectable
+      selected={selected}
+      onSelectedChange={setSelected}
+      row={(v) => ({ title: v.name, description: v.handle, leading: <Avatar alt={v.name} fallback={v.name.charAt(0)} size="sm" />, meta: v.tipped })}
+      footer={<Button size="sm" variant="primary" disabled={selected.length === 0}>{`Thank ${selected.length}`}</Button>}
+    />
+  );
+}

package/registry/examples/list/virtualized.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/list/virtualized.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/list/virtualized.tsx
+import { List } from "@krizaka/ui/list";
+import { jsx } from "react/jsx-runtime";
+var payouts = Array.from({ length: 2e3 }, (_, i) => ({ id: `p${i}`, amount: `$${(120 + i * 37 % 900).toFixed(2)}`, day: `Payout #${2e3 - i}` }));
+function ListVirtualized() {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      "aria-label": "Payouts",
+      density: "compact",
+      items: payouts,
+      getId: (p) => p.id,
+      virtualize: { rowHeight: 44, height: 264 },
+      row: (p) => ({ title: p.day, meta: p.amount })
+    }
+  );
+}
+export {
+  ListVirtualized as default
+};

package/registry/examples/list/virtualized.tsx

@@ -0,0 +1,17 @@
+import { List } from "@krizaka/ui/list";
+
+const payouts = Array.from({ length: 2_000 }, (_, i) => ({ id: `p${i}`, amount: `$${(120 + ((i * 37) % 900)).toFixed(2)}`, day: `Payout #${2_000 - i}` }));
+
+// 2,000 payouts: only the rows in view are rendered, in a region the keyboard scrolls.
+export default function ListVirtualized() {
+  return (
+    <List
+      aria-label="Payouts"
+      density="compact"
+      items={payouts}
+      getId={(p) => p.id}
+      virtualize={{ rowHeight: 44, height: 264 }}
+      row={(p) => ({ title: p.day, meta: p.amount })}
+    />
+  );
+}

package/registry/examples/loader/native/block.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/loader/native/block.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/loader/native/block.tsx
+import { Loader } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeLoaderBlock() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(Loader, { variant: "block", label: "Loading your jobs", delay: 0 }) });
+}
+export {
+  NativeLoaderBlock as default
+};

package/registry/examples/loader/native/block.tsx

@@ -0,0 +1,11 @@
+import { Loader } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// `block`: the centre of a region whose content is on its way (the Jobs tab's first load).
+export default function NativeLoaderBlock() {
+  return (
+    <View style={{ width: 320 }}>
+      <Loader variant="block" label="Loading your jobs" delay={0} />
+    </View>
+  );
+}

package/registry/examples/loader/native/job-wait.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/loader/native/job-wait.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/loader/native/job-wait.tsx
+import { Button, Loader } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeLoaderJobWait() {
+  const [status, setStatus] = useState("loading");
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 16, width: 320 }, children: [
+    /* @__PURE__ */ jsx(Loader, { label: "Dubbing your video", value: 0.42, eta: "About 2 min left", status, successLabel: "Dubbing ready", delay: 0 }),
+    /* @__PURE__ */ jsx(Button, { label: "Finish", size: "sm", onPress: () => setStatus("success") })
+  ] });
+}
+export {
+  NativeLoaderJobWait as default
+};

package/registry/examples/loader/native/job-wait.tsx

@@ -0,0 +1,14 @@
+import { Button, Loader } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// An Orazaka job: shown after 250 ms, never blinking, ending on a check and its words.
+export default function NativeLoaderJobWait() {
+  const [status, setStatus] = useState<"loading" | "success">("loading");
+  return (
+    <View style={{ gap: 16, width: 320 }}>
+      <Loader label="Dubbing your video" value={0.42} eta="About 2 min left" status={status} successLabel="Dubbing ready" delay={0} />
+      <Button label="Finish" size="sm" onPress={() => setStatus("success")} />
+    </View>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/map/cluster.tsx
+import { Cluster, Map, StaticMap } from "@krizaka/ui/map";
+import { jsx } from "react/jsx-runtime";
+var CREATORS = Array.from({ length: 60 }, (_, i) => ({
+  id: String(i),
+  label: `Creator ${i + 1}`,
+  position: [-73.62 + i * 37 % 60 / 600, 45.48 + i * 53 % 70 / 700]
+}));
+function MapCluster() {
+  return /* @__PURE__ */ jsx(Map, { label: "Creators near Montr\xE9al", center: [-73.58, 45.53], zoom: 11, className: "h-80 w-full max-w-xl", fallback: /* @__PURE__ */ jsx(StaticMap, { label: "Creators near Montr\xE9al", center: [-73.58, 45.53], zoom: 11 }), children: /* @__PURE__ */ jsx(Cluster, { points: CREATORS }) });
+}
+export {
+  MapCluster as default
+};

package/registry/examples/map/cluster.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Cluster, Map, StaticMap } from "@krizaka/ui/map";
+
+// 60 creators around Montréal, grouped while they are close; a group opens by zooming in.
+const CREATORS = Array.from({ length: 60 }, (_, i) => ({
+  id: String(i),
+  label: `Creator ${i + 1}`,
+  position: [-73.62 + ((i * 37) % 60) / 600, 45.48 + ((i * 53) % 70) / 700] as const,
+}));
+
+export default function MapCluster() {
+  return (
+    <Map label="Creators near Montréal" center={[-73.58, 45.53]} zoom={11} className="h-80 w-full max-w-xl" fallback={<StaticMap label="Creators near Montréal" center={[-73.58, 45.53]} zoom={11} />}>
+      <Cluster points={CREATORS} />
+    </Map>
+  );
+}

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