npm - @burtson-labs/ui - Versions diffs - 0.13.1 → 0.14.1 - Mend

@burtson-labs/ui 0.13.1 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/dist/components/number-input.js ADDED Viewed

@@ -0,0 +1,45 @@
+"use client";
+import { cn, noOutlineClasses } from "../lib/utils.js";
+import { fieldWidthClasses } from "./input.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/number-input.tsx
+/**
+* A number with its unit inside the field, right-aligned in tabular figures
+* so a column of them lines up, with the numeric keyboard on phones. The box
+* is the field: it carries the border, the focus ring and the invalid and
+* disabled states, and the input inside is borderless. The value stays a
+* string, as with any input: parse it on change.
+*/
+var NumberInput = React.forwardRef(function NumberInput({ prefix, suffix, width = "sm", decimal, className, containerClassName, disabled, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "number-input",
+		"data-disabled": disabled || void 0,
+		className: cn("flex h-9 min-w-0 items-stretch rounded-md border border-input bg-surface text-base text-foreground shadow-xs transition-[border-color,box-shadow,background-color] hover:border-border-strong sm:text-sm dark:bg-surface-raised", "has-[input:focus-visible]:border-ring has-[input:focus-visible]:inset-ring-1 has-[input:focus-visible]:inset-ring-ring", "has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]:focus-visible]:inset-ring-destructive", "data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:opacity-60", fieldWidthClasses[width], containerClassName),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "shrink-0 self-center pl-3 text-muted-foreground select-none",
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				"data-slot": "number-input-control",
+				inputMode: decimal ? "decimal" : "numeric",
+				autoComplete: "off",
+				disabled,
+				className: cn("w-full min-w-0 rounded-md bg-transparent px-3 text-right tabular-nums placeholder:text-muted-foreground disabled:cursor-not-allowed", noOutlineClasses, prefix && "pl-1.5", suffix && "pr-1.5", className),
+				...props
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "shrink-0 self-center pr-3 text-muted-foreground select-none",
+				children: suffix
+			})
+		]
+	});
+});
+//#endregion
+export { NumberInput };
+//# sourceMappingURL=number-input.js.map

package/dist/components/number-input.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"number-input.js","names":[],"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\n\nimport { type FieldWidth, fieldWidthClasses } from './input';\n\nexport interface NumberInputProps extends Omit<React.ComponentProps<'input'>, 'prefix' | 'type'> {\n /** Inside the field, before the number: \"$\". */\n prefix?: React.ReactNode;\n /** Inside the field, after the number: \"gal\", \"min\", \"%\". */\n suffix?: React.ReactNode;\n /** How wide the field is from 640px up; `sm` (money, a count) by default. */\n width?: FieldWidth;\n /** Allows a decimal point on the phone keyboard (`inputMode=\"decimal\"`). */\n decimal?: boolean;\n /** Classes for the box; `className` goes to the input itself. */\n containerClassName?: string;\n}\n\n/**\n * A number with its unit inside the field, right-aligned in tabular figures\n * so a column of them lines up, with the numeric keyboard on phones. The box\n * is the field: it carries the border, the focus ring and the invalid and\n * disabled states, and the input inside is borderless. The value stays a\n * string, as with any input: parse it on change.\n */\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(\n {\n prefix,\n suffix,\n width = 'sm',\n decimal,\n className,\n containerClassName,\n disabled,\n ...props\n }: NumberInputProps,\n ref,\n) {\n return (\n <div\n data-slot=\"number-input\"\n data-disabled={disabled || undefined}\n className={cn(\n 'flex h-9 min-w-0 items-stretch rounded-md border border-input bg-surface text-base text-foreground shadow-xs transition-[border-color,box-shadow,background-color] hover:border-border-strong sm:text-sm dark:bg-surface-raised',\n 'has-[input:focus-visible]:border-ring has-[input:focus-visible]:inset-ring-1 has-[input:focus-visible]:inset-ring-ring',\n 'has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]:focus-visible]:inset-ring-destructive',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:opacity-60',\n fieldWidthClasses[width],\n containerClassName,\n )}\n >\n {prefix && (\n <span aria-hidden className=\"shrink-0 self-center pl-3 text-muted-foreground select-none\">\n {prefix}\n </span>\n )}\n <input\n ref={ref}\n data-slot=\"number-input-control\"\n inputMode={decimal ? 'decimal' : 'numeric'}\n autoComplete=\"off\"\n disabled={disabled}\n className={cn(\n 'w-full min-w-0 rounded-md bg-transparent px-3 text-right tabular-nums placeholder:text-muted-foreground disabled:cursor-not-allowed',\n noOutlineClasses,\n prefix && 'pl-1.5',\n suffix && 'pr-1.5',\n className,\n )}\n {...props}\n />\n {suffix && (\n <span aria-hidden className=\"shrink-0 self-center pr-3 text-muted-foreground select-none\">\n {suffix}\n </span>\n )}\n </div>\n );\n});\n\nexport { NumberInput };\n"],"mappings":";;;;;;;;;;;;;AA0BA,IAAM,cAAc,MAAM,WAA+C,SAAS,YAChF,EACE,QACA,QACA,QAAQ,MACR,SACA,WACA,oBACA,UACA,GAAG,SAEL,KACA;CACA,OACE,qBAAC,OAAD;EACE,aAAU;EACV,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,mOACA,0HACA,yHACA,0FACA,kBAAkB,QAClB,kBACF;EAVF,UAAA;GAYG,UACC,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;IACzB,UAAA;GACG,CAAA;GAER,oBAAC,SAAD;IACO;IACL,aAAU;IACV,WAAW,UAAU,YAAY;IACjC,cAAa;IACH;IACV,WAAW,GACT,uIACA,kBACA,UAAU,UACV,UAAU,UACV,SACF;IACA,GAAI;GACL,CAAA;GACA,UACC,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;IACzB,UAAA;GACG,CAAA;EAEL;;AAET,CAAC"}

