@burtson-labs/ui 0.12.3 → 0.13.0

package/dist/components/pagination.d.ts

@@ -4,15 +4,116 @@ import * as React from 'react';
  * either side of the current one, and 'ellipsis' for the gaps.
  */
 export declare function paginationRange(page: number, pageCount: number, siblings?: number): (number | 'ellipsis')[];
+/** The page sizes offered by default: 25, 50 or 100 rows. */
+export declare const DEFAULT_PAGE_SIZES: readonly number[];
+export interface PageWindow {
+    /** 1-based, clamped to the pages that exist (1 when there are no rows). */
+    page: number;
+    /** At least 1, so "Page 1 of 1" reads sensibly for an empty list. */
+    pageCount: number;
+    pageSize: number;
+    total: number;
+    /** 1-based index of the first row on this page; 0 when there are none. */
+    from: number;
+    /** 1-based index of the last row on this page; 0 when there are none. */
+    to: number;
+}
+/** Pages needed for `total` rows, never less than 1. */
+export declare function pageCountFor(total: number, pageSize: number): number;
+/** A requested page clamped to 1…pageCount. Anything unreadable ("abc", NaN) is page 1. */
+export declare function clampPage(page: unknown, pageCount: number): number;
+/** Where page `page` of `total` rows starts and ends, for server-side paging. */
+export declare function pageWindow({ page, pageSize, total, }: {
+    page: unknown;
+    pageSize: number;
+    total: number;
+}): PageWindow;
+/** One page of `rows`, with the numbers for the page controls. */
+export declare function paginate<T>(rows: readonly T[], page: unknown, pageSize: number): PageWindow & {
+    rows: T[];
+};
+/**
+ * "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.
+ */
+export declare function paginationSummary({ from, to, total }: Pick<PageWindow, 'from' | 'to' | 'total'>, locale?: string): string;
+export interface UsePaginationOptions {
+    /** Controlled page (e.g. read from the URL). Leave out to let the hook keep it. */
+    page?: number;
+    /** Starting page when uncontrolled. */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Controlled page size. */
+    pageSize?: number;
+    /** Starting page size when uncontrolled; the first option by default. */
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Sizes offered by the page-size menu. */
+    pageSizeOptions?: readonly number[];
+    /**
+     * Whatever decides which rows are listed (search text, a filter, a tab).
+     * When it changes, paging goes back to page 1. The first render never
+     * resets, so a link to page 3 stays on page 3.
+     */
+    resetKey?: unknown;
+    /** Remembers the chosen page size in localStorage under this key. */
+    storageKey?: string;
+    /**
+     * The full row count when the server pages: `rows` is then already the
+     * current page and is not sliced.
+     */
+    total?: number;
+    /** Locale for the summary's numbers. */
+    locale?: string;
+}
+export interface UsePaginationResult<T> extends PageWindow {
+    /** The rows to render on this page. */
+    rows: T[];
+    pageSizeOptions: readonly number[];
+    /** "1–25 of 312". */
+    summary: string;
+    /** More rows than the smallest page size: worth showing controls for. */
+    hasPages: boolean;
+    setPage: (page: number) => void;
+    /** Changes the size and goes back to page 1. */
+    setPageSize: (pageSize: number) => void;
+    /** Spread onto Pagination (or pass to DataTable's paging props). */
+    paginationProps: Pick<PaginationProps, 'page' | 'pageCount' | 'onPageChange' | 'pageSize' | 'pageSizeOptions' | 'onPageSizeChange'> & {
+        summary: string;
+    };
+}
+/**
+ * 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.
+ */
+export declare function usePagination<T>(rows: readonly T[], options?: UsePaginationOptions): UsePaginationResult<T>;
 export interface PaginationProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {
     /** 1-based current page. */
     page: number;
     pageCount: number;
     onPageChange: (page: number) => void;
     siblings?: number;
-    /** Optional summary on the left, e.g. "1–25 of 312". */
+    /** Summary on the left, e.g. "1–25 of 312". Worked out from `total` when left out. */
     summary?: React.ReactNode;
+    /** Total rows: with `pageSize`, gives the default summary. */
+    total?: number;
+    /** Rows per page, shown in the page-size menu. */
+    pageSize?: number;
+    /** Sizes in the page-size menu (25, 50, 100 by default). */
+    pageSizeOptions?: readonly number[];
+    /** Adds a rows-per-page menu. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** The page-size menu's accessible name. */
+    pageSizeLabel?: string;
+    /** An option's text, e.g. "25 per page". */
+    formatPageSize?: (size: number) => string;
 }
