@krizaka/ui 3.3.0 → 3.5.0

package/dist/data-table.js

@@ -1,4 +1,10 @@
 "use client";
+import {
+  Button
+} from "./chunk-ECSCA3CN.js";
+import {
+  Checkbox
+} from "./chunk-7Z4KHPFC.js";
 import {
   useLayoutFallbacks,
   useVirtualizer
@@ -41,48 +47,12 @@ function dataTableCsv(rows, columns, separator = ",") {
 // src/data-table/data-table.tsx
 import { useTable } from "@tanstack/react-table";
 import * as React from "react";
-import { tv as tv3 } from "tailwind-variants";
-
-// src/checkbox/checkbox.tsx
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var checkbox = tv({
-  slots: {
-    root: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent aria-invalid:border-danger aria-invalid:ring-danger/30",
-    indicator: "flex items-center justify-center",
-    label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60"
-  }
-});
-function Check() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
-}
-function Dash() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
-}
-function Checkbox({ invalid, className, children, ...props }) {
-  const s2 = checkbox();
-  const box = /* @__PURE__ */ jsx(
-    CheckboxPrimitive.Root,
-    {
-      "aria-invalid": invalid || void 0,
-      "data-invalid": invalid ? "" : void 0,
-      className: s2.root({ className: children ? "mt-0.5" : className }),
-      ...props,
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: s2.indicator(), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Dash, {}) : /* @__PURE__ */ jsx(Check, {}) })
-    }
-  );
-  if (!children) return box;
-  return /* @__PURE__ */ jsxs("label", { className: s2.label({ className }), children: [
-    box,
-    /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
-  ] });
-}
+import { tv as tv2 } from "tailwind-variants";
 
 // src/pagination/pagination.tsx