package/dist/components/onboarding-checklist.d.ts CHANGED Viewed

@@ -22,5 +22,5 @@ export interface OnboardingChecklistProps extends Omit<React.ComponentProps<'sec
  * A short list of first tasks with progress. The app decides when each task
  * is done and whether the list shows at all; this renders it.
  */
-declare function OnboardingChecklist({ title, description, items, onDismiss, dismissLabel, complete, className, ...props }: OnboardingChecklistProps): React.JSX.Element;
+declare const OnboardingChecklist: React.ForwardRefExoticComponent<Omit<OnboardingChecklistProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { OnboardingChecklist };

package/dist/components/onboarding-checklist.js CHANGED Viewed

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Progress } from "./progress.js";
 import * as React from "react";
@@ -10,11 +11,12 @@ import CircleDashed from "@burtson-labs/icons/react/circle-dashed";
 * A short list of first tasks with progress. The app decides when each task
 * is done and whether the list shows at all; this renders it.
 */
-function OnboardingChecklist({ title, description, items, onDismiss, dismissLabel = "Dismiss checklist", complete, className, ...props }) {
+var OnboardingChecklist = React.forwardRef(function OnboardingChecklist({ title, description, items, onDismiss, dismissLabel = "Dismiss checklist", complete, className, ...props }, ref) {
 	const titleId = React.useId();
 	const done = items.filter((i) => i.done).length;
 	const allDone = items.length > 0 && done === items.length;
 	return /* @__PURE__ */ jsxs("section", {
+		ref,
 		"data-slot": "onboarding-checklist",
 		"aria-labelledby": titleId,
 		className: cn("rounded-lg border bg-card p-4 text-[13px] text-card-foreground", className),
@@ -36,7 +38,7 @@ function OnboardingChecklist({ title, description, items, onDismiss, dismissLabe
 					type: "button",
 					"aria-label": dismissLabel,
 					onClick: onDismiss,
-					className: "-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]",
+					className: cn("-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground", "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "relative pointer-coarse:before:absolute pointer-coarse:before:top-1/2 pointer-coarse:before:left-1/2 pointer-coarse:before:size-11 pointer-coarse:before:-translate-1/2 pointer-coarse:before:content-['']"),
 					children: /* @__PURE__ */ jsx(X, {
 						"aria-hidden": true,
 						className: "size-4"
@@ -99,7 +101,7 @@ function OnboardingChecklist({ title, description, items, onDismiss, dismissLabe
 			})
 		]
 	});
-}
+});
 //#endregion
 export { OnboardingChecklist };

package/dist/components/onboarding-checklist.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"onboarding-checklist.js","names":[],"sources":["../../src/components/onboarding-checklist.tsx"],"sourcesContent":["import CheckCircle from '@burtson-labs/icons/react/check-circle';\nimport CircleDashed from '@burtson-labs/icons/react/circle-dashed';\nimport X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Progress } from './progress';\n\nexport interface ChecklistItem {\n id: string;\n title: React.ReactNode;\n description?: React.ReactNode;\n /** Set from real app events (a repo opened, a provider tested), never from a click on the list. /\n done: boolean;\n /* A button or link that starts the task. Hidden once done. /\n action?: React.ReactNode;\n}\n\nexport interface OnboardingChecklistProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n title: React.ReactNode;\n description?: React.ReactNode;\n items: ChecklistItem[];\n /* Shows a close button. Persist the dismissal yourself. /\n onDismiss?: () => void;\n dismissLabel?: string;\n /* Replaces the list once every item is done. /\n complete?: React.ReactNode;\n}\n\n/\n A short list of first tasks with progress. The app decides when each task\n * is done and whether the list shows at all; this renders it.\n */\~~nfunction~~ OnboardingChecklist({\n title,\n description,\n items,\n onDismiss,\n dismissLabel = 'Dismiss checklist',\n complete,\n className,\n ...props\n}~~: OnboardingChecklistProps~~) {\n const titleId = React.useId();\n const done = items.filter((i) => i.done).length;\n const allDone = items.length > 0 && done === items.length;\n return (\n <section\n data-slot=\"onboarding-checklist\"\n aria-labelledby={titleId}\n className={cn('rounded-lg border bg-card p-4 text-[13px] text-card-foreground', className)}\n {...props}\n >\n <div className=\"flex items-start gap-3\">\n <div className=\"min-w-0 flex-1\">\n <h2 id={titleId} className=\"text-sm font-semibold\">\n {title}\n </h2>\n {description && <p className=\"mt-0.5 text-muted-foreground\">{description}</p>}\n </div>\n {onDismiss && (\n <button\n type=\"button\"\n aria-label={dismissLabel}\n onClick={onDismiss}\n className~~=\"~~-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground ~~outline-none~~ hover:bg-muted hover:text-foreground ~~focus-visible:shadow-[inset_0_0_0_1px_var(--ring~~)]\"\n >\n <X aria-hidden className=\"size-4\" />\n </button>\n )}\n </div>\n <div className=\"mt-3 flex items-center gap-3\">\n <Progress\n value={done}\n max={Math.max(items.length, 1)}\n aria-label={`${done} of ${items.length} done`}\n className=\"flex-1\"\n />\n <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\" aria-hidden>\n {done}/{items.length}\n </span>\n </div>\n {allDone && complete ? (\n <div className=\"mt-3\">{complete}</div>\n ) : (\n <ul className=\"mt-3 flex flex-col gap-1\">\n {items.map((item) => (\n <li\n key={item.id}\n data-slot=\"onboarding-checklist-item\"\n data-state={item.done ? 'done' : 'todo'}\n className=\"flex items-start gap-2.5 rounded-md px-1 py-1.5\"\n >\n {item.done ? (\n <CheckCircle aria-hidden className=\"mt-px size-4 shrink-0 text-success\" />\n ) : (\n <CircleDashed aria-hidden className=\"mt-px size-4 shrink-0 text-muted-foreground\" />\n )}\n <div className=\"min-w-0 flex-1\">\n <p className={cn('font-medium', item.done && 'text-muted-foreground line-through')}>\n {item.title}\n <span className=\"sr-only\">{item.done ? ', done' : ', not done'}</span>\n </p>\n {item.description && !item.done && (\n <p className=\"mt-0.5 text-muted-foreground\">{item.description}</p>\n )}\n </div>\n {item.action && !item.done && <div className=\"shrink-0\">{item.action}</div>}\n </li>\n ))}\n </ul>\n )}\n </section>\n );\n}\n\nexport { OnboardingChecklist };\n"],"mappings":"~~;;;;;;;;;;;;~~AAkCA,SAAS,~~oBAAoB~~,~~EAC3B~~,OACA,aACA,OACA,WACA,eAAe,qBACf,UACA,WACA,GAAG,~~SACwB~~;~~CAC3B~~,MAAM,UAAU,MAAM,MAAM;CAC5B,MAAM,OAAO,MAAM,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC;CACzC,MAAM,UAAU,MAAM,SAAS,KAAK,SAAS,MAAM;CACnD,OACE,qBAAC,WAAD;~~EACE~~,aAAU;EACV,mBAAiB;EACjB,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;~~EAJN~~,UAAA;~~GAME~~,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACxB,UAAA;KACC,CAAA,GACH,eAAe,oBAAC,KAAD;MAAG,WAAU;MAAgC,UAAA;KAAe,CAAA,CACzE;IACJ,CAAA,GAAA,aACC,oBAAC,UAAD;KACE,MAAK;KACL,cAAY;KACZ,SAAS;KACT,~~WAAU~~;~~KAEV~~,UAAA,oBAAC,GAAD;MAAG,eAAA;MAAY,WAAU;KAAU,CAAA;IAC7B,CAAA,CAEP;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,UAAD;KACE,OAAO;KACP,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;KAC7B,cAAY,GAAG,KAAK,MAAM,MAAM,OAAO;KACvC,WAAU;IACX,CAAA,GACD,qBAAC,QAAD;KAAM,WAAU;KAAsD,eAAA;KAAtE,UAAA;MACG;MAAK;MAAE,MAAM;KACV;IACH,CAAA,CAAA;;GACJ,WAAW,WACV,oBAAC,OAAD;IAAK,WAAU;IAAQ,UAAA;GAAc,CAAA,IAErC,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;KAEE,aAAU;KACV,cAAY,KAAK,OAAO,SAAS;KACjC,WAAU;KAJZ,UAAA;MAMG,KAAK,OACJ,oBAAC,aAAD;OAAa,eAAA;OAAY,WAAU;MAAsC,CAAA,IAEzE,oBAAC,cAAD;~~OAAc~~,eAAA;~~OAAY~~,WAAU;~~MAA+C~~,CAAA;~~MAErF~~,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,qBAAC,KAAD;~~QAAG~~,WAAW,GAAG,eAAe,KAAK,QAAQ,oCAAoC;~~QAAjF~~,UAAA,~~CACG~~,KAAK,OACN,oBAAC,QAAD;SAAM,WAAU;SAAW,UAAA,KAAK,OAAO,WAAW;QAAmB,CAAA,CACpE;OACF,CAAA,GAAA,KAAK,eAAe,CAAC,KAAK,QACzB,oBAAC,KAAD;QAAG,WAAU;QAAgC,UAAA,KAAK;OAAe,CAAA,CAEhE;;MACJ,KAAK,UAAU,CAAC,KAAK,QAAQ,oBAAC,OAAD;OAAK,WAAU;OAAY,UAAA,KAAK;MAAY,CAAA;KACxE;~~IApBG~~,GAAA,KAAK,~~EAoBR~~,CACL;GACC,CAAA;EAEC;;AAEb"}
1	+ {"version":3,"file":"onboarding-checklist.js","names":[],"sources":["../../src/components/onboarding-checklist.tsx"],"sourcesContent":["import CheckCircle from '@burtson-labs/icons/react/check-circle';\nimport CircleDashed from '@burtson-labs/icons/react/circle-dashed';\nimport X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetClasses } from '../lib/utils';\n\nimport { Progress } from './progress';\n\nexport interface ChecklistItem {\n id: string;\n title: React.ReactNode;\n description?: React.ReactNode;\n /** Set from real app events (a repo opened, a provider tested), never from a click on the list. /\n done: boolean;\n /* A button or link that starts the task. Hidden once done. /\n action?: React.ReactNode;\n}\n\nexport interface OnboardingChecklistProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n title: React.ReactNode;\n description?: React.ReactNode;\n items: ChecklistItem[];\n /* Shows a close button. Persist the dismissal yourself. /\n onDismiss?: () => void;\n dismissLabel?: string;\n /* Replaces the list once every item is done. /\n complete?: React.ReactNode;\n}\n\n/\n A short list of first tasks with progress. The app decides when each task\n * is done and whether the list shows at all; this renders it.\n */\nconst OnboardingChecklist = React.forwardRef<HTMLElement, OnboardingChecklistProps>(\n function OnboardingChecklist(\n {\n title,\n description,\n items,\n onDismiss,\n dismissLabel = 'Dismiss checklist',\n complete,\n className,\n ...props\n },\n ref,\n ) {\n const titleId = React.useId();\n const done = items.filter((i) => i.done).length;\n const allDone = items.length > 0 && done === items.length;\n return (\n <section\n ref={ref}\n data-slot=\"onboarding-checklist\"\n aria-labelledby={titleId}\n className={cn('rounded-lg border bg-card p-4 text-[13px] text-card-foreground', className)}\n {...props}\n >\n <div className=\"flex items-start gap-3\">\n <div className=\"min-w-0 flex-1\">\n <h2 id={titleId} className=\"text-sm font-semibold\">\n {title}\n </h2>\n {description && <p className=\"mt-0.5 text-muted-foreground\">{description}</p>}\n </div>\n {onDismiss && (\n <button\n type=\"button\"\n aria-label={dismissLabel}\n onClick={onDismiss}\n className={cn(\n '-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground',\n focusRingClasses,\n touchTargetClasses,\n )}\n >\n <X aria-hidden className=\"size-4\" />\n </button>\n )}\n </div>\n <div className=\"mt-3 flex items-center gap-3\">\n <Progress\n value={done}\n max={Math.max(items.length, 1)}\n aria-label={`${done} of ${items.length} done`}\n className=\"flex-1\"\n />\n <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\" aria-hidden>\n {done}/{items.length}\n </span>\n </div>\n {allDone && complete ? (\n <div className=\"mt-3\">{complete}</div>\n ) : (\n <ul className=\"mt-3 flex flex-col gap-1\">\n {items.map((item) => (\n <li\n key={item.id}\n data-slot=\"onboarding-checklist-item\"\n data-state={item.done ? 'done' : 'todo'}\n className=\"flex items-start gap-2.5 rounded-md px-1 py-1.5\"\n >\n {item.done ? (\n <CheckCircle aria-hidden className=\"mt-px size-4 shrink-0 text-success\" />\n ) : (\n <CircleDashed\n aria-hidden\n className=\"mt-px size-4 shrink-0 text-muted-foreground\"\n />\n )}\n <div className=\"min-w-0 flex-1\">\n <p\n className={cn('font-medium', item.done && 'text-muted-foreground line-through')}\n >\n {item.title}\n <span className=\"sr-only\">{item.done ? ', done' : ', not done'}</span>\n </p>\n {item.description && !item.done && (\n <p className=\"mt-0.5 text-muted-foreground\">{item.description}</p>\n )}\n </div>\n {item.action && !item.done && <div className=\"shrink-0\">{item.action}</div>}\n </li>\n ))}\n </ul>\n )}\n </section>\n );\n },\n);\n\nexport { OnboardingChecklist };\n"],"mappings":";;;;;;;;;;;;;AAkCA,IAAM,sBAAsB,MAAM,WAChC,SAAS,oBACP,EACE,OACA,aACA,OACA,WACA,eAAe,qBACf,UACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,MAAM,MAAM;CAC5B,MAAM,OAAO,MAAM,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC;CACzC,MAAM,UAAU,MAAM,SAAS,KAAK,SAAS,MAAM;CACnD,OACE,qBAAC,WAAD;EACO;EACL,aAAU;EACV,mBAAiB;EACjB,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;EALN,UAAA;GAOE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACxB,UAAA;KACC,CAAA,GACH,eAAe,oBAAC,KAAD;MAAG,WAAU;MAAgC,UAAA;KAAe,CAAA,CACzE;IACJ,CAAA,GAAA,aACC,oBAAC,UAAD;KACE,MAAK;KACL,cAAY;KACZ,SAAS;KACT,WAAW,GACT,sIAAA,8HAAA,4MAGF;KAEA,UAAA,oBAAC,GAAD;MAAG,eAAA;MAAY,WAAU;KAAU,CAAA;IAC7B,CAAA,CAEP;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,UAAD;KACE,OAAO;KACP,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;KAC7B,cAAY,GAAG,KAAK,MAAM,MAAM,OAAO;KACvC,WAAU;IACX,CAAA,GACD,qBAAC,QAAD;KAAM,WAAU;KAAsD,eAAA;KAAtE,UAAA;MACG;MAAK;MAAE,MAAM;KACV;IACH,CAAA,CAAA;;GACJ,WAAW,WACV,oBAAC,OAAD;IAAK,WAAU;IAAQ,UAAA;GAAc,CAAA,IAErC,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;KAEE,aAAU;KACV,cAAY,KAAK,OAAO,SAAS;KACjC,WAAU;KAJZ,UAAA;MAMG,KAAK,OACJ,oBAAC,aAAD;OAAa,eAAA;OAAY,WAAU;MAAsC,CAAA,IAEzE,oBAAC,cAAD;OACE,eAAA;OACA,WAAU;MACX,CAAA;MAEH,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,qBAAC,KAAD;QACE,WAAW,GAAG,eAAe,KAAK,QAAQ,oCAAoC;QADhF,UAAA,CAGG,KAAK,OACN,oBAAC,QAAD;SAAM,WAAU;SAAW,UAAA,KAAK,OAAO,WAAW;QAAmB,CAAA,CACpE;OACF,CAAA,GAAA,KAAK,eAAe,CAAC,KAAK,QACzB,oBAAC,KAAD;QAAG,WAAU;QAAgC,UAAA,KAAK;OAAe,CAAA,CAEhE;;MACJ,KAAK,UAAU,CAAC,KAAK,QAAQ,oBAAC,OAAD;OAAK,WAAU;OAAY,UAAA,KAAK;MAAY,CAAA;KACxE;IAzBG,GAAA,KAAK,EAyBR,CACL;GACC,CAAA;EAEC;;AAEb,CACF"}

package/dist/components/page-header.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import * as React from 'react';
-declare function PageHeader({ className, ...props }: React.ComponentProps<'header'>): React.JSX.Element;
-declare function PageHeaderMain({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function PageHeaderEyebrow({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function PageHeaderTitle({ className, children, ...props }: React.ComponentProps<'h1'>): React.JSX.Element;
-declare function PageHeaderDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
-declare function PageHeaderActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const PageHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const PageHeaderMain: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const PageHeaderEyebrow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const PageHeaderTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const PageHeaderDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/** The actions: wrap under the title on narrow screens rather than squeezing it; share the row on phones. */
+declare const PageHeaderActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, };

package/dist/components/page-header.js CHANGED Viewed

@@ -1,50 +1,58 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/page-header.tsx
-function PageHeader({ className, ...props }) {
+var PageHeader = React.forwardRef(function PageHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("header", {
+		ref,
 		"data-slot": "page-header",
-		className: cn("flex flex-col gap-4 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between", className),
+		className: cn("flex flex-col gap-4 border-b border-border pb-5 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between", className),
 		...props
 	});
-}
-function PageHeaderMain({ className, ...props }) {
+});
+var PageHeaderMain = React.forwardRef(function PageHeaderMain({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "page-header-main",
 		className: cn("min-w-0 space-y-1", className),
 		...props
 	});
-}
-function PageHeaderEyebrow({ className, ...props }) {
+});
+var PageHeaderEyebrow = React.forwardRef(function PageHeaderEyebrow({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "page-header-eyebrow",
 		className: cn("text-[11px] font-semibold tracking-[0.12em] text-brand uppercase", className),
 		...props
 	});
-}
-function PageHeaderTitle({ className, children, ...props }) {
+});
+var PageHeaderTitle = React.forwardRef(function PageHeaderTitle({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx("h1", {
+		ref,
 		"data-slot": "page-header-title",
 		className: cn("truncate text-xl font-semibold tracking-[-0.025em] text-foreground sm:text-2xl", className),
 		...props,
 		children
 	});
-}
-function PageHeaderDescription({ className, ...props }) {
+});
+var PageHeaderDescription = React.forwardRef(function PageHeaderDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("p", {
+		ref,
 		"data-slot": "page-header-description",
 		className: cn("max-w-3xl text-sm leading-5 text-muted-foreground", className),
 		...props
 	});
-}
-function PageHeaderActions({ className, ...props }) {
+});
+/** The actions: wrap under the title on narrow screens rather than squeezing it; share the row on phones. */
+var PageHeaderActions = React.forwardRef(function PageHeaderActions({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "page-header-actions",
-		className: cn("flex shrink-0 flex-wrap items-center gap-2", className),
+		className: cn("flex shrink-0 flex-wrap items-center gap-2 max-sm:*:data-[slot=button]:min-w-0 max-sm:*:data-[slot=button]:flex-1", className),
 		...props
 	});
-}
+});
 //#endregion
 export { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle };

package/dist/components/page-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"page-header.js","names":[],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\~~nfunction~~ PageHeader({ className, ...props }: ~~React.ComponentProps<'header'>~~) {\n return (\n <header\n data-slot=\"page-header\"\n className={cn(\n 'flex flex-col gap-4 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between',\n className,\n )}\n {...props}\n />\n );\n}\n\~~nfunction~~ PageHeaderMain({ className, ...props }: ~~React.ComponentProps<'div'>~~) {\n return (\n <div data-slot=\"page-header-main\" className={cn('min-w-0 space-y-1', className)} {...props} />\n );\n}\n\~~nfunction~~ PageHeaderEyebrow({ className, ...props }: ~~React.ComponentProps<'div'>~~) {\n return (\n <div\n data-slot=\"page-header-eyebrow\"\n className={cn('text-[11px] font-semibold tracking-[0.12em] text-brand uppercase', className)}\n {...props}\n />\n );\n}\n\~~nfunction~~ PageHeaderTitle({ className, children, ...props }: ~~React.ComponentProps<'h1'>~~) {\n return (\n <h1\n data-slot=\"page-header-title\"\n className={cn(\n 'truncate text-xl font-semibold tracking-[-0.025em] text-foreground sm:text-2xl',\n className,\n )}\n {...props}\n >\n {children}\n </h1>\n );\n}\n\~~nfunction~~ PageHeaderDescription({ className, ...props }: ~~React.ComponentProps<'p'>~~) {\n return (\n <p\n data-slot=\"page-header-description\"\n className={cn('max-w-3xl text-sm leading-5 text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\~~nfunction~~ PageHeaderActions({ className, ...props }: ~~React.ComponentProps<'div'>~~) {\n return (\n <div\n data-slot=\"page-header-actions\"\n className={cn('flex shrink-0 flex-wrap items-center gap-2', className)}\n {...props}\n />\n );\n}\n\nexport {\n PageHeader,\n PageHeaderActions,\n PageHeaderDescription,\n PageHeaderEyebrow,\n PageHeaderMain,\n PageHeaderTitle,\n};\n"],"mappings":"~~;;;;~~AAIA,SAAS,WAAW,EAAE,WAAW,GAAG,~~SAAyC~~;~~CAC3E~~,OACE,oBAAC,UAAD;~~EACE~~,aAAU;EACV,WAAW,GACT~~,+FACA~~,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,~~SAAsC~~;~~CAC5E~~,OACE,oBAAC,OAAD;~~EAAK~~,aAAU;~~EAAmB~~,WAAW,GAAG,qBAAqB,SAAS;~~EAAG~~,GAAI;~~CAAQ~~,CAAA;~~AAEjG~~;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,~~SAAsC~~;~~CAC/E~~,OACE,oBAAC,OAAD;~~EACE~~,aAAU;EACV,WAAW,~~GAAG~~,~~oEAAoE~~,~~SAAS~~;~~EAC3F~~,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,UAAU,GAAG,~~SAAqC~~;~~CACtF~~,OACE,oBAAC,MAAD;~~EACE~~,aAAU;EACV,WAAW,GACT,kFACA,SACF;EACA,GAAI;EAEH;CACC,CAAA;AAER;AAEA,SAAS,sBAAsB,EAAE,WAAW,GAAG,~~SAAoC~~;~~CACjF~~,OACE,oBAAC,KAAD;~~EACE~~,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL~~;AAEA~~,SAAS,kBAAkB,EAAE,WAAW,GAAG,~~SAAsC~~;~~CAC/E~~,OACE,oBAAC,OAAD;~~EACE~~,aAAU;EACV,WAAW,~~GAAG~~,~~8CAA8C~~,~~SAAS~~;~~EACrE~~,GAAI;CACL,CAAA;AAEL"}
1	+ {"version":3,"file":"page-header.js","names":[],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst PageHeader = React.forwardRef<HTMLElement, React.ComponentProps<'header'>>(\n function PageHeader({ className, ...props }, ref) {\n return (\n <header\n ref={ref}\n data-slot=\"page-header\"\n className={cn(\n 'flex flex-col gap-4 border-b border-border pb-5 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between',\n className,\n )}\n {...props}\n />\n );\n },\n);\n\nconst PageHeaderMain = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n function PageHeaderMain({ className, ...props }, ref) {\n return (\n <div\n ref={ref}\n data-slot=\"page-header-main\"\n className={cn('min-w-0 space-y-1', className)}\n {...props}\n />\n );\n },\n);\n\nconst PageHeaderEyebrow = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n function PageHeaderEyebrow({ className, ...props }, ref) {\n return (\n <div\n ref={ref}\n data-slot=\"page-header-eyebrow\"\n className={cn(\n 'text-[11px] font-semibold tracking-[0.12em] text-brand uppercase',\n className,\n )}\n {...props}\n />\n );\n },\n);\n\nconst PageHeaderTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<'h1'>>(\n function PageHeaderTitle({ className, children, ...props }, ref) {\n return (\n <h1\n ref={ref}\n data-slot=\"page-header-title\"\n className={cn(\n 'truncate text-xl font-semibold tracking-[-0.025em] text-foreground sm:text-2xl',\n className,\n )}\n {...props}\n >\n {children}\n </h1>\n );\n },\n);\n\nconst PageHeaderDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<'p'>>(\n function PageHeaderDescription({ className, ...props }, ref) {\n return (\n <p\n ref={ref}\n data-slot=\"page-header-description\"\n className={cn('max-w-3xl text-sm leading-5 text-muted-foreground', className)}\n {...props}\n />\n );\n },\n);\n\n/** The actions: wrap under the title on narrow screens rather than squeezing it; share the row on phones. /\nconst PageHeaderActions = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n function PageHeaderActions({ className, ...props }, ref) {\n return (\n <div\n ref={ref}\n data-slot=\"page-header-actions\"\n className={cn(\n 'flex shrink-0 flex-wrap items-center gap-2 max-sm::data-[slot=button]:min-w-0 max-sm:*:data-[slot=button]:flex-1',\n className,\n )}\n {...props}\n />\n );\n },\n);\n\nexport {\n PageHeader,\n PageHeaderActions,\n PageHeaderDescription,\n PageHeaderEyebrow,\n PageHeaderMain,\n PageHeaderTitle,\n};\n"],"mappings":";;;;;AAIA,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,UAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,qBAAqB,SAAS;EAC5C,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,oBAAoB,MAAM,WAC9B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,oEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,kBAAkB,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAC/D,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,kFACA,SACF;EACA,GAAI;EAEH;CACC,CAAA;AAER,CACF;AAEA,IAAM,wBAAwB,MAAM,WAClC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC3D,OACE,oBAAC,KAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL,CACF;;AAGA,IAAM,oBAAoB,MAAM,WAC9B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/pagination.d.ts CHANGED Viewed

@@ -115,5 +115,5 @@ export interface PaginationProps extends Omit<React.ComponentProps<'nav'>, 'onCh
  * 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;
+declare const Pagination: React.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Pagination };

package/dist/components/pagination.js CHANGED Viewed

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
@@ -180,7 +181,7 @@ function usePagination(rows, options = {}) {
 * 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 }) {
+var Pagination = React.forwardRef(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 }, ref) {
 	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);
@@ -193,6 +194,7 @@ function Pagination({ page: requestedPage, pageCount: requestedCount, onPageChan
 	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", {
+		ref,
 		"aria-label": "Pagination",
 		"data-slot": "pagination",
 		className: cn("flex flex-wrap items-center justify-between gap-x-3 gap-y-2", className),
@@ -277,7 +279,7 @@ function Pagination({ page: requestedPage, pageCount: requestedCount, onPageChan
 			})
 		]
 	});
-}
+});
 //#endregion
 export { DEFAULT_PAGE_SIZES, Pagination, clampPage, pageCountFor, pageWindow, paginate, paginationRange, paginationSummary, usePagination };

