@diwauhris/ui 1.7.0 → 1.7.1

package/lib/assets/ui.css

@@ -482,6 +482,11 @@
   margin: auto;
 }
 
+.-mx-5 {
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -510,6 +515,10 @@
   margin-top: -0.125rem;
 }
 
+.-mt-4 {
+  margin-top: -1rem;
+}
+
 .mb-0\.5 {
   margin-bottom: 0.125rem;
 }
@@ -610,10 +619,6 @@
   margin-top: 2.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -3806,6 +3811,14 @@
   text-decoration-line: line-through;
 }
 
+.decoration-amber-500\/60 {
+  text-decoration-color: rgb(245 158 11 / 0.6);
+}
+
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -3821,6 +3834,10 @@
   color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
 }
 
+.accent-brand-blue {
+  accent-color: #034EA2;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -4689,6 +4706,9 @@ body {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+.hover\:decoration-amber-700:hover {
+  text-decoration-color: #b45309;
+}
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -4800,6 +4820,10 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
 }
+.focus-visible\:ring-amber-600:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity, 1));
+}
 .focus-visible\:ring-brand-blue\/15:focus-visible {
   --tw-ring-color: rgb(3 78 162 / 0.15);
 }

package/lib/index.cjs

@@ -1475,7 +1475,17 @@ function SegmentedControl({ options, defaultValue, value: controlledValue, onVal
 }
 //#endregion
 //#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
-function ValidationSummary({ issues, heading = "Review these fields before saving", className = "" }) {
+function scrollToField(domId) {
+	const el = document.getElementById(domId);
+	if (!el) return;
+	const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	el.scrollIntoView({
+		behavior: prefersReducedMotion ? "auto" : "smooth",
+		block: "center"
+	});
+	(el.querySelector("input,select,textarea,[tabindex]") ?? el).focus();
+}
+function ValidationSummary({ issues, heading = "Review these fields before saving", fieldIds, fieldLabels, className = "" }) {
 	if (issues.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "alert",
@@ -1485,14 +1495,24 @@ function ValidationSummary({ issues, heading = "Review these fields before savin
 			children: heading
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			className: "mt-2 list-disc space-y-1 pl-5",
-			children: issues.map((issue) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "font-semibold",
-					children: [issue.field, ":"]
-				}),
-				" ",
-				issue.message
-			] }, `${issue.field}:${issue.message}`))
+			children: issues.map((issue) => {
+				const displayLabel = fieldLabels?.[issue.field] ?? issue.field;
+				const domId = fieldIds?.[issue.field];
+				const label = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "font-semibold",
+						children: [displayLabel, ":"]
+					}),
+					" ",
+					issue.message
+				] });
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: domId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => scrollToField(domId),
+					className: "underline decoration-amber-500/60 underline-offset-2 hover:decoration-amber-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-amber-600 rounded text-left",
+					children: label
+				}) : label }, `${issue.field}:${issue.message}`);
+			})
 		})]
 	});
 }
@@ -2879,53 +2899,72 @@ function getPageNumbers(current, total) {
 	pages.push(total);
 	return pages;
 }
-function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination" }) {
-	if (totalPages <= 1) return null;
+function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination", totalItems, pageSize, itemLabel = "items" }) {
+	if (totalPages <= 1 && !totalItems) return null;
+	const showRecordCount = typeof totalItems === "number" && typeof pageSize === "number";
+	const rangeStart = showRecordCount ? (page - 1) * pageSize + 1 : null;
+	const rangeEnd = showRecordCount ? Math.min(page * pageSize, totalItems) : null;
 	const pageNumbers = getPageNumbers(page, totalPages);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-		"aria-label": ariaLabel,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
