@krizaka/ui 2.2.0 → 2.4.0

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

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/dialog/left.tsx
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var conversations = ["Pricing questions", "Onboarding Eric", "Weekly report"];
+function DialogLeft({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Conversations" }) }),
+    /* @__PURE__ */ jsxs(Dialog.Content, { closeLabel: "Close", placement: "left", size: "sm", children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: "Conversations" }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: "Your last three conversations." })
+      ] }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: conversations.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: "#chat", className: "block rounded-lg px-3 py-2.5 text-sm text-fg hover:bg-surface-2", children: c }) }, c)) }) })
+    ] })
+  ] });
+}
+export {
+  DialogLeft as default
+};

package/registry/examples/dialog/left.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+
+const conversations = ["Pricing questions", "Onboarding Eric", "Weekly report"];
+
+// `placement="left"`: a navigation drawer — the conversations of a chat app on a phone, sliding in from the left.
+export default function DialogLeft({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Dialog.Root defaultOpen={defaultOpen}>
+      <Dialog.Trigger asChild>
+        <Button>Conversations</Button>
+      </Dialog.Trigger>
+      <Dialog.Content closeLabel="Close" placement="left" size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Conversations</Dialog.Title>
+          <Dialog.Description>Your last three conversations.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <ul className="flex flex-col gap-1">
+            {conversations.map((c) => (
+              <li key={c}>
+                <a href="#chat" className="block rounded-lg px-3 py-2.5 text-sm text-fg hover:bg-surface-2">
+                  {c}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </Dialog.Body>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

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
+};

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}
+    />
+  );
+}