package/dist/components/pagination.js.map CHANGED Viewed

	@@ -1 +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';\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 // pageSize first: Math.min() of an empty options list is Infinity.\n const hasPages = w.total > Math.min(w.pageSize, ...pageSizeOptions);\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 {pageCount > 0 ? 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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"}
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';\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 // pageSize first: Math.min() of an empty options list is Infinity.\n const hasPages = w.total > Math.min(w.pageSize, ...pageSizeOptions);\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 /\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagination(\n {\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 },\n ref,\n) {\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 ref={ref}\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 {pageCount > 0 ? 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/popover.d.ts CHANGED Viewed

@@ -1,19 +1,22 @@
-import { Popover as PopoverPrimitive } from 'radix-ui';
 import * as React from 'react';
+import * as PopoverPrimitive from '../primitives/vendor/radix/react-popover';
 /**
  * The floating surface shared by popovers, menus and select lists: raised,
- * with a strong border, and the one place a heavy shadow is allowed.
+ * with a strong border, 12px radius and the floating shadow (elevation 4).
  */
-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]";
+export declare const surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-lg 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 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.
+ * A menu row: 32px (44px on touch screens), 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; forced-colors mode gets a system outline instead.
  */
-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";
+export declare const menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-none! forced-colors:focus-visible:[outline:2px_solid_Highlight]! forced-colors:focus-visible:outline-offset-2 select-none focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
+/** The small uppercase heading over a group of rows, shared by menus and Select. */
+export declare const menuLabelClasses = "px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase";
 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;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/components/popover.js CHANGED Viewed

