@eifi1/ui-kit 0.7.1 → 0.8.0

package/dist/components/copy-button.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonVariant, IconButtonSize } from './ui.js';
+import { TooltipSide } from './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+
+/** The words a copy button says. The visible three are short on purpose (they
+ *  replace the button's own text in the `label` variant); the two announcements
+ *  are the sentences a screen reader hears, since the button's focus never moves. */
+interface CopyButtonLabels {
+    copy: string;
+    copied: string;
+    failed: string;
+    copiedAnnouncement: string;
+    failedAnnouncement: string;
+}
+declare const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels;
+interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    /** What to copy. A function is read at click time — for a value that is expensive
+     *  to build (a CSV of the table) or that changes under the button. */
+    text: string | (() => string);
+    /** `icon` (default): a square icon button whose tooltip states the result.
+     *  `label`: a text button whose words change to the result. */
+    variant?: "icon" | "label";
+    /** The idle accessible name — and, in the `label` variant, the visible text:
+     *  "Copy IBAN" says WHAT is copied, which a row of three copy icons needs. Default
+     *  `copyButton.copy`. */
+    label?: string;
+    /** The button's own look. Default: `ghost` for the icon, `secondary` for the label. */
+    buttonVariant?: ButtonVariant;
+    /** Icon variant only. */
+    size?: IconButtonSize;
+    /** Icon variant only: where the result tooltip opens. */
+    tooltipSide?: TooltipSide;
+    /** Pass through to the tooltip — needed inside a scroll container (see Tooltip). */
+    tooltipPortal?: boolean;
+    /** ms until the button returns to idle. Default 2000. */
+    resetAfter?: number;
+    /** Called with the real outcome once the copy settles. */
+    onCopied?: (ok: boolean) => void;
+    labels?: Partial<CopyButtonLabels>;
+}
+/**
+ * A button that copies a value and tells the truth about whether it did.
+ *
+ * keksdose asked for it after two of its own copy buttons said "Copied" on a build
+ * where the copy had failed (no Clipboard API over plain http). This one takes its
+ * state from {@link useCopyToClipboard}, which reads the result, and has a `failed`
+ * state that looks and sounds different from success.
+ *
+ * The result is spoken through {@link useAnnounce}: activating the button moves no
+ * focus, so without a live region a screen-reader user hears nothing at all. A
+ * failure goes through an ASSERTIVE region and a success through a polite one — the
+ * failure is the news that changes what they do next.
+ *
+ * The icon variant keeps the SAME accessible name in every state. A button renaming
+ * itself under the focus is announced inconsistently across readers; the live region
+ * is the channel that is actually heard.
+ */
+declare function CopyButton({ text, variant, label, buttonVariant, size, tooltipSide, tooltipPortal, resetAfter, onCopied, labels, className, disabled, ...rest }: CopyButtonProps): react.JSX.Element;
+
+export { CopyButton, type CopyButtonLabels, type CopyButtonProps, DEFAULT_COPY_BUTTON_LABELS };

package/dist/components/copy-button.js

@@ -0,0 +1,95 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { useAnnounce } from "../hooks/use-announce.js";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
+import { Button, IconButton } from "./ui.js";
+import { Tooltip } from "./tooltip.js";
+const DEFAULT_COPY_BUTTON_LABELS = {
+  copy: "Copy",
+  copied: "Copied",
+  failed: "Couldn\u2019t copy",
+  copiedAnnouncement: "Copied to clipboard",
+  failedAnnouncement: "Couldn\u2019t copy to the clipboard"
+};
+const ICONS = { idle: Copy, copied: Check, failed: X };
+function CopyButton({
+  text,
+  variant = "icon",
+  label,
+  buttonVariant,
+  size = "sm",
+  tooltipSide = "top",
+  tooltipPortal = false,
+  resetAfter = 2e3,
+  onCopied,
+  labels,
+  className,
+  disabled,
+  ...rest
+}) {
+  const words = useKitLabels("copyButton", DEFAULT_COPY_BUTTON_LABELS, labels);
+  const { state, copy } = useCopyToClipboard({ resetAfter });
+  const polite = useAnnounce();
+  const assertive = useAnnounce({ politeness: "assertive" });
+  const idleText = label ?? words.copy;
+  const stateText = state === "copied" ? words.copied : state === "failed" ? words.failed : idleText;
+  const Icon = ICONS[state];
+  const iconTone = state === "copied" ? "text-[var(--success)]" : state === "failed" ? "text-[var(--danger)]" : void 0;
+  const onClick = async () => {
+    const ok = await copy(typeof text === "function" ? text() : text);
+    if (ok) polite.announce(words.copiedAnnouncement);
+    else assertive.announce(words.failedAnnouncement);
+    onCopied?.(ok);
+  };
+  const regions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ...polite.regionProps }),
+    /* @__PURE__ */ jsx("span", { ...assertive.regionProps })
+  ] });
+  if (variant === "label") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          ...rest,
+          disabled,
+          variant: buttonVariant ?? "secondary",
+          "data-state": state,
+          onClick,
+          className,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: cn("size-4 shrink-0", iconTone) }),
+            stateText
+          ]
+        }
+      ),
+      regions
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { label: stateText, side: tooltipSide, portal: tooltipPortal, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        type: "button",
+        ...rest,
+        disabled,
+        "aria-label": idleText,
+        variant: buttonVariant ?? "ghost",
+        size,
+        "data-state": state,
+        onClick,
+        className: cn(iconTone, className),
+        children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true })
+      }
+    ) }),
+    regions
+  ] });
+}
+export {
+  CopyButton,
+  DEFAULT_COPY_BUTTON_LABELS
+};
+//# sourceMappingURL=copy-button.js.map

