@krizaka/ui 2.3.0 → 2.4.0

package/registry/examples/file-upload/video.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Dropzone, UploadList, useUploadQueue } from "@krizaka/ui/file-upload";
+
+// A stand-in for your client (Tus, multipart…): it reports progress and stops when the signal aborts.
+function fakeUpload(file: File, { signal, onProgress }: { signal: AbortSignal; onProgress: (sent: number) => void }) {
+  return new Promise<void>((resolve) => {
+    let sent = 0;
+    const timer = setInterval(() => {
+      sent = Math.min(file.size, sent + file.size / 40);
+      onProgress(sent);
+      if (sent < file.size) return;
+      clearInterval(timer);
+      resolve();
+    }, 150);
+    signal.addEventListener("abort", () => clearInterval(timer));
+  });
+}
+
+export default function FileUploadVideo() {
+  const queue = useUploadQueue({ upload: fakeUpload });
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-3">
+      <Dropzone
+        title="Drop your video here"
+        browseLabel="Choose a video"
+        hint="MP4, MOV or WebM, up to 4 GB"
+        accept="video/*"
+        maxSize={4 * 1024 ** 3}
+        onFiles={queue.add}
+        refusalLabel={(r) => `${r.file.name}: ${r.reason === "size" ? "larger than 4 GB" : "not a video"}`}
+      />
+      {queue.items.length > 0 && <UploadList items={queue.items} onPause={queue.pause} onResume={queue.resume} onCancel={queue.cancel} onRemove={queue.remove} onRetry={queue.retry} />}
+    </div>
+  );
+}

package/registry/examples/filter-bar/address.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/filter-bar/address.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/filter-bar/address.tsx
+import { FilterBar, FilterMenu, readFilterParams, writeFilterParams } from "@krizaka/ui/filter-bar";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var ROLES = [
+  { value: "creator", label: "Creator" },
+  { value: "fan", label: "Fan" },
+  { value: "admin", label: "Admin" }
+];
+function FilterBarAddress() {
+  const [params, setParams] = React.useState(() => new URLSearchParams("role=creator,admin&page=3"));
+  const { role } = readFilterParams(params, ["role"]);
+  const set = (next) => setParams(writeFilterParams(params, { role: next }));
+  return /* @__PURE__ */ jsx(
+    FilterBar,
+    {
+      label: "Filter users",
+      active: role.map((r) => ({ id: r, label: `Role: ${ROLES.find((o) => o.value === r)?.label}`, onRemove: () => set(role.filter((x) => x !== r)) })),
+      onClearAll: () => set([]),
+      results: `?${params.toString()}`,
+      children: /* @__PURE__ */ jsx(FilterMenu, { label: "Role", options: ROLES, value: role, onValueChange: set })
+    }
+  );
+}
+export {
+  FilterBarAddress as default
+};

