@krizaka/ui 2.2.0 → 2.4.0

package/registry/examples/combobox/creatable.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/combobox/creatable.tsx
+import { Combobox } from "@krizaka/ui/combobox";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function ComboboxCreatable() {
+  const [playlists, setPlaylists] = React.useState([
+    { value: "p1", label: "Travel diaries" },
+    { value: "p2", label: "Studio sessions" }
+  ]);
+  const [value, setValue] = React.useState(playlists[1]);
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      label: "Playlist",
+      options: playlists,
+      value,
+      onValueChange: setValue,
+      creatable: true,
+      onCreate: (name) => {
+        const created = { value: `p${playlists.length + 1}`, label: name };
+        setPlaylists((all) => [...all, created]);
+        return created;
+      },
+      labels: { create: (name) => `Create the playlist \u201C${name}\u201D` }
+    }
+  );
+}
+export {
+  ComboboxCreatable as default
+};

package/registry/examples/combobox/creatable.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Combobox, type ComboboxOption } from "@krizaka/ui/combobox";
+import * as React from "react";
+
+// Pick a playlist, or type a new name and create it.
+export default function ComboboxCreatable() {
+  const [playlists, setPlaylists] = React.useState<ComboboxOption[]>([
+    { value: "p1", label: "Travel diaries" },
+    { value: "p2", label: "Studio sessions" },
+  ]);
+  const [value, setValue] = React.useState<ComboboxOption | null>(playlists[1]!);
+  return (
+    <Combobox
+      label="Playlist"
+      options={playlists}
+      value={value}
+      onValueChange={setValue}
+      creatable
+      onCreate={(name) => {
+        const created = { value: `p${playlists.length + 1}`, label: name };
+        setPlaylists((all) => [...all, created]);
+        return created;
+      }}
+      labels={{ create: (name) => `Create the playlist “${name}”` }}
+    />
+  );
+}

package/registry/examples/combobox/invalid.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/combobox/invalid.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/combobox/invalid.tsx
+import { Combobox } from "@krizaka/ui/combobox";
+import { jsx } from "react/jsx-runtime";
+function ComboboxInvalid() {
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      label: "Country of residence",
+      placeholder: "Choose a country",
+      options: [
+        { value: "CA", label: "Canada" },
+        { value: "FR", label: "France" },
+        { value: "BE", label: "Belgium" }
+      ],
+      error: "Choose your country to receive payouts."
+    }
+  );
+}
+export {
+  ComboboxInvalid as default
+};

package/registry/examples/combobox/invalid.tsx

@@ -0,0 +1,17 @@
+import { Combobox } from "@krizaka/ui/combobox";
+
+// A required choice left empty: the error is shown and read with the field.
+export default function ComboboxInvalid() {
+  return (
+    <Combobox
+      label="Country of residence"
+      placeholder="Choose a country"
+      options={[
+        { value: "CA", label: "Canada" },
+        { value: "FR", label: "France" },
+        { value: "BE", label: "Belgium" },
+      ]}
+      error="Choose your country to receive payouts."
+    />
+  );
+}

package/registry/examples/combobox/multiple.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/combobox/multiple.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/combobox/multiple.tsx
+import { Combobox } from "@krizaka/ui/combobox";
+import { jsx } from "react/jsx-runtime";
+var PEOPLE = [
+  { value: "eric", label: "Eric" },
+  { value: "ines", label: "In\xE8s" },
+  { value: "jonas", label: "Jonas" },
+  { value: "mia", label: "Mia" },
+  { value: "noah", label: "Noah" }
+];
+function ComboboxMultiple() {
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      multiple: true,
+      label: "Collaborators",
+      placeholder: "Add a collaborator",
+      options: PEOPLE,
+      defaultValue: [PEOPLE[0], PEOPLE[1]],
+      maxSelected: 3,
+      hint: "Up to three collaborators share the revenue of this video."
+    }
+  );
+}
+export {
+  ComboboxMultiple as default
+};