@@ -1,48 +1,55 @@
-import { cn } from "../lib/utils.js";
-import { Popover } from "radix-ui";
-import "react";
+"use client";
+import { cn, noOutlineClasses } from "../lib/utils.js";
+import { Anchor, Content, Portal, Root, Trigger } from "../primitives/vendor/radix/react-popover/popover.js";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/popover.tsx
 /**
 * The floating surface shared by popovers, menus and select lists: raised,
-* with a strong border, and the one place a heavy shadow is allowed.
+* with a strong border, 12px radius and the floating shadow (elevation 4).
 */
-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]";
+var surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-lg 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 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.
+* A menu row: 32px (44px on touch screens), 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; forced-colors mode gets a system outline instead.
 */
-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, {
+var menuItemClasses = `relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] ${noOutlineClasses} select-none focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground`;
+/** The small uppercase heading over a group of rows, shared by menus and Select. */
+var menuLabelClasses = "px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase";
+function Popover(props) {
+	return /* @__PURE__ */ jsx(Root, {
 		"data-slot": "popover",
 		...props
 	});
 }
-function PopoverTrigger(props) {
-	return /* @__PURE__ */ jsx(Popover.Trigger, {
+var PopoverTrigger = React.forwardRef(function PopoverTrigger(props, ref) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
 		"data-slot": "popover-trigger",
 		...props
 	});
-}
-function PopoverAnchor(props) {
-	return /* @__PURE__ */ jsx(Popover.Anchor, {
+});
+var PopoverAnchor = React.forwardRef(function PopoverAnchor(props, ref) {
+	return /* @__PURE__ */ jsx(Anchor, {
+		ref,
 		"data-slot": "popover-anchor",
 		...props
 	});
-}
-function PopoverContent({ className, align = "center", sideOffset = 6, ...props }) {
-	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+});
+var PopoverContent = React.forwardRef(function PopoverContent({ className, align = "center", sideOffset = 6, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "popover-content",
 		align,
 		sideOffset,
-		className: cn(surfaceClasses, "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", className),
+		className: cn(surfaceClasses, "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-none", className),
 		...props
 	}) });
-}
+});
 //#endregion
