@krizaka/ui 2.3.0 → 2.5.0

package/dist/data-table.js

@@ -0,0 +1,290 @@
+"use client";
+import {
+  useControllable
+} from "./chunk-EUPTXKH7.js";
+import {
+  SortGlyph
+} from "./chunk-YX6CNVJA.js";
+
+// src/data-table/data-table.tsx
+import * as React from "react";
+import { tv as tv2 } 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 s = checkbox();
+  const box = /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "aria-invalid": invalid || void 0,
+      "data-invalid": invalid ? "" : void 0,
+      className: s.root({ className: children ? "mt-0.5" : className }),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: s.indicator(), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Dash, {}) : /* @__PURE__ */ jsx(Check, {}) })
+    }
+  );
+  if (!children) return box;
+  return /* @__PURE__ */ jsxs("label", { className: s.label({ className }), children: [
+    box,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+  ] });
+}
+
+// src/data-table/data-table.tsx
+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",
+    scroller: "w-full overflow-x-auto",
+    table: "w-full border-collapse text-left text-sm text-fg",
+    caption: "px-4 pt-4 pb-2 text-left text-sm font-semibold text-fg",
+    thead: "bg-surface-2/60",
+    headRow: "border-b border-border-default",
+    th: "whitespace-nowrap px-4 py-3 text-xs font-semibold text-fg-secondary",
+    sortButton: "-mx-1.5 inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[pressed=true]:text-fg",
+    tbody: "",
+    tr: "border-b border-border-subtle transition-colors last:border-b-0 hover:bg-surface-2/50 data-[state=selected]:bg-accent-soft",
+    td: "px-4 py-3 align-middle",
+    select: "w-10",
+    message: "px-4 py-10 text-center text-sm text-fg-secondary",
+    skeleton: "h-4 w-full max-w-40 animate-pulse rounded bg-surface-3 motion-reduce:animate-none",
+    footer: "border-t border-border-default px-4 py-3"
+  },
+  variants: {
+    layout: {
+      table: {},
+      // Below 36rem of container: cards. The sortable headers stay, as a row of sort buttons above the cards.
+      auto: {
+        table: "@max-xl:block",
+        caption: "@max-xl:block",
+        thead: "@max-xl:sr-only @max-xl:bg-transparent @max-xl:has-[[data-keep]]:not-sr-only @max-xl:has-[[data-keep]]:block",
+        headRow: "@max-xl:flex @max-xl:flex-wrap @max-xl:items-center @max-xl:gap-2 @max-xl:px-3 @max-xl:py-2",
+        th: "@max-xl:sr-only @max-xl:data-[keep]:not-sr-only @max-xl:data-[keep]:block @max-xl:p-0",
+        tbody: "@max-xl:grid @max-xl:gap-3 @max-xl:p-3",
+        tr: "@max-xl:relative @max-xl:grid @max-xl:gap-1.5 @max-xl:rounded-xl @max-xl:border @max-xl:border-border-default @max-xl:bg-surface-0 @max-xl:p-4 @max-xl:last:border-b",
+        td: "@max-xl:flex @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-4 @max-xl:p-0 @max-xl:text-right @max-xl:before:shrink-0 @max-xl:before:text-xs @max-xl:before:font-semibold @max-xl:before:text-fg-secondary @max-xl:before:content-[attr(data-label)] @max-xl:data-[card=title]:order-first @max-xl:data-[card=title]:pr-8 @max-xl:data-[card=title]:text-left @max-xl:data-[card=title]:text-base @max-xl:data-[card=title]:font-semibold @max-xl:data-[card=title]:before:content-none @max-xl:data-[card=hidden]:hidden @max-xl:data-[card=message]:block @max-xl:data-[card=message]:text-center @max-xl:data-[card=message]:before:content-none",
+        select: "@max-xl:absolute @max-xl:right-3 @max-xl:top-3 @max-xl:w-auto @max-xl:before:content-none"
+      },
+      cards: {
+        table: "block",
+        caption: "block",
+        thead: "sr-only bg-transparent has-[[data-keep]]:not-sr-only has-[[data-keep]]:block",
+        headRow: "flex flex-wrap items-center gap-2 px-3 py-2",
+        th: "sr-only p-0 data-[keep]:not-sr-only data-[keep]:block",
+        tbody: "grid gap-3 p-3",
+        tr: "relative grid gap-1.5 rounded-xl border border-border-default bg-surface-0 p-4 last:border-b",
+        td: "flex items-baseline justify-between gap-4 p-0 text-right before:shrink-0 before:text-xs before:font-semibold before:text-fg-secondary before:content-[attr(data-label)] data-[card=title]:order-first data-[card=title]:pr-8 data-[card=title]:text-left data-[card=title]:text-base data-[card=title]:font-semibold data-[card=title]:before:content-none data-[card=hidden]:hidden data-[card=message]:block data-[card=message]:text-center data-[card=message]:before:content-none",
+        select: "absolute right-3 top-3 w-auto before:content-none"
+      }
+    },
+    density: {
+      comfortable: {},
+      compact: { th: "py-2", td: "py-1.5" }
+    }
+  },
+  defaultVariants: { layout: "auto", density: "comfortable" }
+});
+var dataTableLabels = {
+  selectAll: "Select all rows",
+  selectRow: (name) => `Select ${name}`,
+  loading: "Loading",
+  empty: "Nothing to show"
+};
+function compare(a, b) {
+  if (a == null || a === "") return b == null || b === "" ? 0 : 1;
+  if (b == null || b === "") return -1;
+  if (a instanceof Date || b instanceof Date) return Number(a) - Number(b);
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+var nextSort = (sort, column) => sort?.column !== column ? { column, direction: "ascending" } : sort.direction === "ascending" ? { column, direction: "descending" } : null;
+var ALIGN = { start: "text-left", center: "text-center", end: "text-right" };
+function DataTable({
+  rows,
+  columns,
+  getRowId,
+  caption,
+  showCaption,
+  sort: sortProp,
+  defaultSort = null,
+  onSortChange,
+  manualSort,
+  selectable,
+  selected: selectedProp,
+  defaultSelected = [],
+  onSelectedChange,
+  rowLabel,
+  loading,
+  loadingRows = 5,
+  error,
+  empty,
+  layout = "auto",
+  density,
+  virtualize,
+  footer,
+  labels: given,
+  className
+}) {
+  const labels = { ...dataTableLabels, ...given };
+  const s = dataTable({ layout: virtualize ? "table" : layout, density });
+  const [sort, setSort] = useControllable(sortProp, defaultSort, onSortChange);
+  const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const valueOf = (column, row) => column.value ? column.value(row) : row[column.id];
+  const sorted = React.useMemo(() => {
+    const column = sort && columns.find((c) => c.id === sort.column);
+    if (!column || manualSort) return rows;
+    const factor = sort.direction === "ascending" ? 1 : -1;
+    return [...rows].sort((a, b) => factor * compare(valueOf(column, a), valueOf(column, b)));
+  }, [rows, columns, sort, manualSort]);
+  const ids = sorted.map(getRowId);
+  const chosen = new Set(selected);
+  const allChosen = ids.length > 0 && ids.every((id) => chosen.has(id));
+  const someChosen = ids.some((id) => chosen.has(id));
+  const toggleAll = () => setSelected(allChosen ? selected.filter((id) => !ids.includes(id)) : [.../* @__PURE__ */ new Set([...selected, ...ids])]);
+  const toggle = (id) => setSelected(chosen.has(id) ? selected.filter((x) => x !== id) : [...selected, id]);
+  const span = columns.length + (selectable ? 1 : 0);
+  let windowed = sorted;
+  let before = 0;
+  let after = 0;
+  let offset = 0;
+  if (virtualize && !loading) {
+    const overscan = virtualize.overscan ?? 6;
+    const start = Math.max(0, Math.floor(scrollTop / virtualize.rowHeight) - overscan);
+    const end = Math.min(sorted.length, Math.ceil((scrollTop + virtualize.height) / virtualize.rowHeight) + overscan);
+    windowed = sorted.slice(start, end);
+    before = start * virtualize.rowHeight;
+    after = (sorted.length - end) * virtualize.rowHeight;
+    offset = start;
+  }
+  const message = (content, alert) => /* @__PURE__ */ jsx2("tr", { role: "row", className: s.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx2("td", { role: "cell", colSpan: span, "data-card": "message", className: s.td({ className: s.message() }), children: alert ? /* @__PURE__ */ jsx2("div", { role: "alert", children: content }) : content }) });
+  let body;
+  if (loading) {
+    body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-hidden": true, className: s.tr(), children: [
+      selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s.td({ className: s.select() }) }),
+      columns.map((column) => /* @__PURE__ */ jsx2("td", { role: "cell", "data-card": column.card === "title" ? "title" : column.card === "hidden" ? "hidden" : void 0, className: s.td(), children: /* @__PURE__ */ jsx2("div", { className: s.skeleton() }) }, column.id))
+    ] }, `loading-${i}`));
+  } else if (error) body = message(error, true);
+  else if (sorted.length === 0) body = message(empty ?? labels.empty);
+  else {
+    body = windowed.map((row, i) => {
+      const id = getRowId(row);
+      const isChosen = chosen.has(id);
+      return /* @__PURE__ */ jsxs2(
+        "tr",
+        {
+          role: "row",
+          "aria-rowindex": virtualize ? offset + i + 2 : void 0,
+          "data-state": isChosen ? "selected" : void 0,
+          className: s.tr(),
+          style: virtualize ? { height: virtualize.rowHeight } : void 0,
+          children: [
+            selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s.td({ className: s.select() }), children: /* @__PURE__ */ jsx2(Checkbox, { checked: isChosen, onCheckedChange: () => toggle(id), "aria-label": labels.selectRow(rowLabel ? rowLabel(row) : id) }) }),
+            columns.map((column) => /* @__PURE__ */ jsx2(
+              "td",
+              {
+                role: "cell",
+                "data-label": column.header,
+                "data-card": column.card === "title" ? "title" : column.card === "hidden" ? "hidden" : void 0,
+                className: s.td({ className: ALIGN[column.align ?? "start"] }),
+                children: column.cell ? column.cell(row) : String(valueOf(column, row) ?? "")
+              },
+              column.id
+            ))
+          ]
+        },
+        id
+      );
+    });
+  }
+  const table = /* @__PURE__ */ jsxs2(
+    "table",
+    {
+      role: "table",
+      "aria-busy": loading || void 0,
+      "aria-rowcount": virtualize ? sorted.length + 1 : void 0,
+      className: s.table(),
+      children: [
+        /* @__PURE__ */ jsxs2("caption", { className: showCaption ? s.caption() : "sr-only", children: [
+          caption,
+          loading ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: ` \u2014 ${labels.loading}` }) : null
+        ] }),
+        /* @__PURE__ */ jsx2("thead", { role: "rowgroup", className: s.thead({ className: virtualize ? "sticky top-0 z-10 bg-surface-2" : void 0 }), children: /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-rowindex": virtualize ? 1 : void 0, className: s.headRow(), children: [
+          selectable && /* @__PURE__ */ jsx2("th", { role: "columnheader", scope: "col", "data-keep": "", className: s.th({ className: s.select() }), children: /* @__PURE__ */ jsx2(
+            Checkbox,
+            {
+              checked: allChosen ? true : someChosen ? "indeterminate" : false,
+              onCheckedChange: toggleAll,
+              disabled: loading || ids.length === 0,
+              "aria-label": labels.selectAll
+            }
+          ) }),
+          columns.map((column) => {
+            const direction = sort?.column === column.id ? sort.direction : void 0;
+            return /* @__PURE__ */ jsx2(
+              "th",
+              {
+                role: "columnheader",
+                scope: "col",
+                "aria-sort": column.sortable ? direction ?? "none" : void 0,
+                "data-keep": column.sortable ? "" : void 0,
+                className: s.th({ className: ALIGN[column.align ?? "start"] }),
+                style: column.width ? { width: column.width } : void 0,
+                children: column.sortable ? /* @__PURE__ */ jsxs2("button", { type: "button", "aria-pressed": Boolean(direction), className: s.sortButton(), onClick: () => setSort(nextSort(sort, column.id)), children: [
+                  column.header,
+                  /* @__PURE__ */ jsx2(SortGlyph, { direction, className: "h-3.5 w-3.5" })
+                ] }) : column.headerHidden ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: column.header }) : column.header
+              },
+              column.id
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxs2("tbody", { role: "rowgroup", className: s.tbody(), children: [
+          before > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: before }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) }),
+          body,
+          after > 0 && /* @__PURE__ */ jsx2("tr", { "aria-hidden": true, style: { height: after }, children: /* @__PURE__ */ jsx2("td", { colSpan: span }) })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), children: [
+    virtualize ? (
+      // A scrolling region the keyboard can reach: Tab lands on it, the arrows scroll it.
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          tabIndex: 0,
+          role: "region",
+          "aria-label": caption,
+          className: s.scroller({ className: "overflow-y-auto focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring" }),
+          style: { height: virtualize.height },
+          onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+          children: table
+        }
+      )
+    ) : /* @__PURE__ */ jsx2("div", { className: s.scroller(), children: table }),
+    footer ? /* @__PURE__ */ jsx2("div", { className: s.footer(), children: footer }) : null
+  ] });
+}
+export {
+  DataTable,
+  dataTable,
+  dataTableLabels
+};
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data-table/data-table.tsx","../src/checkbox/checkbox.tsx"],"sourcesContent":["// Client (sort and selection state, the windowing of long lists). A real `<table>` with a caption and column headers\n// (`scope=\"col\"`, `aria-sort` on the sorted one) that turns into a stack of cards in a narrow container — one DOM, the\n// roles written out so that the change of `display` never loses the table's semantics. Selection through\n// `@krizaka/ui/checkbox`; loading, empty and error states in the body; optional windowing for thousands of rows.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Checkbox } from \"../checkbox\";\nimport { SortGlyph } from \"../glyphs\";\nimport { useControllable } from \"../media\";\n\nexport const dataTable = tv({\n  slots: {\n    root: \"@container w-full overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n    scroller: \"w-full overflow-x-auto\",\n    table: \"w-full border-collapse text-left text-sm text-fg\",\n    caption: \"px-4 pt-4 pb-2 text-left text-sm font-semibold text-fg\",\n    thead: \"bg-surface-2/60\",\n    headRow: \"border-b border-border-default\",\n    th: \"whitespace-nowrap px-4 py-3 text-xs font-semibold text-fg-secondary\",\n    sortButton:\n      \"-mx-1.5 inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[pressed=true]:text-fg\",\n    tbody: \"\",\n    tr: \"border-b border-border-subtle transition-colors last:border-b-0 hover:bg-surface-2/50 data-[state=selected]:bg-accent-soft\",\n    td: \"px-4 py-3 align-middle\",\n    select: \"w-10\",\n    message: \"px-4 py-10 text-center text-sm text-fg-secondary\",\n    skeleton: \"h-4 w-full max-w-40 animate-pulse rounded bg-surface-3 motion-reduce:animate-none\",\n    footer: \"border-t border-border-default px-4 py-3\",\n  },\n  variants: {\n    layout: {\n      table: {},\n      // Below 36rem of container: cards. The sortable headers stay, as a row of sort buttons above the cards.\n      auto: {\n        table: \"@max-xl:block\",\n        caption: \"@max-xl:block\",\n        thead: \"@max-xl:sr-only @max-xl:bg-transparent @max-xl:has-[[data-keep]]:not-sr-only @max-xl:has-[[data-keep]]:block\",\n        headRow: \"@max-xl:flex @max-xl:flex-wrap @max-xl:items-center @max-xl:gap-2 @max-xl:px-3 @max-xl:py-2\",\n        th: \"@max-xl:sr-only @max-xl:data-[keep]:not-sr-only @max-xl:data-[keep]:block @max-xl:p-0\",\n        tbody: \"@max-xl:grid @max-xl:gap-3 @max-xl:p-3\",\n        tr: \"@max-xl:relative @max-xl:grid @max-xl:gap-1.5 @max-xl:rounded-xl @max-xl:border @max-xl:border-border-default @max-xl:bg-surface-0 @max-xl:p-4 @max-xl:last:border-b\",\n        td:\n          \"@max-xl:flex @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-4 @max-xl:p-0 @max-xl:text-right \" +\n          \"@max-xl:before:shrink-0 @max-xl:before:text-xs @max-xl:before:font-semibold @max-xl:before:text-fg-secondary @max-xl:before:content-[attr(data-label)] \" +\n          \"@max-xl:data-[card=title]:order-first @max-xl:data-[card=title]:pr-8 @max-xl:data-[card=title]:text-left @max-xl:data-[card=title]:text-base @max-xl:data-[card=title]:font-semibold @max-xl:data-[card=title]:before:content-none \" +\n          \"@max-xl:data-[card=hidden]:hidden @max-xl:data-[card=message]:block @max-xl:data-[card=message]:text-center @max-xl:data-[card=message]:before:content-none\",\n        select: \"@max-xl:absolute @max-xl:right-3 @max-xl:top-3 @max-xl:w-auto @max-xl:before:content-none\",\n      },\n      cards: {\n        table: \"block\",\n        caption: \"block\",\n        thead: \"sr-only bg-transparent has-[[data-keep]]:not-sr-only has-[[data-keep]]:block\",\n        headRow: \"flex flex-wrap items-center gap-2 px-3 py-2\",\n        th: \"sr-only p-0 data-[keep]:not-sr-only data-[keep]:block\",\n        tbody: \"grid gap-3 p-3\",\n        tr: \"relative grid gap-1.5 rounded-xl border border-border-default bg-surface-0 p-4 last:border-b\",\n        td:\n          \"flex items-baseline justify-between gap-4 p-0 text-right before:shrink-0 before:text-xs before:font-semibold before:text-fg-secondary before:content-[attr(data-label)] \" +\n          \"data-[card=title]:order-first data-[card=title]:pr-8 data-[card=title]:text-left data-[card=title]:text-base data-[card=title]:font-semibold data-[card=title]:before:content-none \" +\n          \"data-[card=hidden]:hidden data-[card=message]:block data-[card=message]:text-center data-[card=message]:before:content-none\",\n        select: \"absolute right-3 top-3 w-auto before:content-none\",\n      },\n    },\n    density: {\n      comfortable: {},\n      compact: { th: \"py-2\", td: \"py-1.5\" },\n    },\n  },\n  defaultVariants: { layout: \"auto\", density: \"comfortable\" },\n});\n\nexport type SortDirection = \"ascending\" | \"descending\";\nexport type DataTableSort = { column: string; direction: SortDirection } | null;\ntype Sortable = string | number | boolean | Date | null | undefined;\n\nexport type DataTableColumn<T> = {\n  /** A key of the column (and of the row, for the default cell and sort). */\n  id: string;\n  /** The column's name, passed translated: the header, and the label of the value in a card. */\n  header: string;\n  /** What a cell shows. Default: `value(row)`, or `row[id]`. */\n  cell?: (row: T) => React.ReactNode;\n  /** The value sorted on (and shown by default): a string, a number, a date. Default `row[id]`. */\n  value?: (row: T) => Sortable;\n  /** The header becomes a sort button (ascending → descending → none). */\n  sortable?: boolean;\n  /** Text alignment: `end` for amounts and counts. */\n  align?: \"start\" | \"center\" | \"end\";\n  /** A CSS width (`\"8rem\"`, `\"30%\"`). */\n  width?: string;\n  /** In a card: `title` (the heading of the card), `label` (default: \"Header  value\"), `hidden`. */\n  card?: \"title\" | \"label\" | \"hidden\";\n  /** Hides the header visually (an actions column), keeping it for screen readers. */\n  headerHidden?: boolean;\n};\n\nexport type DataTableLabels = {\n  /** The checkbox of the header (\"Select all rows\"). */\n  selectAll: string;\n  /** The checkbox of a row: `(name) => \"Select \" + name`, the name from `rowLabel`. */\n  selectRow: (name: string) => string;\n  /** Read while the rows load (\"Loading\"). */\n  loading: string;\n  /** The default empty state (\"Nothing to show\"). */\n  empty: string;\n};\n\nexport const dataTableLabels: DataTableLabels = {\n  selectAll: \"Select all rows\",\n  selectRow: (name) => `Select ${name}`,\n  loading: \"Loading\",\n  empty: \"Nothing to show\",\n};\n\nexport type DataTableProps<T> = {\n  /** The rows, in the order the server gave (sorted here unless `manualSort`). */\n  rows: readonly T[];\n  /** The columns, in order. */\n  columns: readonly DataTableColumn<T>[];\n  /** A stable id per row: the React key and the selection's value. */\n  getRowId: (row: T) => string;\n  /** What the table lists (\"Jobs\", \"Your videos\"): its `<caption>`, hidden unless `showCaption`. */\n  caption: string;\n  /** Shows the caption above the table. */\n  showCaption?: boolean;\n  /** The sorted column (controlled), `null` for none. */\n  sort?: DataTableSort;\n  /** The sort at first, uncontrolled. */\n  defaultSort?: DataTableSort;\n  /** Called when a header asks for a new sort. */\n  onSortChange?: (sort: DataTableSort) => void;\n  /** The server sorts (`onSortChange` fetches): the rows are shown as given. */\n  manualSort?: boolean;\n  /** Adds a checkbox per row and one in the header. */\n  selectable?: boolean;\n  /** The ids selected (controlled). */\n  selected?: readonly string[];\n  /** The ids selected at first, uncontrolled. */\n  defaultSelected?: readonly string[];\n  /** Called with the new selection. */\n  onSelectedChange?: (selected: string[]) => void;\n  /** The name of a row in its checkbox's label (default: its id). */\n  rowLabel?: (row: T) => string;\n  /** Rows are loading: skeleton rows (`loadingRows` of them) and `aria-busy`. */\n  loading?: boolean;\n  /** How many skeleton rows while loading. Default 5. */\n  loadingRows?: number;\n  /** A failure, shown in place of the rows (an `Alert`, a retry button); announced. */\n  error?: React.ReactNode;\n  /** Shown when there is no row (an `EmptyState`). Default: `labels.empty`. */\n  empty?: React.ReactNode;\n  /** `auto` (default): a table, cards below 36rem of container width. `table` or `cards` to force one. */\n  layout?: \"auto\" | \"table\" | \"cards\";\n  /** comfortable (default) · compact. */\n  density?: \"comfortable\" | \"compact\";\n  /** Renders only the rows in view (fixed `rowHeight`, a scrolling body of `height` px). Forces the table layout. */\n  virtualize?: { rowHeight: number; height: number; overscan?: number };\n  /** Under the table: a `Pagination`, a total. */\n  footer?: React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<DataTableLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nfunction compare(a: Sortable, b: Sortable): number {\n  if (a == null || a === \"\") return b == null || b === \"\" ? 0 : 1;\n  if (b == null || b === \"\") return -1;\n  if (a instanceof Date || b instanceof Date) return Number(a) - Number(b);\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: \"base\" });\n}\n\nconst nextSort = (sort: DataTableSort, column: string): DataTableSort =>\n  sort?.column !== column ? { column, direction: \"ascending\" } : sort.direction === \"ascending\" ? { column, direction: \"descending\" } : null;\n\nconst ALIGN = { start: \"text-left\", center: \"text-center\", end: \"text-right\" } as const;\n\n/** A table of records: sort, selection, loading / empty / error, cards on a phone, windowing for long lists. */\nexport function DataTable<T>({\n  rows,\n  columns,\n  getRowId,\n  caption,\n  showCaption,\n  sort: sortProp,\n  defaultSort = null,\n  onSortChange,\n  manualSort,\n  selectable,\n  selected: selectedProp,\n  defaultSelected = [],\n  onSelectedChange,\n  rowLabel,\n  loading,\n  loadingRows = 5,\n  error,\n  empty,\n  layout = \"auto\",\n  density,\n  virtualize,\n  footer,\n  labels: given,\n  className,\n}: DataTableProps<T>) {\n  const labels = { ...dataTableLabels, ...given };\n  const s = dataTable({ layout: virtualize ? \"table\" : layout, density });\n  const [sort, setSort] = useControllable<DataTableSort>(sortProp, defaultSort, onSortChange);\n  const [selected, setSelected] = useControllable<readonly string[]>(selectedProp, defaultSelected, onSelectedChange as (next: readonly string[]) => void);\n  const [scrollTop, setScrollTop] = React.useState(0);\n\n  const valueOf = (column: DataTableColumn<T>, row: T): Sortable =>\n    column.value ? column.value(row) : ((row as Record<string, unknown>)[column.id] as Sortable);\n\n  const sorted = React.useMemo(() => {\n    const column = sort && columns.find((c) => c.id === sort.column);\n    if (!column || manualSort) return rows;\n    const factor = sort.direction === \"ascending\" ? 1 : -1;\n    return [...rows].sort((a, b) => factor * compare(valueOf(column, a), valueOf(column, b)));\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- valueOf only reads `column`\n  }, [rows, columns, sort, manualSort]);\n\n  const ids = sorted.map(getRowId);\n  const chosen = new Set(selected);\n  const allChosen = ids.length > 0 && ids.every((id) => chosen.has(id));\n  const someChosen = ids.some((id) => chosen.has(id));\n  const toggleAll = () => setSelected(allChosen ? selected.filter((id) => !ids.includes(id)) : [...new Set([...selected, ...ids])]);\n  const toggle = (id: string) => setSelected(chosen.has(id) ? selected.filter((x) => x !== id) : [...selected, id]);\n\n  const span = columns.length + (selectable ? 1 : 0);\n  let windowed = sorted;\n  let before = 0;\n  let after = 0;\n  let offset = 0;\n  if (virtualize && !loading) {\n    const overscan = virtualize.overscan ?? 6;\n    const start = Math.max(0, Math.floor(scrollTop / virtualize.rowHeight) - overscan);\n    const end = Math.min(sorted.length, Math.ceil((scrollTop + virtualize.height) / virtualize.rowHeight) + overscan);\n    windowed = sorted.slice(start, end);\n    before = start * virtualize.rowHeight;\n    after = (sorted.length - end) * virtualize.rowHeight;\n    offset = start;\n  }\n\n  const message = (content: React.ReactNode, alert?: boolean) => (\n    <tr role=\"row\" className={s.tr({ className: \"hover:bg-transparent\" })}>\n      <td role=\"cell\" colSpan={span} data-card=\"message\" className={s.td({ className: s.message() })}>\n        {alert ? <div role=\"alert\">{content}</div> : content}\n      </td>\n    </tr>\n  );\n\n  let body: React.ReactNode;\n  if (loading) {\n    body = Array.from({ length: loadingRows }, (_, i) => (\n      <tr role=\"row\" key={`loading-${i}`} aria-hidden className={s.tr()}>\n        {selectable && <td role=\"cell\" className={s.td({ className: s.select() })} />}\n        {columns.map((column) => (\n          <td role=\"cell\" key={column.id} data-card={column.card === \"title\" ? \"title\" : column.card === \"hidden\" ? \"hidden\" : undefined} className={s.td()}>\n            <div className={s.skeleton()} />\n          </td>\n        ))}\n      </tr>\n    ));\n  } else if (error) body = message(error, true);\n  else if (sorted.length === 0) body = message(empty ?? labels.empty);\n  else {\n    body = windowed.map((row, i) => {\n      const id = getRowId(row);\n      const isChosen = chosen.has(id);\n      return (\n        <tr\n          role=\"row\"\n          key={id}\n          aria-rowindex={virtualize ? offset + i + 2 : undefined}\n          data-state={isChosen ? \"selected\" : undefined}\n          className={s.tr()}\n          style={virtualize ? { height: virtualize.rowHeight } : undefined}\n        >\n          {selectable && (\n            <td role=\"cell\" className={s.td({ className: s.select() })}>\n              <Checkbox checked={isChosen} onCheckedChange={() => toggle(id)} aria-label={labels.selectRow(rowLabel ? rowLabel(row) : id)} />\n            </td>\n          )}\n          {columns.map((column) => (\n            <td\n              role=\"cell\"\n              key={column.id}\n              data-label={column.header}\n              data-card={column.card === \"title\" ? \"title\" : column.card === \"hidden\" ? \"hidden\" : undefined}\n              className={s.td({ className: ALIGN[column.align ?? \"start\"] })}\n            >\n              {column.cell ? column.cell(row) : String(valueOf(column, row) ?? \"\")}\n            </td>\n          ))}\n        </tr>\n      );\n    });\n  }\n\n  const table = (\n    <table\n      role=\"table\"\n      aria-busy={loading || undefined}\n      aria-rowcount={virtualize ? sorted.length + 1 : undefined}\n      className={s.table()}\n    >\n      <caption className={showCaption ? s.caption() : \"sr-only\"}>\n        {caption}\n        {loading ? <span className=\"sr-only\">{` — ${labels.loading}`}</span> : null}\n      </caption>\n      <thead role=\"rowgroup\" className={s.thead({ className: virtualize ? \"sticky top-0 z-10 bg-surface-2\" : undefined })}>\n        <tr role=\"row\" aria-rowindex={virtualize ? 1 : undefined} className={s.headRow()}>\n          {selectable && (\n            <th role=\"columnheader\" scope=\"col\" data-keep=\"\" className={s.th({ className: s.select() })}>\n              <Checkbox\n                checked={allChosen ? true : someChosen ? \"indeterminate\" : false}\n                onCheckedChange={toggleAll}\n                disabled={loading || ids.length === 0}\n                aria-label={labels.selectAll}\n              />\n            </th>\n          )}\n          {columns.map((column) => {\n            const direction = sort?.column === column.id ? sort.direction : undefined;\n            return (\n              <th\n                role=\"columnheader\"\n                scope=\"col\"\n                key={column.id}\n                aria-sort={column.sortable ? (direction ?? \"none\") : undefined}\n                data-keep={column.sortable ? \"\" : undefined}\n                className={s.th({ className: ALIGN[column.align ?? \"start\"] })}\n                style={column.width ? { width: column.width } : undefined}\n              >\n                {column.sortable ? (\n                  <button type=\"button\" aria-pressed={Boolean(direction)} className={s.sortButton()} onClick={() => setSort(nextSort(sort, column.id))}>\n                    {column.header}\n                    <SortGlyph direction={direction} className=\"h-3.5 w-3.5\" />\n                  </button>\n                ) : column.headerHidden ? (\n                  <span className=\"sr-only\">{column.header}</span>\n                ) : (\n                  column.header\n                )}\n              </th>\n            );\n          })}\n        </tr>\n      </thead>\n      <tbody role=\"rowgroup\" className={s.tbody()}>\n        {before > 0 && (\n          <tr aria-hidden style={{ height: before }}>\n            <td colSpan={span} />\n          </tr>\n        )}\n        {body}\n        {after > 0 && (\n          <tr aria-hidden style={{ height: after }}>\n            <td colSpan={span} />\n          </tr>\n        )}\n      </tbody>\n    </table>\n  );\n\n  return (\n    <div className={s.root({ className })}>\n      {virtualize ? (\n        // A scrolling region the keyboard can reach: Tab lands on it, the arrows scroll it.\n        <div\n          tabIndex={0}\n          role=\"region\"\n          aria-label={caption}\n          className={s.scroller({ className: \"overflow-y-auto focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\" })}\n          style={{ height: virtualize.height }}\n          onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}\n        >\n          {table}\n        </div>\n      ) : (\n        <div className={s.scroller()}>{table}</div>\n      )}\n      {footer ? <div className={s.footer()}>{footer}</div> : null}\n    </div>\n  );\n}\n","// Client. Radix Checkbox: role=\"checkbox\", aria-checked (true · false · mixed), Space toggles, a hidden input inside a\n// form. It sits in a `Field` like the other controls: `<Field.Label htmlFor={id}>`, `invalid`, aria-describedby.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const checkbox = tv({\n  slots: {\n    root:\n      \"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 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent \" +\n      \"aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    indicator: \"flex items-center justify-center\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60\",\n  },\n});\n\nfunction Check() {\n  return (\n    <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>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction Dash() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, \"children\"> & {\n  /** Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n  /** The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n   * `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`. */\nexport function Checkbox({ invalid, className, children, ...props }: CheckboxProps) {\n  const s = checkbox();\n  const box = (\n    <CheckboxPrimitive.Root\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className: children ? \"mt-0.5\" : className })}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={s.indicator()}>\n        {props.checked === \"indeterminate\" ? <Dash /> : <Check />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n  if (!children) return box;\n  return (\n    <label className={s.label({ className })}>\n      {box}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n"],"mappings":"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","names":["tv","jsx","jsxs","tv"]}

