@krizaka/ui 3.16.1 → 3.17.0

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable, type DataTableColumn, DataTableFilters } from "@krizaka/ui/data-table";
+
+type Model = { id: string; name: string; maker: string; does: string; where: string; status: string; licence: string; context: number; verified: string };
+const L = "https://www.apache.org/licenses/LICENSE-2.0";
+const models: Model[] = [
+  { id: "black-forest-labs/flux.1-schnell", name: "FLUX.1 schnell", maker: "Black Forest Labs", does: "Image", where: "Local", status: "Default", licence: "Apache-2.0", context: 0, verified: "2026-10-02" },
+  { id: "meta-llama/llama-3.3-70b-instruct", name: "Llama 3.3 70B Instruct", maker: "Meta", does: "Chat", where: "Local", status: "Default", licence: "Llama 3.3 Community Licence", context: 131072, verified: "2026-10-09" },
+  { id: "anthropic/claude-sonnet", name: "Claude Sonnet", maker: "Anthropic", does: "Chat", where: "Provider", status: "Available", licence: "Provider terms", context: 200000, verified: "2026-10-12" },
+  { id: "lightricks/ltx-video", name: "LTX-Video", maker: "Lightricks", does: "Video", where: "Local", status: "Planned", licence: "OpenRAIL-M", context: 0, verified: "" },
+];
+const tone = { Default: "success", Available: "neutral", Planned: "warning" } as const;
+// The model, its capability, where it runs and its status stay in the row; the rest leaves it as the table narrows.
+const columns: DataTableColumn<Model>[] = [
+  { id: "name", header: "Model", type: "title", sortable: true, filter: "text", subtitle: (m) => m.id },
+  { id: "does", header: "Capability", type: "badge", sortable: true, filter: "facet", cell: (m) => <Badge size="sm">{m.does}</Badge> },
+  { id: "where", header: "Runs where", type: "badge", filter: "facet", priority: 2, cell: (m) => <Badge size="sm" tone={m.where === "Local" ? "accent" : "neutral"}>{m.where}</Badge> },
+  { id: "status", header: "Status", type: "status", sortable: true, filter: "facet", cell: (m) => <Badge size="sm" tone={tone[m.status as keyof typeof tone]}>{m.status}</Badge> },
+  { id: "maker", header: "Maker", type: "text", clamp: 1, priority: 3 },
+  { id: "licence", header: "Licence", type: "link", priority: 4, href: () => L },
+  { id: "context", header: "Context", type: "number", unit: "tokens", priority: 5, value: (m) => m.context, cell: (m) => (m.context ? m.context.toLocaleString("en") : "—") },
+  { id: "verified", header: "Verified", type: "date", priority: 5, cell: (m) => m.verified || "never" },
+];
+
+// Eight columns, any width, no overflow: the chevron opens what left the row; under 36 rem each row is a card.
+export default function DataTableCatalogue() {
+  return <DataTable caption="Models" rows={models} columns={columns} getRowId={(m) => m.id} rowLabel={(m) => m.name} density="compact" toolbar={<DataTableFilters />} />;
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/data-table/invoices.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var tone = { Paid: "success", Open: "accent", Overdue: "danger", Draft: "neutral" };
+var invoices = [
+  { id: "INV-2026-0143", customer: "Harbour Labs", email: "finance@harbourlabs.example", issued: "2026-10-14", due: "2026-11-13", amount: 2200, status: "Draft" },
+  { id: "INV-2026-0142", customer: "Atelier Montr\xE9al Inc.", email: "billing@ateliermtl.example", issued: "2026-10-01", due: "2026-10-31", amount: 4280, status: "Open" },
+  { id: "INV-2026-0138", customer: "Nord & Fils", email: "ap@nordfils.example", issued: "2026-09-12", due: "2026-10-12", amount: 15900, status: "Overdue" },
+  { id: "INV-2026-0137", customer: "Lumen Collective", email: "hello@lumen.example", issued: "2026-09-10", due: "2026-10-10", amount: 640, status: "Paid" }
+];
+var columns = [
+  { id: "id", header: "Invoice", type: "title", sortable: true, subtitle: (i) => i.customer },
+  { id: "status", header: "Status", type: "status", sortable: true, cell: (i) => /* @__PURE__ */ jsx(Badge, { size: "sm", tone: tone[i.status], children: i.status }) },
+  { id: "amount", header: "Amount", type: "number", sortable: true, cell: (i) => i.amount.toLocaleString("en", { style: "currency", currency: "USD" }) },
+  { id: "due", header: "Due", type: "date", sortable: true, priority: 2 },
+  { id: "issued", header: "Issued", type: "date", sortable: true, priority: 3 },
+  { id: "email", header: "Billing contact", type: "link", priority: 4, href: (i) => `mailto:${i.email}` }
+];
+function DataTableInvoices() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Invoices", rows: invoices, columns, getRowId: (i) => i.id, rowLabel: (i) => i.id, stickyHeader: true, striped: true, defaultSort: { column: "due", direction: "descending" } });
+}
+export {
+  DataTableInvoices as default
+};

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Invoice = { id: string; customer: string; email: string; issued: string; due: string; amount: number; status: keyof typeof tone };
+const tone = { Paid: "success", Open: "accent", Overdue: "danger", Draft: "neutral" } as const;
+const invoices: Invoice[] = [
+  { id: "INV-2026-0143", customer: "Harbour Labs", email: "finance@harbourlabs.example", issued: "2026-10-14", due: "2026-11-13", amount: 2200, status: "Draft" },
+  { id: "INV-2026-0142", customer: "Atelier Montréal Inc.", email: "billing@ateliermtl.example", issued: "2026-10-01", due: "2026-10-31", amount: 4280, status: "Open" },
+  { id: "INV-2026-0138", customer: "Nord & Fils", email: "ap@nordfils.example", issued: "2026-09-12", due: "2026-10-12", amount: 15900, status: "Overdue" },
+  { id: "INV-2026-0137", customer: "Lumen Collective", email: "hello@lumen.example", issued: "2026-09-10", due: "2026-10-10", amount: 640, status: "Paid" },
+];
+const columns: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Invoice", type: "title", sortable: true, subtitle: (i) => i.customer },
+  { id: "status", header: "Status", type: "status", sortable: true, cell: (i) => <Badge size="sm" tone={tone[i.status]}>{i.status}</Badge> },
+  { id: "amount", header: "Amount", type: "number", sortable: true, cell: (i) => i.amount.toLocaleString("en", { style: "currency", currency: "USD" }) },
+  { id: "due", header: "Due", type: "date", sortable: true, priority: 2 },
+  { id: "issued", header: "Issued", type: "date", sortable: true, priority: 3 },
+  { id: "email", header: "Billing contact", type: "link", priority: 4, href: (i) => `mailto:${i.email}` },
+];
+
+// Number, status and amount always; dates and contact move into the detail as the screen narrows. Sticky header, zebra.
+export default function DataTableInvoices() {
+  return <DataTable caption="Invoices" rows={invoices} columns={columns} getRowId={(i) => i.id} rowLabel={(i) => i.id} stickyHeader striped defaultSort={{ column: "due", direction: "descending" }} />;
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+// registry/examples/data-table/runs.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable, DataTableColumnsMenu, DataTableExport, DataTableFilters } from "@krizaka/ui/data-table";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tone = { succeeded: "success", running: "accent", failed: "danger", queued: "neutral" };
+var runs = [
+  { id: "run_9f2c41ab", pack: "video.short", model: "ltx-video", worker: "-", status: "queued", seconds: 0, started: "2026-10-15 09:18" },
+  { id: "run_9f2c41a8", pack: "audio.transcribe", model: "whisper-large-v3", worker: "gpu-lyon-01", status: "running", seconds: 318, started: "2026-10-15 09:16" },
+  { id: "run_9f2c41a9", pack: "voice.clone", model: "xtts-v2", worker: "gpu-lyon-02", status: "failed", seconds: 7, started: "2026-10-15 09:02", error: "Out of memory (24 GB)" },
+  { id: "run_9f2c41aa", pack: "chat.summarise", model: "llama-3.3-70b-instruct", worker: "cpu-mtl-04", status: "succeeded", seconds: 96, started: "2026-10-15 08:51" }
+];
+var columns = [
+  { id: "pack", header: "Run", type: "title", sortable: true, filter: "text", subtitle: (r) => r.id },
+  { id: "status", header: "Status", type: "status", sortable: true, filter: "facet", cell: (r) => /* @__PURE__ */ jsx(Badge, { size: "sm", tone: tone[r.status], children: r.status }) },
+  { id: "seconds", header: "Duration", type: "number", unit: "s", sortable: true, filter: "range" },
+  { id: "model", header: "Model", type: "text", clamp: 1, priority: 2 },
+  { id: "worker", header: "Worker", type: "text", clamp: 1, priority: 3 },
+  { id: "started", header: "Started", type: "date", sortable: true, priority: 4 },
+  { id: "error", header: "Error", type: "text", priority: 5, cell: (r) => r.error ?? "\u2014" }
+];
+var bar = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+  /* @__PURE__ */ jsx(DataTableFilters, {}),
+  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx(DataTableColumnsMenu, {}),
+    /* @__PURE__ */ jsx(DataTableExport, { filename: "runs.csv" })
+  ] })
+] });
+function DataTableRuns() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Runs", rows: runs, columns, getRowId: (r) => r.id, rowLabel: (r) => r.id, selectable: true, density: "compact", stickyHeader: true, toolbar: bar });
+}
+export {
+  DataTableRuns as default
+};

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable, type DataTableColumn, DataTableColumnsMenu, DataTableExport, DataTableFilters } from "@krizaka/ui/data-table";
+
+type Run = { id: string; pack: string; model: string; worker: string; status: keyof typeof tone; seconds: number; started: string; error?: string };
+const tone = { succeeded: "success", running: "accent", failed: "danger", queued: "neutral" } as const;
+const runs: Run[] = [
+  { id: "run_9f2c41ab", pack: "video.short", model: "ltx-video", worker: "-", status: "queued", seconds: 0, started: "2026-10-15 09:18" },
+  { id: "run_9f2c41a8", pack: "audio.transcribe", model: "whisper-large-v3", worker: "gpu-lyon-01", status: "running", seconds: 318, started: "2026-10-15 09:16" },
+  { id: "run_9f2c41a9", pack: "voice.clone", model: "xtts-v2", worker: "gpu-lyon-02", status: "failed", seconds: 7, started: "2026-10-15 09:02", error: "Out of memory (24 GB)" },
+  { id: "run_9f2c41aa", pack: "chat.summarise", model: "llama-3.3-70b-instruct", worker: "cpu-mtl-04", status: "succeeded", seconds: 96, started: "2026-10-15 08:51" },
+];
+const columns: DataTableColumn<Run>[] = [
+  { id: "pack", header: "Run", type: "title", sortable: true, filter: "text", subtitle: (r) => r.id },
+  { id: "status", header: "Status", type: "status", sortable: true, filter: "facet", cell: (r) => <Badge size="sm" tone={tone[r.status]}>{r.status}</Badge> },
+  { id: "seconds", header: "Duration", type: "number", unit: "s", sortable: true, filter: "range" },
+  { id: "model", header: "Model", type: "text", clamp: 1, priority: 2 },
+  { id: "worker", header: "Worker", type: "text", clamp: 1, priority: 3 },
+  { id: "started", header: "Started", type: "date", sortable: true, priority: 4 },
+  { id: "error", header: "Error", type: "text", priority: 5, cell: (r) => r.error ?? "—" },
+];
+const bar = <div className="flex flex-col gap-3"><DataTableFilters /><div className="flex gap-2"><DataTableColumnsMenu /><DataTableExport filename="runs.csv" /></div></div>;
+
+// An admin console: filters, columns menu and CSV export in the toolbar; selection; the error in the detail.
+export default function DataTableRuns() {
+  return <DataTable caption="Runs" rows={runs} columns={columns} getRowId={(r) => r.id} rowLabel={(r) => r.id} selectable density="compact" stickyHeader toolbar={bar} />;
+}

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "templatePurposes": {
     "convince": {
       "title": "Convince",
@@ -1054,7 +1054,7 @@
       "category": "data-display",
       "platforms": "web",
       "examples": {
-        "web": 12,
+        "web": 15,
         "native": 0
       },
       "dependencies": [
@@ -1064,6 +1064,7 @@
       "registryDependencies": [
         "button",
         "checkbox",
+        "cn",
         "dropdown-menu",
         "field",
         "filter-bar",
@@ -1749,7 +1750,7 @@
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.16.1",
+        "@krizaka/tokens@^3.17.0",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -1957,7 +1958,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.16.1",
+        "@krizaka/tokens@^3.17.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -2473,7 +2474,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.16.1",
+        "@krizaka/tokens@^3.17.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],

package/registry/map.json

@@ -930,7 +930,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.16.1",
+    "@krizaka/tokens@^3.17.0",
     "@protomaps/basemaps@5.7.2",
     "tailwind-variants@^3.3.1"
   ],

package/registry/nav-bar.json

@@ -494,7 +494,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.16.1",
+    "@krizaka/tokens@^3.17.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/site-footer.json

@@ -291,7 +291,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.16.1",
+    "@krizaka/tokens@^3.17.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],