@diwauhris/ui 1.5.0 → 1.6.0

package/lib/index.cjs

@@ -32,6 +32,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+react = __toESM(react, 1);
 let clsx = require("clsx");
 let tailwind_merge = require("tailwind-merge");
 let lucide_react = require("lucide-react");
@@ -46,6 +47,8 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover, 1);
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
 _radix_ui_react_tooltip = __toESM(_radix_ui_react_tooltip, 1);
 let react_router_dom = require("react-router-dom");
+let d3 = require("d3");
+d3 = __toESM(d3, 1);
 let sonner = require("sonner");
 //#region src/ui-library/gallery/button/Button.tsx
 var VARIANT_STYLES$1 = {
@@ -212,15 +215,15 @@ function getInitials(name) {
 	return ((parts[0] ?? "").charAt(0) + (parts[parts.length - 1] ?? "").charAt(0)).toUpperCase();
 }
 var PALETTE = [
-	"#0B2545",
+	"#00377B",
+	"#034EA2",
+	"#2D8ACA",
+	"#00ADCC",
+	"#00A74C",
+	"#B61D66",
+	"#F68B1F",
 	"#0F4C81",
-	"#0369A1",
-	"#1E3A8A",
-	"#0D9488",
-	"#0F766E",
-	"#B45309",
-	"#C2410C",
-	"#BE185D"
+	"#0369A1"
 ];
 function deriveColor(name) {
 	if (!name) return PALETTE[0];
@@ -718,6 +721,7 @@ function RadioItem({ value, label, description, disabled: itemDisabled = false,
 	const isDisabled = groupDisabled || itemDisabled;
 	const isChecked = activeValue === value;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
 		className: [
 			"group flex cursor-pointer items-start gap-3",
 			isDisabled ? "cursor-not-allowed opacity-50" : "",
@@ -733,7 +737,8 @@ function RadioItem({ value, label, description, disabled: itemDisabled = false,
 				disabled: isDisabled,
 				required,
 				onChange: () => !isDisabled && select(value),
-				className: "peer sr-only"
+				className: "peer sr-only",
+				"aria-label": typeof label === "string" ? label : void 0
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: [
@@ -773,6 +778,7 @@ function Switch({ checked, onChange, label, description, disabled = false, loadi
 			role: "switch",
 			"aria-checked": checked,
 			"aria-labelledby": labelId,
+			"aria-label": !label ? "Toggle" : void 0,
 			"aria-disabled": !isInteractive || void 0,
 			disabled: !isInteractive,
 			onClick: () => isInteractive && onChange(!checked),
@@ -812,7 +818,7 @@ function Switch({ checked, onChange, label, description, disabled = false, loadi
 */
 var fieldInputClass = "w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-brand-blue/40 focus:ring-2 focus:ring-brand-blue/15 disabled:cursor-not-allowed disabled:opacity-60";
 var fieldInputErrorClass = "border-rose-300 focus:border-rose-400 focus:ring-rose-100";
-function Combobox({ value, onChange, options, placeholder, className, disabled, loading, error }) {
+function Combobox({ value, onChange, options, placeholder, className, disabled, loading, error, "aria-label": ariaLabel }) {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const [search, setSearch] = (0, react.useState)(value);
 	const [highlightIndex, setHighlightIndex] = (0, react.useState)(-1);
@@ -893,6 +899,7 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 				"aria-activedescendant": highlightIndex >= 0 ? optionId(highlightIndex) : void 0,
 				"aria-autocomplete": "list",
 				"aria-invalid": error ? "true" : void 0,
+				"aria-label": ariaLabel,
 				value: search,
 				onChange: handleInputChange,
 				onFocus: () => setIsOpen(true),
@@ -2394,12 +2401,6 @@ var radius = {
 *   - Use gallery Button component (Phase 11 — replaces legacy inlined btn* strings)
 *   - Use a simple inline ErrorBanner instead of importing from ui.tsx
 */
-function ErrorBanner$1({ message }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rounded-lg border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700",
-		children: message
-	});
-}
 function ConfirmAction({ title, message, label, description, confirmLabel = "Confirm", tone = "danger", disabled = false, onConfirm, children }) {
 	const [open, setOpen] = (0, react.useState)(false);
 	const [pending, setPending] = (0, react.useState)(false);
@@ -2461,7 +2462,7 @@ function ConfirmAction({ title, message, label, description, confirmLabel = "Con
 					className: "text-sm font-medium leading-relaxed text-slate-600",
 					children: effectiveMessage
 				})]
-			}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBanner$1, { message: error })]
+			}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBanner, { message: error })]
 		})
 	})] });
 }
@@ -2952,8 +2953,8 @@ function StepCircle({ state, number, icon }) {
 }
 function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", className = "" }) {
 	if (!(orientation === "horizontal")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
 		"aria-label": "Progress",
-		"aria-orientation": "vertical",
 		className: ["flex flex-col", className].filter(Boolean).join(" "),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 			className: "flex flex-col",
@@ -3001,34 +3002,48 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		disabled: "text-slate-300"
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
 		"aria-label": "Progress",
-		"aria-orientation": "horizontal",
 		className: ["w-full", className].filter(Boolean).join(" "),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
-			className: "flex items-start w-full",
+			className: "grid w-full",
+			style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
 			children: steps.map((step, idx) => {
 				const state = resolvedStates[idx];
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
+				const prevState = idx > 0 ? resolvedStates[idx - 1] : null;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 					"aria-current": isCurrent ? "step" : void 0,
-					className: ["flex flex-col items-center relative", isLast ? "" : "flex-1"].filter(Boolean).join(" "),
+					className: "flex flex-col items-center",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center w-full",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "shrink-0 z-10",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
-								state,
-								number: idx + 1,
-								icon: step.icon
+						className: "flex w-full items-center",
+						children: [
+							idx > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `h-0.5 flex-1 ${prevState === "completed" || prevState === "current" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-1",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "shrink-0 z-10",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
+									state,
+									number: idx + 1,
+									icon: step.icon
+								})
+							}),
+							!isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `h-0.5 flex-1 ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-1",
+								"aria-hidden": "true"
 							})
-						}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: `h-0.5 flex-1 ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
-							"aria-hidden": "true"
-						})]
+						]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mt-2 flex flex-col items-center text-center w-max max-w-[120px]",
-						style: { transform: isLast ? "translateX(calc(50% - 1.125rem))" : idx === 0 ? "translateX(calc(-50% + 1.125rem))" : void 0 },
+						className: "mt-2 flex flex-col items-center text-center px-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: `text-sm leading-tight ${labelColor[state]}`,
 							children: step.label
@@ -3310,20 +3325,22 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right" }) {
 			focusItem(items.length - 1);
 		}
 	};
+	const panelAlign = align === "left" ? "left-0" : "right-0";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative inline-block",
 		ref: containerRef,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: triggerRef,
-			"aria-expanded": open,
-			"aria-haspopup": "menu",
 			onClick: () => setOpen((v) => !v),
 			className: "cursor-pointer",
-			children: trigger
+			children: (0, react.isValidElement)(trigger) ? (0, react.cloneElement)(trigger, {
+				"aria-expanded": open,
+				"aria-haspopup": "menu"
+			}) : trigger
 		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			role: "menu",
 			"aria-label": ariaLabel,
-			className: `absolute top-full ${align === "left" ? "left-0" : "right-0"} z-30 mt-1 min-w-[11rem] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl`,
+			className: `absolute top-full ${panelAlign} z-30 mt-1 min-w-[11rem] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl`,
 			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				ref: (node) => {
 					itemRefs.current[index] = node;
@@ -3727,6 +3744,7 @@ function TimelineValueCard({ beforeLabel = "Previous", afterLabel = "Current", b
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "text-sm text-slate-500 leading-snug",
+					role: "group",
 					"aria-label": `${beforeLabel} value`,
 					children: beforeContent
 				})]
@@ -3753,6 +3771,7 @@ function TimelineValueCard({ beforeLabel = "Previous", afterLabel = "Current", b
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "text-sm font-semibold text-slate-800 leading-snug",
+					role: "group",
 					"aria-label": `${afterLabel} value`,
 					children: afterContent
 				})]
@@ -3918,11 +3937,11 @@ function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className
 *     onSelect={setSelected}
 *   />
 */
-function flattenVisible(items, expanded) {
+function flattenVisible$1(items, expanded) {
 	const result = [];
 	for (const item of items) {
 		result.push(item);
-		if (item.children && expanded.has(item.id)) result.push(...flattenVisible(item.children, expanded));
+		if (item.children && expanded.has(item.id)) result.push(...flattenVisible$1(item.children, expanded));
 	}
 	return result;
 }
@@ -4012,7 +4031,7 @@ function TreeView({ items, selectedId, onSelect, "aria-label": ariaLabel, classN
 		onSelect?.(id);
 	}, [onSelect]);
 	const handleKeyDown = (e) => {
-		const visible = flattenVisible(items, expanded);
+		const visible = flattenVisible$1(items, expanded);
 		if (visible.length === 0) return;
 		const currentId = selectedId ?? visible[0]?.id;
 		const currentIdx = visible.findIndex((v) => v.id === currentId);
@@ -4361,67 +4380,154 @@ function Calendar({ value, defaultValue, onChange, minDate, maxDate, className =
 }
 //#endregion
 //#region src/ui-library/gallery/charts/Charts.tsx
-function BarChart({ data, height = 160, barColor = "#6366f1", "aria-label": ariaLabel, className = "" }) {
+/**
+* Charts — Design System Components
+*
+* Lightweight SVG-native chart primitives. No charting library dependency.
+* Suitable for simple analytics/KPI displays.
+*
+* Components:
+*   BarChart      — vertical bar chart
+*   LineChart     — line/area chart (SVG path)
+*   CHART_PALETTE — shared default color sequence for multi-series charts
+*
+* Visual language (applied as defaults, no new props):
+*   - BarChart: top-only rounded corners, subtle same-hue gradient fill,
+*     baseline rule, value labels inside SVG above bars, comfortable gaps
+*   - LineChart: gradient area fill fading to transparent, strokeWidth 2,
+*     white-ring dots only when ≤ 12 data points, no horizontal distortion
+*
+* Accessibility:
+*   - role="img" on every SVG with aria-label describing the chart
+*   - Each bar/point has aria-label with label and value
+*   - Decorative elements are aria-hidden
+*/
+/**
+* Default color sequence for multi-series / per-item charts.
+* Built on the brand's blue-sky hue family with a single warm accent.
+* Import this directly when constructing per-item color arrays:
+*
+*   import { CHART_PALETTE } from '@diwauhris/ui';
+*   const data = items.map((item, i) => ({ ...item, color: CHART_PALETTE[i % CHART_PALETTE.length] }));
+*/
+var CHART_PALETTE = [
+	"#034EA2",
+	"#2D8ACA",
+	"#4F6FBF",
+	"#0E7490",
+	"#B45309"
+];
+function BarChart({ data, height = 160, barColor = "#034EA2", "aria-label": ariaLabel, className = "" }) {
+	const uid = (0, react.useId)().replace(/:/g, "");
 	const max = Math.max(...data.map((d) => d.value), 1);
-	const w = 100 / data.length;
-	const gap = .4;
+	const n = data.length;
+	const W = Math.max(n * 50, 200);
+	const w = W / n;
+	const gap = w * .2;
 	const bw = w - gap * 2;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `space-y-2 ${className}`,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	const bottomPad = 24;
+	const labelGap = 4;
+	const chartH = height - bottomPad;
+	const baselineY = chartH;
+	const isDefaultBarColor = barColor === "#034EA2";
+	const fillColors = data.map((d, i) => d.color ?? (isDefaultBarColor ? CHART_PALETTE[i % CHART_PALETTE.length] ?? barColor : barColor));
+	const distinctColors = Array.from(new Set(fillColors));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 			role: "img",
 			"aria-label": ariaLabel,
-			viewBox: `0 0 100 ${height}`,
+			viewBox: `0 0 ${W} ${height}`,
 			preserveAspectRatio: "none",
 			className: "w-full",
 			style: { height },
-			children: [data.map((d, i) => {
-				const barH = d.value / max * (height - 24);
-				const x = i * w + gap;
-				const y = height - 20 - barH;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
-					"aria-label": `${d.label}: ${d.value}`,
-					role: "img",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-						x,
-						y,
-						width: bw,
-						height: barH,
-						rx: "2",
-						fill: d.color ?? barColor,
-						opacity: .9
-					})
-				}, d.label);
-			}), data.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
-				x: i * w + w / 2,
-				y: height - 4,
-				textAnchor: "middle",
-				className: "fill-slate-500",
-				style: {
-					fontSize: "6px",
-					fontFamily: "inherit"
-				},
-				"aria-hidden": "true",
-				children: d.label
-			}, `lbl-${d.label}`))]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex justify-around",
-			children: data.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[10px] font-bold text-slate-600",
-				children: d.value
-			}, d.label))
-		})]
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: distinctColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+					id: `${uid}-bg-${color.replace("#", "")}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: height - bottomPad,
+					gradientUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "0%",
+						stopColor: color,
+						stopOpacity: 1
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "100%",
+						stopColor: color,
+						stopOpacity: .7
+					})]
+				}, color)) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+					x1: 0,
+					y1: baselineY,
+					x2: W,
+					y2: baselineY,
+					stroke: "#e2e8f0",
+					strokeWidth: .5,
+					"aria-hidden": "true"
+				}),
+				data.map((d, i) => {
+					const fillColor = fillColors[i];
+					const gradId = `${uid}-bg-${fillColor.replace("#", "")}`;
+					const barH = d.value / max * (chartH - 16);
+					const x = i * w + gap;
+					const barY = chartH - barH;
+					const rx = Math.min(3, barH * .4);
+					const barPath = barH < 1 ? "" : [
+						`M ${x + rx},${barY}`,
+						`Q ${x},${barY} ${x},${barY + rx}`,
+						`L ${x},${barY + barH}`,
+						`L ${x + bw},${barY + barH}`,
+						`L ${x + bw},${barY + rx}`,
+						`Q ${x + bw},${barY} ${x + bw - rx},${barY}`,
+						"Z"
+					].join(" ");
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+						"aria-label": `${d.label}: ${d.value}`,
+						role: "img",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: barPath,
+							fill: `url(#${gradId})`
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+							x: x + bw / 2,
+							y: barY - labelGap,
+							textAnchor: "middle",
+							fontSize: 7,
+							fill: "#64748b",
+							fontWeight: "600",
+							fontFamily: "inherit",
+							"aria-hidden": "true",
+							children: d.value
+						})]
+					}, d.label);
+				}),
+				data.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+					x: i * w + w / 2,
+					y: height - 4,
+					textAnchor: "middle",
+					fontSize: 7,
+					fill: "#94a3b8",
+					fontWeight: "600",
+					fontFamily: "inherit",
+					"aria-hidden": "true",
+					children: d.label
+				}, `lbl-${d.label}`))
+			]
+		})
 	});
 }
