@krizaka/ui 3.2.0 → 3.4.0

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;

package/registry/examples/map/location-picker.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/map/location-picker.tsx
+import { LocationPicker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function MapLocationPicker() {
+  const [point, setPoint] = React.useState([-73.5673, 45.5017]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    LocationPicker,
+    {
+      label: "Meeting point",
+      locale: "en-CA",
+      value: point,
+      onValueChange: setPoint,
+      origin: [-73.5794, 45.5048],
+      radius: 1e3,
+      fallback: /* @__PURE__ */ jsx(StaticMap, { label: "Meeting point", center: point, zoom: 14, places: [{ position: point, label: "Meeting point" }] })
+    }
+  ) });
+}
+export {
+  MapLocationPicker as default
+};

package/registry/examples/map/location-picker.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { type LngLat, LocationPicker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+
+// A meeting point picked by moving the map under the pin: its distance from the person, a 1-km zone, "Near me" on request.
+export default function MapLocationPicker() {
+  const [point, setPoint] = React.useState<LngLat>([-73.5673, 45.5017]);
+  return (
+    <div className="w-full max-w-xl">
+      <LocationPicker
+        label="Meeting point"
+        locale="en-CA"
+        value={point}
+        onValueChange={setPoint}
+        origin={[-73.5794, 45.5048]}
+        radius={1000}
+        fallback={<StaticMap label="Meeting point" center={point} zoom={14} places={[{ position: point, label: "Meeting point" }]} />}
+      />
+    </div>
+  );
+}

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

package/registry/examples/map/native/location-picker.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/map/native/location-picker.tsx
+import { LocationPicker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeMapLocationPicker() {
+  const [point, setPoint] = React.useState([-73.5673, 45.5017]);
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(LocationPicker, { label: "Meeting point", locale: "en-CA", value: point, onValueChange: setPoint, origin: [-73.5794, 45.5048], radius: 1e3 }) });
+}
+export {
+  NativeMapLocationPicker as default
+};

package/registry/examples/map/native/location-picker.tsx