package/dist/date-picker.d.ts

@@ -0,0 +1,288 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+/** A calendar date, `YYYY-MM-DD`. */
+type IsoDate = string;
+/** A range of calendar dates; `end` is `null` while the second date is not chosen. */
+type DateRange = {
+    start: IsoDate;
+    end: IsoDate | null;
+};
+declare const calendar: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            cell?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            cell?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    title: string;
+    nav: string;
+    grid: string;
+    weekday: string;
+    cell: string;
+    day: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            cell?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    title: string;
+    nav: string;
+    grid: string;
+    weekday: string;
+    cell: string;
+    day: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    header: string;
+    title: string;
+    nav: string;
+    grid: string;
+    weekday: string;
+    cell: string;
+    day: string;
+}>>;
+/** A local `Date` at midnight for an ISO date (for formatting). */
+declare const toLocalDate: (iso: IsoDate) => Date;
+/** The ISO date of a local `Date`. */
+declare const toIsoDate: (date: Date) => IsoDate;
+declare const addDays: (iso: IsoDate, days: number) => string;
+declare const addMonths: (iso: IsoDate, months: number) => string;
+/** The first day of the week for a locale (0 = Sunday … 6 = Saturday), from `Intl.Locale` week info; Monday otherwise. */
+declare function weekStartOf(locale: string): number;
+type CalendarLabels = {
+    /** The previous-month button ("Previous month"). */
+    previousMonth: string;
+    /** The next-month button ("Next month"). */
+    nextMonth: string;
+};
+declare const calendarLabels: CalendarLabels;
+type CalendarProps = {
+    /** The BCP 47 locale of the month and day names (`"en-US"`, `"fr-CA"`): always explicit. */
+    locale: string;
+    /** The chosen date (one-date mode). */
+    value?: IsoDate | null;
+    /** The chosen range (range mode): its ends are marked, the days between tinted. */
+    range?: DateRange | null;
+    /** Called with the day picked. */
+    onSelect?: (date: IsoDate) => void;
+    /** The month shown, any day of it (controlled). */
+    month?: IsoDate;
+    /** The month shown at first. Default: the value's, or today's. */
+    defaultMonth?: IsoDate;
+    /** Called when the month shown changes. */
+    onMonthChange?: (month: IsoDate) => void;
+    /** The earliest date that can be picked. */
+    min?: IsoDate;
+    /** The latest date that can be picked. */
+    max?: IsoDate;
+    /** Refuses some dates (`(d) => isWeekend(d)`). */
+    isDateDisabled?: (date: IsoDate) => boolean;
+    /** The first day of the week, 0 = Sunday. Default: the locale's. */
+    weekStartsOn?: number;
+    /** Today (marked): inject it for a stable server render or a test. Default: the device's date. */
+    today?: IsoDate;
+    /** Moves the focus to the active day when it mounts (inside a popover). */
+    autoFocus?: boolean;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<CalendarLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A month grid to pick a date or the ends of a range, with the full keyboard of the APG date picker. */
+declare function Calendar({ locale, value, range, onSelect, month: monthProp, defaultMonth, onMonthChange, min, max, isDateDisabled, weekStartsOn, today: todayProp, autoFocus, labels: given, className, }: CalendarProps): React.JSX.Element;
+
+declare const datePicker: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            layout?: tailwind_variants.ClassValue;
+            presets?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            clear?: tailwind_variants.ClassValue;
+            preset?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            layout?: tailwind_variants.ClassValue;
+            presets?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            clear?: tailwind_variants.ClassValue;
+            preset?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    row: string;
+    trigger: string;
+    icon: string;
+    clear: string;
+    content: string;
+    layout: string;
+    presets: string;
+    preset: string;
+    hint: string;
+    error: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            layout?: tailwind_variants.ClassValue;
+            presets?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            clear?: tailwind_variants.ClassValue;
+            preset?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    row: string;
+    trigger: string;
+    icon: string;
+    clear: string;
+    content: string;
+    layout: string;
+    presets: string;
+    preset: string;
+    hint: string;
+    error: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    label: string;
+    row: string;
+    trigger: string;
+    icon: string;
+    clear: string;
+    content: string;
+    layout: string;
+    presets: string;
+    preset: string;
+    hint: string;
+    error: string;
+}>>;
+type DatePickerLabels = CalendarLabels & {
+    /** The clear button ("Clear date"). */
+    clear: string;
+};
+declare const datePickerLabels: DatePickerLabels;
+type Shared = Pick<CalendarProps, "locale" | "min" | "max" | "isDateDisabled" | "weekStartsOn" | "today"> & {
+    /** The visible label, passed translated (also the button's accessible name, with the value). */
+    label: string;
+    /** Shown while nothing is chosen ("Pick a date"), passed translated. */
+    placeholder?: string;
+    /** `short` · `medium` (default) · `long`: how the button writes the date. */
+    format?: "short" | "medium" | "long";
+    /** Adds a button that empties the value. */
+    clearable?: boolean;
+    /** A help text under the field. */
+    hint?: string;
+    /** An error under the field: marks it invalid and is read with it. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** The name of a hidden input holding the ISO value, for a plain `<form>` post. */
+    name?: string;
+    /** Opens the calendar at first (a story, a test). */
+    defaultOpen?: boolean;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<DatePickerLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+type DatePickerProps = Shared & {
+    /** The chosen date, ISO (controlled); `null` for none. */
+    value?: IsoDate | null;
+    /** The chosen date at first, uncontrolled. */
+    defaultValue?: IsoDate | null;
+    /** Called with the date picked, or `null` when cleared. */
+    onValueChange?: (value: IsoDate | null) => void;
+};
+/** A date field: a button showing the date in the locale's format, a calendar in a popover, an ISO value. */
+declare function DatePicker({ value: valueProp, defaultValue, onValueChange, defaultOpen, ...shared }: DatePickerProps): React.JSX.Element;
+type DateRangePreset = {
+    /** Its name, passed translated ("Last 7 days"). */
+    label: string;
+    /** The first day, ISO. */
+    start: IsoDate;
+    /** The last day, ISO. */
+    end: IsoDate;
+};
+type DateRangePickerProps = Shared & {
+    /** The chosen range (controlled); `null` for none. `end` is never `null` in a committed value. */
+    value?: {
+        start: IsoDate;
+        end: IsoDate;
+    } | null;
+    /** The range at first, uncontrolled. */
+    defaultValue?: {
+        start: IsoDate;
+        end: IsoDate;
+    } | null;
+    /** Called once both ends are chosen (or with `null` when cleared). */
+    onValueChange?: (value: {
+        start: IsoDate;
+        end: IsoDate;
+    } | null) => void;
+    /** Ranges one click away ("Last 7 days", "This month"), beside the calendar. */
+    presets?: readonly DateRangePreset[];
+};
+/** A period field: two clicks on one calendar (the days between tinted as you hover), optional presets. */
+declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, presets, defaultOpen, ...shared }: DateRangePickerProps): React.JSX.Element;
+
+export { Calendar, type CalendarLabels, type CalendarProps, DatePicker, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type IsoDate, addDays, addMonths, calendar, calendarLabels, datePicker, datePickerLabels, toIsoDate, toLocalDate, weekStartOf };