-import { tv as tv2 } from "tailwind-variants";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var pagination = tv2({
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var pagination = tv({
   slots: {
     root: "@container flex w-full flex-wrap items-center justify-between gap-3 text-sm",
     list: "flex items-center gap-1",
@@ -123,12 +93,12 @@ function pageRange(page, pageCount, siblings = 1, boundaries = 1) {
 function Item({ href, onClick, disabled, current, label, className, children }) {
   const common = { "aria-label": label, "aria-current": current ? "page" : void 0, className };
   if (href && !disabled) {
-    return /* @__PURE__ */ jsx2("a", { href, onClick, ...common, children });
+    return /* @__PURE__ */ jsx("a", { href, onClick, ...common, children });
   }
   if (href) {
-    return /* @__PURE__ */ jsx2("a", { role: "link", "aria-disabled": true, ...common, children });
+    return /* @__PURE__ */ jsx("a", { role: "link", "aria-disabled": true, ...common, children });
   }
-  return /* @__PURE__ */ jsx2("button", { type: "button", onClick, disabled, ...common, children });
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick, disabled, ...common, children });
 }
 function Pagination({
   page = 1,
@@ -159,25 +129,25 @@ function Pagination({
   const canNext = paged ? current < count : Boolean(hasNext);
   const go = (target) => () => onPageChange?.(target);
   const href = (target) => paged && getHref ? getHref(target) : void 0;
-  return /* @__PURE__ */ jsxs2("nav", { "aria-label": labels.nav, className: s2.root({ className }), ...props, children: [
-    status !== void 0 || pageSizeOptions ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-4", children: [
-      status !== void 0 && /* @__PURE__ */ jsx2("p", { className: s2.status(), children: status }),
-      pageSizeOptions && pageSize !== void 0 && /* @__PURE__ */ jsxs2("label", { className: s2.size(), children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": labels.nav, className: s2.root({ className }), ...props, children: [
+    status !== void 0 || pageSizeOptions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      status !== void 0 && /* @__PURE__ */ jsx("p", { className: s2.status(), children: status }),
+      pageSizeOptions && pageSize !== void 0 && /* @__PURE__ */ jsxs("label", { className: s2.size(), children: [
         labels.pageSize,
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "select",
           {
             className: s2.select(),
             value: pageSize,
             disabled,
             onChange: (event) => onPageSizeChange?.(Number(event.target.value)),
-            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx2("option", { value: size, children: size }, size))
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
           }
         )
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs2("ul", { className: s2.list(), children: [
-      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs("ul", { className: s2.list(), children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         Item,
         {
           href: href(current - 1),
@@ -186,18 +156,18 @@ function Pagination({
           label: labels.previous,
           className: s2.item({ className: s2.edge() }),
           children: [
-            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "left" }),
-            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.previous })
+            /* @__PURE__ */ jsx(ChevronGlyph, { direction: "left" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden @lg:inline", children: labels.previous })
           ]
         }
       ) }),
-      paged && /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx2("li", { className: s2.pages(), children: /* @__PURE__ */ jsx2("ul", { className: "contents", children: pageRange(current, count, siblings, boundaries).map(
-          (n, i) => n === "\u2026" ? /* @__PURE__ */ jsx2("li", { "aria-hidden": true, className: s2.ellipsis(), children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(Item, { href: href(n), onClick: go(n), disabled, current: n === current, label: labels.page(n), className: s2.item(), children: n }) }, n)
+      paged && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("li", { className: s2.pages(), children: /* @__PURE__ */ jsx("ul", { className: "contents", children: pageRange(current, count, siblings, boundaries).map(
+          (n, i) => n === "\u2026" ? /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: s2.ellipsis(), children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Item, { href: href(n), onClick: go(n), disabled, current: n === current, label: labels.page(n), className: s2.item(), children: n }) }, n)
         ) }) }),
-        /* @__PURE__ */ jsx2("li", { className: s2.compact(), children: labels.compact(current, count) })
+        /* @__PURE__ */ jsx("li", { className: s2.compact(), children: labels.compact(current, count) })
       ] }),
-      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         Item,
         {
           href: href(current + 1),
@@ -206,8 +176,8 @@ function Pagination({
           label: labels.next,
           className: s2.item({ className: s2.edge() }),
           children: [
-            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.next }),
-            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right" })
+            /* @__PURE__ */ jsx("span", { className: "hidden @lg:inline", children: labels.next }),
+            /* @__PURE__ */ jsx(ChevronGlyph, { direction: "right" })
           ]
         }
       ) })
@@ -282,8 +252,8 @@ filterRange.autoRemove = (value) => !Array.isArray(value) || value[0] == null &&
 var FILTERS = { text: filterText, facet: filterFacet, range: filterRange };
 
 // src/data-table/data-table.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var dataTable = tv3({
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var dataTable = tv2({
   slots: {
     root: "@container w-full overflow-hidden rounded-xl border border-border-default bg-surface-1",
     toolbar: "border-b border-border-default p-3",
@@ -573,7 +543,7 @@ function DataTable({
     return { "data-pin": position, style: { ["--dt-pin"]: `${offset}px` } };
   };
   const width = (column) => fixedLayout || byId.get(column.id)?.width ? { width: column.getSize() } : void 0;
-  const message = (content, alert) => /* @__PURE__ */ jsx3("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx3("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.message() }), children: alert ? /* @__PURE__ */ jsx3("div", { role: "alert", children: content }) : content }) });
+  const message = (content, alert) => /* @__PURE__ */ jsx2("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx2("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.message() }), children: alert ? /* @__PURE__ */ jsx2("div", { role: "alert", children: content }) : content }) });
   const cardOf = (column) => column?.card === "title" ? "title" : column?.card === "hidden" ? "hidden" : void 0;
   const dataCell = (row, cell, first) => {
     const column = byId.get(cell.column.id);
@@ -584,13 +554,13 @@ function DataTable({
       const leaves = row.getLeafRows().filter((r) => !r.getIsGrouped()).map((r) => r.original);
       if (cell.column.id === row.groupingColumnId) {
         const value = display(row.groupingValue);
-        content = /* @__PURE__ */ jsxs3("button", { type: "button", className: s2.toggle({ className: "px-1.5 font-semibold text-fg" }), "aria-expanded": row.getIsExpanded(), onClick: row.getToggleExpandedHandler(), children: [
-          /* @__PURE__ */ jsx3(ChevronGlyph, { direction: "right", className: "h-4 w-4" }),
+        content = /* @__PURE__ */ jsxs2("button", { type: "button", className: s2.toggle({ className: "px-1.5 font-semibold text-fg" }), "aria-expanded": row.getIsExpanded(), onClick: row.getToggleExpandedHandler(), children: [
+          /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" }),
           labels.group(value, leaves.length)
         ] });
       } else content = column.aggregate ? column.aggregate(leaves) : null;
     } else content = column.cell ? column.cell(row.original) : display(valueOf(column, row.original));
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx2(
       "td",
       {
         role: "cell",
@@ -609,7 +579,7 @@ function DataTable({
     const grouped = row.getIsGrouped();
     const canExpand = !grouped && (renderDetail ? true : row.getCanExpand());
     const cells = row.getVisibleCells();
-    const main = /* @__PURE__ */ jsxs3(
+    const main = /* @__PURE__ */ jsxs2(
       "tr",
       {
         role: "row",
@@ -620,32 +590,32 @@ function DataTable({
         "data-group": grouped ? "" : void 0,
         className: s2.tr({ className: grouped ? s2.groupRow() : void 0 }),
         children: [
-          selectable && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.select() }), children: grouped ? null : /* @__PURE__ */ jsx3(Checkbox, { checked: isChosen, onCheckedChange: () => row.toggleSelected(), "aria-label": labels.selectRow(nameOf(row)) }) }),
-          hasExpander && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.expander() }), children: canExpand ? /* @__PURE__ */ jsx3("button", { type: "button", className: s2.toggle(), "aria-expanded": row.getIsExpanded(), "aria-label": labels.expandRow(nameOf(row)), onClick: row.getToggleExpandedHandler(), children: /* @__PURE__ */ jsx3(ChevronGlyph, { direction: "right", className: "h-4 w-4" }) }) : null }),
+          selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.select() }), children: grouped ? null : /* @__PURE__ */ jsx2(Checkbox, { checked: isChosen, onCheckedChange: () => row.toggleSelected(), "aria-label": labels.selectRow(nameOf(row)) }) }),
+          hasExpander && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.expander() }), children: canExpand ? /* @__PURE__ */ jsx2("button", { type: "button", className: s2.toggle(), "aria-expanded": row.getIsExpanded(), "aria-label": labels.expandRow(nameOf(row)), onClick: row.getToggleExpandedHandler(), children: /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" }) }) : null }),
           cells.map((cell, i) => dataCell(row, cell, i === 0))
         ]
       },
       row.id
     );
     if (!renderDetail || grouped || !row.getIsExpanded() || virtualized) return main;
-    return /* @__PURE__ */ jsxs3(React.Fragment, { children: [
+    return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
       main,
-      /* @__PURE__ */ jsx3("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx3("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.detail() }), children: renderDetail(row.original) }) })
+      /* @__PURE__ */ jsx2("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx2("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.detail() }), children: renderDetail(row.original) }) })
     ] }, row.id);
   };
   let body;
   if (loading) {
-    body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs3("tr", { role: "row", "aria-hidden": true, className: s2.tr(), children: [
-      selectable && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.select() }) }),
-      hasExpander && /* @__PURE__ */ jsx3("td", { role: "cell", className: s2.td({ className: s2.expander() }) }),
-      visibleColumns.map((column) => /* @__PURE__ */ jsx3("td", { role: "cell", "data-card": cardOf(byId.get(column.id)), className: s2.td(), children: /* @__PURE__ */ jsx3("div", { className: s2.skeleton() }) }, column.id))
+    body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-hidden": true, className: s2.tr(), children: [
+      selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.select() }) }),
+      hasExpander && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.expander() }) }),
+      visibleColumns.map((column) => /* @__PURE__ */ jsx2("td", { role: "cell", "data-card": cardOf(byId.get(column.id)), className: s2.td(), children: /* @__PURE__ */ jsx2("div", { className: s2.skeleton() }) }, column.id))
     ] }, `loading-${i}`));
   } else if (error) body = message(error, true);
   else if (pageRows.length === 0) body = message(empty2 ?? labels.empty);
   else if (windowItems) body = windowItems.map((item) => renderRow(pageRows[item.index], item.index));
   else body = pageRows.map((row, i) => renderRow(row, i));
   const headers = table.getHeaderGroups().at(-1)?.headers ?? [];