package/registry/examples/filter-bar/address.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { FilterBar, FilterMenu, readFilterParams, writeFilterParams } from "@krizaka/ui/filter-bar";
+import * as React from "react";
+
+const ROLES = [
+  { value: "creator", label: "Creator" },
+  { value: "fan", label: "Fan" },
+  { value: "admin", label: "Admin" },
+];
+
+// The address is the state: read it, write it back (the page goes back to 1). In Next.js: useSearchParams + router.replace.
+export default function FilterBarAddress() {
+  const [params, setParams] = React.useState(() => new URLSearchParams("role=creator,admin&page=3"));
+  const { role } = readFilterParams(params, ["role"]);
+  const set = (next: string[]) => setParams(writeFilterParams(params, { role: next }));
+  return (
+    <FilterBar
+      label="Filter users"
+      active={role!.map((r) => ({ id: r, label: `Role: ${ROLES.find((o) => o.value === r)?.label}`, onRemove: () => set(role!.filter((x) => x !== r)) }))}
+      onClearAll={() => set([])}
+      results={`?${params.toString()}`}
+    >
+      <FilterMenu label="Role" options={ROLES} value={role!} onValueChange={set} />
+    </FilterBar>
+  );
+}

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

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/filter-bar/jobs.tsx
+import { FilterBar, FilterMenu } from "@krizaka/ui/filter-bar";
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUS = [
+  { value: "running", label: "Running", count: 3 },
+  { value: "done", label: "Done", count: 128 },
+  { value: "failed", label: "Failed", count: 6 }
+];
+var MODELS = [
+  { value: "", label: "All models" },
+  { value: "flux", label: "Flux 1.1" },
+  { value: "whisper", label: "Whisper large" }
+];
+function FilterBarJobs() {
+  const [query, setQuery] = React.useState("");
+  const [status, setStatus] = React.useState(["failed"]);
+  const [model, setModel] = React.useState("flux");
+  const active = [
+    ...status.map((s) => ({ id: `status:${s}`, label: `Status: ${STATUS.find((o) => o.value === s)?.label}`, onRemove: () => setStatus(status.filter((x) => x !== s)) })),
+    ...model ? [{ id: "model", label: `Model: ${MODELS.find((m) => m.value === model)?.label}`, onRemove: () => setModel("") }] : []
+  ];
+  return /* @__PURE__ */ jsxs(FilterBar, { label: "Filter jobs", active, onClearAll: () => {
+    setStatus([]);
+    setModel("");
+  }, results: "6 jobs", children: [
+    /* @__PURE__ */ jsx(SearchField, { label: "Search jobs", placeholder: "Search jobs", value: query, onValueChange: setQuery, landmark: false, className: "sm:max-w-64" }),
+    /* @__PURE__ */ jsx(FilterMenu, { label: "Status", options: STATUS, value: status, onValueChange: setStatus }),
+    /* @__PURE__ */ jsx(FilterMenu, { label: "Model", multiple: false, options: MODELS, value: model, onValueChange: setModel })
+  ] });
+}
+export {
+  FilterBarJobs as default
+};

package/registry/examples/filter-bar/jobs.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { FilterBar, FilterMenu } from "@krizaka/ui/filter-bar";
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+
+const STATUS = [
+  { value: "running", label: "Running", count: 3 },
+  { value: "done", label: "Done", count: 128 },
+  { value: "failed", label: "Failed", count: 6 },
+];
+const MODELS = [
+  { value: "", label: "All models" },
+  { value: "flux", label: "Flux 1.1" },
+  { value: "whisper", label: "Whisper large" },
+];
+
+// Several criteria at once; each one in force is a chip that undoes it.
+export default function FilterBarJobs() {
+  const [query, setQuery] = React.useState("");
+  const [status, setStatus] = React.useState(["failed"]);
+  const [model, setModel] = React.useState("flux");
+  const active = [
+    ...status.map((s) => ({ id: `status:${s}`, label: `Status: ${STATUS.find((o) => o.value === s)?.label}`, onRemove: () => setStatus(status.filter((x) => x !== s)) })),
+    ...(model ? [{ id: "model", label: `Model: ${MODELS.find((m) => m.value === model)?.label}`, onRemove: () => setModel("") }] : []),
+  ];
+  return (
+    <FilterBar label="Filter jobs" active={active} onClearAll={() => {
+        setStatus([]);
+        setModel("");
+      }} results="6 jobs">
+      <SearchField label="Search jobs" placeholder="Search jobs" value={query} onValueChange={setQuery} landmark={false} className="sm:max-w-64" />
+      <FilterMenu label="Status" options={STATUS} value={status} onValueChange={setStatus} />
+      <FilterMenu label="Model" multiple={false} options={MODELS} value={model} onValueChange={setModel} />
+    </FilterBar>
+  );
+}

package/registry/examples/filter-bar/menu.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/filter-bar/menu.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/filter-bar/menu.tsx
+import { FilterMenu } from "@krizaka/ui/filter-bar";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function FilterBarMenu({ defaultOpen }) {
+  const [formats, setFormats] = React.useState(["vertical"]);
+  return /* @__PURE__ */ jsx(
+    FilterMenu,
+    {
+      label: "Format",
+      defaultOpen,
+      options: [
+        { value: "vertical", label: "Vertical", count: 214 },
+        { value: "landscape", label: "Landscape", count: 96 },
+        { value: "square", label: "Square", count: 12 },
+        { value: "audio", label: "Audio only", count: 0, disabled: true }
+      ],
+      value: formats,
+      onValueChange: setFormats
+    }
+  );
+}
+export {
+  FilterBarMenu as default
+};

