@krizaka/ui 2.3.0 → 2.4.0

package/registry/examples/data-table/jobs.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/data-table/jobs.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var jobs = [
+  { id: "job-4821", name: "Product shots, autumn", model: "Flux 1.1", status: "done", seconds: 42 },
+  { id: "job-4822", name: "Podcast transcript", model: "Whisper large", status: "running", seconds: 318 },
+  { id: "job-4823", name: "Trailer voice-over", model: "XTTS v2", status: "failed", seconds: 7 },
+  { id: "job-4824", name: "Catalogue summaries", model: "Llama 3.3", status: "done", seconds: 96 }
+];
+var tone = { done: "success", running: "accent", failed: "danger" };
+var columns = [
+  { id: "name", header: "Job", sortable: true, card: "title" },
+  { id: "model", header: "Model", sortable: true },
+  { id: "status", header: "Status", cell: (job) => /* @__PURE__ */ jsx(Badge, { tone: tone[job.status], children: job.status }) },
+  { id: "seconds", header: "Duration", sortable: true, align: "end", cell: (job) => `${job.seconds} s` }
+];
+function DataTableJobs() {
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      caption: "Jobs",
+      rows: jobs,
+      columns,
+      getRowId: (job) => job.id,
+      rowLabel: (job) => job.name,
+      defaultSort: { column: "seconds", direction: "descending" },
+      selectable: true,
+      defaultSelected: ["job-4823"]
+    }
+  );
+}
+export {
+  DataTableJobs as default
+};

package/registry/examples/data-table/jobs.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Job = { id: string; name: string; model: string; status: "done" | "running" | "failed"; seconds: number };
+const jobs: Job[] = [
+  { id: "job-4821", name: "Product shots, autumn", model: "Flux 1.1", status: "done", seconds: 42 },
+  { id: "job-4822", name: "Podcast transcript", model: "Whisper large", status: "running", seconds: 318 },
+  { id: "job-4823", name: "Trailer voice-over", model: "XTTS v2", status: "failed", seconds: 7 },
+  { id: "job-4824", name: "Catalogue summaries", model: "Llama 3.3", status: "done", seconds: 96 },
+];
+const tone = { done: "success", running: "accent", failed: "danger" } as const;
+
+const columns: DataTableColumn<Job>[] = [
+  { id: "name", header: "Job", sortable: true, card: "title" },
+  { id: "model", header: "Model", sortable: true },
+  { id: "status", header: "Status", cell: (job) => <Badge tone={tone[job.status]}>{job.status}</Badge> },
+  { id: "seconds", header: "Duration", sortable: true, align: "end", cell: (job) => `${job.seconds} s` },
+];
+
+// Sort by a header, select rows for a bulk action; cards below 36rem of width.
+export default function DataTableJobs() {
+  return (
+    <DataTable
+      caption="Jobs"
+      rows={jobs}
+      columns={columns}
+      getRowId={(job) => job.id}
+      rowLabel={(job) => job.name}
+      defaultSort={{ column: "seconds", direction: "descending" }}
+      selectable
+      defaultSelected={["job-4823"]}
+    />
+  );
+}

package/registry/examples/data-table/loading.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/data-table/loading.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/data-table/loading.tsx
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var columns = [
+  { id: "user", header: "User", card: "title" },
+  { id: "role", header: "Role" },
+  { id: "joined", header: "Joined", align: "end" }
+];
+function DataTableLoading() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Users", rows: [], columns, getRowId: () => "", loading: true, loadingRows: 4 });
+}
+export {
+  DataTableLoading as default
+};

package/registry/examples/data-table/loading.tsx

