@diwauhris/ui 1.6.0 → 1.7.1

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
@@ -3821,6 +3860,100 @@ function EmptyState({ title, hint, icon, action, className = "" }) {
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/status-page/StatusPage.tsx
+/**
+* Named presets for the three common status states.
+* Each preset supplies code, eyebrow, title, and description.
+* Consumer always provides actions — presets never include navigation.
+*
+* Usage:
+*   <StatusPage
+*     {...STATUS_PAGE_PRESETS.notFound}
+*     primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+*     secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+*   />
+*/
+var STATUS_PAGE_PRESETS = {
+	notFound: {
+		code: "404",
+		eyebrow: "404 — Not Found",
+		title: "Page Not Found",
+		description: "The page you're looking for doesn't exist or may have been moved."
+	},
+	forbidden: {
+		code: "403",
+		eyebrow: "403 — Access Restricted",
+		title: "Access Restricted",
+		description: "You don't have permission to view this page. Contact your system administrator if you need access."
+	},
+	serverError: {
+		code: "500",
+		eyebrow: "500 — Server Error",
+		title: "Something Went Wrong",
+		description: "We encountered an unexpected problem. Please try again or return to the dashboard."
+	}
+};
+var BASE_ANCHOR = "inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 select-none h-10 gap-2 rounded-md px-4 text-sm";
+var ANCHOR_PRIMARY = `${BASE_ANCHOR} font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 focus-visible:ring-brand-blue/30`;
+var ANCHOR_OUTLINE = `${BASE_ANCHOR} font-semibold border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-brand-blue/40 hover:bg-blue-50/40 hover:text-brand-blue focus-visible:ring-brand-blue/20`;
+function ActionButton({ action, variant }) {
+	if (action.href) return /* @__PURE__ */ jsx("a", {
+		href: action.href,
+		className: variant === "primary" ? ANCHOR_PRIMARY : ANCHOR_OUTLINE,
+		children: action.label
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		onClick: action.onClick,
+		children: action.label
+	});
+}
+function StatusPage({ eyebrow, title, description, code, icon, primaryAction, secondaryAction, className = "" }) {
+	const hasActions = primaryAction || secondaryAction;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative flex min-h-screen items-center justify-center bg-surface-page px-6 py-16 overflow-hidden ${className}`,
+		children: [code ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute select-none font-heading font-bold text-brand-navy opacity-[0.07] text-[80px] sm:text-[120px] leading-none",
+			children: code
+		}) : icon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute select-none text-brand-navy opacity-[0.12]",
+			style: { fontSize: 0 },
+			children: /* @__PURE__ */ jsx("span", {
+				className: "block [&>svg]:h-24 [&>svg]:w-24",
+				children: icon
+			})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "relative z-10 max-w-sm w-full os-slide-up",
+			children: [
+				eyebrow && /* @__PURE__ */ jsx("p", {
+					className: "mb-3 text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+					children: eyebrow
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "font-heading text-3xl font-bold text-brand-navy leading-tight",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-3 text-sm font-medium text-slate-500 leading-relaxed",
+					children: description
+				}),
+				hasActions && /* @__PURE__ */ jsxs("div", {
+					className: "mt-8 flex flex-wrap items-center gap-3",
+					children: [primaryAction && /* @__PURE__ */ jsx(ActionButton, {
+						action: primaryAction,
+						variant: "primary"
+					}), secondaryAction && /* @__PURE__ */ jsx(ActionButton, {
+						action: secondaryAction,
+						variant: "outline"
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
 function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
 	return /* @__PURE__ */ jsxs("article", {
@@ -7409,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.
@@ -7592,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, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, 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;