package/dist/components/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport { Check, Copy, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useCopyToClipboard } from \"../hooks/use-copy-to-clipboard\";\nimport type { CopyState } from \"../hooks/use-copy-to-clipboard\";\nimport { Button, IconButton } from \"./ui\";\nimport type { ButtonVariant, IconButtonSize } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport type { TooltipSide } from \"./tooltip\";\n\n/** The words a copy button says. The visible three are short on purpose (they\n *  replace the button's own text in the `label` variant); the two announcements\n *  are the sentences a screen reader hears, since the button's focus never moves. */\nexport interface CopyButtonLabels {\n  copy: string;\n  copied: string;\n  failed: string;\n  copiedAnnouncement: string;\n  failedAnnouncement: string;\n}\n\nexport const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels = {\n  copy: \"Copy\",\n  copied: \"Copied\",\n  failed: \"Couldn’t copy\",\n  copiedAnnouncement: \"Copied to clipboard\",\n  failedAnnouncement: \"Couldn’t copy to the clipboard\",\n};\n\nexport interface CopyButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"onClick\"> {\n  /** What to copy. A function is read at click time — for a value that is expensive\n   *  to build (a CSV of the table) or that changes under the button. */\n  text: string | (() => string);\n  /** `icon` (default): a square icon button whose tooltip states the result.\n   *  `label`: a text button whose words change to the result. */\n  variant?: \"icon\" | \"label\";\n  /** The idle accessible name — and, in the `label` variant, the visible text:\n   *  \"Copy IBAN\" says WHAT is copied, which a row of three copy icons needs. Default\n   *  `copyButton.copy`. */\n  label?: string;\n  /** The button's own look. Default: `ghost` for the icon, `secondary` for the label. */\n  buttonVariant?: ButtonVariant;\n  /** Icon variant only. */\n  size?: IconButtonSize;\n  /** Icon variant only: where the result tooltip opens. */\n  tooltipSide?: TooltipSide;\n  /** Pass through to the tooltip — needed inside a scroll container (see Tooltip). */\n  tooltipPortal?: boolean;\n  /** ms until the button returns to idle. Default 2000. */\n  resetAfter?: number;\n  /** Called with the real outcome once the copy settles. */\n  onCopied?: (ok: boolean) => void;\n  labels?: Partial<CopyButtonLabels>;\n}\n\nconst ICONS: Record<CopyState, typeof Copy> = { idle: Copy, copied: Check, failed: X };\n\n/**\n * A button that copies a value and tells the truth about whether it did.\n *\n * keksdose asked for it after two of its own copy buttons said \"Copied\" on a build\n * where the copy had failed (no Clipboard API over plain http). This one takes its\n * state from {@link useCopyToClipboard}, which reads the result, and has a `failed`\n * state that looks and sounds different from success.\n *\n * The result is spoken through {@link useAnnounce}: activating the button moves no\n * focus, so without a live region a screen-reader user hears nothing at all. A\n * failure goes through an ASSERTIVE region and a success through a polite one — the\n * failure is the news that changes what they do next.\n *\n * The icon variant keeps the SAME accessible name in every state. A button renaming\n * itself under the focus is announced inconsistently across readers; the live region\n * is the channel that is actually heard.\n */\nexport function CopyButton({\n  text,\n  variant = \"icon\",\n  label,\n  buttonVariant,\n  size = \"sm\",\n  tooltipSide = \"top\",\n  tooltipPortal = false,\n  resetAfter = 2000,\n  onCopied,\n  labels,\n  className,\n  disabled,\n  ...rest\n}: CopyButtonProps) {\n  const words = useKitLabels(\"copyButton\", DEFAULT_COPY_BUTTON_LABELS, labels);\n  const { state, copy } = useCopyToClipboard({ resetAfter });\n  const polite = useAnnounce();\n  const assertive = useAnnounce({ politeness: \"assertive\" });\n\n  const idleText = label ?? words.copy;\n  const stateText = state === \"copied\" ? words.copied : state === \"failed\" ? words.failed : idleText;\n  const Icon = ICONS[state];\n  const iconTone =\n    state === \"copied\" ? \"text-[var(--success)]\" : state === \"failed\" ? \"text-[var(--danger)]\" : undefined;\n\n  const onClick = async () => {\n    const ok = await copy(typeof text === \"function\" ? text() : text);\n    if (ok) polite.announce(words.copiedAnnouncement);\n    else assertive.announce(words.failedAnnouncement);\n    onCopied?.(ok);\n  };\n\n  const regions = (\n    <>\n      <span {...polite.regionProps} />\n      <span {...assertive.regionProps} />\n    </>\n  );\n\n  if (variant === \"label\") {\n    return (\n      <>\n        <Button\n          type=\"button\"\n          {...rest}\n          disabled={disabled}\n          variant={buttonVariant ?? \"secondary\"}\n          data-state={state}\n          onClick={onClick}\n          className={className}\n        >\n          <Icon aria-hidden className={cn(\"size-4 shrink-0\", iconTone)} />\n          {stateText}\n        </Button>\n        {regions}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Tooltip label={stateText} side={tooltipSide} portal={tooltipPortal}>\n        <IconButton\n          type=\"button\"\n          {...rest}\n          disabled={disabled}\n          aria-label={idleText}\n          variant={buttonVariant ?? \"ghost\"}\n          size={size}\n          data-state={state}\n          onClick={onClick}\n          className={cn(iconTone, className)}\n        >\n          <Icon aria-hidden />\n        </IconButton>\n      </Tooltip>\n      {regions}\n    </>\n  );\n}\n"],"mappings":";AA+GI,mBACE,KADF;AA9GJ,SAAS,OAAO,MAAM,SAAS;AAC/B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,QAAQ,kBAAkB;AAEnC,SAAS,eAAe;AAcjB,MAAM,6BAA+C;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AA6BA,MAAM,QAAwC,EAAE,MAAM,MAAM,QAAQ,OAAO,QAAQ,EAAE;AAmB9E,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,aAAa,cAAc,4BAA4B,MAAM;AAC3E,QAAM,EAAE,OAAO,KAAK,IAAI,mBAAmB,EAAE,WAAW,CAAC;AACzD,QAAM,SAAS,YAAY;AAC3B,QAAM,YAAY,YAAY,EAAE,YAAY,YAAY,CAAC;AAEzD,QAAM,WAAW,SAAS,MAAM;AAChC,QAAM,YAAY,UAAU,WAAW,MAAM,SAAS,UAAU,WAAW,MAAM,SAAS;AAC1F,QAAM,OAAO,MAAM,KAAK;AACxB,QAAM,WACJ,UAAU,WAAW,0BAA0B,UAAU,WAAW,yBAAyB;AAE/F,QAAM,UAAU,YAAY;AAC1B,UAAM,KAAK,MAAM,KAAK,OAAO,SAAS,aAAa,KAAK,IAAI,IAAI;AAChE,QAAI,GAAI,QAAO,SAAS,MAAM,kBAAkB;AAAA,QAC3C,WAAU,SAAS,MAAM,kBAAkB;AAChD,eAAW,EAAE;AAAA,EACf;AAEA,QAAM,UACJ,iCACE;AAAA,wBAAC,UAAM,GAAG,OAAO,aAAa;AAAA,IAC9B,oBAAC,UAAM,GAAG,UAAU,aAAa;AAAA,KACnC;AAGF,MAAI,YAAY,SAAS;AACvB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACJ,GAAG;AAAA,UACJ;AAAA,UACA,SAAS,iBAAiB;AAAA,UAC1B,cAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,QAAK,eAAW,MAAC,WAAW,GAAG,mBAAmB,QAAQ,GAAG;AAAA,YAC7D;AAAA;AAAA;AAAA,MACH;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ,OAAO,WAAW,MAAM,aAAa,QAAQ,eACpD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,cAAY;AAAA,QACZ,SAAS,iBAAiB;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,WAAW,GAAG,UAAU,SAAS;AAAA,QAEjC,8BAAC,QAAK,eAAW,MAAC;AAAA;AAAA,IACpB,GACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/components/data-table-filter-popover.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { a as DataTableColumn, c as FilterValue } from '../data-table-filters-noy0Abvi.js';
+import { b as DataTableColumn, e as FilterValue } from '../data-table-filters-CF1PXqjQ.js';
 import { DataTableLabels } from './data-table-labels.js';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table-filters.d.ts

