@krizaka/ui 3.2.0 → 3.4.0

package/registry/examples/combobox/native/search.tsx

@@ -0,0 +1,15 @@
+import { Combobox } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+const CITIES = ["Montréal", "Québec", "Laval", "Gatineau", "Sherbrooke", "Trois-Rivières"].map((c) => ({ value: c.toLowerCase(), label: c }));
+
+// A choice among many, searched in a sheet: what is typed filters the options.
+export default function NativeComboboxSearch() {
+  const [city, setCity] = React.useState<string>("montréal");
+  return (
+    <View style={{ width: 300 }}>
+      <Combobox label="City" placeholder="Choose a city" options={CITIES} value={city} onValueChange={(v) => setCity(String(v))} />
+    </View>
+  );
+}

package/registry/examples/description-list/job-details.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/description-list/job-details.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/description-list/job-details.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { DescriptionList } from "@krizaka/ui/description-list";
+import { jsx } from "react/jsx-runtime";
+function DescriptionListJobDetails() {
+  return /* @__PURE__ */ jsx(
+    DescriptionList,
+    {
+      className: "max-w-sm",
+      items: [
+        { term: "Status", details: /* @__PURE__ */ jsx(Badge, { tone: "accent", children: "Running" }) },
+        { term: "Studio", details: "Dubbing \xB7 English, Spanish" },
+        { term: "Started", details: "Oct 11, 2026, 14:02", hint: "by Elena Ruiz" },
+        { term: "Credits", details: "120", hint: "estimated, charged at the end" }
+      ]
+    }
+  );
+}
+export {
+  DescriptionListJobDetails as default
+};

package/registry/examples/description-list/job-details.tsx

@@ -0,0 +1,17 @@
+import { Badge } from "@krizaka/ui/badge";
+import { DescriptionList } from "@krizaka/ui/description-list";
+
+// A job's details, stacked: what a side panel shows.
+export default function DescriptionListJobDetails() {
+  return (
+    <DescriptionList
+      className="max-w-sm"
+      items={[
+        { term: "Status", details: <Badge tone="accent">Running</Badge> },
+        { term: "Studio", details: "Dubbing · English, Spanish" },
+        { term: "Started", details: "Oct 11, 2026, 14:02", hint: "by Elena Ruiz" },
+        { term: "Credits", details: "120", hint: "estimated, charged at the end" },
+      ]}
+    />
+  );
+}

package/registry/examples/description-list/key-value-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/description-list/key-value-grid.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/description-list/key-value-grid.tsx
+import { KeyValueGrid } from "@krizaka/ui/description-list";
+import { jsx } from "react/jsx-runtime";
+function DescriptionListKeyValueGrid() {
+  return /* @__PURE__ */ jsx(
+    KeyValueGrid,
+    {
+      minWidth: 9,
+      items: [
+        { term: "Requests / min", details: "600" },
+        { term: "Concurrent jobs", details: "8" },
+        { term: "Storage", details: "50 GB", hint: "18 GB used" },
+        { term: "Retention", details: "30 days" }
+      ]
+    }
+  );
+}
+export {
+  DescriptionListKeyValueGrid as default
+};

package/registry/examples/description-list/key-value-grid.tsx

@@ -0,0 +1,16 @@
+import { KeyValueGrid } from "@krizaka/ui/description-list";
+
+// Key figures as cards that wrap: an account's limits in the console.
+export default function DescriptionListKeyValueGrid() {
+  return (
+    <KeyValueGrid
+      minWidth={9}
+      items={[
+        { term: "Requests / min", details: "600" },
+        { term: "Concurrent jobs", details: "8" },
+        { term: "Storage", details: "50 GB", hint: "18 GB used" },
+        { term: "Retention", details: "30 days" },
+      ]}
+    />
+  );
+}

package/registry/examples/description-list/native/job-details.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/description-list/native/job-details.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/description-list/native/job-details.tsx
+import { Badge, DescriptionList } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeDescriptionListJobDetails() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 24 }, children: [
+    /* @__PURE__ */ jsx(
+      DescriptionList,
+      {
+        items: [
+          { term: "Status", details: /* @__PURE__ */ jsx(Badge, { tone: "accent", children: "Running" }) },
+          { term: "Studio", details: "Dubbing \xB7 English, Spanish" },
+          { term: "Started", details: "Oct 11, 14:02", hint: "by Elena Ruiz" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DescriptionList,
+      {
+        layout: "inline",
+        items: [
+          { term: "Estimated", details: "120 credits" },
+          { term: "Left this month", details: "1,880 credits" }
+        ]
+      }
+    )
+  ] });
+}
+export {
+  NativeDescriptionListJobDetails as default
+};