package/registry/examples/filter-bar/menu.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FilterMenu } from "@krizaka/ui/filter-bar";
+import * as React from "react";
+
+// A filter's menu: checkboxes, and what each value would give.
+export default function FilterBarMenu({ defaultOpen }: { defaultOpen?: boolean }) {
+  const [formats, setFormats] = React.useState(["vertical"]);
+  return (
+    <FilterMenu
+      label="Format"
+      defaultOpen={defaultOpen}
+      options={[
+        { value: "vertical", label: "Vertical", count: 214 },
+        { value: "landscape", label: "Landscape", count: 96 },
+        { value: "square", label: "Square", count: 12 },
+        { value: "audio", label: "Audio only", count: 0, disabled: true },
+      ]}
+      value={formats}
+      onValueChange={setFormats}
+    />
+  );
+}

package/registry/examples/image-cropper/avatar.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-cropper/avatar.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/image-cropper/avatar.tsx
+import { ImageCropper } from "@krizaka/ui/image-cropper";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function ImageCropperAvatar() {
+  const [crop, setCrop] = React.useState({ x: 0.42, y: 0.5, zoom: 1.4 });
+  return /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(ImageCropper, { src: "https://www.krizaka.com/assets/orochia/tour/elena-live.jpg", aspect: 1, round: true, value: crop, onValueChange: setCrop }) });
+}
+export {
+  ImageCropperAvatar as default
+};

package/registry/examples/image-cropper/avatar.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { type CropValue, ImageCropper } from "@krizaka/ui/image-cropper";
+import * as React from "react";
+
+// A round mask on a square frame: what others will see. Send the focus point and the zoom with the file.
+export default function ImageCropperAvatar() {
+  const [crop, setCrop] = React.useState<CropValue>({ x: 0.42, y: 0.5, zoom: 1.4 });
+  return (
+    <div className="w-64">
+      <ImageCropper src="https://www.krizaka.com/assets/orochia/tour/elena-live.jpg" aspect={1} round value={crop} onValueChange={setCrop} />
+    </div>
+  );
+}

package/registry/examples/image-cropper/banner.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-cropper/banner.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/image-cropper/banner.tsx
+import { ImageCropper } from "@krizaka/ui/image-cropper";
+import { jsx } from "react/jsx-runtime";
+function ImageCropperBanner() {
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ jsx(ImageCropper, { src: "https://www.krizaka.com/assets/orochia/tour/alex-discover.jpg", aspect: 3, defaultValue: { x: 0.5, y: 0.45, zoom: 1.2 }, labels: { frame: "Cover picture" } }) });
+}
+export {
+  ImageCropperBanner as default
+};

package/registry/examples/image-cropper/banner.tsx

@@ -0,0 +1,10 @@
+import { ImageCropper } from "@krizaka/ui/image-cropper";
+
+// A profile's cover: a 3:1 frame, zoomed in on the centre.
+export default function ImageCropperBanner() {
+  return (
+    <div className="w-full max-w-lg">
+      <ImageCropper src="https://www.krizaka.com/assets/orochia/tour/alex-discover.jpg" aspect={3} defaultValue={{ x: 0.5, y: 0.45, zoom: 1.2 }} labels={{ frame: "Cover picture" }} />
+    </div>
+  );
+}

package/registry/examples/image-cropper/vertical-video.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-cropper/vertical-video.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/image-cropper/vertical-video.tsx
+import { ImageCropper } from "@krizaka/ui/image-cropper";
+import { jsx } from "react/jsx-runtime";
+var TOUR = "https://www.krizaka.com/assets/orochia/tour";
+function ImageCropperVerticalVideo() {
+  return /* @__PURE__ */ jsx("div", { className: "w-48", children: /* @__PURE__ */ jsx(ImageCropper, { aspect: 9 / 16, naturalSize: { width: 1280, height: 800 }, defaultValue: { x: 0.35, y: 0.5, zoom: 1 }, showZoom: false, labels: { frame: "Vertical frame" }, children: /* @__PURE__ */ jsx("video", { src: `${TOUR}/elena-earnings.mp4`, poster: `${TOUR}/elena-earnings.jpg`, muted: true, playsInline: true, preload: "none", "aria-hidden": true }) }) });
+}
+export {
+  ImageCropperVerticalVideo as default
+};