@@ -0,0 +1,12 @@
+import { DataTable } from "@krizaka/ui/data-table";
+
+const columns = [
+  { id: "user", header: "User", card: "title" as const },
+  { id: "role", header: "Role" },
+  { id: "joined", header: "Joined", align: "end" as const },
+];
+
+// The first page is on its way: skeleton rows, the table busy for screen readers.
+export default function DataTableLoading() {
+  return <DataTable caption="Users" rows={[]} columns={columns} getRowId={() => ""} loading loadingRows={4} />;
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/data-table/virtualized.tsx
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var events = Array.from({ length: 5e3 }, (_, i) => ({
+  id: `evt-${i + 1}`,
+  kind: ["view", "tip", "follow", "comment"][i % 4],
+  at: `2026-10-${String(1 + i % 11).padStart(2, "0")} ${String(i % 24).padStart(2, "0")}:00`
+}));
+var columns = [
+  { id: "id", header: "Event", sortable: true },
+  { id: "kind", header: "Kind", sortable: true },
+  { id: "at", header: "At", align: "end" }
+];
+function DataTableVirtualized() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Events", rows: events, columns, getRowId: (e) => e.id, virtualize: { rowHeight: 44, height: 320 }, density: "compact" });
+}
+export {
+  DataTableVirtualized as default
+};

package/registry/examples/data-table/virtualized.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Event = { id: string; kind: string; at: string };
+const events: Event[] = Array.from({ length: 5000 }, (_, i) => ({
+  id: `evt-${i + 1}`,
+  kind: ["view", "tip", "follow", "comment"][i % 4]!,
+  at: `2026-10-${String(1 + (i % 11)).padStart(2, "0")} ${String(i % 24).padStart(2, "0")}:00`,
+}));
+const columns: DataTableColumn<Event>[] = [
+  { id: "id", header: "Event", sortable: true },
+  { id: "kind", header: "Kind", sortable: true },
+  { id: "at", header: "At", align: "end" },
+];
+
+// 5,000 rows, ~20 rendered: the body scrolls, the header stays.
+export default function DataTableVirtualized() {
+  return <DataTable caption="Events" rows={events} columns={columns} getRowId={(e) => e.id} virtualize={{ rowHeight: 44, height: 320 }} density="compact" />;
+}

package/registry/examples/date-picker/calendar.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/date-picker/calendar.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/date-picker/calendar.tsx
+import { Calendar } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var weekend = (iso) => [0, 6].includes((/* @__PURE__ */ new Date(`${iso}T12:00:00`)).getDay());
+function DatePickerCalendar() {
+  const [day, setDay] = React.useState("2026-10-15");
+  return /* @__PURE__ */ jsx("div", { className: "inline-block rounded-xl border border-border-default bg-surface-1 p-3", children: /* @__PURE__ */ jsx(Calendar, { locale: "en-GB", value: day, onSelect: setDay, isDateDisabled: weekend, min: "2026-10-12", today: "2026-10-11" }) });
+}
+export {
+  DatePickerCalendar as default
+};

package/registry/examples/date-picker/calendar.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Calendar } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+const weekend = (iso: string) => [0, 6].includes(new Date(`${iso}T12:00:00`).getDay());
+
+// The month is the interface: pick a day for a call, weekends unavailable.
+export default function DatePickerCalendar() {
+  const [day, setDay] = React.useState("2026-10-15");
+  return (
+    <div className="inline-block rounded-xl border border-border-default bg-surface-1 p-3">
+      <Calendar locale="en-GB" value={day} onSelect={setDay} isDateDisabled={weekend} min="2026-10-12" today="2026-10-11" />
+    </div>
+  );
+}

package/registry/examples/date-picker/french.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/date-picker/french.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/date-picker/french.tsx
+import { DatePicker } from "@krizaka/ui/date-picker";
+import { jsx } from "react/jsx-runtime";
+function DatePickerFrench() {
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      label: "Date du rendez-vous",
+      locale: "fr-CA",
+      defaultValue: "2026-10-11",
+      today: "2026-10-11",
+      labels: { previousMonth: "Mois pr\xE9c\xE9dent", nextMonth: "Mois suivant", clear: "Effacer la date" }
+    }
+  );
+}
+export {
+  DatePickerFrench as default
+};

package/registry/examples/date-picker/french.tsx