@@ -1,4 +1,4 @@
-export { C as ColumnFilter, c as FilterValue, d as decodeFilterValue, e as decodeFilterValueOfType, f as defaultFilterState, g as encodeFilterValue, i as isFilterActive, r as resolveFilter, h as rowMatches } from '../data-table-filters-noy0Abvi.js';
+export { C as ColumnFilter, e as FilterValue, f as decodeFilterValue, g as decodeFilterValueOfType, h as defaultFilterState, i as encodeFilterValue, j as isFilterActive, r as resolveFilter, k as rowMatches } from '../data-table-filters-CF1PXqjQ.js';
 import 'react';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table-pagination.d.ts

@@ -15,9 +15,13 @@ interface PaginationProps {
     labels?: Partial<DataTableLabels>;
     /** For the page numbers and page-size options; falls back to the provider's. */
     locale?: string;
+    /** `"compact"` for a pager under a compact {@link DataTable} (lenkbank's in-card
+     *  tables): a slimmer footer and page buttons, so the pager is not the tallest row
+     *  of a table that was made compact on purpose. */
+    density?: "comfortable" | "compact";
 }
 /** Footer for {@link DataTable}: range summary, page-size select, and a
  *  windowed page-number strip (first/last + ±2 around the current page). */
-declare function Pagination({ page, totalPages, pageSize, total, onPage, onPageSize, labels: labelsProp, locale: localeProp, }: PaginationProps): react.JSX.Element;
+declare function Pagination({ page, totalPages, pageSize, total, onPage, onPageSize, labels: labelsProp, locale: localeProp, density, }: PaginationProps): react.JSX.Element;
 
 export { PAGE_SIZE_OPTIONS, Pagination };

package/dist/components/data-table-pagination.js

@@ -14,8 +14,10 @@ function Pagination({
   onPage,
   onPageSize,
   labels: labelsProp,
-  locale: localeProp
+  locale: localeProp,
+  density = "comfortable"
 }) {
+  const compact = density === "compact";
   const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);
@@ -33,64 +35,75 @@ function Pagination({
     if (idx > 0 && p - visible[idx - 1] > 1) items.push("ellipsis");
     items.push(p);
   });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] px-3 py-2 text-xs text-[var(--text-secondary)]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx("span", { children: pageSize === Infinity ? labels.rowCount(total) : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total) }),