-			className: "list-none flex items-center gap-1",
-			role: "list",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center gap-1.5",
+		children: [totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			"aria-label": ariaLabel,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
+				className: "list-none flex items-center gap-1",
+				role: "list",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(page - 1),
+						disabled: page <= 1,
+						"aria-label": "Previous page",
+						className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}) }),
+					pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
+							children: "…"
+						})
+					}, `ellipsis-${idx}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(n),
+						"aria-label": `Page ${n}`,
+						"aria-current": n === page ? "page" : void 0,
+						className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
+						children: n
+					}) }, n)),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(page + 1),
+						disabled: page >= totalPages,
+						"aria-label": "Next page",
+						className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}) })
+				]
+			})
+		}), showRecordCount && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			className: "text-[11px] font-bold tabular-nums text-slate-400",
+			"aria-live": "polite",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => onPageChange(page - 1),
-					disabled: page <= 1,
-					"aria-label": "Previous page",
-					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}) }),
-				pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
-						children: "…"
-					})
-				}, `ellipsis-${idx}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => onPageChange(n),
-					"aria-label": `Page ${n}`,
-					"aria-current": n === page ? "page" : void 0,
-					className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
-					children: n
-				}) }, n)),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => onPageChange(page + 1),
-					disabled: page >= totalPages,
-					"aria-label": "Next page",
-					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}) })
+				"Showing ",
+				rangeStart,
+				"–",
+				rangeEnd,
+				" of ",
+				totalItems,
+				" ",
+				itemLabel
 			]
-		})
+		})]
 	});
 }
 //#endregion