@@ -0,0 +1,14 @@
+import { DatePicker } from "@krizaka/ui/date-picker";
+
+// fr-CA: “11 oct. 2026”, the months and days in French, the week as Canada counts it.
+export default function DatePickerFrench() {
+  return (
+    <DatePicker
+      label="Date du rendez-vous"
+      locale="fr-CA"
+      defaultValue="2026-10-11"
+      today="2026-10-11"
+      labels={{ previousMonth: "Mois précédent", nextMonth: "Mois suivant", clear: "Effacer la date" }}
+    />
+  );
+}

package/registry/examples/date-picker/open.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/date-picker/open.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/date-picker/open.tsx
+import { DatePicker } from "@krizaka/ui/date-picker";
+import { jsx } from "react/jsx-runtime";
+function DatePickerOpen({ defaultOpen }) {
+  return /* @__PURE__ */ jsx(DatePicker, { label: "Auction ends", locale: "en-US", defaultValue: "2026-10-18", min: "2026-10-11", today: "2026-10-11", defaultOpen });
+}
+export {
+  DatePickerOpen as default
+};

package/registry/examples/date-picker/open.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { DatePicker } from "@krizaka/ui/date-picker";
+
+// The calendar open: today marked, the chosen day filled, the past unavailable.
+export default function DatePickerOpen({ defaultOpen }: { defaultOpen?: boolean }) {
+  return <DatePicker label="Auction ends" locale="en-US" defaultValue="2026-10-18" min="2026-10-11" today="2026-10-11" defaultOpen={defaultOpen} />;
+}

package/registry/examples/date-picker/range.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/date-picker/range.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/date-picker/range.tsx
+import { DateRangePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function DatePickerRange({ defaultOpen }) {
+  const [period, setPeriod] = React.useState({ start: "2026-10-01", end: "2026-10-11" });
+  return /* @__PURE__ */ jsx(
+    DateRangePicker,
+    {
+      label: "Period",
+      locale: "en-US",
+      value: period,
+      onValueChange: setPeriod,
+      max: "2026-10-11",
+      today: "2026-10-11",
+      defaultOpen,
+      presets: [
+        { label: "Last 7 days", start: "2026-10-05", end: "2026-10-11" },
+        { label: "This month", start: "2026-10-01", end: "2026-10-11" },
+        { label: "Last month", start: "2026-09-01", end: "2026-09-30" }
+      ]
+    }
+  );
+}
+export {
+  DatePickerRange as default
+};

package/registry/examples/date-picker/range.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { DateRangePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+// An earnings report: presets for the usual periods, two clicks for any other.
+export default function DatePickerRange({ defaultOpen }: { defaultOpen?: boolean }) {
+  const [period, setPeriod] = React.useState<{ start: string; end: string } | null>({ start: "2026-10-01", end: "2026-10-11" });
+  return (
+    <DateRangePicker
+      label="Period"
+      locale="en-US"
+      value={period}
+      onValueChange={setPeriod}
+      max="2026-10-11"
+      today="2026-10-11"
+      defaultOpen={defaultOpen}
+      presets={[
+        { label: "Last 7 days", start: "2026-10-05", end: "2026-10-11" },
+        { label: "This month", start: "2026-10-01", end: "2026-10-11" },
+        { label: "Last month", start: "2026-09-01", end: "2026-09-30" },
+      ]}
+    />
+  );
+}

package/registry/examples/date-picker/schedule.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/date-picker/schedule.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/date-picker/schedule.tsx
+import { DatePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function DatePickerSchedule() {
+  const [date, setDate] = React.useState("2026-10-14");
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      label: "Publish on",
+      locale: "en-US",
+      value: date,
+      onValueChange: setDate,
+      min: "2026-10-11",
+      today: "2026-10-11",
+      clearable: true,
+      placeholder: "Publish now",
+      hint: "Your followers are told when it goes live."
+    }
+  );
+}
+export {
+  DatePickerSchedule as default
+};

package/registry/examples/date-picker/schedule.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { DatePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+// `today` is fixed here for the documentation; leave it out in an app.
+export default function DatePickerSchedule() {
+  const [date, setDate] = React.useState<string | null>("2026-10-14");
+  return (
+    <DatePicker
+      label="Publish on"
+      locale="en-US"
+      value={date}
+      onValueChange={setDate}
+      min="2026-10-11"
+      today="2026-10-11"
+      clearable
+      placeholder="Publish now"
+      hint="Your followers are told when it goes live."
+    />
+  );
+}

package/registry/examples/file-upload/images.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/file-upload/images.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/file-upload/images.tsx
+import { Dropzone } from "@krizaka/ui/file-upload";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FileUploadImages() {
+  const [names, setNames] = React.useState([]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-lg flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        title: "Add pictures to the gallery",
+        browseLabel: "Choose pictures",
+        hint: "JPEG, PNG or WebP \u2014 up to 6 pictures of 10 MB",
+        accept: "image/jpeg,image/png,image/webp",
+        multiple: true,
+        maxFiles: 6,
+        maxSize: 10 * 1024 ** 2,
+        onFiles: (files) => setNames(files.map((f) => f.name)),
+        refusalLabel: (r) => `${r.file.name}: ${{ type: "not a JPEG, PNG or WebP", size: "larger than 10 MB", count: "more than 6 pictures" }[r.reason]}`
+      }
+    ),
+    names.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-sm text-fg-secondary", children: [
+      "Ready: ",
+      names.join(", ")
+    ] })
+  ] });
+}
+export {
+  FileUploadImages as default
+};

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { Dropzone } from "@krizaka/ui/file-upload";
+import * as React from "react";
+
+// Up to six pictures of 10 MB; each refusal says why.
+export default function FileUploadImages() {
+  const [names, setNames] = React.useState<string[]>([]);
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-2">
+      <Dropzone
+        title="Add pictures to the gallery"
+        browseLabel="Choose pictures"
+        hint="JPEG, PNG or WebP — up to 6 pictures of 10 MB"
+        accept="image/jpeg,image/png,image/webp"
+        multiple
+        maxFiles={6}
+        maxSize={10 * 1024 ** 2}
+        onFiles={(files) => setNames(files.map((f) => f.name))}
+        refusalLabel={(r) => `${r.file.name}: ${{ type: "not a JPEG, PNG or WebP", size: "larger than 10 MB", count: "more than 6 pictures" }[r.reason]}`}
+      />
+      {names.length > 0 && <p className="text-sm text-fg-secondary">Ready: {names.join(", ")}</p>}
+    </div>
+  );
+}