-      onPageSize && /* @__PURE__ */ jsxs(
-        "select",
-        {
-          value: pageSize === Infinity ? "all" : pageSize,
-          onChange: (e) => onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value)),
-          className: "rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs",
-          "aria-label": labels.pageSize,
-          children: [
-            PAGE_SIZE_OPTIONS.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: num.format(n) }, n)),
-            /* @__PURE__ */ jsx("option", { value: "all", children: labels.pageSizeAll })
-          ]
-        }
-      )
-    ] }),
-    pageSize !== Infinity && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onPage(Math.max(0, page - 1)),
-          disabled: page === 0,
-          className: "rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40",
-          "aria-label": labels.prevPage,
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100" })
-        }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-density": density,
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]",
+        compact ? "px-2 py-1" : "px-3 py-2"
       ),
-      items.map(
-        (it, i) => it === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-[var(--text-placeholder)]", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onPage(it),
-            "aria-current": it === page ? "page" : void 0,
-            className: cn(
-              "min-w-7 rounded px-2 py-0.5",
-              it === page ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "hover:bg-[var(--bg-hover)]"
-            ),
-            children: num.format(it + 1)
-          },
-          it
-        )
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onPage(Math.min(totalPages - 1, page + 1)),
-          disabled: page >= totalPages - 1,
-          className: "rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40",
-          "aria-label": labels.nextPage,
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100" })
-        }
-      )
-    ] })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { children: pageSize === Infinity ? labels.rowCount(total) : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total) }),
+          onPageSize && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: pageSize === Infinity ? "all" : pageSize,
+              onChange: (e) => onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value)),
+              className: "rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs",
+              "aria-label": labels.pageSize,
+              children: [
+                PAGE_SIZE_OPTIONS.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: num.format(n) }, n)),
+                /* @__PURE__ */ jsx("option", { value: "all", children: labels.pageSizeAll })
+              ]
+            }
+          )
+        ] }),
+        pageSize !== Infinity && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPage(Math.max(0, page - 1)),
+              disabled: page === 0,
+              className: cn("rounded hover:bg-[var(--bg-hover)] disabled:opacity-40", compact ? "p-0.5" : "p-1"),
+              "aria-label": labels.prevPage,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4") })
+            }
+          ),
+          items.map(
+            (it, i) => it === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-[var(--text-placeholder)]", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onPage(it),
+                "aria-current": it === page ? "page" : void 0,
+                className: cn(
+                  "rounded",
+                  compact ? "min-w-6 px-1.5 py-0" : "min-w-7 px-2 py-0.5",
+                  it === page ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "hover:bg-[var(--bg-hover)]"
+                ),
+                children: num.format(it + 1)
+              },
+              it
+            )
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPage(Math.min(totalPages - 1, page + 1)),
+              disabled: page >= totalPages - 1,
+              className: cn("rounded hover:bg-[var(--bg-hover)] disabled:opacity-40", compact ? "p-0.5" : "p-1"),
+              "aria-label": labels.nextPage,
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4") })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 export {
   PAGE_SIZE_OPTIONS,