-function LineChart({ data, height = 120, lineColor = "#6366f1", filled = true, "aria-label": ariaLabel, className = "" }) {
+function LineChart({ data, height = 120, lineColor = "#034EA2", filled = true, "aria-label": ariaLabel, className = "" }) {
+	const uid = (0, react.useId)().replace(/:/g, "");
 	const max = Math.max(...data.map((d) => d.value), 1);
 	const n = data.length;
 	if (n < 2) return null;
-	const pad = 8;
-	const W = 100;
+	const W = 300;
 	const H = height;
-	const px = (i) => pad + i / (n - 1) * 84;
-	const py = (v) => pad + (max - v) / max * (H - 16);
+	const pad = Math.round(H * .07);
+	const px = (i) => pad + i / (n - 1) * (W - pad * 2);
+	const py = (v) => pad + (max - v) / max * (H - pad * 2);
 	const points = data.map((d, i) => ({
 		x: px(i),
 		y: py(d.value),
@@ -4430,38 +4536,314 @@ function LineChart({ data, height = 120, lineColor = "#6366f1", filled = true, "
 	}));
 	const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
 	const areaPath = `${linePath} L${points[n - 1].x},${H - pad} L${points[0].x},${H - pad} Z`;
+	const showDots = n <= 12;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		role: "img",
 		"aria-label": ariaLabel,
 		viewBox: `0 0 ${W} ${H}`,
-		preserveAspectRatio: "none",
 		className: `w-full ${className}`,
 		style: { height },
 		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: filled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+				id: `${uid}-lc-fill`,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: "0%",
+					stopColor: lineColor,
+					stopOpacity: .2
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: "100%",
+					stopColor: lineColor,
+					stopOpacity: 0
+				})]
+			}) }),
 			filled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: areaPath,
-				fill: lineColor,
-				fillOpacity: .1
+				fill: `url(#${uid}-lc-fill)`,
+				"aria-hidden": "true"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: linePath,
 				fill: "none",
 				stroke: lineColor,
-				strokeWidth: "1.5",
+				strokeWidth: 2,
 				strokeLinejoin: "round",
-				strokeLinecap: "round"
+				strokeLinecap: "round",
+				"aria-hidden": "true"
 			}),
-			points.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			showDots && points.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
 				cx: p.x,
 				cy: p.y,
-				r: 2,
+				r: 2.5,
 				fill: lineColor,