package/registry/examples/combobox/multiple.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Combobox } from "@krizaka/ui/combobox";
+
+const PEOPLE = [
+  { value: "eric", label: "Eric" },
+  { value: "ines", label: "Inès" },
+  { value: "jonas", label: "Jonas" },
+  { value: "mia", label: "Mia" },
+  { value: "noah", label: "Noah" },
+];
+
+// Several values as chips; Backspace in the empty input removes the last one.
+export default function ComboboxMultiple() {
+  return (
+    <Combobox
+      multiple
+      label="Collaborators"
+      placeholder="Add a collaborator"
+      options={PEOPLE}
+      defaultValue={[PEOPLE[0]!, PEOPLE[1]!]}
+      maxSelected={3}
+      hint="Up to three collaborators share the revenue of this video."
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/data-table/cards.tsx
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var videos = [
+  { id: "v1", title: "Sunset over Montr\xE9al", views: 12840, tips: "$184.00", visibility: "Public" },
+  { id: "v2", title: "Behind the scenes, part 2", views: 3120, tips: "$62.50", visibility: "Followers" }
+];
+var columns = [
+  { id: "title", header: "Title", card: "title" },
+  { id: "visibility", header: "Visibility" },
+  { id: "views", header: "Views", align: "end", cell: (v) => v.views.toLocaleString("en") },
+  { id: "tips", header: "Tips", align: "end" }
+];
+function DataTableCards() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Your videos", rows: videos, columns, getRowId: (v) => v.id, layout: "cards" });
+}
+export {
+  DataTableCards as default
+};

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

@@ -0,0 +1,20 @@
+"use client";
+
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Video = { id: string; title: string; views: number; tips: string; visibility: string };
+const videos: Video[] = [
+  { id: "v1", title: "Sunset over Montréal", views: 12840, tips: "$184.00", visibility: "Public" },
+  { id: "v2", title: "Behind the scenes, part 2", views: 3120, tips: "$62.50", visibility: "Followers" },
+];
+const columns: DataTableColumn<Video>[] = [
+  { id: "title", header: "Title", card: "title" },
+  { id: "visibility", header: "Visibility" },
+  { id: "views", header: "Views", align: "end", cell: (v) => v.views.toLocaleString("en") },
+  { id: "tips", header: "Tips", align: "end" },
+];
+
+// A studio's videos on a phone: one card per row, the title on top, every value labelled.
+export default function DataTableCards() {
+  return <DataTable caption="Your videos" rows={videos} columns={columns} getRowId={(v) => v.id} layout="cards" />;
+}

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

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/data-table/empty.tsx
+import { Button } from "@krizaka/ui/button";
+import { DataTable } from "@krizaka/ui/data-table";
+import { EmptyState } from "@krizaka/ui/empty-state";
+import { jsx } from "react/jsx-runtime";
+var columns = [
+  { id: "invoice", header: "Invoice", card: "title" },
+  { id: "amount", header: "Amount", align: "end" }
+];
+function DataTableEmpty() {
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      caption: "Invoices",
+      rows: [],
+      columns,
+      getRowId: () => "",
+      empty: /* @__PURE__ */ jsx(EmptyState, { title: "No invoice yet", description: "Your first invoice appears after your first payout.", action: /* @__PURE__ */ jsx(Button, { size: "sm", children: "Set up payouts" }) })
+    }
+  );
+}
+export {
+  DataTableEmpty as default
+};

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

@@ -0,0 +1,21 @@
+import { Button } from "@krizaka/ui/button";
+import { DataTable } from "@krizaka/ui/data-table";
+import { EmptyState } from "@krizaka/ui/empty-state";
+
+const columns = [
+  { id: "invoice", header: "Invoice", card: "title" as const },
+  { id: "amount", header: "Amount", align: "end" as const },
+];
+
+// No record yet: say what to do next.
+export default function DataTableEmpty() {
+  return (
+    <DataTable
+      caption="Invoices"
+      rows={[]}
+      columns={columns}
+      getRowId={() => ""}
+      empty={<EmptyState title="No invoice yet" description="Your first invoice appears after your first payout." action={<Button size="sm">Set up payouts</Button>} />}
+    />
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/data-table/error.tsx
+import { Button } from "@krizaka/ui/button";
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx, jsxs } from "react/jsx-runtime";
+var columns = [
+  { id: "event", header: "Event", card: "title" },
+  { id: "at", header: "At", align: "end" }
+];
+function DataTableError() {
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      caption: "Audit log",
+      rows: [],
+      columns,
+      getRowId: () => "",
+      error: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-fg", children: "The audit log could not be loaded." }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => window.location.reload(), children: "Try again" })
+      ] })
+    }
+  );
+}
+export {
+  DataTableError as default
+};

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { DataTable } from "@krizaka/ui/data-table";
+
+const columns = [
+  { id: "event", header: "Event", card: "title" as const },
+  { id: "at", header: "At", align: "end" as const },
+];
+
+// The request failed: what happened, and a way to try again — announced, in place of the rows.
+export default function DataTableError() {
+  return (
+    <DataTable
+      caption="Audit log"
+      rows={[]}
+      columns={columns}
+      getRowId={() => ""}
+      error={
+        <div className="flex flex-col items-center gap-3">
+          <p className="text-sm text-fg">The audit log could not be loaded.</p>
+          <Button size="sm" variant="outline" onClick={() => window.location.reload()}>
+            Try again
+          </Button>
+        </div>
+      }
+    />
+  );
+}

package/registry/examples/data-table/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/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;