package/dist/components/data-table-pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  /** Omit when the page size is not the user's to change (a server that fixes it):\n   *  the select is then not rendered at all, rather than rendered and inert. */\n  onPageSize?: (n: number) => void;\n  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */\n  labels?: Partial<DataTableLabels>;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n}\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels: labelsProp,\n  locale: localeProp,\n}: PaginationProps) {\n  // prop > provider > English, like every other kit component. This defaulted straight\n  // to the English object, so a standalone pager under a translated provider still\n  // said \"Rows per page\" — only the pager INSIDE a DataTable was translated, because\n  // the table resolved the provider's labels and handed them down.\n  const labels = useKitLabels(\"dataTable\", DEFAULT_DATA_TABLE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const visible = useMemo(() => {\n    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= 2; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] px-3 py-2 text-xs text-[var(--text-secondary)]\">\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        {onPageSize && (\n          <select\n            value={pageSize === Infinity ? \"all\" : pageSize}\n            onChange={(e) =>\n              onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))\n            }\n            className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n            aria-label={labels.pageSize}\n          >\n            {PAGE_SIZE_OPTIONS.map((n) => (\n              <option key={n} value={n}>\n                {num.format(n)}\n              </option>\n            ))}\n            <option value=\"all\">{labels.pageSizeAll}</option>\n          </select>\n        )}\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className=\"rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n            aria-label={labels.prevPage}\n          >\n            {/* \"Previous\" points back along the line — left in LTR, right in RTL. */}\n            <ChevronLeft className=\"size-4 rtl:-scale-x-100\" />\n          </button>\n          {items.map((it, i) =>\n            it === \"ellipsis\" ? (\n              <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                …\n              </span>\n            ) : (\n              <button\n                key={it}\n                type=\"button\"\n                onClick={() => onPage(it)}\n                // Which page you are on is carried only by a background colour\n                // otherwise, and the strip is a row of bare numbers with nothing\n                // else to tell them apart.\n                aria-current={it === page ? \"page\" : undefined}\n                className={cn(\n                  \"min-w-7 rounded px-2 py-0.5\",\n                  it === page\n                    ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                    : \"hover:bg-[var(--bg-hover)]\",\n                )}\n              >\n                {num.format(it + 1)}\n              </button>\n            ),\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className=\"rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className=\"size-4 rtl:-scale-x-100\" />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  /** Omit when the page size is not the user's to change (a server that fixes it):\n   *  the select is then not rendered at all, rather than rendered and inert. */\n  onPageSize?: (n: number) => void;\n  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */\n  labels?: Partial<DataTableLabels>;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n  /** `\"compact\"` for a pager under a compact {@link DataTable} (lenkbank's in-card\n   *  tables): a slimmer footer and page buttons, so the pager is not the tallest row\n   *  of a table that was made compact on purpose. */\n  density?: \"comfortable\" | \"compact\";\n}\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels: labelsProp,\n  locale: localeProp,\n  density = \"comfortable\",\n}: PaginationProps) {\n  const compact = density === \"compact\";\n  // prop > provider > English, like every other kit component. This defaulted straight\n  // to the English object, so a standalone pager under a translated provider still\n  // said \"Rows per page\" — only the pager INSIDE a DataTable was translated, because\n  // the table resolved the provider's labels and handed them down.\n  const labels = useKitLabels(\"dataTable\", DEFAULT_DATA_TABLE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const visible = useMemo(() => {\n    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= 2; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div\n      data-density={density}\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]\",\n        compact ? \"px-2 py-1\" : \"px-3 py-2\",\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        {onPageSize && (\n          <select\n            value={pageSize === Infinity ? \"all\" : pageSize}\n            onChange={(e) =>\n              onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))\n            }\n            className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n            aria-label={labels.pageSize}\n          >\n            {PAGE_SIZE_OPTIONS.map((n) => (\n              <option key={n} value={n}>\n                {num.format(n)}\n              </option>\n            ))}\n            <option value=\"all\">{labels.pageSizeAll}</option>\n          </select>\n        )}\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.prevPage}\n          >\n            {/* \"Previous\" points back along the line — left in LTR, right in RTL. */}\n            <ChevronLeft className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n          {items.map((it, i) =>\n            it === \"ellipsis\" ? (\n              <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                …\n              </span>\n            ) : (\n              <button\n                key={it}\n                type=\"button\"\n                onClick={() => onPage(it)}\n                // Which page you are on is carried only by a background colour\n                // otherwise, and the strip is a row of bare numbers with nothing\n                // else to tell them apart.\n                aria-current={it === page ? \"page\" : undefined}\n                className={cn(\n                  \"rounded\",\n                  compact ? \"min-w-6 px-1.5 py-0\" : \"min-w-7 px-2 py-0.5\",\n                  it === page\n                    ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                    : \"hover:bg-[var(--bg-hover)]\",\n                )}\n              >\n                {num.format(it + 1)}\n              </button>\n            ),\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-sort.d.ts

@@ -14,10 +14,33 @@ declare function normalizeSorts(raw: unknown): SortState[];
 declare function encodeSorts(sorts: SortState[]): string | null;
 /** Decode a `sort` URL param, dropping unknown and duplicated keys. */
 declare function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[];
+/**
+ * How a header click steps through the directions (see {@link nextSorts}).
+ *
+ * * `"tri"` — first direction → the other → unsorted. The default, and the only cycle
+ *   before 0.8.0.
+ * * `"toggle"` — first direction ⇄ the other, never unsorted: a report table that is
+ *   ALWAYS ranked by something (keksdose's aggregated tables) must not have a third
+ *   click that silently drops the ranking. Clicking another column still replaces
+ *   the sort, so the table can always be re-ranked; a shift-click criterion flips in
+ *   place and stays for the same reason.
+ */
+type SortCycle = "tri" | "toggle";
+/** Per-click options for {@link nextSorts}; every field is optional and the
+ *  defaults reproduce the pre-0.8.0 cycle exactly. */
+interface SortStepOptions {
+    /** The direction a column starts in on its first click. `"desc"` for money and
+     *  count columns, where the interesting rows are the large ones. Default `"asc"`. */
+    firstDir?: SortDir;
+    /** Default `"tri"`. */
+    cycle?: SortCycle;
+}
 /** Header-click semantics. Plain click: make `key` the only sort — cycling
- *  asc → desc → none when it already is the sole criterion. Shift-click
- *  (`additive`): append `key` as the next-priority sort, or cycle an existing
- *  entry's direction in place (asc → desc → removed). */
-declare function nextSorts(prev: SortState[], key: string, additive: boolean): SortState[];
+ *  first → other → none (`"tri"`) or first ⇄ other (`"toggle"`) when it already is
+ *  the sole criterion. Shift-click (`additive`): append `key` as the next-priority
+ *  sort, or step an existing entry in place (first → other → removed under `"tri"`,
+ *  a plain flip under `"toggle"`). `firstDir` defaults to `"asc"`, `cycle` to
+ *  `"tri"` — the cycle every table had before the options existed. */
+declare function nextSorts(prev: SortState[], key: string, additive: boolean, options?: SortStepOptions): SortState[];
 
-export { type SortDir, type SortState, decodeSorts, encodeSorts, nextSorts, normalizeSorts };
+export { type SortCycle, type SortDir, type SortState, type SortStepOptions, decodeSorts, encodeSorts, nextSorts, normalizeSorts };

package/dist/components/data-table-sort.js

@@ -33,18 +33,22 @@ function decodeSorts(raw, validKeys) {
   }
   return out;
 }