package/registry/examples/file-upload/states.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/file-upload/states.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/file-upload/states.tsx
+import { UploadList } from "@krizaka/ui/file-upload";
+import { jsx } from "react/jsx-runtime";
+var noop = () => void 0;
+function FileUploadStates() {
+  return /* @__PURE__ */ jsx(
+    UploadList,
+    {
+      className: "max-w-lg",
+      items: [
+        { id: "a", name: "sunset-timelapse.mp4", size: 184e7, type: "video/mp4", progress: 0.42, status: "uploading", speed: 124e5 },
+        { id: "b", name: "behind-the-scenes.mov", size: 62e7, type: "video/quicktime", progress: 0.71, status: "paused" },
+        { id: "c", name: "interview.mp4", size: 24e7, type: "video/mp4", progress: 0.1, status: "error", error: "The connection was lost. Your upload resumes where it stopped." },
+        { id: "d", name: "cover.jpg", size: 82e4, type: "image/jpeg", progress: 1, status: "done" }
+      ],
+      onPause: noop,
+      onResume: noop,
+      onRetry: noop,
+      onCancel: noop,
+      onRemove: noop
+    }
+  );
+}
+export {
+  FileUploadStates as default
+};

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

@@ -0,0 +1,23 @@
+import { UploadList } from "@krizaka/ui/file-upload";
+
+const noop = () => undefined;
+
+// Each state with the actions it allows: pause while it sends, resume, retry, remove.
+export default function FileUploadStates() {
+  return (
+    <UploadList
+      className="max-w-lg"
+      items={[
+        { id: "a", name: "sunset-timelapse.mp4", size: 1_840_000_000, type: "video/mp4", progress: 0.42, status: "uploading", speed: 12_400_000 },
+        { id: "b", name: "behind-the-scenes.mov", size: 620_000_000, type: "video/quicktime", progress: 0.71, status: "paused" },
+        { id: "c", name: "interview.mp4", size: 240_000_000, type: "video/mp4", progress: 0.1, status: "error", error: "The connection was lost. Your upload resumes where it stopped." },
+        { id: "d", name: "cover.jpg", size: 820_000, type: "image/jpeg", progress: 1, status: "done" },
+      ]}
+      onPause={noop}
+      onResume={noop}
+      onRetry={noop}
+      onCancel={noop}
+      onRemove={noop}
+    />
+  );
+}