package/registry/examples/description-list/native/job-details.tsx

@@ -0,0 +1,24 @@
+import { Badge, DescriptionList } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A job's details on a phone: stacked, then a receipt inline.
+export default function NativeDescriptionListJobDetails() {
+  return (
+    <View style={{ width: 320, gap: 24 }}>
+      <DescriptionList
+        items={[
+          { term: "Status", details: <Badge tone="accent">Running</Badge> },
+          { term: "Studio", details: "Dubbing · English, Spanish" },
+          { term: "Started", details: "Oct 11, 14:02", hint: "by Elena Ruiz" },
+        ]}
+      />
+      <DescriptionList
+        layout="inline"
+        items={[
+          { term: "Estimated", details: "120 credits" },
+          { term: "Left this month", details: "1,880 credits" },
+        ]}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/description-list/receipt.tsx
+import { DescriptionList } from "@krizaka/ui/description-list";
+import { jsx } from "react/jsx-runtime";
+function DescriptionListReceipt() {
+  return /* @__PURE__ */ jsx(
+    DescriptionList,
+    {
+      layout: "inline",
+      className: "max-w-sm",
+      items: [
+        { term: "Tip from @mina", details: "$10.00" },
+        { term: "Payment fees", details: "\u2212$0.50" },
+        { term: "Platform", details: "\u2212$1.00" },
+        { term: "To you", details: "$8.50", hint: "paid on Oct 15" }
+      ]
+    }
+  );
+}
+export {
+  DescriptionListReceipt as default
+};

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/dialog/native/sheet.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/dialog/native/sheet.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/dialog/native/sheet.tsx
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeDialogSheet({ defaultOpen }) {
+  const [open, setOpen] = React.useState(Boolean(defaultOpen));
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(Button, { label: "Show the pick-up point", onPress: () => setOpen(true) }),
+    /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, title: "Caf\xE9 Olimpico", children: [
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "124 Rue Saint-Viateur O, Montr\xE9al \xB7 350 m away" }),
+      /* @__PURE__ */ jsx(Txt, { children: "Open until 10 pm. Ask for the order under your name at the counter." }),
+      /* @__PURE__ */ jsx(Button, { label: "Get directions", variant: "primary", onPress: () => setOpen(false) })
+    ] })
+  ] });
+}
+export {
+  NativeDialogSheet as default
+};

package/registry/examples/dialog/native/sheet.tsx

@@ -0,0 +1,18 @@
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// A bottom sheet: it rises over the dimmed screen, the scrim or the back button closes it.
+export default function NativeDialogSheet({ defaultOpen }: { defaultOpen?: boolean }) {
+  const [open, setOpen] = React.useState(Boolean(defaultOpen));
+  return (
+    <View>
+      <Button label="Show the pick-up point" onPress={() => setOpen(true)} />
+      <Sheet open={open} onOpenChange={setOpen} title="Café Olimpico">
+        <Txt tone="secondary">124 Rue Saint-Viateur O, Montréal · 350 m away</Txt>
+        <Txt>Open until 10 pm. Ask for the order under your name at the counter.</Txt>
+        <Button label="Get directions" variant="primary" onPress={() => setOpen(false)} />
+      </Sheet>
+    </View>
+  );
+}

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/field/native/select.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/field/native/select.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/field/native/select.tsx
+import { Select } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeFieldSelect() {
+  const [category, setCategory] = React.useState(null);
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: "Category",
+      placeholder: "Choose a category",
+      value: category,
+      onValueChange: setCategory,
+      hint: "Where your video is listed.",
+      options: [
+        { value: "music", label: "Music" },
+        { value: "sport", label: "Sport", description: "Training, matches, challenges" },
+        { value: "art", label: "Art" },
+        { value: "talk", label: "Talk" }
+      ]
+    }
+  ) });
+}
+export {
+  NativeFieldSelect as default
+};

package/registry/examples/field/native/select.tsx

@@ -0,0 +1,25 @@
+import { Select } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// One choice among many: the field opens a sheet of options; picking one closes it.
+export default function NativeFieldSelect() {
+  const [category, setCategory] = React.useState<string | null>(null);
+  return (
+    <View style={{ width: 300 }}>
+      <Select
+        label="Category"
+        placeholder="Choose a category"
+        value={category}
+        onValueChange={setCategory}
+        hint="Where your video is listed."
+        options={[
+          { value: "music", label: "Music" },
+          { value: "sport", label: "Sport", description: "Training, matches, challenges" },
+          { value: "art", label: "Art" },
+          { value: "talk", label: "Talk" },
+        ]}
+      />
+    </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
+};