@@ -7528,6 +7567,211 @@ function StatusDot({ status, label, className = "" }) {
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/column-manager/ColumnManager.tsx
+/**
+* ColumnManager — Design System Component
+*
+* A dropdown panel for managing table column visibility and order.
+* Provides checkboxes to show/hide individual columns and up/down
+* buttons to reorder them. Includes a reset action.
+*
+* Purely presentational — all state is owned by the caller.
+*
+* Usage:
+*   const [hidden, setHidden] = useState<string[]>([]);
+*   const [order, setOrder] = useState<string[] | null>(null);
+*
+*   <ColumnManager
+*     columns={[{ key: 'name', label: 'Name' }, { key: 'dept', label: 'Department' }]}
+*     hiddenColumnKeys={hidden}
+*     columnOrder={order}
+*     onHiddenColumnKeysChange={setHidden}
+*     onColumnOrderChange={setOrder}
+*     onReset={() => { setHidden([]); setOrder(null); }}
+*   />
+*
+* Accessibility:
+*   - Trigger button has aria-expanded and aria-controls.
+*   - Panel has role="region" and aria-label.
+*   - Each checkbox is labelled via htmlFor + id.
+*   - Reorder buttons have descriptive aria-labels.
+*   - Panel closes on Escape, focus returns to the trigger.
+*/
+/**
+* Apply a stored column order to the runtime column array.
+*
+* Rules:
+* - Keys in `order` that don't exist in `columns` are silently ignored
+*   (forward compatibility when columns are removed).
+* - Columns not present in `order` are appended at the end in their
+*   original relative order (forward compatibility when columns are added).
+* - When `order` is null the original array is returned unchanged.
+*/
+function applyColumnOrder(columns, order) {
+	if (!order) return columns;
+	const byKey = new Map(columns.map((c) => [c.key, c]));
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const key of order) {
+		const col = byKey.get(key);
+		if (col) {
+			result.push(col);
+			seen.add(key);
+		}
+	}
+	for (const col of columns) if (!seen.has(col.key)) result.push(col);
+	return result;
+}
+function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel = "Columns" }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	const panelId = "cm-panel";
+	const orderedColumns = applyColumnOrder(columns, columnOrder);
+	const hiddenSet = new Set(hiddenColumnKeys);
+	const hiddenCount = hiddenColumnKeys.length;
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
+			setOpen(false);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				setOpen(false);
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open]);
+	function toggleColumn(key) {
+		onHiddenColumnKeysChange(hiddenSet.has(key) ? hiddenColumnKeys.filter((k) => k !== key) : [...hiddenColumnKeys, key]);
+	}
+	function moveUp(index) {
+		if (index === 0) return;
+		const next = [...orderedColumns];
+		[next[index - 1], next[index]] = [next[index], next[index - 1]];
+		onColumnOrderChange(next.map((c) => c.key));
+	}
+	function moveDown(index) {
+		if (index === orderedColumns.length - 1) return;
+		const next = [...orderedColumns];
+		[next[index], next[index + 1]] = [next[index + 1], next[index]];
+		onColumnOrderChange(next.map((c) => c.key));
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative inline-block",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			ref: triggerRef,
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": open ? panelId : void 0,
+			onClick: () => setOpen((v) => !v),
+			className: "inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-bold text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: [
+				triggerLabel,
+				hiddenCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "rounded-full bg-brand-blue/10 px-1.5 py-0.5 font-bold text-brand-blue",
+					children: [hiddenCount, " hidden"]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+					size: 13,
+					className: `transition-transform ${open ? "rotate-180" : ""}`,
+					"aria-hidden": "true"
+				})
+			]
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id: panelId,
+			ref: panelRef,
+			role: "region",
+			"aria-label": "Manage columns",
+			className: "absolute right-0 top-full z-30 mt-1 flex w-64 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xl",
+			style: { maxHeight: 400 },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-2.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs font-bold text-slate-700",
+					children: "Columns"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						onReset();
+						setOpen(false);
+					},
+					className: "rounded-md px-2 py-1 text-[11px] font-bold text-slate-400 hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+					children: "Reset"
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "overflow-y-auto",
+				role: "list",
+				children: orderedColumns.map((col, idx) => {
+					const visible = !hiddenSet.has(col.key);
+					const checkboxId = `cm-col-${col.key}`;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: "flex items-center gap-2 border-b border-slate-50 px-3 py-2 last:border-0",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "checkbox",
+								id: checkboxId,
+								checked: visible,
+								onChange: () => toggleColumn(col.key),
+								className: "h-3.5 w-3.5 rounded accent-brand-blue focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+								htmlFor: checkboxId,
+								className: `flex-1 cursor-pointer text-xs font-medium ${visible ? "text-slate-700" : "text-slate-400"}`,
+								children: col.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex shrink-0 gap-0.5",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-label": `Move ${col.label} up`,
+									disabled: idx === 0,
+									onClick: () => moveUp(idx),
+									className: "rounded p-1 text-slate-300 hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+									children: "▲"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-label": `Move ${col.label} down`,
+									disabled: idx === orderedColumns.length - 1,
+									onClick: () => moveDown(idx),
+									className: "rounded p-1 text-slate-300 hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+									children: "▼"
+								})]
+							})
+						]
+					}, col.key);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/status-dot/MaskedValue.tsx
+function MaskedValue({ value, masked, maskText = "••••• •••••", maskLabel = "Value restricted", className = "" }) {
+	if (!masked) return className ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className,
+		children: value
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: value });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-label": maskLabel,
+		title: maskLabel,
+		className: [
+			"inline-flex select-none items-center rounded-md bg-slate-100 px-2 py-0.5",
+			"font-mono text-xs font-medium text-slate-400 tracking-wider",
+			className
+		].filter(Boolean).join(" "),
+		children: maskText
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/status-actions/statusActions.ts
 /**
 * statusActions — Gallery-native lifecycle transition utilities.
@@ -7732,6 +7976,7 @@ exports.CardContent = CardContent;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
+exports.ColumnManager = ColumnManager;
 exports.Combobox = Combobox;
 exports.CommandPalette = CommandPalette;
 exports.ConfirmAction = ConfirmAction;
@@ -7759,6 +8004,7 @@ exports.Input = Input;
 exports.IsoCubeBlock = IsoCubeBlock;
 exports.Kanban = Kanban;
 exports.LineChart = LineChart;
+exports.MaskedValue = MaskedValue;
 exports.Menu = Menu;
 exports.Modal = Modal;
 exports.OrgChart = OrgChart;
@@ -7818,6 +8064,7 @@ exports.Toolbar = Toolbar;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
 exports.ValidationSummary = ValidationSummary;
+exports.applyColumnOrder = applyColumnOrder;
 Object.defineProperty(exports, "colors", {
 	enumerable: true,
 	get: function() {

package/lib/index.mjs

@@ -1450,7 +1450,17 @@ function SegmentedControl({ options, defaultValue, value: controlledValue, onVal
 }
 //#endregion
 //#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
-function ValidationSummary({ issues, heading = "Review these fields before saving", className = "" }) {
+function scrollToField(domId) {
+	const el = document.getElementById(domId);
+	if (!el) return;
+	const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	el.scrollIntoView({
+		behavior: prefersReducedMotion ? "auto" : "smooth",
+		block: "center"
+	});
+	(el.querySelector("input,select,textarea,[tabindex]") ?? el).focus();
+}
+function ValidationSummary({ issues, heading = "Review these fields before saving", fieldIds, fieldLabels, className = "" }) {
 	if (issues.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "alert",
@@ -1460,14 +1470,24 @@ function ValidationSummary({ issues, heading = "Review these fields before savin
 			children: heading
 		}), /* @__PURE__ */ jsx("ul", {
 			className: "mt-2 list-disc space-y-1 pl-5",
-			children: issues.map((issue) => /* @__PURE__ */ jsxs("li", { children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-semibold",
-					children: [issue.field, ":"]
-				}),
-				" ",
-				issue.message
-			] }, `${issue.field}:${issue.message}`))
+			children: issues.map((issue) => {
+				const displayLabel = fieldLabels?.[issue.field] ?? issue.field;
+				const domId = fieldIds?.[issue.field];
+				const label = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-semibold",
+						children: [displayLabel, ":"]
+					}),
+					" ",
+					issue.message
+				] });
+				return /* @__PURE__ */ jsx("li", { children: domId ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => scrollToField(domId),
+					className: "underline decoration-amber-500/60 underline-offset-2 hover:decoration-amber-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-amber-600 rounded text-left",
+					children: label
+				}) : label }, `${issue.field}:${issue.message}`);
+			})
 		})]
 	});
 }