-/** Page controls for a table or list. Buttons are real buttons, keyboard-reachable. */
-declare function Pagination({ page: requestedPage, pageCount: requestedCount, onPageChange, siblings, summary, className, ...props }: PaginationProps): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function Pagination({ page: requestedPage, pageCount: requestedCount, onPageChange, siblings, summary, total, pageSize, pageSizeOptions, onPageSizeChange, pageSizeLabel, formatPageSize, className, ...props }: PaginationProps): React.JSX.Element;
 export { Pagination };

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":";;;;;;;;;;;;AAaA,SAAgB,gBACd,MACA,WACA,WAAW,GACc;CACzB,YAAY,OAAO,SAAS,SAAS,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,CAAC,IAAI;CAC9E,WAAW,OAAO,SAAS,QAAQ,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI;CACxF,OAAO,OAAO,SAAS,IAAI,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI;CACpF,IAAI,aAAa,GAAG,OAAO,CAAC;CAC5B,MAAM,SAAS,WAAW,IAAI;CAC9B,IAAI,aAAa,QAAQ,OAAO,MAAM,KAAK,EAAE,QAAQ,UAAU,IAAI,GAAG,MAAM,IAAI,CAAC;CACjF,MAAM,QAAQ,KAAK,IAAI,GAAG,OAAO,QAAQ;CACzC,MAAM,MAAM,KAAK,IAAI,YAAY,GAAG,OAAO,QAAQ;CACnD,MAAM,MAA+B,CAAC,CAAC;CACvC,IAAI,QAAQ,GAAG,IAAI,KAAK,UAAU;CAClC,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,KAAK,GAAG,IAAI,KAAK,CAAC;CAChD,IAAI,MAAM,YAAY,GAAG,IAAI,KAAK,UAAU;CAC5C,IAAI,KAAK,SAAS;CAClB,OAAO;AACT;;AAOA,IAAa,qBAAwC;CAAC;CAAI;CAAI;AAAG;;AAgBjE,SAAgB,aAAa,OAAe,UAA0B;CACpE,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,SAAS,GAAG,OAAO;CAElD,OAAO,KAAK,IAAI,GAAG,KAAK,KAAK,SADhB,OAAO,SAAS,QAAQ,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC,IAAI,EACpC,CAAC;AAC5C;;AAGA,SAAgB,UAAU,MAAe,WAA2B;CAClE,MAAM,IAAI,OAAO,SAAS,WAAW,OAAO,OAAO,IAAI;CACvD,IAAI,CAAC,OAAO,SAAS,CAAC,GAAG,OAAO;CAChC,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,CAAC,CAAC,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,KAAK,CAAC,CAAC;AACrF;;AAGA,SAAgB,WAAW,EACzB,MACA,UACA,SAKa;CACb,MAAM,OAAO,OAAO,SAAS,QAAQ,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC,IAAI;CAC7E,MAAM,YAAY,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,IAAI;CAC5E,MAAM,YAAY,aAAa,WAAW,IAAI;CAC9C,MAAM,IAAI,UAAU,MAAM,SAAS;CACnC,MAAM,SAAS,IAAI,KAAK;CACxB,MAAM,KAAK,KAAK,IAAI,QAAQ,MAAM,SAAS;CAC3C,OAAO;EACL,MAAM;EACN;EACA,UAAU;EACV,OAAO;EACP,MAAM,YAAY,QAAQ,IAAI;EAC9B,IAAI,YAAY,KAAK;CACvB;AACF;;AAGA,SAAgB,SACd,MACA,MACA,UAC4B;CAC5B,MAAM,IAAI,WAAW;EAAE;EAAM;EAAU,OAAO,KAAK;CAAO,CAAC;CAC3D,OAAO;EAAE,GAAG;EAAG,MAAM,KAAK,MAAM,EAAE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,EAAE;CAAE;AACjE;;;;;AAMA,SAAgB,kBACd,EAAE,MAAM,IAAI,SACZ,QACQ;CACR,MAAM,MAAM,IAAI,KAAK,aAAa,MAAM;CACxC,IAAI,CAAC,OAAO,OAAO;CACnB,IAAI,SAAS,KAAK,OAAO,OAAO,OAAO,GAAG,IAAI,OAAO,KAAK,EAAE,MAAM,IAAI,OAAO,KAAK;CAClF,OAAO,GAAG,IAAI,OAAO,IAAI,EAAE,GAAG,IAAI,OAAO,EAAE,EAAE,MAAM,IAAI,OAAO,KAAK;AACrE;AAEA,IAAM,iBAAiB,QAAgB,gBAAgB;AAEvD,SAAS,eAAe,KAAyB,SAAgD;CAC/F,IAAI,CAAC,KAAK,OAAO,KAAA;CACjB,IAAI;EACF,MAAM,IAAI,OAAO,WAAW,cAAc,QAAQ,cAAc,GAAG,CAAC,CAAC;EACrE,OAAO,QAAQ,SAAS,CAAC,IAAI,IAAI,KAAA;CACnC,QAAQ;EACN;CACF;AACF;AAEA,SAAS,gBAAgB,KAAyB,MAAc;CAC9D,IAAI,CAAC,KAAK;CACV,IAAI;EACF,WAAW,cAAc,QAAQ,cAAc,GAAG,GAAG,OAAO,IAAI,CAAC;CACnE,QAAQ,CAER;AACF;;;;;;AAuDA,SAAgB,cACd,MACA,UAAgC,CAAC,GACT;CACxB,MAAM,EACJ,MAAM,UACN,cAAc,GACd,cACA,UAAU,cACV,iBACA,kBACA,kBAAkB,oBAClB,UACA,YACA,OAAO,aACP,WACE;CAEJ,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,WAAW;CAC5D,MAAM,CAAC,WAAW,gBAAgB,MAAM,eAEpC,eAAe,YAAY,eAAe,KAAK,mBAAmB,gBAAgB,MAAM,EAC5F;CACA,MAAM,OAAO,YAAY;CACzB,MAAM,WAAW,gBAAgB;CAGjC,MAAM,SAAS,MAAM,OAAO;EAAE;EAAc;EAAkB;EAAU;CAAW,CAAC;CACpF,MAAM,gBAAgB;EACpB,OAAO,UAAU;GAAE;GAAc;GAAkB;GAAU;EAAW;CAC1E,CAAC;CAED,MAAM,UAAU,MAAM,aAAa,SAAiB;EAClD,aAAa,IAAI;EACjB,OAAO,QAAQ,eAAe,IAAI;CACpC,GAAG,CAAC,CAAC;CACL,MAAM,cAAc,MAAM,aAAa,SAAiB;EACtD,gBAAgB,OAAO,QAAQ,YAAY,IAAI;EAC/C,aAAa,IAAI;EACjB,aAAa,CAAC;EACd,OAAO,QAAQ,mBAAmB,IAAI;EACtC,OAAO,QAAQ,eAAe,CAAC;CACjC,GAAG,CAAC,CAAC;CAIL,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,QAAQ;CACrD,IAAI,CAAC,OAAO,GAAG,SAAS,QAAQ,GAAG;EACjC,WAAW,QAAQ;EACnB,aAAa,CAAC;CAChB;CACA,MAAM,eAAe,MAAM,OAAO,QAAQ;CAC1C,MAAM,gBAAgB;EACpB,IAAI,OAAO,GAAG,aAAa,SAAS,QAAQ,GAAG;EAC/C,aAAa,UAAU;EACvB,MAAM,EAAE,UAAU,YAAY,cAAc,WAAW,OAAO;EAC9D,IAAI,eAAe,KAAA,KAAa,eAAe,GAAG,SAAS,CAAC;CAC9D,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,IACJ,gBAAgB,KAAA,IACZ,SAAS,MAAM,MAAM,QAAQ,IAC7B;EAAE,GAAG,WAAW;GAAE;GAAM;GAAU,OAAO;EAAY,CAAC;EAAG,MAAM,CAAC,GAAG,IAAI;CAAE;CAC/E,MAAM,UAAU,kBAAkB,GAAG,MAAM;CAC3C,MAAM,WAAW,EAAE,QAAQ,KAAK,IAAI,GAAG,iBAAiB,EAAE,QAAQ;CAElE,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;EACA,iBAAiB;GACf,MAAM,EAAE;GACR,WAAW,EAAE;GACb,cAAc;GACd,UAAU,EAAE;GACZ;GACA,kBAAkB;GAClB;EACF;CACF;AACF;;;;;;;AAkCA,SAAS,WAAW,EAClB,MAAM,eACN,WAAW,gBACX,cACA,WAAW,GACX,SACA,OACA,UACA,kBAAkB,oBAClB,kBACA,gBAAgB,iBAChB,kBAAkB,SAAS,GAAG,KAAK,YACnC,WACA,GAAG,SACe;CAClB,MAAM,YAAY,OAAO,SAAS,cAAc,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,CAAC,IAAI;CAC9F,MAAM,OACJ,cAAc,IACV,IACA,OAAO,SAAS,aAAa,IAC3B,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,KAAK,MAAM,aAAa,CAAC,CAAC,IAC1D;CACR,MAAM,QAAQ,gBAAgB,MAAM,WAAW,QAAQ;CACvD,MAAM,MAAM,MAAc,aAAa,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,GAAG,SAAS,CAAC,CAAC;CACvF,MAAM,eACJ,YACC,UAAU,KAAA,KAAa,WACpB,kBAAkB,WAAW;EAAE,MAAM,QAAQ;EAAG;EAAU;CAAM,CAAC,CAAC,IAClE;CACN,MAAM,QACJ,aAAa,KAAA,KAAa,CAAC,gBAAgB,SAAS,QAAQ,IACxD,CAAC,GAAG,iBAAiB,QAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,IACnD;CACN,MAAM,WAAW,QAAQ,KAAK,MAAM;CACpC,OACE,qBAAC,OAAD;EACE,cAAW;EACX,aAAU;EACV,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;EAJN,UAAA;GAME,oBAAC,OAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACE,CAAA;GAEL,oBAAC,QAAD;IAAM,MAAK;IAAS,WAAU;IAC3B,UAAA,YAAY,IAAI,WAAW;GACxB,CAAA;GACN,qBAAC,MAAD;IAAI,WAAU;IAAd,UAAA;KACE,oBAAC,MAAD,EAAA,UACE,qBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe,GAAG,OAAO,CAAC;MAC1B,UAAU,QAAQ;MAClB,cAAW;MACX,WAAU;MANZ,UAAA,CAQE,oBAAC,aAAD,EAAa,eAAA,KAAa,CAAA,GAC1B,oBAAC,QAAD;OAAM,WAAU;OAAmB,UAAA;MAAc,CAAA,CAC3C;KACN,CAAA,EAAA,CAAA;KACH,MAAM,KAAK,GAAG,MACb,MAAM,aACJ,oBAAC,MAAD;MAAkB,eAAA;MAAY,WAAU;MAA6C,UAAA;KAEjF,GAFK,IAAI,GAET,IAEJ,oBAAC,MAAD;MAAY,WAAU;MACpB,UAAA,oBAAC,QAAD;OACE,SAAS,MAAM,OAAO,YAAY;OAClC,MAAK;OACL,eAAe,GAAG,CAAC;OACnB,gBAAc,MAAM,OAAO,SAAS,KAAA;OACpC,cAAY,QAAQ;OACpB,WAAW,GAAG,gBAAgB,MAAM,QAAQ,4BAA4B;OAEvE,UAAA;MACK,CAAA;KACN,GAXK,CAWL,CAER;KACA,oBAAC,MAAD;MACE,eAAA;MACA,aAAU;MACV,WAAU;MAET,UAAA;KACC,CAAA;KACJ,oBAAC,MAAD,EAAA,UACE,qBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe,GAAG,OAAO,CAAC;MAC1B,UAAU,QAAQ;MAClB,cAAW;MACX,WAAU;MANZ,UAAA,CAQE,oBAAC,QAAD;OAAM,WAAU;OAAmB,UAAA;MAAU,CAAA,GAC7C,oBAAC,cAAD,EAAc,eAAA,KAAa,CAAA,CACrB;KACN,CAAA,EAAA,CAAA;IACF;;GACH,oBACC,qBAAC,QAAD;IACE,OAAO,aAAa,KAAA,IAAY,OAAO,QAAQ,IAAI,KAAA;IACnD,gBAAgB,MAAM,iBAAiB,OAAO,CAAC,CAAC;IAFlD,UAAA,CAIE,oBAAC,eAAD;KACE,MAAK;KACL,cAAY;KACZ,WAAU;KAEV,UAAA,oBAAC,aAAD,CAAc,CAAA;IACD,CAAA,GACf,oBAAC,eAAD;KAAe,OAAM;KAClB,UAAA,MAAM,KAAK,MACV,oBAAC,YAAD;MAAoB,OAAO,OAAO,CAAC;MAChC,UAAA,eAAe,CAAC;KACP,GAFK,CAEL,CACb;IACY,CAAA,CACT;;EAEP;;AAET"}