package/registry/examples/image-cropper/vertical-video.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ImageCropper } from "@krizaka/ui/image-cropper";
+
+const TOUR = "https://www.krizaka.com/assets/orochia/tour";
+
+// A landscape video, a 9:16 frame: choose what the vertical version keeps. The size is the video's own.
+export default function ImageCropperVerticalVideo() {
+  return (
+    <div className="w-48">
+      <ImageCropper aspect={9 / 16} naturalSize={{ width: 1280, height: 800 }} defaultValue={{ x: 0.35, y: 0.5, zoom: 1 }} showZoom={false} labels={{ frame: "Vertical frame" }}>
+        <video src={`${TOUR}/elena-earnings.mp4`} poster={`${TOUR}/elena-earnings.jpg`} muted playsInline preload="none" aria-hidden />
+      </ImageCropper>
+    </div>
+  );
+}

package/registry/examples/media-capture/clip.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/media-capture/clip.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/media-capture/clip.tsx
+import { MediaCapture } from "@krizaka/ui/media-capture";
+import { jsx } from "react/jsx-runtime";
+function MediaCaptureClip() {
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(
+    MediaCapture,
+    {
+      mode: "both",
+      maxDuration: 60,
+      aspectRatio: "9 / 16",
+      onCapture: (result) => console.info(result.kind, result.blob.size),
+      labels: { prompt: "Film a story of up to 60 seconds, or take a photo." }
+    }
+  ) });
+}
+export {
+  MediaCaptureClip as default
+};

package/registry/examples/media-capture/clip.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { MediaCapture } from "@krizaka/ui/media-capture";
+
+// A photo or a clip of 60 seconds at most, for a story; the blob goes to the upload queue.
+export default function MediaCaptureClip() {
+  return (
+    <div className="w-72">
+      <MediaCapture
+        mode="both"
+        maxDuration={60}
+        aspectRatio="9 / 16"
+        onCapture={(result) => console.info(result.kind, result.blob.size)}
+        labels={{ prompt: "Film a story of up to 60 seconds, or take a photo." }}
+      />
+    </div>
+  );
+}

package/registry/examples/media-capture/native/photo.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/media-capture/native/photo.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/media-capture/native/photo.tsx
+import { MediaCapture } from "@krizaka/ui/native/media-capture";
+import { jsx } from "react/jsx-runtime";
+function NativeMediaCapturePhoto() {
+  return /* @__PURE__ */ jsx(
+    MediaCapture,
+    {
+      mode: "photo",
+      onCapture: ({ uri }) => console.info(uri),
+      labels: {
+        prompt: "Take a profile picture with your camera.",
+        start: "Turn on the camera",
+        denied: "Camera access is off. Turn it on in Settings.",
+        settings: "Open Settings",
+        takePhoto: "Take photo",
+        startRecording: "Start recording",
+        stopRecording: "Stop recording",
+        switchCamera: "Switch camera"
+      }
+    }
+  );
+}
+export {
+  NativeMediaCapturePhoto as default
+};

package/registry/examples/media-capture/native/photo.tsx

@@ -0,0 +1,20 @@
+import { MediaCapture } from "@krizaka/ui/native/media-capture";
+
+export default function NativeMediaCapturePhoto() {
+  return (
+    <MediaCapture
+      mode="photo"
+      onCapture={({ uri }) => console.info(uri)}
+      labels={{
+        prompt: "Take a profile picture with your camera.",
+        start: "Turn on the camera",
+        denied: "Camera access is off. Turn it on in Settings.",
+        settings: "Open Settings",
+        takePhoto: "Take photo",
+        startRecording: "Start recording",
+        stopRecording: "Stop recording",
+        switchCamera: "Switch camera",
+      }}
+    />
+  );
+}

package/registry/examples/media-capture/profile-photo.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/media-capture/profile-photo.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/media-capture/profile-photo.tsx
+import { MediaCapture } from "@krizaka/ui/media-capture";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MediaCaptureProfilePhoto() {
+  const [photo, setPhoto] = React.useState(null);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(
+      MediaCapture,
+      {
+        mode: "photo",
+        facing: "user",
+        onCapture: (result) => setPhoto(result.url),
+        labels: { prompt: "Take a profile picture with your camera.", start: "Turn on the camera" }
+      }
+    ),
+    photo && /* @__PURE__ */ jsx("img", { src: photo, alt: "Your new profile picture", className: "h-20 w-20 rounded-full object-cover" })
+  ] });
+}
+export {
+  MediaCaptureProfilePhoto as default
+};