@@ -2854,53 +2874,72 @@ function getPageNumbers(current, total) {
 	pages.push(total);
 	return pages;
 }
-function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination" }) {
-	if (totalPages <= 1) return null;
+function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination", totalItems, pageSize, itemLabel = "items" }) {
+	if (totalPages <= 1 && !totalItems) return null;
+	const showRecordCount = typeof totalItems === "number" && typeof pageSize === "number";
+	const rangeStart = showRecordCount ? (page - 1) * pageSize + 1 : null;
+	const rangeEnd = showRecordCount ? Math.min(page * pageSize, totalItems) : null;
 	const pageNumbers = getPageNumbers(page, totalPages);
-	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": ariaLabel,
-		children: /* @__PURE__ */ jsxs("ol", {
-			className: "list-none flex items-center gap-1",
-			role: "list",
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-1.5",
+		children: [totalPages > 1 && /* @__PURE__ */ jsx("nav", {
+			"aria-label": ariaLabel,
+			children: /* @__PURE__ */ jsxs("ol", {
+				className: "list-none flex items-center gap-1",
+				role: "list",
+				children: [
+					/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onPageChange(page - 1),
+						disabled: page <= 1,
+						"aria-label": "Previous page",
+						className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(ChevronLeft, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}) }),
+					pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
+							children: "…"
+						})
+					}, `ellipsis-${idx}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onPageChange(n),
+						"aria-label": `Page ${n}`,
+						"aria-current": n === page ? "page" : void 0,
+						className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
+						children: n
+					}) }, n)),
+					/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onPageChange(page + 1),
+						disabled: page >= totalPages,
+						"aria-label": "Next page",
+						className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(ChevronRight, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}) })
+				]
+			})
+		}), showRecordCount && /* @__PURE__ */ jsxs("p", {
+			className: "text-[11px] font-bold tabular-nums text-slate-400",
+			"aria-live": "polite",
 			children: [
-				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => onPageChange(page - 1),
-					disabled: page <= 1,
-					"aria-label": "Previous page",
-					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ jsx(ChevronLeft, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}) }),
-				pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ jsx("li", {
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ jsx("span", {
-						className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
-						children: "…"
-					})
-				}, `ellipsis-${idx}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => onPageChange(n),
-					"aria-label": `Page ${n}`,
-					"aria-current": n === page ? "page" : void 0,
-					className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
-					children: n
-				}) }, n)),
-				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => onPageChange(page + 1),
-					disabled: page >= totalPages,
-					"aria-label": "Next page",
-					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ jsx(ChevronRight, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}) })
+				"Showing ",
+				rangeStart,
+				"–",
+				rangeEnd,
+				" of ",
+				totalItems,
+				" ",
+				itemLabel
 			]
