@burtson-labs/ui 0.12.4 → 0.13.0

package/dist/components/pagination.js

@@ -1,6 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
-import "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ChevronRight from "@burtson-labs/icons/react/chevron-right";
 import ChevronLeft from "@burtson-labs/icons/react/chevron-left";
@@ -25,74 +26,259 @@ function paginationRange(page, pageCount, siblings = 1) {
 	out.push(pageCount);
 	return out;
 }
-/** Page controls for a table or list. Buttons are real buttons, keyboard-reachable. */
-function Pagination({ page: requestedPage, pageCount: requestedCount, onPageChange, siblings = 1, summary, className, ...props }) {
+/** The page sizes offered by default: 25, 50 or 100 rows. */
+var DEFAULT_PAGE_SIZES = [
+	25,
+	50,
+	100
+];
+/** Pages needed for `total` rows, never less than 1. */
+function pageCountFor(total, pageSize) {
+	if (!Number.isFinite(total) || total <= 0) return 1;
+	return Math.max(1, Math.ceil(total / (Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1)));
+}
+/** A requested page clamped to 1…pageCount. Anything unreadable ("abc", NaN) is page 1. */
+function clampPage(page, pageCount) {
+	const n = typeof page === "number" ? page : Number(page);
+	if (!Number.isFinite(n)) return 1;
+	return Math.min(Math.max(1, Math.floor(n)), Math.max(1, Math.floor(pageCount) || 1));
+}
+/** Where page `page` of `total` rows starts and ends, for server-side paging. */
+function pageWindow({ page, pageSize, total }) {
+	const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1;
+	const safeTotal = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;
+	const pageCount = pageCountFor(safeTotal, size);
+	const p = clampPage(page, pageCount);
+	const start = (p - 1) * size;
+	const to = Math.min(start + size, safeTotal);
+	return {
+		page: p,
+		pageCount,
+		pageSize: size,
+		total: safeTotal,
+		from: safeTotal ? start + 1 : 0,
+		to: safeTotal ? to : 0
+	};
+}
+/** One page of `rows`, with the numbers for the page controls. */
+function paginate(rows, page, pageSize) {
+	const w = pageWindow({
+		page,
+		pageSize,
+		total: rows.length
+	});
+	return {
+		...w,
+		rows: rows.slice(w.from ? w.from - 1 : 0, w.to)
+	};
+}
+/**
+* "1–25 of 312", "7 of 7" when everything fits, "0 of 0" when empty. Numbers
+* use the locale's grouping ("1,025"); pass `locale` to pin it.
+*/
+function paginationSummary({ from, to, total }, locale) {
+	const fmt = new Intl.NumberFormat(locale);
+	if (!total) return "0 of 0";
+	if (from === 1 && to === total) return `${fmt.format(total)} of ${fmt.format(total)}`;
+	return `${fmt.format(from)}–${fmt.format(to)} of ${fmt.format(total)}`;
+}
+var storedSizeKey = (key) => `bl-page-size:${key}`;
+function readStoredSize(key, options) {
+	if (!key) return void 0;
+	try {
+		const n = Number(globalThis.localStorage?.getItem(storedSizeKey(key)));
+		return options.includes(n) ? n : void 0;
+	} catch {
+		return;
+	}
+}
+function writeStoredSize(key, size) {
+	if (!key) return;
+	try {
+		globalThis.localStorage?.setItem(storedSizeKey(key), String(size));
+	} catch {}
+}
+/**
+* Headless paging for a list or table: slices `rows`, clamps the page,
+* returns to page 1 when `resetKey` changes, and optionally remembers the
+* page size. Controlled `page` / `pageSize` let an app keep them in the URL.
+*/
+function usePagination(rows, options = {}) {
+	const { page: pageProp, defaultPage = 1, onPageChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZES, resetKey, storageKey, total: serverTotal, locale } = options;
+	const [pageState, setPageState] = React.useState(defaultPage);
+	const [sizeState, setSizeState] = React.useState(() => readStoredSize(storageKey, pageSizeOptions) ?? defaultPageSize ?? pageSizeOptions[0] ?? 25);
+	const page = pageProp ?? pageState;
+	const pageSize = pageSizeProp ?? sizeState;
+	const latest = React.useRef({
+		onPageChange,
+		onPageSizeChange,
+		pageProp,
+		storageKey
+	});
+	React.useEffect(() => {
+		latest.current = {
+			onPageChange,
+			onPageSizeChange,
+			pageProp,
+			storageKey
+		};
+	});
+	const setPage = React.useCallback((next) => {
+		setPageState(next);
+		latest.current.onPageChange?.(next);
+	}, []);
+	const setPageSize = React.useCallback((next) => {
+		writeStoredSize(latest.current.storageKey, next);
+		setSizeState(next);
+		setPageState(1);
+		latest.current.onPageSizeChange?.(next);
+		latest.current.onPageChange?.(1);
+	}, []);
+	const [lastKey, setLastKey] = React.useState(resetKey);
+	if (!Object.is(lastKey, resetKey)) {
+		setLastKey(resetKey);
+		setPageState(1);
+	}
+	const committedKey = React.useRef(resetKey);
+	React.useEffect(() => {
+		if (Object.is(committedKey.current, resetKey)) return;
+		committedKey.current = resetKey;
+		const { pageProp: controlled, onPageChange: report } = latest.current;
+		if (controlled !== void 0 && controlled !== 1) report?.(1);
+	}, [resetKey]);
+	const w = serverTotal === void 0 ? paginate(rows, page, pageSize) : {
+		...pageWindow({
+			page,
+			pageSize,
+			total: serverTotal
+		}),
+		rows: [...rows]
+	};
+	const summary = paginationSummary(w, locale);
+	const hasPages = w.total > Math.min(...pageSizeOptions, w.pageSize);
+	return {
+		...w,
+		pageSizeOptions,
+		summary,
+		hasPages,
+		setPage,
+		setPageSize,
+		paginationProps: {
+			page: w.page,
+			pageCount: w.pageCount,
+			onPageChange: setPage,
+			pageSize: w.pageSize,
+			pageSizeOptions,
+			onPageSizeChange: setPageSize,
+			summary
+		}
+	};
+}
+/**
+* Page controls for a table or list: a summary, the pages, and optionally a
+* rows-per-page menu. Below 640px it becomes "Page 2 of 13" between large
+* previous and next buttons. Buttons are real buttons, keyboard-reachable,
+* and 44px on touch screens.
+*/
+function Pagination({ page: requestedPage, pageCount: requestedCount, onPageChange, siblings = 1, summary, total, pageSize, pageSizeOptions = DEFAULT_PAGE_SIZES, onPageSizeChange, pageSizeLabel = "Rows per page", formatPageSize = (size) => `${size} per page`, className, ...props }) {
 	const pageCount = Number.isFinite(requestedCount) ? Math.max(0, Math.floor(requestedCount)) : 0;
 	const page = pageCount === 0 ? 0 : Number.isFinite(requestedPage) ? Math.max(1, Math.min(pageCount, Math.floor(requestedPage))) : 1;
 	const pages = paginationRange(page, pageCount, siblings);
 	const go = (p) => onPageChange(Math.min(Math.max(1, p), Math.max(1, pageCount)));
+	const shownSummary = summary ?? (total !== void 0 && pageSize ? paginationSummary(pageWindow({
+		page: page || 1,
+		pageSize,
+		total
+	})) : null);
+	const sizes = pageSize !== void 0 && !pageSizeOptions.includes(pageSize) ? [...pageSizeOptions, pageSize].sort((a, b) => a - b) : pageSizeOptions;
+	const position = `Page ${page} of ${pageCount}`;
 	return /* @__PURE__ */ jsxs("nav", {
 		"aria-label": "Pagination",
 		"data-slot": "pagination",
-		className: cn("flex flex-wrap items-center justify-between gap-3", className),
+		className: cn("flex flex-wrap items-center justify-between gap-x-3 gap-y-2", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-xs text-muted-foreground tabular-nums",
-			children: summary
-		}), /* @__PURE__ */ jsxs("ul", {
-			className: "flex items-center gap-1",
-			children: [
-				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
-					variant: "ghost",
-					size: "sm",
-					onClick: () => go(page - 1),
-					disabled: page <= 1,
-					"aria-label": "Previous page",
-					children: [/* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
-						className: "hidden sm:inline",
-						children: "Previous"
-					})]
-				}) }),
-				pages.map((p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx("li", {
-					"aria-hidden": true,
-					className: "px-1 text-muted-foreground",
-					children: "…"
-				}, `e${i}`) : /* @__PURE__ */ jsx("li", {
-					className: "hidden sm:block",
-					children: /* @__PURE__ */ jsx(Button, {
-						variant: p === page ? "outline" : "ghost",
-						size: "icon-sm",
-						onClick: () => go(p),
-						"aria-current": p === page ? "page" : void 0,
-						"aria-label": `Page ${p}`,
-						className: cn("tabular-nums", p === page && "border-brand/40 text-brand"),
-						children: p
-					})
-				}, p)),
-				/* @__PURE__ */ jsxs("li", {
-					className: "px-2 text-xs text-muted-foreground tabular-nums sm:hidden",
-					children: [
-						page,
-						" / ",
-						pageCount
-					]
-				}),
-				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
-					variant: "ghost",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "pagination-summary",
+				className: "min-w-0 text-xs text-muted-foreground tabular-nums max-sm:order-2",
+				children: shownSummary
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: pageCount > 0 ? position : ""
+			}),
+			/* @__PURE__ */ jsxs("ul", {
+				className: "flex items-center gap-1 max-sm:order-1 max-sm:w-full max-sm:justify-between",
+				children: [
+					/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => go(page - 1),
+						disabled: page <= 1,
+						"aria-label": "Previous page",
+						className: "max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0",
+						children: [/* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: "Previous"
+						})]
+					}) }),
+					pages.map((p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+						"aria-hidden": true,
+						className: "hidden px-1 text-muted-foreground sm:block",
+						children: "…"
+					}, `e${i}`) : /* @__PURE__ */ jsx("li", {
+						className: "hidden sm:block",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: p === page ? "outline" : "ghost",
+							size: "icon-sm",
+							onClick: () => go(p),
+							"aria-current": p === page ? "page" : void 0,
+							"aria-label": `Page ${p}`,
+							className: cn("tabular-nums", p === page && "border-brand/40 text-brand"),
+							children: p
+						})
+					}, p)),
+					/* @__PURE__ */ jsx("li", {
+						"aria-hidden": true,
+						"data-slot": "pagination-position",
+						className: "px-2 text-sm font-medium tabular-nums sm:hidden",
+						children: position
+					}),
+					/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => go(page + 1),
+						disabled: page >= pageCount,
+						"aria-label": "Next page",
+						className: "max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: "Next"
+						}), /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })]
+					}) })
+				]
+			}),
+			onPageSizeChange && /* @__PURE__ */ jsxs(Select, {
+				value: pageSize !== void 0 ? String(pageSize) : void 0,
+				onValueChange: (v) => onPageSizeChange(Number(v)),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
 					size: "sm",
-					onClick: () => go(page + 1),
-					disabled: page >= pageCount,
-					"aria-label": "Next page",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "hidden sm:inline",
-						children: "Next"
-					}), /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })]
-				}) })
-			]
-		})]
+					"aria-label": pageSizeLabel,
+					className: "w-auto gap-1.5 text-xs tabular-nums max-sm:order-3 pointer-coarse:h-11",
+					children: /* @__PURE__ */ jsx(SelectValue, {})
+				}), /* @__PURE__ */ jsx(SelectContent, {
+					align: "end",
+					children: sizes.map((s) => /* @__PURE__ */ jsx(SelectItem, {
+						value: String(s),
+						children: formatPageSize(s)
+					}, s))
+				})]
+			})
+		]
 	});
 }
 //#endregion
-export { Pagination, paginationRange };
+export { DEFAULT_PAGE_SIZES, Pagination, clampPage, pageCountFor, pageWindow, paginate, paginationRange, paginationSummary, usePagination };
 
 //# sourceMappingURL=pagination.js.map

package/dist/components/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import ChevronLeft from '@burtson-labs/icons/react/chevron-left';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\n/**\n * The page numbers to show: always the first and last page, `siblings` pages\n * either side of the current one, and 'ellipsis' for the gaps.\n */\nexport function paginationRange(\n  page: number,\n  pageCount: number,\n  siblings = 1,\n): (number | 'ellipsis')[] {\n  pageCount = Number.isFinite(pageCount) ? Math.max(0, Math.floor(pageCount)) : 0;\n  siblings = Number.isFinite(siblings) ? Math.min(5, Math.max(0, Math.floor(siblings))) : 1;\n  page = Number.isFinite(page) ? Math.max(1, Math.min(pageCount, Math.floor(page))) : 1;\n  if (pageCount <= 0) return [];\n  const window = siblings * 2 + 5; // first, last, current, siblings, two gaps\n  if (pageCount <= window) return Array.from({ length: pageCount }, (_, i) => i + 1);\n  const start = Math.max(2, page - siblings);\n  const end = Math.min(pageCount - 1, page + siblings);\n  const out: (number | 'ellipsis')[] = [1];\n  if (start > 2) out.push('ellipsis');\n  for (let p = start; p <= end; p += 1) out.push(p);\n  if (end < pageCount - 1) out.push('ellipsis');\n  out.push(pageCount);\n  return out;\n}\n\nexport interface PaginationProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {\n  /** 1-based current page. */\n  page: number;\n  pageCount: number;\n  onPageChange: (page: number) => void;\n  siblings?: number;\n  /** Optional summary on the left, e.g. \"1–25 of 312\". */\n  summary?: React.ReactNode;\n}\n\n/** Page controls for a table or list. Buttons are real buttons, keyboard-reachable. */\nfunction Pagination({\n  page: requestedPage,\n  pageCount: requestedCount,\n  onPageChange,\n  siblings = 1,\n  summary,\n  className,\n  ...props\n}: PaginationProps) {\n  const pageCount = Number.isFinite(requestedCount) ? Math.max(0, Math.floor(requestedCount)) : 0;\n  const page =\n    pageCount === 0\n      ? 0\n      : Number.isFinite(requestedPage)\n        ? Math.max(1, Math.min(pageCount, Math.floor(requestedPage)))\n        : 1;\n  const pages = paginationRange(page, pageCount, siblings);\n  const go = (p: number) => onPageChange(Math.min(Math.max(1, p), Math.max(1, pageCount)));\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      data-slot=\"pagination\"\n      className={cn('flex flex-wrap items-center justify-between gap-3', className)}\n      {...props}\n    >\n      <div className=\"text-xs text-muted-foreground tabular-nums\">{summary}</div>\n      <ul className=\"flex items-center gap-1\">\n        <li>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => go(page - 1)}\n            disabled={page <= 1}\n            aria-label=\"Previous page\"\n          >\n            <ChevronLeft aria-hidden />\n            <span className=\"hidden sm:inline\">Previous</span>\n          </Button>\n        </li>\n        {pages.map((p, i) =>\n          p === 'ellipsis' ? (\n            <li key={`e${i}`} aria-hidden className=\"px-1 text-muted-foreground\">\n              …\n            </li>\n          ) : (\n            <li key={p} className=\"hidden sm:block\">\n              <Button\n                variant={p === page ? 'outline' : 'ghost'}\n                size=\"icon-sm\"\n                onClick={() => go(p)}\n                aria-current={p === page ? 'page' : undefined}\n                aria-label={`Page ${p}`}\n                className={cn('tabular-nums', p === page && 'border-brand/40 text-brand')}\n              >\n                {p}\n              </Button>\n            </li>\n          ),\n        )}\n        <li className=\"px-2 text-xs text-muted-foreground tabular-nums sm:hidden\">\n          {page} / {pageCount}\n        </li>\n        <li>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => go(page + 1)}\n            disabled={page >= pageCount}\n            aria-label=\"Next page\"\n          >\n            <span className=\"hidden sm:inline\">Next</span>\n            <ChevronRight aria-hidden />\n          </Button>\n        </li>\n      </ul>\n    </nav>\n  );\n}\n\nexport { Pagination };\n"],"mappings":"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"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import ChevronLeft from '@burtson-labs/icons/react/chevron-left';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\n\n/**\n * The page numbers to show: always the first and last page, `siblings` pages\n * either side of the current one, and 'ellipsis' for the gaps.\n */\nexport function paginationRange(\n  page: number,\n  pageCount: number,\n  siblings = 1,\n): (number | 'ellipsis')[] {\n  pageCount = Number.isFinite(pageCount) ? Math.max(0, Math.floor(pageCount)) : 0;\n  siblings = Number.isFinite(siblings) ? Math.min(5, Math.max(0, Math.floor(siblings))) : 1;\n  page = Number.isFinite(page) ? Math.max(1, Math.min(pageCount, Math.floor(page))) : 1;\n  if (pageCount <= 0) return [];\n  const window = siblings * 2 + 5; // first, last, current, siblings, two gaps\n  if (pageCount <= window) return Array.from({ length: pageCount }, (_, i) => i + 1);\n  const start = Math.max(2, page - siblings);\n  const end = Math.min(pageCount - 1, page + siblings);\n  const out: (number | 'ellipsis')[] = [1];\n  if (start > 2) out.push('ellipsis');\n  for (let p = start; p <= end; p += 1) out.push(p);\n  if (end < pageCount - 1) out.push('ellipsis');\n  out.push(pageCount);\n  return out;\n}\n\n/* ------------------------------------------------------------------------ */\n/* Paging arithmetic: no React, for any list, table or server query.        */\n/* ------------------------------------------------------------------------ */\n\n/** The page sizes offered by default: 25, 50 or 100 rows. */\nexport const DEFAULT_PAGE_SIZES: readonly number[] = [25, 50, 100];\n\nexport interface PageWindow {\n  /** 1-based, clamped to the pages that exist (1 when there are no rows). */\n  page: number;\n  /** At least 1, so \"Page 1 of 1\" reads sensibly for an empty list. */\n  pageCount: number;\n  pageSize: number;\n  total: number;\n  /** 1-based index of the first row on this page; 0 when there are none. */\n  from: number;\n  /** 1-based index of the last row on this page; 0 when there are none. */\n  to: number;\n}\n\n/** Pages needed for `total` rows, never less than 1. */\nexport function pageCountFor(total: number, pageSize: number): number {\n  if (!Number.isFinite(total) || total <= 0) return 1;\n  const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1;\n  return Math.max(1, Math.ceil(total / size));\n}\n\n/** A requested page clamped to 1…pageCount. Anything unreadable (\"abc\", NaN) is page 1. */\nexport function clampPage(page: unknown, pageCount: number): number {\n  const n = typeof page === 'number' ? page : Number(page);\n  if (!Number.isFinite(n)) return 1;\n  return Math.min(Math.max(1, Math.floor(n)), Math.max(1, Math.floor(pageCount) || 1));\n}\n\n/** Where page `page` of `total` rows starts and ends, for server-side paging. */\nexport function pageWindow({\n  page,\n  pageSize,\n  total,\n}: {\n  page: unknown;\n  pageSize: number;\n  total: number;\n}): PageWindow {\n  const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1;\n  const safeTotal = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;\n  const pageCount = pageCountFor(safeTotal, size);\n  const p = clampPage(page, pageCount);\n  const start = (p - 1) * size;\n  const to = Math.min(start + size, safeTotal);\n  return {\n    page: p,\n    pageCount,\n    pageSize: size,\n    total: safeTotal,\n    from: safeTotal ? start + 1 : 0,\n    to: safeTotal ? to : 0,\n  };\n}\n\n/** One page of `rows`, with the numbers for the page controls. */\nexport function paginate<T>(\n  rows: readonly T[],\n  page: unknown,\n  pageSize: number,\n): PageWindow & { rows: T[] } {\n  const w = pageWindow({ page, pageSize, total: rows.length });\n  return { ...w, rows: rows.slice(w.from ? w.from - 1 : 0, w.to) };\n}\n\n/**\n * \"1–25 of 312\", \"7 of 7\" when everything fits, \"0 of 0\" when empty. Numbers\n * use the locale's grouping (\"1,025\"); pass `locale` to pin it.\n */\nexport function paginationSummary(\n  { from, to, total }: Pick<PageWindow, 'from' | 'to' | 'total'>,\n  locale?: string,\n): string {\n  const fmt = new Intl.NumberFormat(locale);\n  if (!total) return '0 of 0';\n  if (from === 1 && to === total) return `${fmt.format(total)} of ${fmt.format(total)}`;\n  return `${fmt.format(from)}–${fmt.format(to)} of ${fmt.format(total)}`;\n}\n\nconst storedSizeKey = (key: string) => `bl-page-size:${key}`;\n\nfunction readStoredSize(key: string | undefined, options: readonly number[]): number | undefined {\n  if (!key) return undefined;\n  try {\n    const n = Number(globalThis.localStorage?.getItem(storedSizeKey(key)));\n    return options.includes(n) ? n : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredSize(key: string | undefined, size: number) {\n  if (!key) return;\n  try {\n    globalThis.localStorage?.setItem(storedSizeKey(key), String(size));\n  } catch {\n    // Storage blocked (private mode, a sandboxed frame): the size is not remembered.\n  }\n}\n\nexport interface UsePaginationOptions {\n  /** Controlled page (e.g. read from the URL). Leave out to let the hook keep it. */\n  page?: number;\n  /** Starting page when uncontrolled. */\n  defaultPage?: number;\n  onPageChange?: (page: number) => void;\n  /** Controlled page size. */\n  pageSize?: number;\n  /** Starting page size when uncontrolled; the first option by default. */\n  defaultPageSize?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  /** Sizes offered by the page-size menu. */\n  pageSizeOptions?: readonly number[];\n  /**\n   * Whatever decides which rows are listed (search text, a filter, a tab).\n   * When it changes, paging goes back to page 1. The first render never\n   * resets, so a link to page 3 stays on page 3.\n   */\n  resetKey?: unknown;\n  /** Remembers the chosen page size in localStorage under this key. */\n  storageKey?: string;\n  /**\n   * The full row count when the server pages: `rows` is then already the\n   * current page and is not sliced.\n   */\n  total?: number;\n  /** Locale for the summary's numbers. */\n  locale?: string;\n}\n\nexport interface UsePaginationResult<T> extends PageWindow {\n  /** The rows to render on this page. */\n  rows: T[];\n  pageSizeOptions: readonly number[];\n  /** \"1–25 of 312\". */\n  summary: string;\n  /** More rows than the smallest page size: worth showing controls for. */\n  hasPages: boolean;\n  setPage: (page: number) => void;\n  /** Changes the size and goes back to page 1. */\n  setPageSize: (pageSize: number) => void;\n  /** Spread onto Pagination (or pass to DataTable's paging props). */\n  paginationProps: Pick<\n    PaginationProps,\n    'page' | 'pageCount' | 'onPageChange' | 'pageSize' | 'pageSizeOptions' | 'onPageSizeChange'\n  > & { summary: string };\n}\n\n/**\n * Headless paging for a list or table: slices `rows`, clamps the page,\n * returns to page 1 when `resetKey` changes, and optionally remembers the\n * page size. Controlled `page` / `pageSize` let an app keep them in the URL.\n */\nexport function usePagination<T>(\n  rows: readonly T[],\n  options: UsePaginationOptions = {},\n): UsePaginationResult<T> {\n  const {\n    page: pageProp,\n    defaultPage = 1,\n    onPageChange,\n    pageSize: pageSizeProp,\n    defaultPageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZES,\n    resetKey,\n    storageKey,\n    total: serverTotal,\n    locale,\n  } = options;\n\n  const [pageState, setPageState] = React.useState(defaultPage);\n  const [sizeState, setSizeState] = React.useState<number>(\n    () =>\n      readStoredSize(storageKey, pageSizeOptions) ?? defaultPageSize ?? pageSizeOptions[0] ?? 25,\n  );\n  const page = pageProp ?? pageState;\n  const pageSize = pageSizeProp ?? sizeState;\n\n  // Keep the latest callbacks without making the setters change every render.\n  const latest = React.useRef({ onPageChange, onPageSizeChange, pageProp, storageKey });\n  React.useEffect(() => {\n    latest.current = { onPageChange, onPageSizeChange, pageProp, storageKey };\n  });\n\n  const setPage = React.useCallback((next: number) => {\n    setPageState(next);\n    latest.current.onPageChange?.(next);\n  }, []);\n  const setPageSize = React.useCallback((next: number) => {\n    writeStoredSize(latest.current.storageKey, next);\n    setSizeState(next);\n    setPageState(1);\n    latest.current.onPageSizeChange?.(next);\n    latest.current.onPageChange?.(1);\n  }, []);\n\n  // A new filter starts again at page 1: during render for local state (no\n  // flash of an empty page), and after it for a controlled page.\n  const [lastKey, setLastKey] = React.useState(resetKey);\n  if (!Object.is(lastKey, resetKey)) {\n    setLastKey(resetKey);\n    setPageState(1);\n  }\n  const committedKey = React.useRef(resetKey);\n  React.useEffect(() => {\n    if (Object.is(committedKey.current, resetKey)) return;\n    committedKey.current = resetKey;\n    const { pageProp: controlled, onPageChange: report } = latest.current;\n    if (controlled !== undefined && controlled !== 1) report?.(1);\n  }, [resetKey]);\n\n  const w =\n    serverTotal === undefined\n      ? paginate(rows, page, pageSize)\n      : { ...pageWindow({ page, pageSize, total: serverTotal }), rows: [...rows] };\n  const summary = paginationSummary(w, locale);\n  const hasPages = w.total > Math.min(...pageSizeOptions, w.pageSize);\n\n  return {\n    ...w,\n    pageSizeOptions,\n    summary,\n    hasPages,\n    setPage,\n    setPageSize,\n    paginationProps: {\n      page: w.page,\n      pageCount: w.pageCount,\n      onPageChange: setPage,\n      pageSize: w.pageSize,\n      pageSizeOptions,\n      onPageSizeChange: setPageSize,\n      summary,\n    },\n  };\n}\n\n/* ------------------------------------------------------------------------ */\n/* The controls.                                                             */\n/* ------------------------------------------------------------------------ */\n\nexport interface PaginationProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {\n  /** 1-based current page. */\n  page: number;\n  pageCount: number;\n  onPageChange: (page: number) => void;\n  siblings?: number;\n  /** Summary on the left, e.g. \"1–25 of 312\". Worked out from `total` when left out. */\n  summary?: React.ReactNode;\n  /** Total rows: with `pageSize`, gives the default summary. */\n  total?: number;\n  /** Rows per page, shown in the page-size menu. */\n  pageSize?: number;\n  /** Sizes in the page-size menu (25, 50, 100 by default). */\n  pageSizeOptions?: readonly number[];\n  /** Adds a rows-per-page menu. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** The page-size menu's accessible name. */\n  pageSizeLabel?: string;\n  /** An option's text, e.g. \"25 per page\". */\n  formatPageSize?: (size: number) => string;\n}\n\n/**\n * Page controls for a table or list: a summary, the pages, and optionally a\n * rows-per-page menu. Below 640px it becomes \"Page 2 of 13\" between large\n * previous and next buttons. Buttons are real buttons, keyboard-reachable,\n * and 44px on touch screens.\n */\nfunction Pagination({\n  page: requestedPage,\n  pageCount: requestedCount,\n  onPageChange,\n  siblings = 1,\n  summary,\n  total,\n  pageSize,\n  pageSizeOptions = DEFAULT_PAGE_SIZES,\n  onPageSizeChange,\n  pageSizeLabel = 'Rows per page',\n  formatPageSize = (size) => `${size} per page`,\n  className,\n  ...props\n}: PaginationProps) {\n  const pageCount = Number.isFinite(requestedCount) ? Math.max(0, Math.floor(requestedCount)) : 0;\n  const page =\n    pageCount === 0\n      ? 0\n      : Number.isFinite(requestedPage)\n        ? Math.max(1, Math.min(pageCount, Math.floor(requestedPage)))\n        : 1;\n  const pages = paginationRange(page, pageCount, siblings);\n  const go = (p: number) => onPageChange(Math.min(Math.max(1, p), Math.max(1, pageCount)));\n  const shownSummary =\n    summary ??\n    (total !== undefined && pageSize\n      ? paginationSummary(pageWindow({ page: page || 1, pageSize, total }))\n      : null);\n  const sizes =\n    pageSize !== undefined && !pageSizeOptions.includes(pageSize)\n      ? [...pageSizeOptions, pageSize].sort((a, b) => a - b)\n      : pageSizeOptions;\n  const position = `Page ${page} of ${pageCount}`;\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      data-slot=\"pagination\"\n      className={cn('flex flex-wrap items-center justify-between gap-x-3 gap-y-2', className)}\n      {...props}\n    >\n      <div\n        data-slot=\"pagination-summary\"\n        className=\"min-w-0 text-xs text-muted-foreground tabular-nums max-sm:order-2\"\n      >\n        {shownSummary}\n      </div>\n      {/* Announced when the page changes; the visible \"Page 2 of 13\" is for phones. */}\n      <span role=\"status\" className=\"sr-only\">\n        {pageCount > 0 ? position : ''}\n      </span>\n      <ul className=\"flex items-center gap-1 max-sm:order-1 max-sm:w-full max-sm:justify-between\">\n        <li>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => go(page - 1)}\n            disabled={page <= 1}\n            aria-label=\"Previous page\"\n            className=\"max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0\"\n          >\n            <ChevronLeft aria-hidden />\n            <span className=\"hidden sm:inline\">Previous</span>\n          </Button>\n        </li>\n        {pages.map((p, i) =>\n          p === 'ellipsis' ? (\n            <li key={`e${i}`} aria-hidden className=\"hidden px-1 text-muted-foreground sm:block\">\n              …\n            </li>\n          ) : (\n            <li key={p} className=\"hidden sm:block\">\n              <Button\n                variant={p === page ? 'outline' : 'ghost'}\n                size=\"icon-sm\"\n                onClick={() => go(p)}\n                aria-current={p === page ? 'page' : undefined}\n                aria-label={`Page ${p}`}\n                className={cn('tabular-nums', p === page && 'border-brand/40 text-brand')}\n              >\n                {p}\n              </Button>\n            </li>\n          ),\n        )}\n        <li\n          aria-hidden\n          data-slot=\"pagination-position\"\n          className=\"px-2 text-sm font-medium tabular-nums sm:hidden\"\n        >\n          {position}\n        </li>\n        <li>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => go(page + 1)}\n            disabled={page >= pageCount}\n            aria-label=\"Next page\"\n            className=\"max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0\"\n          >\n            <span className=\"hidden sm:inline\">Next</span>\n            <ChevronRight aria-hidden />\n          </Button>\n        </li>\n      </ul>\n      {onPageSizeChange && (\n        <Select\n          value={pageSize !== undefined ? String(pageSize) : undefined}\n          onValueChange={(v) => onPageSizeChange(Number(v))}\n        >\n          <SelectTrigger\n            size=\"sm\"\n            aria-label={pageSizeLabel}\n            className=\"w-auto gap-1.5 text-xs tabular-nums max-sm:order-3 pointer-coarse:h-11\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            {sizes.map((s) => (\n              <SelectItem key={s} value={String(s)}>\n                {formatPageSize(s)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      )}\n    </nav>\n  );\n}\n\nexport { Pagination };\n"],"mappings":"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"}

package/dist/components/sheet.d.ts

@@ -9,8 +9,13 @@ declare const sideClasses: {
     readonly top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]";
     readonly bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]";
 };
-declare function SheetContent({ className, children, side, handle, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, children, side, handle, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: keyof typeof sideClasses;
+    /**
+     * The X in the corner. Turn it off when the sheet draws its own header
+     * with a close control (a SheetClose), so there are not two.
+     */
+    showCloseButton?: boolean;
     /**
      * A grab bar at the top edge, the cue that this is a drawer. Visual only:
      * it does not drag; close with the button, Escape or the overlay. On by

package/dist/components/sheet.js

@@ -28,7 +28,7 @@ var sideClasses = {
 	top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]",
 	bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]"
 };
-function SheetContent({ className, children, side = "right", handle = side === "bottom", ...props }) {
+function SheetContent({ className, children, side = "right", handle = side === "bottom", showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
 		"data-slot": "sheet-overlay",
 		className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
@@ -43,7 +43,7 @@ function SheetContent({ className, children, side = "right", handle = side === "
 				className: "mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong"
 			}),
 			children,
-			/* @__PURE__ */ jsxs(Dialog.Close, {
+			showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
 				className: cn("absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5", side === "top" ? "top-[calc(env(safe-area-inset-top)+0.75rem)]" : "top-3"),
 				children: [/* @__PURE__ */ jsx(X, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { Dialog as SheetPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers. Each keeps clear of the\n  // notch or home indicator on its edge (safe-area insets).\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  handle = side === 'bottom',\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: keyof typeof sideClasses;\n  /**\n   * A grab bar at the top edge, the cue that this is a drawer. Visual only:\n   * it does not drag; close with the button, Escape or the overlay. On by\n   * default for bottom sheets.\n   */\n  handle?: boolean;\n}) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\"\n      />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {handle && (\n          <div\n            data-slot=\"sheet-handle\"\n            aria-hidden\n            className=\"mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong\"\n          />\n        )}\n        {children}\n        {/* 44px on touch screens, 32px with a mouse. */}\n        <SheetPrimitive.Close\n          className={cn(\n            'absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5',\n            side === 'top' ? 'top-[calc(env(safe-area-inset-top)+0.75rem)]' : 'top-3',\n          )}\n        >\n          <X aria-hidden />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,OAA0D;CAC5E,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAGN,KAAK;CACL,QACE;AACJ;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,SAAS,SAAS,UAClB,GAAG,SASF;CACD,OACE,qBAACA,OAAe,QAAhB,EAAA,UAAA,CACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAU;CACX,CAAA,GACD,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mQACA,YAAY,OACZ,SACF;EACA,GAAI;EAPN,UAAA;GASG,UACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;GACX,CAAA;GAEF;GAED,qBAACA,OAAe,OAAhB;IACE,WAAW,GACT,gRACA,SAAS,QAAQ,iDAAiD,OACpE;IAJF,UAAA,CAME,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CACjB;;EACA;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { Dialog as SheetPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nconst sideClasses = {\n  right: 'inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm',\n  left: 'inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm',\n  // Top and bottom sheets are the mobile drawers. Each keeps clear of the\n  // notch or home indicator on its edge (safe-area insets).\n  top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]',\n  bottom:\n    'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]',\n} as const;\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  handle = side === 'bottom',\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: keyof typeof sideClasses;\n  /**\n   * The X in the corner. Turn it off when the sheet draws its own header\n   * with a close control (a SheetClose), so there are not two.\n   */\n  showCloseButton?: boolean;\n  /**\n   * A grab bar at the top edge, the cue that this is a drawer. Visual only:\n   * it does not drag; close with the button, Escape or the overlay. On by\n   * default for bottom sheets.\n   */\n  handle?: boolean;\n}) {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\"\n      />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          'fixed z-50 max-h-dvh overflow-y-auto overscroll-contain flex flex-col gap-4 border-border-strong bg-surface-raised text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-sheet-out data-[state=open]:animate-sheet-in',\n          sideClasses[side],\n          className,\n        )}\n        {...props}\n      >\n        {handle && (\n          <div\n            data-slot=\"sheet-handle\"\n            aria-hidden\n            className=\"mx-auto mt-2 -mb-2 h-1 w-10 shrink-0 rounded-full bg-border-strong\"\n          />\n        )}\n        {children}\n        {/* 44px on touch screens, 32px with a mouse. */}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            className={cn(\n              'absolute right-3 grid size-8 place-items-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:size-11 [&_svg]:size-4 pointer-coarse:[&_svg]:size-5',\n              side === 'top' ? 'top-[calc(env(safe-area-inset-top)+0.75rem)]' : 'top-3',\n            )}\n          >\n            <X aria-hidden />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-1.5 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em] text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,OAA0D;CAC5E,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,cAAc;CAClB,OAAO;CACP,MAAM;CAGN,KAAK;CACL,QACE;AACJ;AAEA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,SAAS,SAAS,UAClB,kBAAkB,MAClB,GAAG,SAcF;CACD,OACE,qBAACA,OAAe,QAAhB,EAAA,UAAA,CACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAU;CACX,CAAA,GACD,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mQACA,YAAY,OACZ,SACF;EACA,GAAI;EAPN,UAAA;GASG,UACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;GACX,CAAA;GAEF;GAEA,mBACC,qBAACA,OAAe,OAAhB;IACE,WAAW,GACT,gRACA,SAAS,QAAQ,iDAAiD,OACpE;IAJF,UAAA,CAME,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CACjB;;EAEF;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/steps.d.ts

@@ -3,12 +3,25 @@ export interface StepItem {
     title: React.ReactNode;
     description?: React.ReactNode;
 }
+export type StepsBreakpoint = 'sm' | 'md' | 'lg';
 export interface StepsProps extends React.ComponentProps<'ol'> {
     items: StepItem[];
     /** 0-based index of the step in progress; earlier steps show as done. */
     current: number;
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Below this width a horizontal Steps shows only where you are: the step's
+     * title, "Step 2 of 5" and a segmented progress bar. `sm` (640px) by
+     * default for horizontal steps; `false` keeps every step visible.
+     */
+    compactBelow?: StepsBreakpoint | false;
+    /** The compact counter's text. */
+    formatCounter?: (step: number, total: number) => string;
 }
-/** Progress through a short multi-step flow (a wizard, an onboarding). */
-declare function Steps({ items, current, orientation, className, ...props }: StepsProps): React.JSX.Element;
+/**
+ * Progress through a short multi-step flow (a wizard, an onboarding). On a
+ * phone a horizontal Steps collapses to the current step, "Step 2 of 5" and
+ * a progress bar, instead of squeezing every title into a few letters.
+ */
+declare function Steps({ items, current, orientation, compactBelow, formatCounter, className, ...props }: StepsProps): React.JSX.Element;
 export { Steps };

package/dist/components/steps.js

@@ -1,10 +1,42 @@
 import { cn } from "../lib/utils.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";
 //#region src/components/steps.tsx
-/** Progress through a short multi-step flow (a wizard, an onboarding). */
-function Steps({ items, current, orientation = "horizontal", className, ...props }) {
+var compactClasses = {
+	sm: {
+		other: "max-sm:hidden",
+		item: "max-sm:grid max-sm:grid-cols-[minmax(0,1fr)_auto] max-sm:items-baseline max-sm:gap-x-3 max-sm:gap-y-2",
+		marker: "max-sm:hidden",
+		counter: "hidden max-sm:block",
+		bar: "hidden max-sm:flex max-sm:col-span-2",
+		text: "max-sm:pt-0"
+	},
+	md: {
+		other: "max-md:hidden",
+		item: "max-md:grid max-md:grid-cols-[minmax(0,1fr)_auto] max-md:items-baseline max-md:gap-x-3 max-md:gap-y-2",
+		marker: "max-md:hidden",
+		counter: "hidden max-md:block",
+		bar: "hidden max-md:flex max-md:col-span-2",
+		text: "max-md:pt-0"
+	},
+	lg: {
+		other: "max-lg:hidden",
+		item: "max-lg:grid max-lg:grid-cols-[minmax(0,1fr)_auto] max-lg:items-baseline max-lg:gap-x-3 max-lg:gap-y-2",
+		marker: "max-lg:hidden",
+		counter: "hidden max-lg:block",
+		bar: "hidden max-lg:flex max-lg:col-span-2",
+		text: "max-lg:pt-0"
+	}
+};
+/**
+* Progress through a short multi-step flow (a wizard, an onboarding). On a
+* phone a horizontal Steps collapses to the current step, "Step 2 of 5" and
+* a progress bar, instead of squeezing every title into a few letters.
+*/
+function Steps({ items, current, orientation = "horizontal", compactBelow = orientation === "horizontal" ? "sm" : false, formatCounter = (step, total) => `Step ${step} of ${total}`, className, ...props }) {
+	const compact = compactBelow ? compactClasses[compactBelow] : null;
+	const focus = Math.min(Math.max(0, current), items.length - 1);
 	return /* @__PURE__ */ jsx("ol", {
 		"data-slot": "steps",
 		"data-orientation": orientation,
@@ -12,29 +44,43 @@ function Steps({ items, current, orientation = "horizontal", className, ...props
 		...props,
 		children: items.map((item, i) => {
 			const state = i < current ? "complete" : i === current ? "current" : "upcoming";
+			const isFocus = compact && i === focus;
 			return /* @__PURE__ */ jsxs("li", {
 				"data-state": state,
 				"aria-current": state === "current" ? "step" : void 0,
-				className: cn("flex min-w-0 items-start gap-2.5", orientation === "horizontal" && "flex-1"),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: cn("grid size-6 shrink-0 place-items-center rounded-full border text-xs font-semibold tabular-nums", state === "complete" && "border-primary bg-primary text-primary-foreground", state === "current" && "border-brand bg-brand-soft text-brand", state === "upcoming" && "border-border-strong text-muted-foreground"),
-					children: state === "complete" ? /* @__PURE__ */ jsx(Check, {
-						className: "size-3.5",
-						"aria-hidden": true
-					}) : i + 1
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "grid min-w-0 gap-0.5 pt-0.5",
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: cn("break-words text-[13px] font-semibold", state === "upcoming" && "text-muted-foreground"),
-						children: [item.title, /* @__PURE__ */ jsx("span", {
-							className: "sr-only",
-							children: state === "complete" ? " (done)" : state === "current" ? " (current)" : ""
+				className: cn("flex min-w-0 items-start gap-2.5", orientation === "horizontal" && "flex-1", compact && (isFocus ? compact.item : compact.other)),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("grid size-6 shrink-0 place-items-center rounded-full border text-xs font-semibold tabular-nums", state === "complete" && "border-primary bg-primary text-primary-foreground", state === "current" && "border-brand bg-brand-soft text-brand", state === "upcoming" && "border-border-strong text-muted-foreground", isFocus && compact.marker),
+						children: state === "complete" ? /* @__PURE__ */ jsx(Check, {
+							className: "size-3.5",
+							"aria-hidden": true
+						}) : i + 1
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn("grid min-w-0 gap-0.5 pt-0.5", isFocus && compact.text),
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: cn("break-words text-[13px] font-semibold", state === "upcoming" && "text-muted-foreground"),
+							children: [item.title, /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: state === "complete" ? " (done)" : state === "current" ? " (current)" : ""
+							})]
+						}), item.description && /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: item.description
 						})]
-					}), item.description && /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-muted-foreground",
-						children: item.description
-					})]
-				})]
+					}),
+					isFocus && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						"data-slot": "steps-counter",
+						className: cn("text-xs whitespace-nowrap text-muted-foreground tabular-nums", compact.counter),
+						children: formatCounter(focus + 1, items.length)
+					}), /* @__PURE__ */ jsx("span", {
+						"data-slot": "steps-bar",
+						"aria-hidden": true,
+						className: cn("gap-1", compact.bar),
+						children: items.map((_, j) => /* @__PURE__ */ jsx("span", { className: cn("h-1 flex-1 rounded-full", j <= current ? "bg-brand" : "bg-muted") }, j))
+					})] })
+				]
 			}, i);
 		})
 	});