package/registry/examples/media-capture/profile-photo.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { MediaCapture } from "@krizaka/ui/media-capture";
+import * as React from "react";
+
+// The front camera, a photo; the browser asks only when the button is pressed.
+export default function MediaCaptureProfilePhoto() {
+  const [photo, setPhoto] = React.useState<string | null>(null);
+  return (
+    <div className="flex w-72 flex-col gap-3">
+      <MediaCapture
+        mode="photo"
+        facing="user"
+        onCapture={(result) => setPhoto(result.url)}
+        labels={{ prompt: "Take a profile picture with your camera.", start: "Turn on the camera" }}
+      />
+      {photo && <img src={photo} alt="Your new profile picture" className="h-20 w-20 rounded-full object-cover" />}
+    </div>
+  );
+}

package/registry/examples/pagination/cursor.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/pagination/cursor.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/pagination/cursor.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function PaginationCursor() {
+  const [pages, setPages] = React.useState(["start"]);
+  const index = pages.length - 1;
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      hasPrevious: index > 0,
+      hasNext: true,
+      onPrevious: () => setPages((p) => p.slice(0, -1)),
+      onNext: () => setPages((p) => [...p, `cursor-${p.length}`]),
+      status: `Jobs ${index * 25 + 1}\u2013${index * 25 + 25}`,
+      labels: { previous: "Newer jobs", next: "Older jobs" }
+    }
+  );
+}
+export {
+  PaginationCursor as default
+};

package/registry/examples/pagination/cursor.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+
+// An API that answers with a `nextCursor`: no total, previous and next only.
+export default function PaginationCursor() {
+  const [pages, setPages] = React.useState(["start"]);
+  const index = pages.length - 1;
+  return (
+    <Pagination
+      hasPrevious={index > 0}
+      hasNext
+      onPrevious={() => setPages((p) => p.slice(0, -1))}
+      onNext={() => setPages((p) => [...p, `cursor-${p.length}`])}
+      status={`Jobs ${index * 25 + 1}–${index * 25 + 25}`}
+      labels={{ previous: "Newer jobs", next: "Older jobs" }}
+    />
+  );
+}

package/registry/examples/pagination/links.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/pagination/links.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/pagination/links.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import { jsx } from "react/jsx-runtime";
+function PaginationLinks() {
+  return /* @__PURE__ */ jsx(Pagination, { page: 7, pageCount: 42, getHref: (page) => `/explore?q=sunset&page=${page}`, siblings: 2 });
+}
+export {
+  PaginationLinks as default
+};

package/registry/examples/pagination/links.tsx

@@ -0,0 +1,6 @@
+import { Pagination } from "@krizaka/ui/pagination";
+
+// Server-rendered: every page is a link, the page lives in the address (`?q=sunset&page=7`).
+export default function PaginationLinks() {
+  return <Pagination page={7} pageCount={42} getHref={(page) => `/explore?q=sunset&page=${page}`} siblings={2} />;
+}

package/registry/examples/pagination/native/cursor.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/pagination/native/cursor.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/pagination/native/cursor.tsx
+import { Pagination } from "@krizaka/ui/native";
+import { jsx } from "react/jsx-runtime";
+function NativePaginationCursor() {
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      hasPrevious: true,
+      hasNext: true,
+      status: "Payouts 21\u201340",
+      labels: { previous: "Newer payouts", next: "Older payouts", compact: (p, count) => `${p} / ${count}` }
+    }
+  );
+}
+export {
+  NativePaginationCursor as default
+};

package/registry/examples/pagination/native/cursor.tsx

@@ -0,0 +1,13 @@
+import { Pagination } from "@krizaka/ui/native";
+
+// A cursor: the range in between, no total.
+export default function NativePaginationCursor() {
+  return (
+    <Pagination
+      hasPrevious
+      hasNext
+      status="Payouts 21–40"
+      labels={{ previous: "Newer payouts", next: "Older payouts", compact: (p, count) => `${p} / ${count}` }}
+    />
+  );
+}

package/registry/examples/pagination/native/pages.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;