@@ -0,0 +1,13 @@
+import { type LngLat, LocationPicker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+
+// A meeting point under the pin; "Near me" asks for the location only when pressed, the distance follows.
+export default function NativeMapLocationPicker() {
+  const [point, setPoint] = React.useState<LngLat>([-73.5673, 45.5017]);
+  return (
+    <View style={{ width: 340 }}>
+      <LocationPicker label="Meeting point" locale="en-CA" value={point} onValueChange={setPoint} origin={[-73.5794, 45.5048]} radius={1000} />
+    </View>
+  );
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/map/native/places.tsx
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import { Map, Marker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SPOTS = [
+  { id: "olimpico", label: "Caf\xE9 Olimpico", address: "124 Rue Saint-Viateur O", position: [-73.6005, 45.5229] },
+  { id: "parc", label: "Parc La Fontaine", address: "3933 Av. du Parc-La Fontaine", position: [-73.5695, 45.5268] }
+];
+function NativeMapPlaces() {
+  const [open, setOpen] = React.useState(null);
+  return /* @__PURE__ */ jsxs(View, { style: { width: 340 }, children: [
+    /* @__PURE__ */ jsx(Map, { label: "Pick-up points in Montr\xE9al", center: [-73.585, 45.524], zoom: 12.5, children: SPOTS.map((s) => /* @__PURE__ */ jsx(Marker, { position: s.position, label: s.label, selected: open?.id === s.id, onPress: () => setOpen(s) }, s.id)) }),
+    /* @__PURE__ */ jsxs(Sheet, { open: Boolean(open), onOpenChange: (o) => !o && setOpen(null), title: open?.label, children: [
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: open?.address }),
+      /* @__PURE__ */ jsx(Button, { label: "Choose this point", variant: "primary", onPress: () => setOpen(null) })
+    ] })
+  ] });
+}
+export {
+  NativeMapPlaces as default
+};

package/registry/examples/map/native/places.tsx

@@ -0,0 +1,27 @@
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import { Map, Marker } from "@krizaka/ui/native/map";
+import * as React from "react";
+import { View } from "react-native";
+
+const SPOTS = [
+  { id: "olimpico", label: "Café Olimpico", address: "124 Rue Saint-Viateur O", position: [-73.6005, 45.5229] as const },
+  { id: "parc", label: "Parc La Fontaine", address: "3933 Av. du Parc-La Fontaine", position: [-73.5695, 45.5268] as const },
+];
+
+// Pick-up points: a marker pressed opens its details in a bottom sheet.
+export default function NativeMapPlaces() {
+  const [open, setOpen] = React.useState<(typeof SPOTS)[number] | null>(null);
+  return (
+    <View style={{ width: 340 }}>
+      <Map label="Pick-up points in Montréal" center={[-73.585, 45.524]} zoom={12.5}>
+        {SPOTS.map((s) => (
+          <Marker key={s.id} position={s.position} label={s.label} selected={open?.id === s.id} onPress={() => setOpen(s)} />
+        ))}
+      </Map>
+      <Sheet open={Boolean(open)} onOpenChange={(o) => !o && setOpen(null)} title={open?.label}>
+        <Txt tone="secondary">{open?.address}</Txt>
+        <Button label="Choose this point" variant="primary" onPress={() => setOpen(null)} />
+      </Sheet>
+    </View>
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/map/places.tsx
+import { Map, Marker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var SPOTS = [
+  { id: "olimpico", label: "Caf\xE9 Olimpico, Mile End", position: [-73.6005, 45.5229] },
+  { id: "jean-talon", label: "March\xE9 Jean-Talon", position: [-73.6147, 45.5363] },
+  { id: "parc", label: "Parc La Fontaine", position: [-73.5695, 45.5268] }
+];
+function MapPlaces() {
+  const [chosen, setChosen] = React.useState("olimpico");
+  return /* @__PURE__ */ jsx(
+    Map,
+    {
+      label: "Pick-up points in Montr\xE9al",
+      center: [-73.592, 45.528],
+      zoom: 12.5,
+      className: "h-80 w-full max-w-xl",
+      fallback: /* @__PURE__ */ jsx(StaticMap, { label: "Pick-up points in Montr\xE9al", center: [-73.592, 45.528], zoom: 12.5, places: SPOTS }),
+      children: SPOTS.map((s) => /* @__PURE__ */ jsx(Marker, { position: s.position, label: s.label, selected: s.id === chosen, onPress: () => setChosen(s.id) }, s.id))
+    }
+  );
+}
+export {
+  MapPlaces as default
+};

package/registry/examples/map/places.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Map, Marker, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+
+const SPOTS = [
+  { id: "olimpico", label: "Café Olimpico, Mile End", position: [-73.6005, 45.5229] as const },
+  { id: "jean-talon", label: "Marché Jean-Talon", position: [-73.6147, 45.5363] as const },
+  { id: "parc", label: "Parc La Fontaine", position: [-73.5695, 45.5268] as const },
+];
+
+// Pick-up points in Montréal: markers are buttons, the chosen one shows its name; the places are a list for screen readers.
+export default function MapPlaces() {
+  const [chosen, setChosen] = React.useState("olimpico");
+  return (
+    <Map
+      label="Pick-up points in Montréal"
+      center={[-73.592, 45.528]}
+      zoom={12.5}
+      className="h-80 w-full max-w-xl"
+      fallback={<StaticMap label="Pick-up points in Montréal" center={[-73.592, 45.528]} zoom={12.5} places={SPOTS} />}
+    >
+      {SPOTS.map((s) => (
+        <Marker key={s.id} position={s.position} label={s.label} selected={s.id === chosen} onPress={() => setChosen(s.id)} />
+      ))}
+    </Map>
+  );
+}

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

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/map/static.tsx
+import { StaticMap } from "@krizaka/ui/map";
+import { jsx } from "react/jsx-runtime";
+function MapStatic() {
+  return /* @__PURE__ */ jsx("div", { className: "h-56 w-full max-w-md overflow-hidden rounded-2xl border border-border-default", children: /* @__PURE__ */ jsx(
+    StaticMap,
+    {
+      label: "Your two pick-up points",
+      center: [-73.585, 45.524],
+      zoom: 13,
+      places: [
+        { position: [-73.6005, 45.5229], label: "Caf\xE9 Olimpico" },
+        { position: [-73.5695, 45.5268], label: "Parc La Fontaine" }
+      ]
+    }
+  ) });
+}
+export {
+  MapStatic as default
+};

package/registry/examples/map/static.tsx

@@ -0,0 +1,18 @@
+import { StaticMap } from "@krizaka/ui/map";
+
+// A still map without an engine: the places projected on the map's paper — a card, a list item, the fallback of a Map.
+export default function MapStatic() {
+  return (
+    <div className="h-56 w-full max-w-md overflow-hidden rounded-2xl border border-border-default">
+      <StaticMap
+        label="Your two pick-up points"
+        center={[-73.585, 45.524]}
+        zoom={13}
+        places={[
+          { position: [-73.6005, 45.5229], label: "Café Olimpico" },
+          { position: [-73.5695, 45.5268], label: "Parc La Fontaine" },
+        ]}
+      />
+    </div>
+  );
+}

package/registry/examples/media-picker/native/story.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;