package/registry/examples/file-upload/tus.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/file-upload/tus.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/file-upload/tus.tsx
+import { Dropzone, UploadList, useUploadQueue } from "@krizaka/ui/file-upload";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FileUploadTus() {
+  const queue = useUploadQueue({
+    concurrency: 1,
+    // `resumed`: Tus finds the offset by itself (its fingerprint); a multipart client would skip the parts sent.
+    upload: (file, { signal, onProgress }) => new Promise((resolve, reject) => {
+      const upload = createTusUpload(file, { onProgress, onSuccess: resolve, onError: reject });
+      signal.addEventListener("abort", () => upload.abort());
+      upload.start();
+    })
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-lg flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(Dropzone, { title: "Drop documents to index", browseLabel: "Choose documents", accept: ".pdf,.docx,.md", multiple: true, onFiles: queue.add }),
+    /* @__PURE__ */ jsx(UploadList, { items: queue.items, onPause: queue.pause, onResume: queue.resume, onRetry: queue.retry, onCancel: queue.cancel, onRemove: queue.remove })
+  ] });
+}
+export {
+  FileUploadTus as default
+};

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { Dropzone, UploadList, useUploadQueue } from "@krizaka/ui/file-upload";
+
+// The shape of a Tus client (tus-js-client: new Upload(file, options), start(), abort()), kept out of the example.
+type Resumable = { start(): void; abort(): void };
+declare function createTusUpload(file: File, events: { onProgress: (sent: number) => void; onSuccess: () => void; onError: (e: Error) => void }): Resumable;
+
+export default function FileUploadTus() {
+  const queue = useUploadQueue({
+    concurrency: 1,
+    // `resumed`: Tus finds the offset by itself (its fingerprint); a multipart client would skip the parts sent.
+    upload: (file, { signal, onProgress }) =>
+      new Promise((resolve, reject) => {
+        const upload = createTusUpload(file, { onProgress, onSuccess: resolve, onError: reject });
+        signal.addEventListener("abort", () => upload.abort());
+        upload.start();
+      }),
+  });
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-3">
+      <Dropzone title="Drop documents to index" browseLabel="Choose documents" accept=".pdf,.docx,.md" multiple onFiles={queue.add} />
+      <UploadList items={queue.items} onPause={queue.pause} onResume={queue.resume} onRetry={queue.retry} onCancel={queue.cancel} onRemove={queue.remove} />
+    </div>
+  );
+}

package/registry/examples/file-upload/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/file-upload/video.js

@@ -0,0 +1,39 @@
+"use client";
+
+// registry/examples/file-upload/video.tsx
+import { Dropzone, UploadList, useUploadQueue } from "@krizaka/ui/file-upload";
+import { jsx, jsxs } from "react/jsx-runtime";
+function fakeUpload(file, { signal, onProgress }) {
+  return new Promise((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));
+  });
+}
+function FileUploadVideo() {
+  const queue = useUploadQueue({ upload: fakeUpload });
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-lg flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(
+      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 && /* @__PURE__ */ jsx(UploadList, { items: queue.items, onPause: queue.pause, onResume: queue.resume, onCancel: queue.cancel, onRemove: queue.remove, onRetry: queue.retry })
+  ] });
+}
+export {
+  FileUploadVideo as default
+};