-  const tableElement = /* @__PURE__ */ jsxs3(
+  const tableElement = /* @__PURE__ */ jsxs2(
     "table",
     {
       role: "table",
@@ -654,12 +624,12 @@ function DataTable({
       className: s2.table({ className: fixedLayout ? "table-fixed" : void 0 }),
       style: fixedLayout ? { minWidth: table.getTotalSize() + (selectable ? 40 : 0) + (hasExpander ? 40 : 0) } : void 0,
       children: [
-        /* @__PURE__ */ jsxs3("caption", { className: showCaption ? s2.caption() : "sr-only", children: [
+        /* @__PURE__ */ jsxs2("caption", { className: showCaption ? s2.caption() : "sr-only", children: [
           caption,
-          loading ? /* @__PURE__ */ jsx3("span", { className: "sr-only", children: ` \u2014 ${labels.loading}` }) : null
+          loading ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: ` \u2014 ${labels.loading}` }) : null
         ] }),
-        /* @__PURE__ */ jsx3("thead", { role: "rowgroup", className: s2.thead({ className: virtualized ? "sticky top-0 z-10 bg-surface-2" : void 0 }), children: /* @__PURE__ */ jsxs3("tr", { role: "row", "aria-rowindex": virtualized ? 1 : void 0, className: s2.headRow(), children: [
-          selectable && /* @__PURE__ */ jsx3("th", { role: "columnheader", scope: "col", "data-keep": "", className: s2.th({ className: s2.select() }), children: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2("thead", { role: "rowgroup", className: s2.thead({ className: virtualized ? "sticky top-0 z-10 bg-surface-2" : void 0 }), children: /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-rowindex": virtualized ? 1 : void 0, className: s2.headRow(), children: [
+          selectable && /* @__PURE__ */ jsx2("th", { role: "columnheader", scope: "col", "data-keep": "", className: s2.th({ className: s2.select() }), children: /* @__PURE__ */ jsx2(
             Checkbox,
             {
               checked: allChosen ? true : someChosen ? "indeterminate" : false,
@@ -668,14 +638,14 @@ function DataTable({
               "aria-label": labels.selectAll
             }
           ) }),
-          hasExpander && /* @__PURE__ */ jsx3("th", { role: "columnheader", scope: "col", className: s2.th({ className: s2.expander() }), children: /* @__PURE__ */ jsx3("span", { className: "sr-only", children: labels.details }) }),
+          hasExpander && /* @__PURE__ */ jsx2("th", { role: "columnheader", scope: "col", className: s2.th({ className: s2.expander() }), children: /* @__PURE__ */ jsx2("span", { className: "sr-only", children: labels.details }) }),
           headers.map((header) => {
             const column = byId.get(header.column.id);
             if (!column) return null;
             const sorted = header.column.getIsSorted();
             const direction = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0;
             const { style, ...pinned } = pin(header.column);
-            return /* @__PURE__ */ jsxs3(
+            return /* @__PURE__ */ jsxs2(
               "th",
               {
                 role: "columnheader",
@@ -686,11 +656,11 @@ function DataTable({
                 className: s2.th({ className: ALIGN[column.align ?? "start"] }),
                 style: { ...style, ...width(header.column) },
                 children: [
-                  column.sortable ? /* @__PURE__ */ jsxs3("button", { type: "button", "aria-pressed": Boolean(direction), className: s2.sortButton(), onClick: () => header.column.toggleSorting(void 0, false), children: [
+                  column.sortable ? /* @__PURE__ */ jsxs2("button", { type: "button", "aria-pressed": Boolean(direction), className: s2.sortButton(), onClick: () => header.column.toggleSorting(void 0, false), children: [
                     column.header,
-                    /* @__PURE__ */ jsx3(SortGlyph, { direction, className: "h-3.5 w-3.5" })
-                  ] }) : column.headerHidden ? /* @__PURE__ */ jsx3("span", { className: "sr-only", children: column.header }) : column.header,
-                  resizing && header.column.getCanResize() ? /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(SortGlyph, { direction, className: "h-3.5 w-3.5" })
+                  ] }) : column.headerHidden ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: column.header }) : column.header,
+                  resizing && header.column.getCanResize() ? /* @__PURE__ */ jsx2(
                     ResizeHandle,
                     {
                       label: labels.resize(column.header),
@@ -708,10 +678,10 @@ function DataTable({
             );
           })
         ] }) }),
-        /* @__PURE__ */ jsxs3("tbody", { role: "rowgroup", className: s2.tbody(), children: [
-          before > 0 && /* @__PURE__ */ jsx3("tr", { "aria-hidden": true, style: { height: before }, children: /* @__PURE__ */ jsx3("td", { colSpan: span }) }),
+        /* @__PURE__ */ jsxs2("tbody", { role: "rowgroup", className: s2.tbody(), children: [
+          before > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: before }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) }),
           body,
-          after > 0 && /* @__PURE__ */ jsx3("tr", { "aria-hidden": true, style: { height: after }, children: /* @__PURE__ */ jsx3("td", { colSpan: span }) })
+          after > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: after }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) })
         ] })
       ]
     }
@@ -726,7 +696,7 @@ function DataTable({
     exportRows: () => table.getSortedRowModel().flatRows.filter((r) => !r.getIsGrouped()).map((r) => r.original),
     manualFiltering: Boolean(manual?.filtering)
   };
-  const pagination2 = paginated ? /* @__PURE__ */ jsx3(
+  const pagination2 = paginated ? /* @__PURE__ */ jsx2(
     Pagination,
     {
       page: Math.min(page, pageCount),
@@ -739,11 +709,11 @@ function DataTable({
       labels: labels.pagination
     }
   ) : null;
-  return /* @__PURE__ */ jsx3(DataTableContext.Provider, { value: context, children: /* @__PURE__ */ jsxs3("div", { className: s2.root({ className }), children: [
-    toolbar ? /* @__PURE__ */ jsx3("div", { className: s2.toolbar(), children: toolbar }) : null,
+  return /* @__PURE__ */ jsx2(DataTableContext.Provider, { value: context, children: /* @__PURE__ */ jsxs2("div", { className: s2.root({ className }), children: [
+    toolbar ? /* @__PURE__ */ jsx2("div", { className: s2.toolbar(), children: toolbar }) : null,
     virtualized ? (
       // A scrolling region the keyboard can reach: Tab lands on it, the arrows scroll it.
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx2(
         "div",
         {
           ref: scroller,
@@ -755,8 +725,8 @@ function DataTable({
           children: tableElement
         }
       )
-    ) : /* @__PURE__ */ jsx3("div", { className: s2.scroller(), children: tableElement }),
-    pagination2 || footer ? /* @__PURE__ */ jsxs3("div", { className: s2.footer({ className: "flex flex-col gap-3" }), children: [
+    ) : /* @__PURE__ */ jsx2("div", { className: s2.scroller(), children: tableElement }),
+    pagination2 || footer ? /* @__PURE__ */ jsxs2("div", { className: s2.footer({ className: "flex flex-col gap-3" }), children: [
       pagination2,
       footer
     ] }) : null
@@ -773,7 +743,7 @@ function ResizeHandle({
 }) {
   return (
     // A focusable separator is interactive (WAI-ARIA "window splitter"): its value is the width, the arrows change it.
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       "div",
       {
         role: "separator",
@@ -799,127 +769,10 @@ function ResizeHandle({
   );
 }
 
-// src/button/button.tsx
-import { Slot } from "radix-ui";
-import { tv as tv4 } from "tailwind-variants";
-
-// src/spinner/glyph.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var HEX = "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z";
-function LoaderGlyph({ state = "loading", value, ...props }) {
-  const known = typeof value === "number" && Number.isFinite(value);
-  const fill = state !== "loading" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;
-  return /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, "data-state": state, "data-progress": fill === null ? void 0 : fill, ...props, children: [
-    /* @__PURE__ */ jsx4("path", { d: HEX, stroke: "currentColor", strokeOpacity: "0.22", strokeWidth: "2.2", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: HEX,
-        pathLength: 100,
-        stroke: "currentColor",
-        strokeWidth: "2.2",
-        strokeLinejoin: "round",
-        strokeLinecap: "round",
-        className: "kz-loader-trace",
-        strokeDasharray: fill === null ? void 0 : `${fill} ${100 - fill}`
-      }
-    ),
-    state === "loading" && /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "2.6", fill: "currentColor", className: "kz-loader-node" }),
-    state === "success" && /* @__PURE__ */ jsx4("path", { d: "M8.3 12.3l2.6 2.6 4.9-5.3", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", className: "kz-loader-mark" }),
-    state === "error" && /* @__PURE__ */ jsx4("path", { d: "M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", className: "kz-loader-mark" })
-  ] });
-}
-
-// src/button/button.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var buttonVariants = tv4({
-  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
-  variants: {
-    variant: {
-      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
-      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).
-      gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110",
-      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
-      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent",
-      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
-      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest
-      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).
-      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
-    },
-    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
-    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the
-    // focus ring and the hover follow the cut, unlike a clip-path.
-    shape: { rounded: "rounded-lg", pill: "rounded-full", cut: "rounded-[10px] [corner-shape:bevel]" }
-  },
-  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
-});
-var STATUS_TEXT = { success: "text-fg-success", error: "text-fg-danger" };
-function Button({
-  asChild,
-  loading,
-  progress,
-  status,
-  announce,
-  indicator = true,
-  shimmer,
-  magnetic,
-  variant,
-  size,
-  shape,
-  className,
-  disabled,
-  children,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "button";
-  const known = loading && typeof progress === "number" && Number.isFinite(progress);
-  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;
-  const glyph = indicator && !asChild && (loading || status) ? status ?? "loading" : null;
-  const filled = variant === "primary" || variant === "gradient";
-  const button = /* @__PURE__ */ jsx5(
-    Comp,
-    {
-      type: asChild ? void 0 : "button",
-      "aria-busy": loading || void 0,
-      "data-loading": loading ? "" : void 0,
-      "data-variant": variant ?? "secondary",
-      "data-kz-status": status ?? void 0,
-      "data-kz-magnetic": magnetic ? "" : void 0,
-      disabled: asChild ? void 0 : disabled || loading,
-      "aria-disabled": asChild && (disabled || loading) ? true : void 0,
-      className: buttonVariants({
-        variant,
-        size,
-        shape,
-        className: [known && "relative isolate overflow-hidden", shimmer && "kz-sheen", className].filter(Boolean).join(" ") || void 0
-      }),
-      ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        known && /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }),
-        glyph && /* @__PURE__ */ jsx5(
-          "span",
-          {
-            "aria-hidden": true,
-            "data-slot": "indicator",
-            className: "-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0",
-            children: /* @__PURE__ */ jsx5("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsx5(LoaderGlyph, { state: glyph, value: known ? ratio : null, className: ["h-4 w-4", glyph !== "loading" && !filled && STATUS_TEXT[glyph]].filter(Boolean).join(" ") }) })
-          }
-        ),
-        children
-      ] })
-    }
-  );
-  if (announce === void 0 || asChild) return button;
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    button,
-    /* @__PURE__ */ jsx5("span", { role: "status", className: "sr-only", children: announce })
-  ] });
-}
-
 // src/field/field.tsx
-import { tv as tv5 } from "tailwind-variants";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var field2 = tv5({
+import { tv as tv3 } from "tailwind-variants";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var field2 = tv3({
   slots: {
     root: "flex flex-col gap-1.5",
     label: "text-xs font-semibold text-fg-secondary",
@@ -934,11 +787,11 @@ var field2 = tv5({
 var s = field2();
 var invalidProps = (invalid) => invalid ? { "aria-invalid": true, "data-invalid": "" } : {};
 function Input({ invalid, className, ...props }) {
-  return /* @__PURE__ */ jsx6("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
+  return /* @__PURE__ */ jsx3("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
 }
 
 // src/data-table/toolbar.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var asRange = (value) => Array.isArray(value) && value.length === 2 && (typeof value[0] !== "string" || typeof value[1] !== "string") ? [value[0], value[1]] : [null, null];
 var asList = (value) => Array.isArray(value) ? value : [];
 var number = (text) => text.trim() === "" || Number.isNaN(Number(text)) ? null : Number(text);
@@ -970,7 +823,7 @@ function DataTableFilters({ debounce = 250, children, className }) {
     const label = labels.activeFilter(column.header, text);
     return [{ id: column.id, label, onRemove: () => set(column.id, null) }];
   });
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs4(
     FilterBar,
     {
       label: labels.filters,
@@ -983,7 +836,7 @@ function DataTableFilters({ debounce = 250, children, className }) {
       children: [
         filterable.map((column) => {
           if (column.filter === "text")
-            return /* @__PURE__ */ jsx7(
+            return /* @__PURE__ */ jsx4(
               SearchField,
               {
                 label: labels.search(column.header),
@@ -999,11 +852,11 @@ function DataTableFilters({ debounce = 250, children, className }) {
               column.id
             );
           if (column.filter === "facet")
-            return /* @__PURE__ */ jsx7(FilterMenu, { label: column.header, options: optionsOf(column), value: asList(filters[column.id]), onValueChange: (value) => set(column.id, value) }, column.id);
+            return /* @__PURE__ */ jsx4(FilterMenu, { label: column.header, options: optionsOf(column), value: asList(filters[column.id]), onValueChange: (value) => set(column.id, value) }, column.id);
           const [min, max] = asRange(filters[column.id]);
           const bounds = manualFiltering ? void 0 : table.getColumn(column.id)?.getFacetedMinMaxValues();
-          return /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx4(
               Input,
               {
                 type: "number",
@@ -1015,8 +868,8 @@ function DataTableFilters({ debounce = 250, children, className }) {
                 className: "h-11 w-28"
               }
             ),
-            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "text-fg-secondary", children: "\u2013" }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "text-fg-secondary", children: "\u2013" }),
+            /* @__PURE__ */ jsx4(
               Input,
               {
                 type: "number",
@@ -1037,14 +890,14 @@ function DataTableFilters({ debounce = 250, children, className }) {
 }
 function DataTableColumnsMenu({ defaultOpen, className }) {
   const { table, columns, labels } = useDataTable();
-  return /* @__PURE__ */ jsxs7(DropdownMenu.Root, { defaultOpen, modal: false, children: [
-    /* @__PURE__ */ jsx7(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs7(Button, { variant: "outline", size: "sm", className, children: [
+  return /* @__PURE__ */ jsxs4(DropdownMenu.Root, { defaultOpen, modal: false, children: [
+    /* @__PURE__ */ jsx4(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button, { variant: "outline", size: "sm", className, children: [
       labels.columns,
-      /* @__PURE__ */ jsx7(ChevronGlyph, { className: "h-4 w-4" })
+      /* @__PURE__ */ jsx4(ChevronGlyph, { className: "h-4 w-4" })
     ] }) }),
-    /* @__PURE__ */ jsx7(DropdownMenu.Content, { align: "end", "aria-label": labels.columns, children: columns.filter((column) => column.hideable !== false).map((column) => {
+    /* @__PURE__ */ jsx4(DropdownMenu.Content, { align: "end", "aria-label": labels.columns, children: columns.filter((column) => column.hideable !== false).map((column) => {
       const instance = table.getColumn(column.id);
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx4(
         DropdownMenu.CheckboxItem,
         {
           checked: instance?.getIsVisible() ?? true,
@@ -1068,7 +921,7 @@ function DataTableExport({ filename = "export.csv", onExport, className }) {
     link.click();
     setTimeout(() => URL.revokeObjectURL(url), 0);
   };
-  return /* @__PURE__ */ jsx7(Button, { variant: "outline", size: "sm", className, onClick: run, children: labels.export });
+  return /* @__PURE__ */ jsx4(Button, { variant: "outline", size: "sm", className, onClick: run, children: labels.export });
 }
 export {
   DataTable,