-export { Popover$1 as Popover, PopoverAnchor, PopoverContent, PopoverTrigger, menuItemClasses, surfaceClasses };
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, menuItemClasses, menuLabelClasses, surfaceClasses };
 //# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map CHANGED Viewed

	@@ -1 +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/\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"}
1	+ {"version":3,"file":"popover.js","names":["PopoverPrimitive.Root","PopoverPrimitive.Trigger","PopoverPrimitive.Anchor","PopoverPrimitive.Portal","PopoverPrimitive.Content"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\nimport * as PopoverPrimitive from '../primitives/vendor/radix/react-popover';\n\n/*\n The floating surface shared by popovers, menus and select lists: raised,\n * with a strong border, 12px radius and the floating shadow (elevation 4).\n /\nexport const surfaceClasses =\n 'z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-lg 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 (44px on touch screens), 8px radius (the surface's 12px\n * less its 4px padding); the focused row is a quiet secondary fill (muted is\n * too close to the raised surface in dark mode to read). The outline is\n * suppressed with !important so a host page's global focus outline cannot box\n * the row; forced-colors mode gets a system outline instead.\n /\nexport const menuItemClasses = `relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] ${noOutlineClasses} select-none focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class='size-'])]:size-4 [&_svg:not([class='text-'])]:text-muted-foreground`;\n\n/* The small uppercase heading over a group of rows, shared by menus and Select. */\nexport const menuLabelClasses =\n 'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase';\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nconst PopoverTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof PopoverPrimitive.Trigger>\n>(function PopoverTrigger(props, ref) {\n return <PopoverPrimitive.Trigger ref={ref} data-slot=\"popover-trigger\" {...props} />;\n});\n\nconst PopoverAnchor = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof PopoverPrimitive.Anchor>\n>(function PopoverAnchor(props, ref) {\n return <PopoverPrimitive.Anchor ref={ref} data-slot=\"popover-anchor\" {...props} />;\n});\n\nconst PopoverContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof PopoverPrimitive.Content>\n>(function PopoverContent({ className, align = 'center', sideOffset = 6, ...props }, ref) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\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-none',\n className,\n )}\n {...props}\n />\n </PopoverPrimitive.Portal>\n );\n});\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;;;;;;AASA,IAAa,iBACX;;;;;;;;AASF,IAAa,kBAAkB,uFAAuF,iBAAiB;;AAGvI,IAAa,mBACX;AAEF,SAAS,QAAQ,OAA2D;CAC1E,OAAO,oBAACA,MAAD;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,OAAO,KAAK;CACpC,OAAO,oBAACC,SAAD;EAA+B;EAAK,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrF,CAAC;AAED,IAAM,gBAAgB,MAAM,WAG1B,SAAS,cAAc,OAAO,KAAK;CACnC,OAAO,oBAACC,QAAD;EAA8B;EAAK,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACnF,CAAC;AAED,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,EAAE,WAAW,QAAQ,UAAU,aAAa,GAAG,GAAG,SAAS,KAAK;CACxF,OACE,oBAACC,QAAD,EAAA,UACE,oBAACC,SAAD;EACO;EACL,aAAU;EACH;EACK;EACZ,WAAW,GACT,gBACA,qKACA,SACF;EACA,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B,CAAC"}

package/dist/components/progress.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Progress as ProgressPrimitive } from 'radix-ui';
 import * as React from 'react';
-declare function Progress({ className, value, max, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): React.JSX.Element;
+import * as ProgressPrimitive from '../primitives/vendor/radix/react-progress';
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Progress };