package/dist/components/popover.d.ts

@@ -5,8 +5,13 @@ import * as React from 'react';
  * with a strong border, and the one place a heavy shadow is allowed.
  */
 export declare const surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]";
-/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */
-export declare const menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
+/**
+ * A menu row: 32px, 8px radius (the surface's 12px less its 4px padding); the
+ * focused row is a quiet secondary fill (muted is too close to the raised
+ * surface in dark mode to read). The outline is suppressed
+ * with !important so a host page's global focus outline cannot box the row.
+ */
+export declare const menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
 declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;

package/dist/components/popover.js

@@ -8,8 +8,13 @@ import { jsx } from "react/jsx-runtime";
 * with a strong border, and the one place a heavy shadow is allowed.
 */
 var surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]";
-/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */
-var menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
+/**
+* A menu row: 32px, 8px radius (the surface's 12px less its 4px padding); the
+* focused row is a quiet secondary fill (muted is too close to the raised
+* surface in dark mode to read). The outline is suppressed
+* with !important so a host page's global focus outline cannot box the row.
+*/
+var menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 function Popover$1(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["Popover","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/**\n * The floating surface shared by popovers, menus and select lists: raised,\n * with a strong border, and the one place a heavy shadow is allowed.\n */\nexport const surfaceClasses =\n  'z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]';\n\n/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */\nexport const menuItemClasses =\n  \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 6,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'w-72 max-w-[calc(100vw-2rem)] max-h-(--radix-popover-content-available-height) overflow-y-auto origin-(--radix-popover-content-transform-origin) p-4 outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;;;;;AASA,IAAa,iBACX;;AAGF,IAAa,kBACX;AAEF,SAASA,UAAQ,OAA2D;CAC1E,OAAO,oBAACC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,cAAc,OAA6D;CAClF,OAAO,oBAACA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACH;EACK;EACZ,WAAW,GACT,gBACA,uKACA,SACF;EACA,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}
+{"version":3,"file":"popover.js","names":["Popover","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/**\n * The floating surface shared by popovers, menus and select lists: raised,\n * with a strong border, and the one place a heavy shadow is allowed.\n */\nexport const surfaceClasses =\n  'z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]';\n\n/**\n * A menu row: 32px, 8px radius (the surface's 12px less its 4px padding); the\n * focused row is a quiet secondary fill (muted is too close to the raised\n * surface in dark mode to read). The outline is suppressed\n * with !important so a host page's global focus outline cannot box the row.\n */\nexport const menuItemClasses =\n  \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 6,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'w-72 max-w-[calc(100vw-2rem)] max-h-(--radix-popover-content-available-height) overflow-y-auto origin-(--radix-popover-content-transform-origin) p-4 outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;;;;;AASA,IAAa,iBACX;;;;;;;AAQF,IAAa,kBACX;AAEF,SAASA,UAAQ,OAA2D;CAC1E,OAAO,oBAACC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,cAAc,OAA6D;CAClF,OAAO,oBAACA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACH;EACK;EACZ,WAAW,GACT,gBACA,uKACA,SACF;EACA,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}

package/dist/components/secret-input.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import { IconButton } from "./icon-button.js";
 import { Input } from "./input.js";
+import { IconButton } from "./icon-button.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Eye from "@burtson-labs/icons/react/eye";

package/dist/components/select.js

@@ -79,7 +79,7 @@ function SelectLabel({ className, ...props }) {
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select.Item, {
 		"data-slot": "select-item",
-		className: cn("relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute right-2 flex size-3.5 items-center justify-center",

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\nimport { surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: 'sm' | 'default' }) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        fieldClasses,\n        \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"size-4 opacity-60\" aria-hidden />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'popper',\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          surfaceClasses,\n          'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronUp className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronDown className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-brand\" aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;AAWA,SAASA,SAAO,OAA0D;CACxE,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SACkF;CACrF,OACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,cACA,+XACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACD,oBAACA,OAAgB,MAAjB;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD;IAAa,WAAU;IAAoB,eAAA;GAAa,CAAA;EACpC,CAAA,CACC;;AAE7B;AAEA,SAAS,cAAc,EACrB,WACA,UACA,WAAW,UACX,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,QAAjB,EAAA,UACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,gBACA,4JACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EAVN,UAAA;GAYE,oBAACA,OAAgB,gBAAjB;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD;KAAW,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;GAChC,oBAACA,OAAgB,UAAjB;IACE,WAAW,GACT,OACA,aAAa,YACX,2FACJ;IAEC;GACuB,CAAA;GAC1B,oBAACA,OAAgB,kBAAjB;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD;KAAa,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,OACE,qBAACA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,uVACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,OAAgB,eAAjB,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAoB,eAAA;GAAa,CAAA,EACrB,CAAA;EAC3B,CAAA,GACN,oBAACA,OAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SACsD;CACzD,OACE,oBAACA,OAAgB,WAAjB;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\nimport { surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: 'sm' | 'default' }) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        fieldClasses,\n        \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"size-4 opacity-60\" aria-hidden />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'popper',\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          surfaceClasses,\n          'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronUp className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronDown className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-brand\" aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;AAWA,SAASA,SAAO,OAA0D;CACxE,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SACkF;CACrF,OACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,cACA,+XACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACD,oBAACA,OAAgB,MAAjB;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD;IAAa,WAAU;IAAoB,eAAA;GAAa,CAAA;EACpC,CAAA,CACC;;AAE7B;AAEA,SAAS,cAAc,EACrB,WACA,UACA,WAAW,UACX,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,QAAjB,EAAA,UACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,gBACA,4JACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EAVN,UAAA;GAYE,oBAACA,OAAgB,gBAAjB;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD;KAAW,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;GAChC,oBAACA,OAAgB,UAAjB;IACE,WAAW,GACT,OACA,aAAa,YACX,2FACJ;IAEC;GACuB,CAAA;GAC1B,oBAACA,OAAgB,kBAAjB;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD;KAAa,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,OACE,qBAACA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,OAAgB,eAAjB,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAoB,eAAA;GAAa,CAAA,EACrB,CAAA;EAC3B,CAAA,GACN,oBAACA,OAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SACsD;CACzD,OACE,oBAACA,OAAgB,WAAjB;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}