+				stroke: "white",
+				strokeWidth: 1.5,
+				role: "img",
 				"aria-label": `${p.label}: ${p.value}`
 			}, p.label))
 		]
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/charts/AreaChart.tsx
+/**
+* AreaChart — Design System Component
+*
+* SVG area/line chart with gradient fill, explicit Y-axis ticks, optional
+* threshold line, point annotations, highlight regions, and multi-series support.
+* No external charting library — native SVG only.
+*
+* Gradient IDs are scoped per instance via useId() to avoid SVG ID collisions
+* when multiple charts appear on the same page.
+*
+* Usage:
+*   <AreaChart
+*     data={monthlyData}
+*     series={{ dataKey: 'value', color: '#6366f1', fillOpacity: { top: 0.22, bottom: 0.01 } }}
+*     yTicks={[0, 25, 50, 75, 100]}
+*     yTickFormat={(v) => `${v}%`}
+*     annotations={[{ dataIndex: 5, label: 'Peak', radius: 5, color: '#ef4444' }]}
+*     height={170}
+*   />
+*
+* Accessibility:
+*   - role="img" on the SVG with aria-label
+*   - Each dot has aria-label with label and value
+*   - Decorative elements are aria-hidden
+*/
+function resolveOpacity(op) {
+	if (op === void 0) return {
+		top: .15,
+		bottom: 0
+	};
+	if (typeof op === "number") return {
+		top: op,
+		bottom: op
+	};
+	return op;
+}
+function AreaChart({ data, series, yTicks, yTickFormat, showDots = true, threshold, annotations = [], highlightRegion, height = 170, "aria-label": ariaLabel = "Area chart", className = "" }) {
+	const uid = (0, react.useId)().replace(/:/g, "");
+	const seriesArr = Array.isArray(series) ? series : [series];
+	const primary = seriesArr[0];
+	const W = 560;
+	const pl = 52;
+	const pt = 14;
+	const pb = 30;
+	const cW = 492;
+	const cH = height - pt - pb;
+	const n = data.length;
+	const yTicksSafe = yTicks && yTicks.length > 0 ? yTicks : void 0;
+	const minY = yTicksSafe ? Math.min(...yTicksSafe) : 0;
+	const maxY = yTicksSafe ? Math.max(...yTicksSafe) : Math.max(...seriesArr.flatMap((s) => data.map((d) => Number(d[s.dataKey] ?? 0))), 1);
+	const cx = (i) => pl + i / Math.max(n - 1, 1) * cW;
+	const cy = (v) => pt + (1 - (v - minY) / (maxY - minY)) * cH;
+	const paths = seriesArr.map((s) => {
+		const vals = data.map((d) => Number(d[s.dataKey] ?? 0));
+		const line = "M" + vals.map((v, i) => `${cx(i)},${cy(v)}`).join("L");
+		return {
+			line,
+			area: `${line}L${cx(n - 1)},${height - pb}L${cx(0)},${height - pb}Z`,
+			vals
+		};
+	});
+	const annotatedIdx = new Set(annotations.map((a) => a.dataIndex));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		role: "img",
+		"aria-label": ariaLabel,
+		viewBox: `0 0 ${W} ${height}`,
+		className: `w-full ${className}`,
+		style: { height },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: seriesArr.map((s, si) => {
+				const op = resolveOpacity(s.fillOpacity);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+					id: `${uid}-g${si}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "0%",
+						stopColor: s.color,
+						stopOpacity: op.top
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "100%",
+						stopColor: s.color,
+						stopOpacity: op.bottom
+					})]
+				}, si);
+			}) }),
+			highlightRegion && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					x: cx(highlightRegion.startIndex),
+					y: pt,
+					width: cx(highlightRegion.endIndex) - cx(highlightRegion.startIndex),
+					height: cH,
+					fill: highlightRegion.color ?? "#eef0ff",
+					rx: 3,
+					opacity: .7
+				}), highlightRegion.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+					x: (cx(highlightRegion.startIndex) + cx(highlightRegion.endIndex)) / 2,
+					y: 23,
+					textAnchor: "middle",
+					fontSize: 7.5,
+					fill: "#a5b4fc",
+					children: highlightRegion.label
+				})]
+			}),
+			yTicks?.map((v) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+					x1: pl,
+					y1: cy(v),
+					x2: 544,
+					y2: cy(v),
+					stroke: "#f1f5f9",
+					strokeWidth: 1
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+					x: 46,
+					y: cy(v) + 4,
+					textAnchor: "end",
+					fontSize: 9,
+					fill: "#94a3b8",
+					children: yTickFormat ? yTickFormat(v) : String(v)
+				})]
+			}, v)),
+			threshold && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				x1: pl,
+				y1: cy(threshold.value),
+				x2: 544,
+				y2: cy(threshold.value),
+				stroke: threshold.color ?? "#f59e0b",
+				strokeWidth: 1,
+				strokeDasharray: threshold.strokeStyle === "solid" ? void 0 : "4,2",
+				"aria-hidden": "true"
+			}),
+			seriesArr.map((s, si) => {
+				const op = resolveOpacity(s.fillOpacity);
+				if (op.top === 0 && op.bottom === 0) return null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: paths[si].area,
+					fill: `url(#${uid}-g${si})`,
+					"aria-hidden": "true"
+				}, `area-${si}`);
+			}),
+			seriesArr.map((s, si) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: paths[si].line,
+				fill: "none",
+				stroke: s.color,
+				strokeWidth: si === 0 ? 2.5 : 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeDasharray: s.strokeStyle === "dashed" ? "4,2" : void 0,
+				"aria-hidden": "true"
+			}, `line-${si}`)),
+			showDots && paths[0].vals.map((v, i) => {
+				if (annotatedIdx.has(i)) return null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: cx(i),
+					cy: cy(v),
+					r: 3.5,
+					fill: primary.color,
+					stroke: "white",
+					strokeWidth: 2,
+					"aria-label": `${data[i].label}: ${v}`
+				}, `dot-${i}`);
+			}),
+			data.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: cx(i),
+				y: height - 4,
+				textAnchor: "middle",
+				fontSize: 9,
+				fill: "#94a3b8",
+				"aria-hidden": "true",
+				children: d.label
+			}, `x-${i}`)),
+			annotations.map((ann) => {
+				const v = Number(data[ann.dataIndex]?.[primary.dataKey] ?? 0);
+				const x = cx(ann.dataIndex);
+				const y = cy(v);
+				const r = ann.radius ?? 4;
+				const col = ann.color ?? primary.color;
+				const ly = ann.labelPosition === "below" ? y + r + 10 : Math.max(22, y - r - 5);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					"aria-label": `${data[ann.dataIndex].label}: ${ann.label}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: x,
+						cy: y,
+						r,
+						fill: col,
+						stroke: "white",
+						strokeWidth: 2
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+						x,
+						y: ly,
+						textAnchor: "middle",
+						fontSize: 8,
+						fill: col,
+						fontWeight: "bold",
+						children: ann.label
+					})]
+				}, `ann-${ann.dataIndex}`);
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/charts/BarList.tsx
+function BarList({ items, valueFormat, totalLabel, barHeight = "h-2", staggerDelay = 70, className = "" }) {
+	const maxValue = Math.max(...items.map((item) => item.value), 1);
+	const total = items.reduce((sum, item) => sum + item.value, 0);
+	const fmt = valueFormat ?? ((v) => String(v));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "list",
+		"aria-label": "Bar list",
+		className: `space-y-3 pt-1 ${className}`,
+		children: [items.map((item, i) => {
+			const pct = item.value / maxValue * 100;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "listitem",
+				"aria-label": `${item.label}: ${fmt(item.value)}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex justify-between items-baseline mb-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs font-bold text-slate-700",
+						children: item.label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs text-slate-400 font-medium",
+						children: fmt(item.value)
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${barHeight} w-full bg-slate-100/60 rounded-full overflow-hidden`,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `${barHeight} rounded-full os-bar-in`,
+						style: {
+							width: `${pct}%`,
+							backgroundColor: item.color,
+							animationDelay: `${i * staggerDelay}ms`
+						},
+						"aria-hidden": "true"
+					})
+				})]
+			}, item.label);
+		}), totalLabel !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "pt-2 border-t border-slate-50 flex justify-between items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] font-bold text-slate-400 uppercase tracking-widest",
+				children: totalLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-bold text-slate-700",
+				children: total
+			})]
+		})]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/heatmap/Heatmap.tsx
 /**
 * Heatmap — Design System Component
@@ -4480,31 +4862,31 @@ function LineChart({ data, height = 120, lineColor = "#6366f1", filled = true, "
 var SCALES = {
 	blue: { cells: [
 		"bg-slate-100",
-		"bg-brand-sky/20",
-		"bg-brand-sky/40",
-		"bg-brand-sky/70",
-		"bg-brand-sky"
+		"bg-sky-200",
+		"bg-sky-400",
+		"bg-blue-600",
+		"bg-[#00377B]"
 	] },
 	navy: { cells: [
 		"bg-slate-100",
-		"bg-brand-navy/15",
-		"bg-brand-navy/35",
-		"bg-brand-navy/65",
-		"bg-brand-navy"
+		"bg-slate-300",
+		"bg-slate-500",
+		"bg-slate-700",
+		"bg-slate-900"
 	] },
 	teal: { cells: [
 		"bg-slate-100",
-		"bg-cyan-100",
-		"bg-cyan-300",
-		"bg-cyan-500",
-		"bg-cyan-700"
+		"bg-cyan-200",
+		"bg-cyan-400",
+		"bg-cyan-600",
+		"bg-cyan-800"
 	] },
 	orange: { cells: [
 		"bg-slate-100",
-		"bg-orange-100",
-		"bg-orange-300",
+		"bg-orange-200",
 		"bg-orange-400",
-		"bg-orange-600"
+		"bg-orange-500",
+		"bg-orange-700"
 	] }
 };
 var MONTHS = [
@@ -4645,6 +5027,2250 @@ function Heatmap({ data, scale = "blue", showLegend = true, showMonthLabels = tr
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/org-chart/OrgChart.tsx
+/**
+* OrgChart — Design System Component
+*
+* A D3-powered SVG organization chart matching the UHRIS Company Structure
+* diagram mode. Renders a top-down tree with rectangular nodes and
+* stepped orthogonal connectors.
+*
+* Technology: D3 v7 (d3.hierarchy + d3.tree layout + d3.zoom)
+* Already a production dependency — no new packages introduced.
+*
+* Visual design (sourced from CompanyStructurePage diagram mode):
+*   Nodes:
+*     - 250 × 84 px rounded rectangles (rx=14)
+*     - Root (depth 0): dark navy fill (#0f172a), white text
+*     - Children: white fill (#fff), slate border (#e2e8f0)
+*     - drop-shadow: 0 6px 12px rgba(15,23,42,0.08)
+*     - Name: 13px, font-weight 800, centered
+*     - Description: 11px, font-weight 600, #64748b / #cbd5e1 (root)
+*     - Selected: indigo border overlay ring
+*   Connectors:
+*     - Stepped orthogonal path: M→V→H→V
+*     - Stroke: #cbd5e1, stroke-width 1.5
+*   Canvas:
+*     - Viewport sized to container; fit-to-view on render
+*     - Zoom: scaleExtent [0.05, 1.8]
+*     - Pan: mouse/touch drag
+*     - Layout: nodeSize [280, 185] — horizontal × vertical spacing
+*   Controls:
+*     - ZoomIn, Reset, ZoomOut buttons (top-right overlay panel)
+*
+* Accessibility:
+*   - SVG has role="img" + aria-label
+*   - Zoom controls have aria-label
+*   - Keyboard: Tab to control buttons; diagram itself is navigated visually
+*   - Note: full ARIA tree semantics are not possible in an SVG diagram;
+*     use OrgUnitTree for a fully keyboard-accessible list-based alternative
+*
+* Usage:
+*   <OrgChart
+*     nodes={orgNodes}
+*     selectedId={selectedId}
+*     onSelect={setSelectedId}
+*     aria-label="Company organization chart"
+*   />
+*/
+function buildD3Tree(nodes) {
+	function convert(node, depth) {
+		return {
+			id: node.id,
+			name: node.label,
+			description: node.description ?? "",
+			isRoot: depth === 0,
+			isSyntheticRoot: false,
+			originalId: node.id,
+			children: node.children?.map((c) => convert(c, depth + 1))
+		};
+	}
+	if (nodes.length === 1) return convert(nodes[0], 0);
+	return {
+		id: "__synthetic_root__",
+		name: "",
+		description: "",
+		isRoot: true,
+		isSyntheticRoot: true,
+		originalId: "__synthetic_root__",
+		children: nodes.map((n) => convert(n, 0))
+	};
+}
+function OrgChart({ nodes, selectedId, onSelect, height = "75vh", "aria-label": ariaLabel = "Organization chart", className = "" }) {
+	const svgRef = (0, react.useRef)(null);
+	const zoomRef = (0, react.useRef)(null);
+	const initialTransformRef = (0, react.useRef)(null);
+	const treeBoundsRef = (0, react.useRef)(null);
+	const uid = (0, react.useId)().replace(/:/g, "");
+	const fitToView = () => {
+		if (!svgRef.current || !zoomRef.current || !treeBoundsRef.current) return;
+		const { width: W, height: H } = svgRef.current.getBoundingClientRect();
+		if (W === 0 || H === 0) return;
+		const { minX, maxX, minY, maxY } = treeBoundsRef.current;
+		const contentLeft = minX - 125;
+		const contentRight = maxX + 125;
+		const contentTop = minY - 42;
+		const contentBottom = maxY + 42;
+		const contentWidth = contentRight - contentLeft;
+		const contentHeight = contentBottom - contentTop;
+		const scaleX = (W - 80) / Math.max(1, contentWidth);
+		const scaleY = (H - 80) / Math.max(1, contentHeight);
+		const scale = Math.max(.05, Math.min(1.8, scaleX, scaleY));
+		const contentCenterX = (contentLeft + contentRight) / 2;
+		const contentCenterY = (contentTop + contentBottom) / 2;
+		const tx = W / 2 - contentCenterX * scale;
+		const ty = H / 2 - contentCenterY * scale;
+		const t = d3.zoomIdentity.translate(tx, ty).scale(scale);
+		initialTransformRef.current = t;
+		d3.select(svgRef.current).call(zoomRef.current.transform, t);
+	};
+	(0, react.useEffect)(() => {
+		if (!svgRef.current || nodes.length === 0) return;
+		const svg = d3.select(svgRef.current);
+		svg.selectAll("*").remove();
+		const treeData = buildD3Tree(nodes);
+		const root = d3.hierarchy(treeData);
+		d3.tree().nodeSize([280, 185])(root);
+		const descendants = root.descendants();
+		treeBoundsRef.current = {
+			minX: d3.min(descendants, (d) => d.x) ?? 0,
+			maxX: d3.max(descendants, (d) => d.x) ?? 0,
+			minY: d3.min(descendants, (d) => d.y) ?? 0,
+			maxY: d3.max(descendants, (d) => d.y) ?? 0
+		};
+		const g = svg.append("g");
+		const zoom = d3.zoom().scaleExtent([.05, 1.8]).on("zoom", (e) => g.attr("transform", e.transform.toString()));
+		zoomRef.current = zoom;
+		svg.call(zoom);
+		g.selectAll("path").data(root.links().filter((l) => !l.source.data.isSyntheticRoot)).join("path").attr("fill", "none").attr("stroke", "#cbd5e1").attr("stroke-width", 1.5).attr("d", (link) => {
+			const sx = link.source.x ?? 0;
+			const sy = link.source.y ?? 0;
+			const tx = link.target.x ?? 0;
+			const ty = link.target.y ?? 0;
+			return `M${sx},${sy}V${(sy + ty) / 2}H${tx}V${ty}`;
+		});
+		const node = g.selectAll("g.node").data(root.descendants().filter((d) => !d.data.isSyntheticRoot)).join("g").attr("class", "node").attr("transform", (d) => `translate(${d.x},${d.y})`).style("cursor", (d) => d.data.originalId !== "__synthetic_root__" ? "pointer" : "default").on("click", (_e, d) => {
+			if (d.data.isSyntheticRoot) return;
+			onSelect?.(d.data.originalId);
+		});
+		node.append("rect").attr("x", -125).attr("y", -42).attr("width", 250).attr("height", 84).attr("rx", 14).attr("fill", (d) => d.data.isRoot ? "#0f172a" : "#fff").attr("stroke", (d) => {
+			if (selectedId && d.data.originalId === selectedId) return "#6366f1";
+			return d.data.isRoot ? "#0f172a" : "#e2e8f0";
+		}).attr("stroke-width", (d) => selectedId && d.data.originalId === selectedId ? 2.5 : 1).attr("filter", "drop-shadow(0 6px 12px rgba(15,23,42,0.08))");
+		node.append("text").attr("text-anchor", "middle").attr("y", -8).attr("font-size", 13).attr("font-weight", 800).attr("fill", (d) => d.data.isRoot ? "#fff" : "#0f172a").text((d) => d.data.name);
+		node.append("text").attr("text-anchor", "middle").attr("y", 16).attr("font-size", 11).attr("font-weight", 600).attr("fill", (d) => d.data.isRoot ? "#cbd5e1" : "#64748b").text((d) => d.data.description);
+		if (selectedId) node.filter((d) => d.data.originalId === selectedId).append("rect").attr("x", -128).attr("y", -45).attr("width", 256).attr("height", 90).attr("rx", 16).attr("fill", "none").attr("stroke", "#6366f1").attr("stroke-width", 2.5).attr("opacity", .6);
+		requestAnimationFrame(() => {
+			fitToView();
+		});
+	}, [
+		nodes,
+		selectedId,
+		onSelect
+	]);
+	(0, react.useEffect)(() => {
+		const el = svgRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver(() => {
+			fitToView();
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const zoomBy = (factor) => {
+		if (!svgRef.current || !zoomRef.current) return;
+		d3.select(svgRef.current).transition().duration(250).call(zoomRef.current.scaleBy, factor);
+	};
+	const resetZoom = () => {
+		fitToView();
+	};
+	const controlBtnClass = [
+		"appearance-none border-0 bg-none font-[inherit]",
+		"flex items-center justify-center rounded-lg p-2",
+		"text-slate-400 transition hover:bg-slate-100 hover:text-slate-700",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30"
+	].join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `relative w-full overflow-hidden bg-slate-50/50 ${className}`,
+		style: { height },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute right-4 top-4 z-10 flex flex-col gap-2 rounded-lg border border-slate-100 bg-white p-2 shadow-md",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: controlBtnClass,
+					onClick: () => zoomBy(1.2),
+					"aria-label": "Zoom in",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: controlBtnClass,
+					onClick: resetZoom,
+					"aria-label": "Reset zoom",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RotateCcw, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: controlBtnClass,
+					onClick: () => zoomBy(.8),
+					"aria-label": "Zoom out",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			ref: svgRef,
+			id: uid,
+			width: "100%",
+			height: "100%",
+			className: "block touch-none",
+			role: "img",
+			"aria-label": ariaLabel
+		})]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/org-unit-tree/OrgUnitTree.tsx
+/**
+* OrgUnitTree — Design System Component
+*
+* A card-based hierarchical organization tree matching the UHRIS
+* Company Structure list-mode visual design. Purely presentational —
+* no API calls, no domain logic, no permissions.
+*
+* Visual design (sourced from CompanyStructurePage StructureDesigner):
+*   - Root node:  dark navy (bg-slate-900) card with light text
+*   - Child nodes: white bordered cards with blue hover accent
+*   - Connector:  left border (border-l border-slate-200) + indentation
+*   - Icon badge: rounded-xl colored square containing the icon
+*   - Actions:    hover-reveal slot (opacity-0 → group-hover:opacity-100)
+*   - Meta:       right-aligned, hidden on narrow screens
+*
+* Accessibility (WAI-ARIA Tree pattern, RFC 1.2):
+*   - role="tree" on root list
+*   - role="treeitem" + aria-expanded + aria-selected + aria-level + aria-disabled
+*   - role="group" on nested lists
+*   - Keyboard: ArrowDown/Up/Left/Right/Home/End/Enter/Space
+*   - Roving tabIndex: only focused item has tabIndex=0
+*
+* Usage:
+*   <OrgUnitTree
+*     nodes={orgNodes}
+*     onSelect={(id) => navigate(`/org/${id}`)}
+*     aria-label="Company structure"
+*   />
+*/
+function flattenVisible(nodes, expanded) {
+	const result = [];
+	for (const node of nodes) {
+		result.push(node);
+		if (node.children?.length && expanded.has(node.id)) result.push(...flattenVisible(node.children, expanded));
+	}
+	return result;
+}
+function findParentId(nodes, targetId) {
+	for (const node of nodes) {
+		if (node.children?.some((c) => c.id === targetId)) return node.id;
+		if (node.children) {
+			const found = findParentId(node.children, targetId);
+			if (found !== null) return found;
+		}
+	}
+	return null;
+}
+function OrgUnitTree({ nodes, selectedId, onSelect, defaultExpandedIds, expandedIds: controlledExpandedIds, onExpandedChange, "aria-label": ariaLabel, className = "" }) {
+	const baseId = (0, react.useId)().replace(/:/g, "");
+	const treeRef = (0, react.useRef)(null);
+	const [internalExpanded, setInternalExpanded] = (0, react.useState)(() => {
+		if (defaultExpandedIds) return new Set(defaultExpandedIds);
+		return new Set(nodes.map((n) => n.id));
+	});
+	const expanded = controlledExpandedIds ? new Set(controlledExpandedIds) : internalExpanded;
+	const setExpanded = (0, react.useCallback)((next) => {
+		if (!controlledExpandedIds) setInternalExpanded(next);
+		onExpandedChange?.(Array.from(next));
+	}, [controlledExpandedIds, onExpandedChange]);
+	const [focusedId, setFocusedId] = (0, react.useState)(() => {
+		return flattenVisible(nodes, new Set(nodes.map((n) => n.id))).find((n) => !n.disabled)?.id ?? null;
+	});
+	const toggleExpand = (0, react.useCallback)((id) => {
+		const next = new Set(expanded);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		setExpanded(next);
+	}, [expanded, setExpanded]);
+	const handleSelect = (0, react.useCallback)((id) => {
+		setFocusedId(id);
+		onSelect?.(id);
+	}, [onSelect]);
+	const handleKeyDown = (e) => {
+		const visible = flattenVisible(nodes, expanded).filter((n) => !n.disabled);
+		if (visible.length === 0) return;
+		const focusEl = (id) => {
+			setFocusedId(id);
+			document.getElementById(`${baseId}-${id}`)?.focus();
+		};
+		const currentIdx = focusedId ? visible.findIndex((n) => n.id === focusedId) : -1;
+		const current = focusedId ? visible.find((n) => n.id === focusedId) : null;
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				const next = visible[currentIdx + 1];
+				if (next) focusEl(next.id);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				const prev = visible[currentIdx - 1];
+				if (prev) focusEl(prev.id);
+				break;
+			}
+			case "ArrowRight":
+				e.preventDefault();
+				if (!current) break;
+				if (current.children?.length && !expanded.has(current.id)) {
+					const next = new Set(expanded);
+					next.add(current.id);
+					setExpanded(next);
+				} else if (current.children?.length && expanded.has(current.id)) {
+					const firstChild = visible.find((n, i) => i > currentIdx && n.id === current.children[0]?.id);
+					if (firstChild) focusEl(firstChild.id);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				if (!current) break;
+				if (current.children?.length && expanded.has(current.id)) {
+					const next = new Set(expanded);
+					next.delete(current.id);
+					setExpanded(next);
+				} else {
+					const parentId = findParentId(nodes, current.id);
+					if (parentId) focusEl(parentId);
+				}
+				break;
+			case "Home":
+				e.preventDefault();
+				if (visible[0]) focusEl(visible[0].id);
+				break;
+			case "End": {
+				e.preventDefault();
+				const last = visible[visible.length - 1];
+				if (last) focusEl(last.id);
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (current) {
+					handleSelect(current.id);
+					if (current.children?.length) toggleExpand(current.id);
+				}
+		}
+	};
+	const nodeRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	function renderNodes(branch, depth) {
+		return branch.map((node) => {
+			const isExpanded = expanded.has(node.id);
+			const isRoot = depth === 1;
+			const hasChildren = Boolean(node.children?.length);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				ref: (el) => {
+					if (el) nodeRefs.current.set(node.id, el);
+					else nodeRefs.current.delete(node.id);
+				},
+				id: `${baseId}-${node.id}`,
+				role: "treeitem",
+				"aria-expanded": hasChildren ? isExpanded : void 0,
+				"aria-selected": selectedId === node.id,
+				"aria-disabled": node.disabled || void 0,
+				"aria-level": depth,
+				tabIndex: focusedId === node.id ? 0 : -1,
+				onFocus: () => setFocusedId(node.id),
+				className: "outline-none",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: ["group mb-2 flex items-center gap-3 rounded-xl border px-3 py-3 transition select-none", isRoot ? "border-slate-900 bg-slate-900 text-slate-300 shadow-md" : selectedId === node.id ? "border-brand-blue/40 bg-blue-50 shadow-sm" : node.disabled ? "border-slate-100 bg-slate-50 opacity-50 cursor-not-allowed" : "border-slate-200 bg-white hover:border-blue-300 hover:shadow-sm cursor-pointer"].filter(Boolean).join(" "),
+					onClick: () => {
+						if (node.disabled) return;
+						if (hasChildren) toggleExpand(node.id);
+						handleSelect(node.id);
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": isExpanded ? `Collapse ${node.label}` : `Expand ${node.label}`,
+							tabIndex: -1,
+							disabled: !hasChildren,
+							onClick: (e) => {
+								e.stopPropagation();
+								if (hasChildren) toggleExpand(node.id);
+							},
+							className: [
+								"flex items-center justify-center rounded p-1 shrink-0 transition",
+								!hasChildren && "invisible",
+								isRoot ? "hover:bg-slate-700" : "hover:bg-slate-100"
+							].filter(Boolean).join(" "),
+							children: isExpanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+								size: 16,
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+								size: 16,
+								"aria-hidden": "true"
+							})
+						}),
+						node.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: isRoot ? "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-slate-800 text-slate-200" : "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-600",
+							"aria-hidden": "true",
+							children: node.icon
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: ["flex flex-wrap items-center gap-2 text-sm font-bold", isRoot ? "text-white" : selectedId === node.id ? "text-brand-blue" : "text-slate-900"].filter(Boolean).join(" "),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: node.label
+								}), node.badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: node.badge })]
+							}), node.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `mt-0.5 truncate text-xs font-medium ${isRoot ? "text-slate-400" : "text-slate-500"}`,
+								children: node.description
+							})]
+						}),
+						node.meta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `hidden md:flex items-center gap-3 text-xs ${isRoot ? "text-slate-300" : "text-slate-500"}`,
+							children: node.meta
+						}),
+						node.actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+							onClick: (e) => e.stopPropagation(),
+							children: node.actions
+						})
+					]
+				}), hasChildren && isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					role: "group",
+					className: "ml-6 border-l border-slate-200 pl-4",
+					children: renderNodes(node.children, depth + 1)
+				})]
+			}, node.id);
+		});
+	}
+	if (nodes.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		ref: treeRef,
+		role: "tree",
+		"aria-label": ariaLabel,
+		onKeyDown: handleKeyDown,
+		className: `w-full outline-none ${className}`,
+		children: renderNodes(nodes, 1)
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/template-samples/templates/PafTemplate.tsx
+var fmt = new Intl.DateTimeFormat("en-US", {
+	month: "short",
+	day: "2-digit",
+	year: "numeric"
+});
+var fmtDate = (v) => {
+	if (!v?.trim()) return "";
+	const n = /^\d{4}-\d{2}-\d{2}$/.test(v.trim()) ? `${v.trim()}T00:00:00` : v.trim();
+	const d = new Date(n);
+	return isNaN(d.getTime()) ? v : fmt.format(d);
+};
+var STANDARD_LABELS = [
+	"Basic Salary",
+	"Cola",
+	"Trasa",
+	"Trarep",
+	"Communication",
+	"Car",
+	"Motor",
+	"Others"
+];
+function PafTemplate({ data }) {
+	const allComponents = STANDARD_LABELS.map((label) => {
+		const found = data.salaryComponents?.find((c) => c.label.toLowerCase() === label.toLowerCase());
+		if (found) return found;
+		if (label === "Basic Salary") return {
+			label,
+			from: data.from.basicSalary,
+			to: data.to.basicSalary
+		};
+		return {
+			label,
+			from: "",
+			to: ""
+		};
+	});
+	const shownComponents = allComponents.filter((c) => {
+		if (c.label === "Basic Salary") return true;
+		const hasFrom = c.from && parseFloat(c.from.replace(/,/g, "")) !== 0;
+		const hasTo = c.to && parseFloat(c.to.replace(/,/g, "")) !== 0;
+		return hasFrom || hasTo;
+	});
+	const paddingRows = Array.from({ length: Math.max(0, 7 - shownComponents.length) });
+	const calcTotal = (type) => {
+		const t = allComponents.reduce((acc, c) => {
+			const v = parseFloat((type === "from" ? c.from : c.to).replace(/,/g, ""));
+			return acc + (isNaN(v) ? 0 : v);
+		}, 0);
+		return t === 0 ? "" : t.toLocaleString("en-US", {
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "bg-white text-black font-sans",
+		style: {
+			width: "816px",
+			minHeight: "1056px",
+			padding: "60px 50px",
+			boxSizing: "border-box"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "text-center italic font-bold text-2xl tracking-widest mb-8 uppercase",
+				children: "Personnel Action Form"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-bold italic border-b border-black mb-2 uppercase tracking-tight",
+					children: "Employee Data"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "grid grid-cols-12 gap-x-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "col-span-8 space-y-2",
+						children: [{
+							label: "Employee ID:",
+							value: data.employee.idNo
+						}, {
+							label: "Employee Name:",
+							value: data.employee.name.toUpperCase()
+						}].map((r, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "w-32 text-[11px] font-bold italic",
+								children: r.label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-1 border border-black px-2 py-0.5 text-[12px] min-h-[24px] font-semibold",
+								children: r.value
+							})]
+						}, i))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "col-span-4 space-y-2",
+						children: [{
+							label: "Date Hired:",
+							value: fmtDate(data.employee.dateHired) || "Jan 01, 2024"
+						}, {
+							label: "Date Prepared:",
+							value: fmtDate(data.date)
+						}].map((r, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "w-24 text-[11px] font-bold italic",
+								children: r.label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex-1 border border-black px-2 py-0.5 text-[12px] min-h-[24px] text-center",
+								children: r.value
+							})]
+						}, i))
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-bold italic border-b border-black mb-2 uppercase tracking-tight",
+					children: "Position/Salary Change Details"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+					className: "w-full border-collapse",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "w-[124px]",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "sr-only",
+								children: "Field"
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "text-[12px] italic font-bold text-center pb-1",
+							children: "FROM"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "text-[12px] italic font-bold text-center pb-1",
+							children: "TO"
+						})
+					] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "text-[10px] italic font-bold py-1",
+							children: "Pay Template"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "border border-black p-1 text-[11px] font-bold w-[300px]",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "px-1 min-h-[16px]",
+								children: data.fromTemplate || "—"
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "border border-black p-1 text-[11px] font-bold w-[300px]",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "px-1 min-h-[16px]",
+								children: data.toTemplate || "—"
+							})
+						})
+					] }), [
+						{
+							label: "Rank",
+							from: data.from.rank,
+							to: data.to.rank
+						},
+						{
+							label: "Employment Status",
+							from: data.from.status,
+							to: data.to.status
+						},
+						{
+							label: "Position",
+							from: data.from.position,
+							to: data.to.position
+						},
+						{
+							label: "Department",
+							from: data.from.department,
+							to: data.to.department
+						},
+						{
+							label: "Supervisor",
+							from: data.from.supervisor,
+							to: data.to.supervisor
+						},
+						{
+							label: "Department Head",
+							from: data.from.departmentHead,
+							to: data.to.departmentHead
+						},
+						{
+							label: "Company",
+							from: data.from.company,
+							to: data.to.company
+						}
+					].map((row, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "text-[10px] italic font-bold py-1",
+							children: row.label
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "border border-black p-1 text-[11px] w-[300px]",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "px-1 min-h-[16px]",
+								children: row.from
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "border border-black p-1 text-[11px] w-[300px]",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "px-1 min-h-[16px]",
+								children: row.to
+							})
+						})
+					] }, i))] })]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-bold italic border-b border-black mb-2 uppercase tracking-tight",
+					children: "Reason for Adjustment"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex mb-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex-1",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center mb-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-[10px] italic font-bold w-32",
+									children: "Date of Effectivity:"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-[11px] font-bold",
+									children: fmtDate(data.effectiveDate)
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-[10px] italic font-bold mb-1",
+								children: "Reason for Adjustment:"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex items-start ml-4",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-[10px] italic mt-1",
+									children: "Others"
+								})
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "w-[450px]",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+							className: "w-full border-collapse",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: "w-1/3",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "sr-only",
+										children: "Component"
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: "text-[11px] italic font-bold text-center border-x border-t border-black py-1",
+									children: "FROM"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: "text-[11px] italic font-bold text-center border-r border-t border-black py-1",
+									children: "TO"
+								})
+							] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", {
+								className: "border-b border-black",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "text-[10px] italic pr-4 text-right font-bold uppercase",
+											children: "Template"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "border-x border-black px-2 py-0.5 text-[9px] text-center font-bold",
+											children: data.fromTemplate || "—"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "border-r border-black px-2 py-0.5 text-[9px] text-center font-bold",
+											children: data.toTemplate || "—"
+										})
+									] }),
+									shownComponents.map((c, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "text-[10px] italic pr-4 text-right font-bold",
+											children: c.label
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "border-x border-black px-2 py-0.5 text-[11px] text-right min-h-[18px]",
+											children: c.from && parseFloat(c.from.replace(/,/g, "")) !== 0 ? c.from : ""
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "border-r border-black px-2 py-0.5 text-[11px] text-right min-h-[18px]",
+											children: c.to && parseFloat(c.to.replace(/,/g, "")) !== 0 ? c.to : ""
+										})
+									] }, i)),
+									paddingRows.map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "text-[10px] py-1",
+											children: "\xA0"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "border-x border-black",
+											children: "\xA0"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "border-r border-black",
+											children: "\xA0"
+										})
+									] }, `p-${i}`)),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+										className: "border-t border-black",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "text-[10px] italic pr-4 text-right font-bold uppercase py-1",
+												children: "Total"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "border-x border-black px-2 py-1 text-[11px] text-right font-bold",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "border-b-4 border-double border-black pb-0.5",
+													children: calcTotal("from")
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "border-r border-black px-2 py-1 text-[11px] text-right font-bold",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "border-b-4 border-double border-black pb-0.5",
+													children: calcTotal("to")
+												})
+											})
+										]
+									})
+								]
+							})]
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-bold italic border-b border-black mb-2 uppercase tracking-tight",
+					children: "Reason for Change"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border border-black p-2 min-h-[60px] text-[11px] break-words whitespace-pre-wrap",
+					children: data.reason
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-10",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-bold italic border-b border-black mb-4 uppercase tracking-tight",
+					children: "Authorized Signatories"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-3 gap-6 mb-8",
+					children: [
+						{
+							heading: "Prepared By",
+							name: data.preparedBy,
+							title: data.preparedByTitle || "HRMD Supervisor"
+						},
+						{
+							heading: "Verified By",
+							name: data.approvedBy || "VP of HRMD",
+							title: data.approvedByTitle || "Vice President for HRMD"
+						},
+						{
+							heading: "Conforme",
+							name: data.employee.name,
+							title: "Employee"
+						}
+					].map((sig, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "text-[11px] italic font-bold mb-3",
+								children: sig.heading
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-b border-black min-h-[48px] mb-1" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "text-center",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-[10px] font-bold uppercase",
+									children: sig.name
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-[9px] font-bold text-slate-400",
+									children: sig.title
+								})]
+							})
+						]
+					}, i))
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-6 border-t-2 border-dashed border-black pt-2 opacity-30 text-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[7px] font-black uppercase tracking-[0.2em] italic",
+					children: "Authorized Document — DIWA HRIS"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/page-sample/IsoCubeBlock.tsx
+function IsoCubeBlock({ boxWidth = 80, className = "" }) {
+	const BW = boxWidth;
+	const IH = BW * .575;
+	const SH = BW * .525;
+	const TOP_C = "#F3F3F5";
+	const LEFT_C = "#7D739B";
+	const RIGHT_C = "#9B92B8";
+	function Box({ cx, cy }) {
+		const hw = BW / 2;
+		const A = `${cx + hw},${cy - IH}`;
+		const B = `${cx + BW},${cy - IH / 2}`;
+		const C = `${cx + hw},${cy}`;
+		const D = `${cx},${cy - IH / 2}`;
+		const E = `${cx + hw},${cy + SH}`;
+		const F = `${cx},${cy - IH / 2 + SH}`;
+		const G = `${cx + BW},${cy - IH / 2 + SH}`;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+				points: `${A} ${B} ${C} ${D}`,
+				fill: TOP_C
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+				points: `${D} ${C} ${E} ${F}`,
+				fill: LEFT_C
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+				points: `${B} ${C} ${E} ${G}`,
+				fill: RIGHT_C
+			})
+		] });
+	}
+	const COLS = 4;
+	const ROWS = 4;
+	const SVG_W = BW * 6;
+	const SVG_H = BW * 4.75;
+	const rowDY = -(IH / 2 + SH);
+	const baseX = SVG_W - BW / 2;
+	const baseY = SVG_H;
+	const boxes = [];
+	for (let row = 0; row < ROWS; row++) for (let col = 0; col < COLS; col++) {
+		const cx = baseX - col * BW + row * (BW / 2);
+		const cy = baseY + row * rowDY;
+		boxes.push({
+			cx,
+			cy,
+			key: `${row}-${col}`
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		"aria-hidden": "true",
+		className: `pointer-events-none absolute bottom-0 right-0 ${className}`,
+		width: SVG_W,
+		height: SVG_H,
+		viewBox: `0 0 ${SVG_W} ${SVG_H}`,
+		style: { zIndex: 0 },
+		overflow: "visible",
+		children: [...boxes].sort((a, b) => {
+			const [ar, ac] = a.key.split("-").map(Number);
+			const [br, bc] = b.key.split("-").map(Number);
+			if (ar !== br) return (br ?? 0) - (ar ?? 0);
+			return (bc ?? 0) - (ac ?? 0);
+		}).map(({ cx, cy, key }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+			cx,
+			cy
+		}, key))
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/template-samples/templates/PayslipTemplate.tsx
+var DEDUCTIONS = [
+	{
+		label: "W-Tax",
+		amount: 117.59,
+		remainingBalance: void 0,
+		base: void 0
+	},
+	{
+		label: "Pag-Ibig",
+		amount: 100,
+		remainingBalance: void 0,
+		base: void 0
+	},
+	{
+		label: "HMO Premium",
+		amount: 229.99,
+		remainingBalance: void 0,
+		base: 5059.84
+	},
+	{
+		label: "Insurance",
+		amount: 19.44,
+		remainingBalance: void 0,
+		base: 427.62
+	},
+	{
+		label: "COOP Share",
+		amount: 300,
+		remainingBalance: 4500,
+		base: void 0
+	},
+	{
+		label: "Salary Loan",
+		amount: 1250,
+		remainingBalance: 12500,
+		base: void 0
+	}
+];
+var ATTENDANCE_LOGS = [
+	{
+		in: "07:00",
+		out: "16:00"
+	},
+	{
+		in: "07:15",
+		out: "16:00"
+	},
+	{
+		in: "Reg. Hol",
+		out: "Reg. Hol"
+	},
+	{
+		in: "Sp. Hol",
+		out: "Sp. Hol"
+	},
+	{
+		in: "-",
+		out: "-"
+	},
+	{
+		in: "-",
+		out: "-"
+	},
+	{
+		in: "07:00",
+		out: "16:00"
+	},
+	{
+		in: "VL w/pay",
+		out: "VL w/pay"
+	},
+	{
+		in: "SL w/pay",
+		out: "SL w/pay"
+	},
+	{
+		in: "07:00",
+		out: "12:00 (VL)"
+	},
+	{
+		in: "07:00",
+		out: "13:00 (SL)"
+	},
+	{
+		in: "07:00 (RH)",
+		out: "16:00"
+	},
+	{
+		in: "-",
+		out: "-"
+	},
+	{
+		in: "07:00",
+		out: "16:00"
+	},
+	{
+		in: "07:00",
+		out: "16:00"
+	},
+	{
+		in: "07:00",
+		out: "16:00"
+	}
+];
+var WHOLE_DAY_TYPES = /* @__PURE__ */ new Set([
+	"Reg. Hol",
+	"Sp. Hol",
+	"VL w/pay",
+	"VL wo/pay",
+	"SL w/pay",
+	"SL wo/pay"
+]);
+var fc = (n) => n.toLocaleString(void 0, {
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2
+});
+var fr = (n) => n.toLocaleString(void 0, {
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 6
+});
+function AttendanceTable({ logs }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+		className: "flex-1 w-full text-center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+			className: "border-b border-black",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					className: "font-black text-[8px]",
+					children: "Date"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					className: "font-black text-[8px]",
+					children: "IN"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					className: "font-black text-[8px]",
+					children: "OUT"
+				})
+			]
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: logs.map((log, i) => {
+			const isWholeDay = WHOLE_DAY_TYPES.has(log.in) && log.in === log.out;
+			const isAbsence = log.in === "-" && log.out === "-";
+			const isTiny = log.in.includes("(") || log.out.includes("(");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: "font-bold text-[8px]",
+				children: log.date
+			}), isWholeDay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				colSpan: 2,
+				className: "text-center font-bold text-[5px] tracking-tight uppercase border-b border-black/10",
+				children: log.in
+			}) : isAbsence ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: "text-[6px]",
+				children: "—"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: "text-[6px]",
+				children: "—"
+			})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: isTiny ? "text-[5px]" : "text-[8px]",
+				children: log.in
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: isTiny ? "text-[5px]" : "text-[8px]",
+				children: log.out
+			})] })] }, i);
+		}) })]
+	});
+}
+function PayslipTemplate({ data }) {
+	const rates = data.rates ?? {
+		hourly: 107.9713,
+		daily: 863.77,
+		monthly: 22601.9
+	};
+	const taxCode = data.taxCode ?? "S";
+	const taxableGross = data.taxableGross ?? (data.netPay ? data.netPay * 1.1 : 22601.9);
+	const nonTaxableGross = data.nonTaxableGross ?? 0;
+	const totalGross = taxableGross + nonTaxableGross;
+	const totalDeductions = DEDUCTIONS.reduce((s, d) => s + d.amount, 0);
+	const finalNet = totalGross - totalDeductions;
+	const buildLogs = () => {
+		const period = data.payPeriod;
+		return ATTENDANCE_LOGS.map((log, idx) => {
+			let date = String(16 + idx).padStart(2, "0");
+			if (period && period.includes("-")) {
+				const monthMap = {
+					Jan: 0,
+					Feb: 1,
+					Mar: 2,
+					Apr: 3,
+					May: 4,
+					Jun: 5,
+					Jul: 6,
+					Aug: 7,
+					Sep: 8,
+					Oct: 9,
+					Nov: 10,
+					Dec: 11
+				};
+				const parts = period.split(" ");
+				const startMonth = monthMap[parts[0]] ?? 0;
+				const startDay = parseInt(parts[1]) || 1;
+				const year = parseInt(period.match(/\d{4}$/)?.[0] ?? String((/* @__PURE__ */ new Date()).getFullYear()));
+				const d = new Date(year, startMonth, startDay + idx);
+				date = `${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
+			}
+			return {
+				...log,
+				date
+			};
+		});
+	};
+	const logs = buildLogs();
+	const leftLogs = logs.slice(0, 8);
+	const rightLogs = logs.slice(8, 16);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "bg-white text-[#1a1a1a] p-8 font-mono text-[10px] max-w-[900px] mx-auto leading-tight",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid grid-cols-12 gap-0 mb-2 items-start h-[70px]",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "col-span-4 translate-y-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+								className: "text-lg font-black tracking-tight leading-none mb-2",
+								children: "DIWA HRIS PAYSLIP"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "font-bold flex gap-1 text-[9px]",
+								children: ["Period: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-normal",
+									children: data.payPeriod || "No Period Selected"
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "font-bold flex gap-1 text-[8px]",
+								children: ["Printed: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-normal",
+									children: (/* @__PURE__ */ new Date()).toLocaleDateString()
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "col-span-4 border border-black p-1.5 mt-2 mb-1 relative z-10",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex gap-2 mb-0.5 border-b border-black pb-0.5",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-black border-r border-black pr-2",
+									children: data.id
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-black tracking-tight",
+									children: data.name.toUpperCase()
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "font-bold text-[9px] border-b border-black pb-0.5 mb-0.5",
+								children: data.role
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "font-bold text-[9px]",
+								children: data.department
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "col-span-4 text-[9px] pl-8 text-right pr-2 mt-4 space-y-0",
+						children: [
+							["Hourly :", fr(rates.hourly)],
+							["Daily :", fr(rates.daily)],
+							["Monthly :", fr(rates.monthly)],
+							["Tax Code :", taxCode]
+						].map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "grid grid-cols-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-left font-bold",
+								children: k
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-bold",
+								children: v
+							})]
+						}, k))
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid grid-cols-12 border-t border-black min-h-[160px]",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "col-span-8 grid grid-cols-2 border-r border-black min-h-[160px]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "border-r border-black p-1 flex flex-col h-full",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "font-black border-b border-black mb-1 p-0.5 flex justify-between",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "EARNINGS:" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex gap-8 text-[7px] pr-2 items-center",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "UNIT" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "AMOUNT" })]
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "space-y-0.5",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "grid grid-cols-12 gap-1 px-1",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "col-span-7",
+											children: "Basic Salary"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "col-span-5 text-right",
+											children: fc(taxableGross)
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "grid grid-cols-12 gap-1 px-1",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "col-span-6",
+												children: "Holiday Pay"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "col-span-2 text-right",
+												children: "1.00"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "col-span-4 text-right",
+												children: "863.77"
+											})
+										]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "grid grid-cols-12 gap-1 px-1 italic",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "col-span-6",
+												children: "Absences"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "col-span-2 text-right",
+												children: "1.00"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "col-span-4 text-right",
+												children: [
+													"(",
+													fc(863.77),
+													")"
+												]
+											})
+										]
+									})
+								]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "pt-2 border-t border-dotted border-black space-y-0.5",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-12 gap-1 px-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "col-span-8 font-bold",
+									children: ["Gross ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "font-normal",
+										children: "(taxable)"
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "col-span-4 text-right",
+									children: fc(taxableGross)
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-12 gap-1 px-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "col-span-8 font-bold",
+									children: ["Gross ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "font-normal",
+										children: "(nontaxable)"
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "col-span-4 text-right",
+									children: fc(nonTaxableGross)
+								})]
+							})]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "p-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "font-black border-b border-black mb-1 p-0.5 flex justify-between",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "DEDUCTIONS:" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex gap-4 text-[7px] pr-2 items-center",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "w-16 text-center",
+									children: "REM. BAL"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "w-12 text-right",
+									children: "AMOUNT"
+								})]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "space-y-0.5",
+							children: DEDUCTIONS.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-12 gap-1 px-1",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "col-span-5",
+										children: d.label
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "col-span-3 text-center text-[8px] text-slate-500",
+										children: d.remainingBalance ? fc(d.remainingBalance) : d.base ? fc(d.base) : ""
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "col-span-4 text-right",
+										children: fc(d.amount)
+									})
+								]
+							}, i))
+						})]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "col-span-4 p-1 text-[8px]",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttendanceTable, { logs: leftLogs }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttendanceTable, { logs: rightLogs })]
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "border-t border-black mb-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "grid grid-cols-12",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "col-span-8 border-r border-black",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "grid grid-cols-2 bg-slate-100 py-1.5 border-y border-black font-black uppercase tracking-tight",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-12 px-2 border-r border-black",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "col-span-7",
+									children: "Total Gross"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "col-span-5 text-right",
+									children: fc(totalGross)
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-12 px-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "col-span-8 text-right pr-4",
+									children: "Total Deductions:"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "col-span-4 text-right",
+									children: fc(totalDeductions)
+								})]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "p-1 px-2 flex gap-4 items-center h-8",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-[11px] font-black uppercase",
+								children: "Net Pay:"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-[16px] font-black pl-4",
+								children: fc(finalNet)
+							})]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "col-span-4 p-1 px-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "grid grid-cols-2 border border-black text-center mb-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "border-r border-black p-0.5",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "border-b border-black font-bold uppercase text-[7px] mb-0.5",
+									children: "YTD Gross"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "font-black text-[12px]",
+									children: fc(data.ytd?.gross ?? taxableGross)
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "p-0.5",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "border-b border-black font-bold uppercase text-[7px] mb-0.5",
+									children: "YTD Tax"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "font-black text-[12px]",
+									children: fc(data.ytd?.tax ?? totalDeductions * .1)
+								})]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex justify-between text-[8px] font-bold uppercase px-1 pb-0.5 pt-1",
+							children: [
+								["VL", data.leaveBalances?.vacation.remaining ?? 10],
+								["SL", data.leaveBalances?.sick.remaining ?? 14],
+								["PL", data.leaveBalances?.personal?.remaining ?? 0]
+							].map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex gap-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [k, " Bal:"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-normal",
+									children: String(v)
+								})]
+							}, String(k)))
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-4 border-t-2 border-dashed border-black pt-2 opacity-30 text-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[7px] font-black uppercase tracking-[0.2em] italic",
+					children: "Authorized Document — DIWA HRIS Fin-Audit System"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/template-samples/templates/ReportTemplate.tsx
+var MOCK_ROWS = [
+	{
+		id: "DL-0001",
+		name: "Maria Santos",
+		dept: "Finance",
+		position: "Senior Accountant",
+		status: "Regular",
+		dateHired: "Jan 15, 2021",
+		rate: "25,000.00"
+	},
+	{
+		id: "DL-0002",
+		name: "Jose Reyes",
+		dept: "IT",
+		position: "IT Infrastructure Lead",
+		status: "Regular",
+		dateHired: "Mar 08, 2020",
+		rate: "38,000.00"
+	},
+	{
+		id: "DL-0003",
+		name: "Ana Dela Cruz",
+		dept: "HR",
+		position: "HR Business Partner",
+		status: "Regular",
+		dateHired: "Jun 01, 2019",
+		rate: "32,000.00"
+	},
+	{
+		id: "DL-0004",
+		name: "Carlo Mendoza",
+		dept: "Operations",
+		position: "Operations Manager",
+		status: "Regular",
+		dateHired: "Sep 22, 2022",
+		rate: "45,000.00"
+	},
+	{
+		id: "DL-0005",
+		name: "Liza Bautista",
+		dept: "Legal",
+		position: "Legal Counsel",
+		status: "Probationary",
+		dateHired: "Feb 10, 2024",
+		rate: "28,000.00"
+	},
+	{
+		id: "DL-0006",
+		name: "Mark Villanueva",
+		dept: "Academic",
+		position: "Academic Coordinator",
+		status: "Regular",
+		dateHired: "Nov 03, 2023",
+		rate: "22,000.00"
+	},
+	{
+		id: "DL-0007",
+		name: "Rosa Castillo",
+		dept: "Finance",
+		position: "Bookkeeper",
+		status: "Regular",
+		dateHired: "Apr 14, 2018",
+		rate: "20,000.00"
+	},
+	{
+		id: "DL-0008",
+		name: "Noel Ramos",
+		dept: "IT",
+		position: "Systems Analyst",
+		status: "Regular",
+		dateHired: "Jul 30, 2021",
+		rate: "30,000.00"
+	},
+	{
+		id: "DL-0009",
+		name: "Cynthia Torres",
+		dept: "HR",
+		position: "Recruitment Officer",
+		status: "Regular",
+		dateHired: "Dec 05, 2022",
+		rate: "24,000.00"
+	},
+	{
+		id: "DL-0010",
+		name: "Ramon Aquino",
+		dept: "Operations",
+		position: "Logistics Coordinator",
+		status: "Probationary",
+		dateHired: "Aug 18, 2024",
+		rate: "19,500.00"
+	},
+	{
+		id: "DL-0011",
+		name: "Elena Fuentes",
+		dept: "Academic",
+		position: "Faculty Member",
+		status: "Regular",
+		dateHired: "Jun 12, 2017",
+		rate: "27,000.00"
+	},
+	{
+		id: "DL-0012",
+		name: "Dennis Lacerna",
+		dept: "Finance",
+		position: "Payroll Officer",
+		status: "Regular",
+		dateHired: "Oct 01, 2020",
+		rate: "23,500.00"
+	}
+];
+var HEADERS = [
+	"#",
+	"Employee ID",
+	"Full Name",
+	"Department",
+	"Position",
+	"Status",
+	"Date Hired",
+	"Monthly Rate"
+];
+function ReportTemplate({ data }) {
+	const today = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+		month: "long",
+		day: "numeric",
+		year: "numeric"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "bg-white text-black font-sans",
+		style: {
+			width: "816px",
+			minHeight: "1056px",
+			padding: "48px 50px",
+			boxSizing: "border-box"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between items-start mb-6 border-b-2 border-black pb-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-[9px] text-slate-500 uppercase tracking-widest mb-1 font-bold",
+						children: data.company || "DIWA Learning Systems, Inc."
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: "text-[20px] font-black uppercase tracking-tight leading-tight",
+						children: data.title || "Employee Masterlist Report"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-[11px] text-slate-500 mt-0.5 italic",
+						children: data.subtitle || "All Active Employees — Direct Labor"
+					})
+				] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-right text-[9px] space-y-0.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-bold",
+								children: "As of:"
+							}),
+							" ",
+							data.asOf || today
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-bold",
+								children: "Date Printed:"
+							}),
+							" ",
+							today
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-bold",
+							children: "Page:"
+						}), " 1 of 1"] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-bold",
+								children: "Prepared by:"
+							}),
+							" ",
+							data.preparedBy || "System"
+						] })
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex gap-6 mb-5 text-[10px]",
+				children: [
+					["Total Employees", String(MOCK_ROWS.length)],
+					["Regular", String(MOCK_ROWS.filter((r) => r.status === "Regular").length)],
+					["Probationary", String(MOCK_ROWS.filter((r) => r.status === "Probationary").length)],
+					["Departments", "5"]
+				].map(([label, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border border-black px-3 py-1.5 text-center min-w-[80px]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "font-black text-[16px]",
+						children: value
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-[8px] text-slate-500 font-bold uppercase tracking-tight",
+						children: label
+					})]
+				}, label))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+				className: "w-full border-collapse text-[9px]",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+						className: "bg-[#00377B] text-white",
+						children: HEADERS.map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "border border-[#00377B] px-2 py-1.5 text-left font-bold uppercase tracking-wide text-[8px]",
+							children: h
+						}, h))
+					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: MOCK_ROWS.map((row, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+						className: i % 2 === 0 ? "bg-white" : "bg-slate-50",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1 text-slate-400",
+								children: i + 1
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1 font-mono font-bold",
+								children: row.id
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1 font-bold uppercase",
+								children: row.name
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1",
+								children: row.dept
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1",
+								children: row.position
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: ["inline-flex items-center rounded px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-tight", row.status === "Regular" ? "bg-emerald-50 text-emerald-700" : "bg-amber-50 text-amber-700"].join(" "),
+									children: row.status
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1",
+								children: row.dateHired
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "border border-slate-200 px-2 py-1 text-right font-mono",
+								children: row.rate
+							})
+						]
+					}, row.id)) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tfoot", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+						className: "bg-slate-100 font-black border-t-2 border-black",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							colSpan: 7,
+							className: "border border-slate-300 px-2 py-1.5 text-right uppercase text-[8px] tracking-widest",
+							children: "Total Monthly Cost:"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "border border-slate-300 px-2 py-1.5 text-right font-mono",
+							children: MOCK_ROWS.reduce((s, r) => s + parseFloat(r.rate.replace(/,/g, "")), 0).toLocaleString("en-US", { minimumFractionDigits: 2 })
+						})]
+					}) })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-8 flex justify-between items-end text-[9px]",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-b border-black w-48 mb-1" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "font-bold",
+						children: ["Prepared by: ", data.preparedBy || "HRIS System"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-slate-400",
+						children: "Human Resources Management Division"
+					})
+				] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-right",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-b border-black w-48 mb-1 ml-auto" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "font-bold",
+							children: "Noted by: ___________________________"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-slate-400",
+							children: "HR Director / VP Operations"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-6 border-t border-dashed border-black/40 pt-2 text-center opacity-40",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[7px] font-black uppercase tracking-[0.2em] italic",
+					children: "System-Generated Report — DIWA HRIS — Confidential"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/template-samples/templates/TimekeepingTemplate.tsx
+/**
+* TimekeepingTemplate — self-contained preview component
+*
+* Ported from unified-hris/components/TimekeepingFileTemplate.tsx.
+* No context deps. All data is mock + prop-driven.
+*/
+var RECORDS = [
+	{
+		dateIn: "16-Jan-25",
+		day: "Thu",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "16-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "17-Jan-25",
+		day: "Fri",
+		shift: 1,
+		timeIn: "7:15 am",
+		dateOut: "17-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "15",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "18-Jan-25",
+		day: "Sat",
+		shift: 1,
+		timeIn: "-",
+		dateOut: "-",
+		timeOut: "-",
+		hours: "-",
+		actual: "-",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "19-Jan-25",
+		day: "Sun",
+		shift: 1,
+		timeIn: "-",
+		dateOut: "-",
+		timeOut: "-",
+		hours: "-",
+		actual: "-",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "20-Jan-25",
+		day: "Mon",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "20-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "21-Jan-25",
+		day: "Tue",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "21-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "22-Jan-25",
+		day: "Wed",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "22-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "23-Jan-25",
+		day: "Thu",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "23-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "24-Jan-25",
+		day: "Fri",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "24-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "25-Jan-25",
+		day: "Sat",
+		shift: 1,
+		timeIn: "-",
+		dateOut: "-",
+		timeOut: "-",
+		hours: "-",
+		actual: "-",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "26-Jan-25",
+		day: "Sun",
+		shift: 1,
+		timeIn: "-",
+		dateOut: "-",
+		timeOut: "-",
+		hours: "-",
+		actual: "-",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "27-Jan-25",
+		day: "Mon",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "27-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "28-Jan-25",
+		day: "Tue",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "28-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "29-Jan-25",
+		day: "Wed",
+		shift: 1,
+		timeIn: "-",
+		dateOut: "-",
+		timeOut: "-",
+		hours: "-",
+		actual: "-",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "Sp. Hol"
+	},
+	{
+		dateIn: "30-Jan-25",
+		day: "Thu",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "30-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	},
+	{
+		dateIn: "31-Jan-25",
+		day: "Fri",
+		shift: 1,
+		timeIn: "7:00 am",
+		dateOut: "31-Jan-25",
+		timeOut: "4:00 pm",
+		hours: "8.00",
+		actual: "9.00",
+		late: "-",
+		utime: "-",
+		ot: "-",
+		nd2: "-",
+		rem: "-"
+	}
+];
+var OT_SUMMARY = [
+	"OT 0.30",
+	"OT 1.00",
+	"OT 1.25",
+	"OT 1.30",
+	"OT 1.69",
+	"OT 1.50",
+	"OT 1.95",
+	"OT 2.00",
+	"OT 2.69",
+	"OT 3.38"
+];
+function TimekeepingTemplate({ data }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-[297mm] min-h-[210mm] bg-white text-black font-sans text-[10px] leading-tight p-10 mx-auto",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between items-start mb-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mb-2 text-[10px]",
+						children: ["DatePrinted: \xA0 ", (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+							month: "2-digit",
+							day: "2-digit",
+							year: "numeric"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: "text-xl font-bold uppercase tracking-tight",
+						children: "DIWA HRIS — TimeSheet"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mt-4 flex gap-8",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "w-16",
+								children: "Emp. ID:"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-bold",
+								children: data.employee.empId || "DL250814-002"
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "w-16",
+								children: "Name:"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-bold uppercase",
+								children: data.employee.name
+							})]
+						})] })
+					})
+				] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-right",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mb-1",
+							children: "Page 1 of 1"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "font-bold text-sm mb-2",
+							children: data.period || "01/16/2025 – 01/31/2025"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "grid grid-cols-[80px_1fr] gap-x-2 text-left",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Shift:" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-bold",
+									children: "1"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Position:" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-bold",
+									children: data.employee.role
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Department:" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-bold",
+									children: data.employee.department
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Imm. Superior:" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-bold",
+									children: data.employee.supervisor || "ACGarcia"
+								})
+							]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "border-t border-b border-black mb-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+					className: "w-full text-center border-collapse",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+							className: "border-b border-black",
+							children: [
+								"DateIn",
+								"Day",
+								"Shift",
+								"TimeIn",
+								"DateOut",
+								"TimeOut",
+								"Hours",
+								"Actual",
+								"Late",
+								"Utime",
+								"OT",
+								"ND2",
+								"Rem."
+							].map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								className: "py-1 text-[9px]",
+								children: h
+							}, h))
+						}) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: RECORDS.map((r, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+							className: "h-4",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.dateIn }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.day }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.shift }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.timeIn }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.dateOut }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.timeOut }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.hours }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.actual }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.late }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.utime }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.ot }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.nd2 }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: r.rem })
+							]
+						}, i)) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tfoot", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+							className: "border-t border-black font-bold",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									colSpan: 6,
+									className: "text-left py-1 pl-2",
+									children: "Totals: ( 11 WorkDays )"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: "88.00" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: "99.00" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: "0.00" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: "0.00" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: "0.00" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: "0.00" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {})
+							]
+						}) })
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-end mb-6 font-bold text-[10px]",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-right w-[120px]",
+					children: [
+						"Employment Status:",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						"Regular",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						"Monthly",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						"Rest Day: Sunday"
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-center mb-10 px-12",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mb-1",
+					children: "I hereby certify that the above records are true and correct. Any"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "unauthorized overtime will not be paid by the management." })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between px-16 mb-10",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-center w-48",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-b border-black mb-1" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "Employee Signature" })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-center w-48",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-b border-black mb-1" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "Immediate Superior" })]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-center mb-2",
+				children: "For HRD use only, please do not tamper with."
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "border-t border-black pt-2 flex justify-between items-start mb-6",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "grid grid-cols-[90px_60px] gap-y-0.5",
+						children: [
+							["Days Worked:", "11.00"],
+							["Hours Worked:", "88.00"],
+							["Absences:", "1.00"],
+							["", ""],
+							["Tardiness:", "0.00"],
+							["Reg. ND1", "0.00"],
+							["Reg. ND2", "0.00"],
+							["Holiday", "1.00"],
+							["", ""],
+							["Undertime:", "0.00"]
+						].map(([k, v], i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: k }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-right",
+							children: v
+						})] }, i))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "w-1/3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex border-b border-black pb-0.5 mb-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "underline mr-auto",
+									children: "Summary:"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "w-10 text-center underline",
+									children: "10%"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "w-10 text-center underline",
+									children: "15%"
+								})
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "grid grid-cols-1 gap-y-0.5 pl-2",
+							children: OT_SUMMARY.map((ot) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: ot }, ot))
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "grid grid-cols-[90px_30px] gap-y-0.5 text-right",
+						children: [
+							["VL Bal :", "10"],
+							["SL Bal :", "14"],
+							["VL w/ Pay :", "0"],
+							["VL w/o Pay :", "0"],
+							["Prev.VL w/ Pay :", "0"],
+							["SL w/ Pay :", "0"],
+							["SL w/o Pay :", "0"],
+							["PL Taken :", "0"],
+							["BL Taken :", "0"],
+							["Meal Allow. :", "0"]
+						].map(([k, v], i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: k }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: v })] }, i))
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-t border-black/50 border-dashed pt-2" })
+		]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/stat-card/Statistic.tsx
 /**
 * Statistic — Design System Component
@@ -4773,12 +7399,12 @@ var DOT_STYLES = {
 		shadow: "0 0 0 3px rgba(239,68,68,0.18)"
 	},
 	inactive: {
-		bg: "#f59e0b",
-		shadow: "0 0 0 3px rgba(245,158,11,0.18)"
+		bg: "#b45309",
+		shadow: "0 0 0 3px rgba(180,83,9,0.18)"
 	},
 	pending: {
-		bg: "#eab308",
-		shadow: "0 0 0 3px rgba(234,179,8,0.18)"
+		bg: "#0284c7",
+		shadow: "0 0 0 3px rgba(2,132,199,0.18)"
 	}
 };
 function StatusDot({ status, label, className = "" }) {
@@ -4998,11 +7624,14 @@ exports.AccordionTrigger = AccordionTrigger;
 exports.ActivityFeed = ActivityFeed;
 exports.Alert = Alert;
 exports.ApprovalTimeline = ApprovalTimeline;
+exports.AreaChart = AreaChart;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BarChart = BarChart;
+exports.BarList = BarList;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.CHART_PALETTE = CHART_PALETTE;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.CardContent = CardContent;
@@ -5033,13 +7662,18 @@ exports.FilterChip = FilterChip;
 exports.Heatmap = Heatmap;
 exports.IconButton = IconButton;
 exports.Input = Input;
+exports.IsoCubeBlock = IsoCubeBlock;
 exports.Kanban = Kanban;
 exports.LineChart = LineChart;
 exports.Menu = Menu;
 exports.Modal = Modal;
+exports.OrgChart = OrgChart;
+exports.OrgUnitTree = OrgUnitTree;
 exports.OtpInput = OtpInput;
+exports.PafTemplate = PafTemplate;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
+exports.PayslipTemplate = PayslipTemplate;
 exports.PermissionMatrix = PermissionMatrix;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
@@ -5047,6 +7681,7 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.Progress = Progress;
 exports.RadioGroup = RadioGroup;
 exports.RadioItem = RadioItem;
+exports.ReportTemplate = ReportTemplate;
 exports.Section = Section;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
@@ -5071,6 +7706,7 @@ exports.TabPanel = TabPanel;
 exports.TabPanels = TabPanels;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
+exports.TimekeepingTemplate = TimekeepingTemplate;
 exports.Timeline = Timeline;
 exports.TimelineEmptyState = TimelineEmptyState;
 exports.TimelineFooter = TimelineFooter;