-function nextSorts(prev, key, additive) {
+const flip = (d) => d === "asc" ? "desc" : "asc";
+function nextSorts(prev, key, additive, options = {}) {
+  const first = options.firstDir ?? "asc";
+  const toggle = options.cycle === "toggle";
   const idx = prev.findIndex((s) => s.key === key);
+  const step = (dir2) => dir2 === first ? flip(first) : toggle ? first : null;
   if (!additive) {
     if (prev.length === 1 && idx === 0) {
-      return prev[0].dir === "asc" ? [{ key, dir: "desc" }] : [];
+      const dir2 = step(prev[0].dir);
+      return dir2 ? [{ key, dir: dir2 }] : [];
     }
-    return [{ key, dir: "asc" }];
-  }
-  if (idx === -1) return [...prev, { key, dir: "asc" }];
-  if (prev[idx].dir === "asc") {
-    return prev.map((s, i) => i === idx ? { key, dir: "desc" } : s);
+    return [{ key, dir: first }];
   }
+  if (idx === -1) return [...prev, { key, dir: first }];
+  const dir = step(prev[idx].dir);
+  if (dir) return prev.map((s, i) => i === idx ? { key, dir } : s);
   return prev.filter((_, i) => i !== idx);
 }
 export {

package/dist/components/data-table-sort.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-sort.ts"],"sourcesContent":["/** Multi-column sort state for DataTable: ordered by priority (index 0 is the\n *  primary sort). Encoded as `sort=date.desc,amount` in URLs and the server's\n *  transactions `sort` param — the pre-multi-sort single-value format\n *  (`sort=date.desc`) decodes as a one-element list. */\n\nexport type SortDir = \"asc\" | \"desc\";\nexport interface SortState {\n  key: string;\n  dir: SortDir;\n}\n\n/** Coerce any persisted/URL-derived shape into a `SortState[]`. The\n *  pre-multi-sort localStorage format stored one `{key, dir}` object (or\n *  null); arrays pass through with junk entries dropped. */\nexport function normalizeSorts(raw: unknown): SortState[] {\n  const one = (v: unknown): SortState | null => {\n    if (!v || typeof v !== \"object\") return null;\n    const { key, dir } = v as { key?: unknown; dir?: unknown };\n    if (typeof key !== \"string\" || !key) return null;\n    return { key, dir: dir === \"desc\" ? \"desc\" : \"asc\" };\n  };\n  if (Array.isArray(raw)) {\n    const out: SortState[] = [];\n    for (const entry of raw) {\n      const s = one(entry);\n      if (s && !out.some((e) => e.key === s.key)) out.push(s);\n    }\n    return out;\n  }\n  const single = one(raw);\n  return single ? [single] : [];\n}\n\nexport function encodeSorts(sorts: SortState[]): string | null {\n  if (!sorts.length) return null;\n  return sorts.map((s) => (s.dir === \"desc\" ? `${s.key}.desc` : s.key)).join(\",\");\n}\n\n/** Decode a `sort` URL param, dropping unknown and duplicated keys. */\nexport function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[] {\n  if (!raw) return [];\n  const out: SortState[] = [];\n  for (const part of raw.split(\",\")) {\n    const desc = part.endsWith(\".desc\");\n    const asc = part.endsWith(\".asc\");\n    const key = desc ? part.slice(0, -\".desc\".length) : asc ? part.slice(0, -\".asc\".length) : part;\n    if (!validKeys.has(key) || out.some((s) => s.key === key)) continue;\n    out.push({ key, dir: desc ? \"desc\" : \"asc\" });\n  }\n  return out;\n}\n\n/** Header-click semantics. Plain click: make `key` the only sort — cycling\n *  asc → desc → none when it already is the sole criterion. Shift-click\n *  (`additive`): append `key` as the next-priority sort, or cycle an existing\n *  entry's direction in place (asc → desc → removed). */\nexport function nextSorts(prev: SortState[], key: string, additive: boolean): SortState[] {\n  const idx = prev.findIndex((s) => s.key === key);\n  if (!additive) {\n    if (prev.length === 1 && idx === 0) {\n      return prev[0].dir === \"asc\" ? [{ key, dir: \"desc\" }] : [];\n    }\n    return [{ key, dir: \"asc\" }];\n  }\n  if (idx === -1) return [...prev, { key, dir: \"asc\" }];\n  if (prev[idx].dir === \"asc\") {\n    return prev.map((s, i) => (i === idx ? { key, dir: \"desc\" as SortDir } : s));\n  }\n  return prev.filter((_, i) => i !== idx);\n}\n"],"mappings":";AAcO,SAAS,eAAe,KAA2B;AACxD,QAAM,MAAM,CAAC,MAAiC;AAC5C,QAAI,CAAC,KAAK,OAAO,MAAM,SAAU,QAAO;AACxC,UAAM,EAAE,KAAK,IAAI,IAAI;AACrB,QAAI,OAAO,QAAQ,YAAY,CAAC,IAAK,QAAO;AAC5C,WAAO,EAAE,KAAK,KAAK,QAAQ,SAAS,SAAS,MAAM;AAAA,EACrD;AACA,MAAI,MAAM,QAAQ,GAAG,GAAG;AACtB,UAAM,MAAmB,CAAC;AAC1B,eAAW,SAAS,KAAK;AACvB,YAAM,IAAI,IAAI,KAAK;AACnB,UAAI,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAG,KAAI,KAAK,CAAC;AAAA,IACxD;AACA,WAAO;AAAA,EACT;AACA,QAAM,SAAS,IAAI,GAAG;AACtB,SAAO,SAAS,CAAC,MAAM,IAAI,CAAC;AAC9B;AAEO,SAAS,YAAY,OAAmC;AAC7D,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,SAAO,MAAM,IAAI,CAAC,MAAO,EAAE,QAAQ,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAI,EAAE,KAAK,GAAG;AAChF;AAGO,SAAS,YAAY,KAAoB,WAA6C;AAC3F,MAAI,CAAC,IAAK,QAAO,CAAC;AAClB,QAAM,MAAmB,CAAC;AAC1B,aAAW,QAAQ,IAAI,MAAM,GAAG,GAAG;AACjC,UAAM,OAAO,KAAK,SAAS,OAAO;AAClC,UAAM,MAAM,KAAK,SAAS,MAAM;AAChC,UAAM,MAAM,OAAO,KAAK,MAAM,GAAG,CAAC,QAAQ,MAAM,IAAI,MAAM,KAAK,MAAM,GAAG,CAAC,OAAO,MAAM,IAAI;AAC1F,QAAI,CAAC,UAAU,IAAI,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG,EAAG;AAC3D,QAAI,KAAK,EAAE,KAAK,KAAK,OAAO,SAAS,MAAM,CAAC;AAAA,EAC9C;AACA,SAAO;AACT;AAMO,SAAS,UAAU,MAAmB,KAAa,UAAgC;AACxF,QAAM,MAAM,KAAK,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG;AAC/C,MAAI,CAAC,UAAU;AACb,QAAI,KAAK,WAAW,KAAK,QAAQ,GAAG;AAClC,aAAO,KAAK,CAAC,EAAE,QAAQ,QAAQ,CAAC,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC;AAAA,IAC3D;AACA,WAAO,CAAC,EAAE,KAAK,KAAK,MAAM,CAAC;AAAA,EAC7B;AACA,MAAI,QAAQ,GAAI,QAAO,CAAC,GAAG,MAAM,EAAE,KAAK,KAAK,MAAM,CAAC;AACpD,MAAI,KAAK,GAAG,EAAE,QAAQ,OAAO;AAC3B,WAAO,KAAK,IAAI,CAAC,GAAG,MAAO,MAAM,MAAM,EAAE,KAAK,KAAK,OAAkB,IAAI,CAAE;AAAA,EAC7E;AACA,SAAO,KAAK,OAAO,CAAC,GAAG,MAAM,MAAM,GAAG;AACxC;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-sort.ts"],"sourcesContent":["/** Multi-column sort state for DataTable: ordered by priority (index 0 is the\n *  primary sort). Encoded as `sort=date.desc,amount` in URLs and the server's\n *  transactions `sort` param — the pre-multi-sort single-value format\n *  (`sort=date.desc`) decodes as a one-element list. */\n\nexport type SortDir = \"asc\" | \"desc\";\nexport interface SortState {\n  key: string;\n  dir: SortDir;\n}\n\n/** Coerce any persisted/URL-derived shape into a `SortState[]`. The\n *  pre-multi-sort localStorage format stored one `{key, dir}` object (or\n *  null); arrays pass through with junk entries dropped. */\nexport function normalizeSorts(raw: unknown): SortState[] {\n  const one = (v: unknown): SortState | null => {\n    if (!v || typeof v !== \"object\") return null;\n    const { key, dir } = v as { key?: unknown; dir?: unknown };\n    if (typeof key !== \"string\" || !key) return null;\n    return { key, dir: dir === \"desc\" ? \"desc\" : \"asc\" };\n  };\n  if (Array.isArray(raw)) {\n    const out: SortState[] = [];\n    for (const entry of raw) {\n      const s = one(entry);\n      if (s && !out.some((e) => e.key === s.key)) out.push(s);\n    }\n    return out;\n  }\n  const single = one(raw);\n  return single ? [single] : [];\n}\n\nexport function encodeSorts(sorts: SortState[]): string | null {\n  if (!sorts.length) return null;\n  return sorts.map((s) => (s.dir === \"desc\" ? `${s.key}.desc` : s.key)).join(\",\");\n}\n\n/** Decode a `sort` URL param, dropping unknown and duplicated keys. */\nexport function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[] {\n  if (!raw) return [];\n  const out: SortState[] = [];\n  for (const part of raw.split(\",\")) {\n    const desc = part.endsWith(\".desc\");\n    const asc = part.endsWith(\".asc\");\n    const key = desc ? part.slice(0, -\".desc\".length) : asc ? part.slice(0, -\".asc\".length) : part;\n    if (!validKeys.has(key) || out.some((s) => s.key === key)) continue;\n    out.push({ key, dir: desc ? \"desc\" : \"asc\" });\n  }\n  return out;\n}\n\n/**\n * How a header click steps through the directions (see {@link nextSorts}).\n *\n * * `\"tri\"` — first direction → the other → unsorted. The default, and the only cycle\n *   before 0.8.0.\n * * `\"toggle\"` — first direction ⇄ the other, never unsorted: a report table that is\n *   ALWAYS ranked by something (keksdose's aggregated tables) must not have a third\n *   click that silently drops the ranking. Clicking another column still replaces\n *   the sort, so the table can always be re-ranked; a shift-click criterion flips in\n *   place and stays for the same reason.\n */\nexport type SortCycle = \"tri\" | \"toggle\";\n\n/** Per-click options for {@link nextSorts}; every field is optional and the\n *  defaults reproduce the pre-0.8.0 cycle exactly. */\nexport interface SortStepOptions {\n  /** The direction a column starts in on its first click. `\"desc\"` for money and\n   *  count columns, where the interesting rows are the large ones. Default `\"asc\"`. */\n  firstDir?: SortDir;\n  /** Default `\"tri\"`. */\n  cycle?: SortCycle;\n}\n\nconst flip = (d: SortDir): SortDir => (d === \"asc\" ? \"desc\" : \"asc\");\n\n/** Header-click semantics. Plain click: make `key` the only sort — cycling\n *  first → other → none (`\"tri\"`) or first ⇄ other (`\"toggle\"`) when it already is\n *  the sole criterion. Shift-click (`additive`): append `key` as the next-priority\n *  sort, or step an existing entry in place (first → other → removed under `\"tri\"`,\n *  a plain flip under `\"toggle\"`). `firstDir` defaults to `\"asc\"`, `cycle` to\n *  `\"tri\"` — the cycle every table had before the options existed. */\nexport function nextSorts(\n  prev: SortState[],\n  key: string,\n  additive: boolean,\n  options: SortStepOptions = {},\n): SortState[] {\n  const first = options.firstDir ?? \"asc\";\n  const toggle = options.cycle === \"toggle\";\n  const idx = prev.findIndex((s) => s.key === key);\n  // One step from `dir`: the second direction after the first, then either back to\n  // the first (toggle) or off (null). Judged against THIS column's first direction,\n  // so a desc-first column goes desc → asc → none rather than skipping a step.\n  const step = (dir: SortDir): SortDir | null =>\n    dir === first ? flip(first) : toggle ? first : null;\n  if (!additive) {\n    if (prev.length === 1 && idx === 0) {\n      const dir = step(prev[0].dir);\n      return dir ? [{ key, dir }] : [];\n    }\n    return [{ key, dir: first }];\n  }\n  if (idx === -1) return [...prev, { key, dir: first }];\n  const dir = step(prev[idx].dir);\n  if (dir) return prev.map((s, i) => (i === idx ? { key, dir } : s));\n  return prev.filter((_, i) => i !== idx);\n}\n"],"mappings":";AAcO,SAAS,eAAe,KAA2B;AACxD,QAAM,MAAM,CAAC,MAAiC;AAC5C,QAAI,CAAC,KAAK,OAAO,MAAM,SAAU,QAAO;AACxC,UAAM,EAAE,KAAK,IAAI,IAAI;AACrB,QAAI,OAAO,QAAQ,YAAY,CAAC,IAAK,QAAO;AAC5C,WAAO,EAAE,KAAK,KAAK,QAAQ,SAAS,SAAS,MAAM;AAAA,EACrD;AACA,MAAI,MAAM,QAAQ,GAAG,GAAG;AACtB,UAAM,MAAmB,CAAC;AAC1B,eAAW,SAAS,KAAK;AACvB,YAAM,IAAI,IAAI,KAAK;AACnB,UAAI,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAG,KAAI,KAAK,CAAC;AAAA,IACxD;AACA,WAAO;AAAA,EACT;AACA,QAAM,SAAS,IAAI,GAAG;AACtB,SAAO,SAAS,CAAC,MAAM,IAAI,CAAC;AAC9B;AAEO,SAAS,YAAY,OAAmC;AAC7D,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,SAAO,MAAM,IAAI,CAAC,MAAO,EAAE,QAAQ,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAI,EAAE,KAAK,GAAG;AAChF;AAGO,SAAS,YAAY,KAAoB,WAA6C;AAC3F,MAAI,CAAC,IAAK,QAAO,CAAC;AAClB,QAAM,MAAmB,CAAC;AAC1B,aAAW,QAAQ,IAAI,MAAM,GAAG,GAAG;AACjC,UAAM,OAAO,KAAK,SAAS,OAAO;AAClC,UAAM,MAAM,KAAK,SAAS,MAAM;AAChC,UAAM,MAAM,OAAO,KAAK,MAAM,GAAG,CAAC,QAAQ,MAAM,IAAI,MAAM,KAAK,MAAM,GAAG,CAAC,OAAO,MAAM,IAAI;AAC1F,QAAI,CAAC,UAAU,IAAI,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG,EAAG;AAC3D,QAAI,KAAK,EAAE,KAAK,KAAK,OAAO,SAAS,MAAM,CAAC;AAAA,EAC9C;AACA,SAAO;AACT;AAyBA,MAAM,OAAO,CAAC,MAAyB,MAAM,QAAQ,SAAS;AAQvD,SAAS,UACd,MACA,KACA,UACA,UAA2B,CAAC,GACf;AACb,QAAM,QAAQ,QAAQ,YAAY;AAClC,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,MAAM,KAAK,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG;AAI/C,QAAM,OAAO,CAACA,SACZA,SAAQ,QAAQ,KAAK,KAAK,IAAI,SAAS,QAAQ;AACjD,MAAI,CAAC,UAAU;AACb,QAAI,KAAK,WAAW,KAAK,QAAQ,GAAG;AAClC,YAAMA,OAAM,KAAK,KAAK,CAAC,EAAE,GAAG;AAC5B,aAAOA,OAAM,CAAC,EAAE,KAAK,KAAAA,KAAI,CAAC,IAAI,CAAC;AAAA,IACjC;AACA,WAAO,CAAC,EAAE,KAAK,KAAK,MAAM,CAAC;AAAA,EAC7B;AACA,MAAI,QAAQ,GAAI,QAAO,CAAC,GAAG,MAAM,EAAE,KAAK,KAAK,MAAM,CAAC;AACpD,QAAM,MAAM,KAAK,KAAK,GAAG,EAAE,GAAG;AAC9B,MAAI,IAAK,QAAO,KAAK,IAAI,CAAC,GAAG,MAAO,MAAM,MAAM,EAAE,KAAK,IAAI,IAAI,CAAE;AACjE,SAAO,KAAK,OAAO,CAAC,GAAG,MAAM,MAAM,GAAG;AACxC;","names":["dir"]}

package/dist/components/data-table.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { D as DataTable, a as DataTableColumn, b as DataTableProps, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-filters-noy0Abvi.js';
+export { D as DataTable, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, d as DataTableProps, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-filters-CF1PXqjQ.js';
 export { SortState } from './data-table-sort.js';
 import './swipeable-row.js';
 import './data-table-labels.js';