-		})
+		})]
 	});
 }
 //#endregion
@@ -7503,6 +7542,211 @@ function StatusDot({ status, label, className = "" }) {
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/column-manager/ColumnManager.tsx
+/**
+* ColumnManager — Design System Component
+*
+* A dropdown panel for managing table column visibility and order.
+* Provides checkboxes to show/hide individual columns and up/down
+* buttons to reorder them. Includes a reset action.
+*
+* Purely presentational — all state is owned by the caller.
+*
+* Usage:
+*   const [hidden, setHidden] = useState<string[]>([]);
+*   const [order, setOrder] = useState<string[] | null>(null);
+*
+*   <ColumnManager
+*     columns={[{ key: 'name', label: 'Name' }, { key: 'dept', label: 'Department' }]}
+*     hiddenColumnKeys={hidden}
+*     columnOrder={order}
+*     onHiddenColumnKeysChange={setHidden}
+*     onColumnOrderChange={setOrder}
+*     onReset={() => { setHidden([]); setOrder(null); }}
+*   />
+*
+* Accessibility:
+*   - Trigger button has aria-expanded and aria-controls.
+*   - Panel has role="region" and aria-label.
+*   - Each checkbox is labelled via htmlFor + id.
+*   - Reorder buttons have descriptive aria-labels.
+*   - Panel closes on Escape, focus returns to the trigger.
+*/
+/**
+* Apply a stored column order to the runtime column array.
+*
+* Rules:
+* - Keys in `order` that don't exist in `columns` are silently ignored
+*   (forward compatibility when columns are removed).
+* - Columns not present in `order` are appended at the end in their
+*   original relative order (forward compatibility when columns are added).
+* - When `order` is null the original array is returned unchanged.
+*/
+function applyColumnOrder(columns, order) {
+	if (!order) return columns;
+	const byKey = new Map(columns.map((c) => [c.key, c]));
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const key of order) {
+		const col = byKey.get(key);
+		if (col) {
+			result.push(col);
+			seen.add(key);
+		}
+	}
+	for (const col of columns) if (!seen.has(col.key)) result.push(col);
+	return result;
+}
+function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel = "Columns" }) {
+	const [open, setOpen] = useState(false);
+	const triggerRef = useRef(null);
+	const panelRef = useRef(null);
+	const panelId = "cm-panel";
+	const orderedColumns = applyColumnOrder(columns, columnOrder);
+	const hiddenSet = new Set(hiddenColumnKeys);
+	const hiddenCount = hiddenColumnKeys.length;
+	useEffect(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
+			setOpen(false);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				setOpen(false);
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open]);
+	function toggleColumn(key) {
+		onHiddenColumnKeysChange(hiddenSet.has(key) ? hiddenColumnKeys.filter((k) => k !== key) : [...hiddenColumnKeys, key]);
+	}
+	function moveUp(index) {
+		if (index === 0) return;
+		const next = [...orderedColumns];
+		[next[index - 1], next[index]] = [next[index], next[index - 1]];
+		onColumnOrderChange(next.map((c) => c.key));
+	}
+	function moveDown(index) {
+		if (index === orderedColumns.length - 1) return;
+		const next = [...orderedColumns];
+		[next[index], next[index + 1]] = [next[index + 1], next[index]];
+		onColumnOrderChange(next.map((c) => c.key));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative inline-block",
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: triggerRef,
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": open ? panelId : void 0,
+			onClick: () => setOpen((v) => !v),
+			className: "inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-bold text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: [
+				triggerLabel,
+				hiddenCount > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "rounded-full bg-brand-blue/10 px-1.5 py-0.5 font-bold text-brand-blue",
+					children: [hiddenCount, " hidden"]
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, {
+					size: 13,
+					className: `transition-transform ${open ? "rotate-180" : ""}`,
+					"aria-hidden": "true"
+				})
+			]
+		}), open && /* @__PURE__ */ jsxs("div", {
+			id: panelId,
+			ref: panelRef,
+			role: "region",
+			"aria-label": "Manage columns",
+			className: "absolute right-0 top-full z-30 mt-1 flex w-64 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xl",
+			style: { maxHeight: 400 },
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-2.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-bold text-slate-700",
+					children: "Columns"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => {
+						onReset();
+						setOpen(false);
+					},
+					className: "rounded-md px-2 py-1 text-[11px] font-bold text-slate-400 hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+					children: "Reset"
+				})]
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "overflow-y-auto",
+				role: "list",
+				children: orderedColumns.map((col, idx) => {
+					const visible = !hiddenSet.has(col.key);
+					const checkboxId = `cm-col-${col.key}`;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center gap-2 border-b border-slate-50 px-3 py-2 last:border-0",
+						children: [
+							/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								id: checkboxId,
+								checked: visible,
+								onChange: () => toggleColumn(col.key),
+								className: "h-3.5 w-3.5 rounded accent-brand-blue focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30"
+							}),
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: checkboxId,
+								className: `flex-1 cursor-pointer text-xs font-medium ${visible ? "text-slate-700" : "text-slate-400"}`,
+								children: col.label
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 gap-0.5",
+								children: [/* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": `Move ${col.label} up`,
+									disabled: idx === 0,
+									onClick: () => moveUp(idx),
+									className: "rounded p-1 text-slate-300 hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+									children: "▲"
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": `Move ${col.label} down`,
+									disabled: idx === orderedColumns.length - 1,
+									onClick: () => moveDown(idx),
+									className: "rounded p-1 text-slate-300 hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+									children: "▼"
+								})]
+							})
+						]
+					}, col.key);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/status-dot/MaskedValue.tsx
+function MaskedValue({ value, masked, maskText = "••••• •••••", maskLabel = "Value restricted", className = "" }) {
+	if (!masked) return className ? /* @__PURE__ */ jsx("span", {
+		className,
+		children: value
+	}) : /* @__PURE__ */ jsx(Fragment, { children: value });
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": maskLabel,
+		title: maskLabel,
+		className: [
+			"inline-flex select-none items-center rounded-md bg-slate-100 px-2 py-0.5",
+			"font-mono text-xs font-medium text-slate-400 tracking-wider",
+			className
+		].filter(Boolean).join(" "),
+		children: maskText
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/status-actions/statusActions.ts
 /**
 * statusActions — Gallery-native lifecycle transition utilities.
@@ -7686,4 +7930,4 @@ var shadow = {
 	overlay: "shadow-xl"
 };
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, AreaChart, Avatar, Badge, BarChart, BarList, Breadcrumb, Button, CHART_PALETTE, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, Menu, Modal, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, STATUS_PAGE_PRESETS, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, StatusPage, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, AreaChart, Avatar, Badge, BarChart, BarList, Breadcrumb, Button, CHART_PALETTE, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, ColumnManager, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, MaskedValue, Menu, Modal, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, STATUS_PAGE_PRESETS, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, StatusPage, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, applyColumnOrder, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };

package/lib/types/ui-library/gallery/column-manager/ColumnManager.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ColumnManager — Design System Component
+ *
+ * A dropdown panel for managing table column visibility and order.
+ * Provides checkboxes to show/hide individual columns and up/down
+ * buttons to reorder them. Includes a reset action.
+ *
+ * Purely presentational — all state is owned by the caller.
+ *
+ * Usage:
+ *   const [hidden, setHidden] = useState<string[]>([]);
+ *   const [order, setOrder] = useState<string[] | null>(null);
+ *
+ *   <ColumnManager
+ *     columns={[{ key: 'name', label: 'Name' }, { key: 'dept', label: 'Department' }]}
+ *     hiddenColumnKeys={hidden}
+ *     columnOrder={order}
+ *     onHiddenColumnKeysChange={setHidden}
+ *     onColumnOrderChange={setOrder}
+ *     onReset={() => { setHidden([]); setOrder(null); }}
+ *   />
+ *
+ * Accessibility:
+ *   - Trigger button has aria-expanded and aria-controls.
+ *   - Panel has role="region" and aria-label.
+ *   - Each checkbox is labelled via htmlFor + id.
+ *   - Reorder buttons have descriptive aria-labels.
+ *   - Panel closes on Escape, focus returns to the trigger.
+ */
+export interface ColumnManagerColumn {
+    /** Unique key matching the data column identifier. */
+    key: string;
+    /** Human-readable column label shown in the panel. */
+    label: string;
+}
+export interface ColumnManagerProps {
+    /** All available columns in their default order. */
+    columns: ColumnManagerColumn[];
+    /** Keys of currently hidden columns. */
+    hiddenColumnKeys: string[];
+    /**
+     * Current column order as an array of keys.
+     * Pass null to use the default order from `columns`.
+     */
+    columnOrder: string[] | null;
+    /** Called with the new hidden-keys array when visibility changes. */
+    onHiddenColumnKeysChange: (keys: string[]) => void;
+    /** Called with the new key order when a column is moved. */
+    onColumnOrderChange: (order: string[]) => void;
+    /** Called when the user clicks Reset — caller restores defaults. */
+    onReset: () => void;
+    /** Label for the trigger button. Default: "Columns" */
+    triggerLabel?: string;
+}
+/**
+ * Apply a stored column order to the runtime column array.
+ *
+ * Rules:
+ * - Keys in `order` that don't exist in `columns` are silently ignored
+ *   (forward compatibility when columns are removed).
+ * - Columns not present in `order` are appended at the end in their
+ *   original relative order (forward compatibility when columns are added).
+ * - When `order` is null the original array is returned unchanged.
+ */
+export declare function applyColumnOrder(columns: ColumnManagerColumn[], order: string[] | null): ColumnManagerColumn[];
+export declare function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel, }: ColumnManagerProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/pagination/Pagination.d.ts

@@ -23,5 +23,21 @@ export interface PaginationProps {
     onPageChange: (page: number) => void;
     /** Accessible label for the navigation landmark (default: "Pagination") */
     ariaLabel?: string;
+    /**
+     * Total number of records across all pages.
+     * When provided alongside `pageSize`, renders a "Showing X–Y of Z {itemLabel}" line.
+     */
+    totalItems?: number;
+    /**
+     * Number of records per page.
+     * Required together with `totalItems` to compute the Showing X–Y range.
+     */
+    pageSize?: number;
+    /**
+     * Label for the item type shown in the record count footer.
+     * Example: "employees", "records", "results"
+     * Default: "items"
+     */
+    itemLabel?: string;
 }
-export declare function Pagination({ page, totalPages, onPageChange, ariaLabel, }: PaginationProps): import("react").JSX.Element | null;
+export declare function Pagination({ page, totalPages, onPageChange, ariaLabel, totalItems, pageSize, itemLabel, }: PaginationProps): import("react").JSX.Element | null;

package/lib/types/ui-library/gallery/status-dot/MaskedValue.d.ts

@@ -0,0 +1,54 @@
+/**
+ * MaskedValue — Design System Component
+ *
+ * Renders a value or a redacted placeholder based on a boolean condition.
+ * Used when a value exists but should be hidden from the current viewer
+ * (e.g. salary data only visible to users with the appropriate permission).
+ *
+ * The masking decision is made by the caller — MaskedValue is purely
+ * presentational. It does not know about permissions, roles, or data fetching.
+ *
+ * Usage:
+ *   // Show real value
+ *   <MaskedValue value={formatCurrency(salary)} masked={false} />
+ *
+ *   // Hide value — consumer decides based on permission/context
+ *   <MaskedValue
+ *     value={formatCurrency(salary)}
+ *     masked={!canViewSalary}
+ *     maskLabel="Salary is restricted"
+ *   />
+ *
+ * Accessibility:
+ *   - When masked, the placeholder pill has aria-label={maskLabel} so
+ *     screen readers announce the reason rather than "••••• •••••".
+ *   - When unmasked, renders children directly — no extra ARIA.
+ */
+import type { ReactNode } from 'react';
+export interface MaskedValueProps {
+    /**
+     * The real value to display when not masked.
+     * Accepts any ReactNode — text, formatted currency, a Badge, etc.
+     */
+    value: ReactNode;
+    /**
+     * When true, renders the mask placeholder instead of value.
+     * When false, renders value directly.
+     */
+    masked: boolean;
+    /**
+     * Text shown in the masked placeholder pill.
+     * Default: '••••• •••••'
+     */
+    maskText?: string;
+    /**
+     * Accessible label for the masked placeholder — announces WHY
+     * the value is hidden, not just that it is hidden.
+     * Example: "Salary restricted — requires elevated access"
+     * Default: "Value restricted"
+     */
+    maskLabel?: string;
+    /** Additional class on the root element (both masked and unmasked states). */
+    className?: string;
+}
+export declare function MaskedValue({ value, masked, maskText, maskLabel, className, }: MaskedValueProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/validation-summary/ValidationSummary.d.ts

@@ -17,6 +17,13 @@
  *   setIssues([{ field: 'Employee ID', message: 'is required' }]);
  *   // Render:
  *   <ValidationSummary issues={issues} />
+ *
+ *   // With scroll-to-field (wizard steps):
+ *   <ValidationSummary
+ *     issues={issues}
+ *     fieldIds={{ 'Employee ID': 'employee-id-input', 'Position': 'position-select' }}
+ *     fieldLabels={{ 'Employee ID': 'Employee ID', 'Position': 'Position Title' }}
+ *   />
  */
 export interface ValidationIssue {
     /** Human-readable field label. */
@@ -32,8 +39,23 @@ export interface ValidationSummaryProps {
      * Default: "Review these fields before saving"
      */
     heading?: string;
+    /**
+     * Maps issue.field → the DOM element id that the user should be
+     * scrolled to when they click the error.
+     * When provided, each matching issue renders as a clickable link
+     * that scrolls to and focuses the target element.
+     * Issues with no matching key render as plain text.
+     */
+    fieldIds?: Record<string, string>;
+    /**
+     * Maps issue.field → a human-friendly display label.
+     * When provided, the display label replaces the raw field key in
+     * the rendered message. Useful when the field key is a code/ID and
+     * the label is the visible form field name.
+     */
+    fieldLabels?: Record<string, string>;
     /** Additional class on the root element. */
     className?: string;
 }
-export declare function ValidationSummary({ issues, heading, className, }: ValidationSummaryProps): import("react").JSX.Element | null;
+export declare function ValidationSummary({ issues, heading, fieldIds, fieldLabels, className, }: ValidationSummaryProps): import("react").JSX.Element | null;
 export type { ValidationIssue as ValidationSummaryIssue };

package/lib/types/ui-library/index.d.ts

@@ -144,6 +144,10 @@ export { Statistic } from './gallery/stat-card/Statistic';
 export type { StatisticProps, StatisticTrend, StatisticVariant } from './gallery/stat-card/Statistic';
 export { StatusDot } from './gallery/status-dot/StatusDot';
 export type { StatusDotProps, StatusDotStatus } from './gallery/status-dot/StatusDot';
+export { ColumnManager, applyColumnOrder } from './gallery/column-manager/ColumnManager';
+export type { ColumnManagerProps, ColumnManagerColumn } from './gallery/column-manager/ColumnManager';
+export { MaskedValue } from './gallery/status-dot/MaskedValue';
+export type { MaskedValueProps } from './gallery/status-dot/MaskedValue';
 export { Toaster, toast } from 'sonner';
 export { statusMenuItems } from './gallery/status-actions/statusActions';
 export type { ActionMenuItem, Lifecycle, StatusTransitionRequest, StatusMenuOptions } from './gallery/status-actions/statusActions';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.0",
+  "version": "1.7.1",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [