@diwauhris/ui 1.4.1 → 1.4.3

package/lib/assets/ui.css

@@ -2490,6 +2490,10 @@
   background-color: rgb(45 138 202 / 0.3);
 }
 
+.bg-brand-sky\/40 {
+  background-color: rgb(45 138 202 / 0.4);
+}
+
 .bg-brand-sky\/5 {
   background-color: rgb(45 138 202 / 0.05);
 }
@@ -2502,6 +2506,10 @@
   background-color: rgb(45 138 202 / 0.6);
 }
 
+.bg-brand-sky\/70 {
+  background-color: rgb(45 138 202 / 0.7);
+}
+
 .bg-brand-sky\/\[0\.04\] {
   background-color: rgb(45 138 202 / 0.04);
 }

package/lib/index.cjs

@@ -46,6 +46,7 @@ _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 sonner = require("sonner");
 //#region src/ui-library/gallery/button/Button.tsx
 var VARIANT_STYLES$1 = {
 	primary: "font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 active:bg-brand-navy focus-visible:ring-brand-blue/30 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none",
@@ -4225,7 +4226,7 @@ function PermissionMatrix({ roles, permissions, caption = "Permission matrix", c
 *   - Keyboard: ArrowKeys navigate days, Enter/Space select
 *   - Previous/Next month buttons have aria-label
 */
-var MONTHS = [
+var MONTHS$1 = [
 	"January",
 	"February",
 	"March",
@@ -4239,7 +4240,7 @@ var MONTHS = [
 	"November",
 	"December"
 ];
-var DAYS = [
+var DAYS$1 = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -4301,7 +4302,7 @@ function Calendar({ value, defaultValue, onChange, minDate, maxDate, className =
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "text-sm font-bold text-slate-800",
 					children: [
-						MONTHS[viewMonth],
+						MONTHS$1[viewMonth],
 						" ",
 						viewYear
 					]
@@ -4319,9 +4320,9 @@ function Calendar({ value, defaultValue, onChange, minDate, maxDate, className =
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
 			role: "grid",
-			"aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+			"aria-label": `${MONTHS$1[viewMonth]} ${viewYear}`,
 			className: "w-full border-collapse",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: DAYS.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: DAYS$1.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 				scope: "col",
 				className: "pb-2 text-center text-[10px] font-bold uppercase tracking-widest text-slate-400",
 				children: d
@@ -4334,7 +4335,7 @@ function Calendar({ value, defaultValue, onChange, minDate, maxDate, className =
 				const isToday = isSameDay(date, today);
 				const isSelected = !!selected && isSameDay(date, selected);
 				const isDisabled = (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);
-				const label = `${day} ${MONTHS[viewMonth]} ${viewYear}${isToday ? ", Today" : ""}${isSelected ? ", Selected" : ""}`;
+				const label = `${day} ${MONTHS$1[viewMonth]} ${viewYear}${isToday ? ", Today" : ""}${isSelected ? ", Selected" : ""}`;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 					role: "gridcell",
 					"aria-label": label,
@@ -4461,6 +4462,317 @@ function LineChart({ data, height = 120, lineColor = "#6366f1", filled = true, "
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/heatmap/Heatmap.tsx
+/**
+* Heatmap — Design System Component
+*
+* A GitHub contribution-style calendar heatmap.
+* HRIS use cases: attendance patterns, leave frequency, approval volume.
+*
+* Usage:
+*   const data = [
+*     { date: '2025-01-01', value: 3 },
+*     { date: '2025-01-02', value: 0 },
+*     ...
+*   ];
+*   <Heatmap data={data} aria-label="Attendance heatmap" />
+*/
+var SCALES = {
+	blue: { cells: [
+		"bg-slate-100",
+		"bg-brand-sky/20",
+		"bg-brand-sky/40",
+		"bg-brand-sky/70",
+		"bg-brand-sky"
+	] },
+	navy: { cells: [
+		"bg-slate-100",
+		"bg-brand-navy/15",
+		"bg-brand-navy/35",
+		"bg-brand-navy/65",
+		"bg-brand-navy"
+	] },
+	teal: { cells: [
+		"bg-slate-100",
+		"bg-cyan-100",
+		"bg-cyan-300",
+		"bg-cyan-500",
+		"bg-cyan-700"
+	] },
+	orange: { cells: [
+		"bg-slate-100",
+		"bg-orange-100",
+		"bg-orange-300",
+		"bg-orange-400",
+		"bg-orange-600"
+	] }
+};
+var MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+var DAYS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+function toIntensity(value) {
+	if (value === 0) return 0;
+	if (value <= 2) return 1;
+	if (value <= 5) return 2;
+	if (value <= 7) return 3;
+	return 4;
+}
+function Heatmap({ data, scale = "blue", showLegend = true, showMonthLabels = true, showDayLabels = true, size = "md", onCellHover, "aria-label": ariaLabel = "Activity heatmap" }) {
+	const colors = SCALES[scale].cells;
+	const cellSize = size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5";
+	const gap = size === "sm" ? "gap-[3px]" : "gap-[4px]";
+	const cells = (0, react.useMemo)(() => data.map((d) => ({
+		...d,
+		intensity: toIntensity(d.value)
+	})), [data]);
+	const weeks = (0, react.useMemo)(() => {
+		const cols = [];
+		let week = [];
+		cells.forEach((cell, i) => {
+			week.push(cell);
+			if (week.length === 7 || i === cells.length - 1) {
+				cols.push(week);
+				week = [];
+			}
+		});
+		return cols;
+	}, [cells]);
+	const monthLabels = (0, react.useMemo)(() => {
+		const labels = [];
+		let lastMonth = -1;
+		weeks.forEach((week, colIdx) => {
+			const firstDay = week[0];
+			if (!firstDay) return;
+			const m = new Date(firstDay.date).getMonth();
+			if (m !== lastMonth) {
+				labels.push({
+					label: MONTHS[m],
+					col: colIdx
+				});
+				lastMonth = m;
+			}
+		});
+		return labels;
+	}, [weeks]);
+	const colW = size === "sm" ? 13 : 19;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "w-full overflow-x-auto",
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "inline-flex flex-col gap-1.5",
+			children: [
+				showMonthLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "relative h-4",
+					style: { width: weeks.length * colW },
+					children: monthLabels.map(({ label, col }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "absolute text-[10px] font-bold text-slate-400",
+						style: { left: col * colW },
+						children: label
+					}, `${label}-${col}`))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-start gap-1",
+					children: [showDayLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex flex-col gap-[4px] mr-1",
+						children: DAYS.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `text-[10px] font-bold text-slate-400 leading-none ${size === "sm" ? "h-2.5" : "h-3.5"} flex items-center ${i % 2 === 0 ? "opacity-0" : ""}`,
+							"aria-hidden": i % 2 === 0,
+							children: d
+						}, d))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `flex ${gap}`,
+						children: weeks.map((week, colIdx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `flex flex-col ${gap}`,
+							children: week.map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								title: `${cell.date}: ${cell.value}`,
+								"aria-label": `${cell.date}: ${cell.value} activities`,
+								onMouseEnter: () => onCellHover?.(cell),
+								onMouseLeave: () => onCellHover?.(null),
+								onFocus: () => onCellHover?.(cell),
+								onBlur: () => onCellHover?.(null),
+								className: [
+									cellSize,
+									"rounded-sm transition-transform hover:scale-125 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/50",
+									colors[cell.intensity]
+								].join(" ")
+							}, cell.date))
+						}, colIdx))
+					})]
+				}),
+				showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 mt-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] font-bold text-slate-400",
+							children: "Less"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex gap-1",
+							children: colors.map((c, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `w-3 h-3 rounded-sm ${c}`,
+								"aria-hidden": "true"
+							}, i))
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] font-bold text-slate-400",
+							children: "More"
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/stat-card/Statistic.tsx
+/**
+* Statistic — Design System Component
+*
+* A KPI card. Four variants: default, accent, minimal, compact.
+* Signature element: brand-navy left border strip + font-heading number.
+*
+* Usage:
+*   <Statistic label="Total Employees" value={142} icon={Users} />
+*   <Statistic label="Fill Rate" value="83%" variant="accent" trend="up" trendLabel="+2%" />
+*/
+var TREND_CONFIG = {
+	up: {
+		icon: lucide_react.TrendingUp,
+		color: "text-emerald-600",
+		label: "Up"
+	},
+	down: {
+		icon: lucide_react.TrendingDown,
+		color: "text-rose-500",
+		label: "Down"
+	},
+	neutral: {
+		icon: lucide_react.Minus,
+		color: "text-slate-400",
+		label: "No change"
+	}
+};
+function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, variant = "default" }) {
+	if (variant === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+			children: label
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt-1 font-heading text-4xl font-bold tabular-nums text-brand-navy",
+			children: value
+		}),
+		helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt-1 text-xs font-medium text-slate-400",
+			children: helper
+		})
+	] });
+	if (variant === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm",
+		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-navy/[0.06] text-brand-navy",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-[11px] font-bold uppercase tracking-[0.18em] text-slate-400 truncate",
+					children: label
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "font-heading text-2xl font-bold tabular-nums text-brand-navy leading-none mt-0.5",
+					children: value
+				}),
+				helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-0.5 text-xs font-medium text-slate-400 truncate",
+					children: helper
+				})
+			]
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `absolute inset-y-0 left-0 w-1 ${variant === "accent" ? "bg-brand-blue" : "bg-brand-navy"}`,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "px-6 py-5",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-start justify-between gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+						children: label
+					}), Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-navy/[0.06] text-brand-navy",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-3 font-heading text-4xl font-bold tabular-nums leading-none text-brand-navy",
+					children: value
+				}),
+				trend ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-2.5 flex items-center gap-1.5",
+					children: (() => {
+						const cfg = TREND_CONFIG[trend];
+						const TrendIcon = cfg.icon;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendIcon, {
+							size: 13,
+							className: cfg.color,
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `text-xs font-semibold ${cfg.color}`,
+							children: trendLabel ?? cfg.label
+						})] });
+					})()
+				}) : helper ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-2 text-xs font-medium text-slate-400",
+					children: helper
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/status-dot/StatusDot.tsx
+function StatusDot({ status, label, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `status-dot-cell ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `status-dot ${status}`,
+			"aria-hidden": "true"
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/status-actions/statusActions.ts
 /**
 * statusActions — Gallery-native lifecycle transition utilities.
@@ -4683,6 +4995,7 @@ exports.FieldContext = FieldContext;
 exports.FieldInput = FieldInput;
 exports.FileUpload = FileUpload;
 exports.FilterChip = FilterChip;
+exports.Heatmap = Heatmap;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Kanban = Kanban;
@@ -4712,7 +5025,9 @@ exports.SkeletonCard = SkeletonCard;
 exports.SkeletonTableRow = SkeletonTableRow;
 exports.SkeletonText = SkeletonText;
 exports.Spinner = Spinner;
+exports.Statistic = Statistic;
 exports.StatusBadge = StatusBadge;
+exports.StatusDot = StatusDot;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
 exports.Tab = Tab;
@@ -4726,6 +5041,12 @@ exports.TimelineEmptyState = TimelineEmptyState;
 exports.TimelineFooter = TimelineFooter;
 exports.TimelineItem = TimelineItem;
 exports.TimelineValueCard = TimelineValueCard;
+Object.defineProperty(exports, "Toaster", {
+	enumerable: true,
+	get: function() {
+		return sonner.Toaster;
+	}
+});
 exports.Toolbar = Toolbar;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
@@ -4755,6 +5076,12 @@ Object.defineProperty(exports, "shadow", {
 	}
 });
 exports.statusMenuItems = statusMenuItems;
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function() {
+		return sonner.toast;
+	}
+});
 Object.defineProperty(exports, "typography", {
 	enumerable: true,
 	get: function() {

package/lib/index.mjs

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, createElement, use, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { createContext, createElement, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowDown, Ban, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Command, File, Home, Info, Minus, Search, ShieldCheck, UploadCloud, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowDown, Ban, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Command, File, Home, Info, Minus, Search, ShieldCheck, TrendingDown, TrendingUp, UploadCloud, X } from "lucide-react";
 import Calendar$1 from "react-calendar";
 import { format, isValid, parse } from "date-fns";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -10,6 +10,7 @@ import { createPortal } from "react-dom";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Link } from "react-router-dom";
+import { Toaster, toast } from "sonner";
 export * from "lucide-react";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
@@ -4202,7 +4203,7 @@ function PermissionMatrix({ roles, permissions, caption = "Permission matrix", c
 *   - Keyboard: ArrowKeys navigate days, Enter/Space select
 *   - Previous/Next month buttons have aria-label
 */
-var MONTHS = [
+var MONTHS$1 = [
 	"January",
 	"February",
 	"March",
@@ -4216,7 +4217,7 @@ var MONTHS = [
 	"November",
 	"December"
 ];
-var DAYS = [
+var DAYS$1 = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -4278,7 +4279,7 @@ function Calendar({ value, defaultValue, onChange, minDate, maxDate, className =
 				/* @__PURE__ */ jsxs("span", {
 					className: "text-sm font-bold text-slate-800",
 					children: [
-						MONTHS[viewMonth],
+						MONTHS$1[viewMonth],
 						" ",
 						viewYear
 					]
@@ -4296,9 +4297,9 @@ function Calendar({ value, defaultValue, onChange, minDate, maxDate, className =
 			]
 		}), /* @__PURE__ */ jsxs("table", {
 			role: "grid",
-			"aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+			"aria-label": `${MONTHS$1[viewMonth]} ${viewYear}`,
 			className: "w-full border-collapse",
-			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: DAYS.map((d) => /* @__PURE__ */ jsx("th", {
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: DAYS$1.map((d) => /* @__PURE__ */ jsx("th", {
 				scope: "col",
 				className: "pb-2 text-center text-[10px] font-bold uppercase tracking-widest text-slate-400",
 				children: d
@@ -4311,7 +4312,7 @@ function Calendar({ value, defaultValue, onChange, minDate, maxDate, className =
 				const isToday = isSameDay(date, today);
 				const isSelected = !!selected && isSameDay(date, selected);
 				const isDisabled = (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);
-				const label = `${day} ${MONTHS[viewMonth]} ${viewYear}${isToday ? ", Today" : ""}${isSelected ? ", Selected" : ""}`;
+				const label = `${day} ${MONTHS$1[viewMonth]} ${viewYear}${isToday ? ", Today" : ""}${isSelected ? ", Selected" : ""}`;
 				return /* @__PURE__ */ jsx("td", {
 					role: "gridcell",
 					"aria-label": label,
@@ -4438,6 +4439,317 @@ function LineChart({ data, height = 120, lineColor = "#6366f1", filled = true, "
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/heatmap/Heatmap.tsx
+/**
+* Heatmap — Design System Component
+*
+* A GitHub contribution-style calendar heatmap.
+* HRIS use cases: attendance patterns, leave frequency, approval volume.
+*
+* Usage:
+*   const data = [
+*     { date: '2025-01-01', value: 3 },
+*     { date: '2025-01-02', value: 0 },
+*     ...
+*   ];
+*   <Heatmap data={data} aria-label="Attendance heatmap" />
+*/
+var SCALES = {
+	blue: { cells: [
+		"bg-slate-100",
+		"bg-brand-sky/20",
+		"bg-brand-sky/40",
+		"bg-brand-sky/70",
+		"bg-brand-sky"
+	] },
+	navy: { cells: [
+		"bg-slate-100",
+		"bg-brand-navy/15",
+		"bg-brand-navy/35",
+		"bg-brand-navy/65",
+		"bg-brand-navy"
+	] },
+	teal: { cells: [
+		"bg-slate-100",
+		"bg-cyan-100",
+		"bg-cyan-300",
+		"bg-cyan-500",
+		"bg-cyan-700"
+	] },
+	orange: { cells: [
+		"bg-slate-100",
+		"bg-orange-100",
+		"bg-orange-300",
+		"bg-orange-400",
+		"bg-orange-600"
+	] }
+};
+var MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+var DAYS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+function toIntensity(value) {
+	if (value === 0) return 0;
+	if (value <= 2) return 1;
+	if (value <= 5) return 2;
+	if (value <= 7) return 3;
+	return 4;
+}
+function Heatmap({ data, scale = "blue", showLegend = true, showMonthLabels = true, showDayLabels = true, size = "md", onCellHover, "aria-label": ariaLabel = "Activity heatmap" }) {
+	const colors = SCALES[scale].cells;
+	const cellSize = size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5";
+	const gap = size === "sm" ? "gap-[3px]" : "gap-[4px]";
+	const cells = useMemo(() => data.map((d) => ({
+		...d,
+		intensity: toIntensity(d.value)
+	})), [data]);
+	const weeks = useMemo(() => {
+		const cols = [];
+		let week = [];
+		cells.forEach((cell, i) => {
+			week.push(cell);
+			if (week.length === 7 || i === cells.length - 1) {
+				cols.push(week);
+				week = [];
+			}
+		});
+		return cols;
+	}, [cells]);
+	const monthLabels = useMemo(() => {
+		const labels = [];
+		let lastMonth = -1;
+		weeks.forEach((week, colIdx) => {
+			const firstDay = week[0];
+			if (!firstDay) return;
+			const m = new Date(firstDay.date).getMonth();
+			if (m !== lastMonth) {
+				labels.push({
+					label: MONTHS[m],
+					col: colIdx
+				});
+				lastMonth = m;
+			}
+		});
+		return labels;
+	}, [weeks]);
+	const colW = size === "sm" ? 13 : 19;
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full overflow-x-auto",
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "inline-flex flex-col gap-1.5",
+			children: [
+				showMonthLabels && /* @__PURE__ */ jsx("div", {
+					className: "relative h-4",
+					style: { width: weeks.length * colW },
+					children: monthLabels.map(({ label, col }) => /* @__PURE__ */ jsx("span", {
+						className: "absolute text-[10px] font-bold text-slate-400",
+						style: { left: col * colW },
+						children: label
+					}, `${label}-${col}`))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-1",
+					children: [showDayLabels && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-[4px] mr-1",
+						children: DAYS.map((d, i) => /* @__PURE__ */ jsx("span", {
+							className: `text-[10px] font-bold text-slate-400 leading-none ${size === "sm" ? "h-2.5" : "h-3.5"} flex items-center ${i % 2 === 0 ? "opacity-0" : ""}`,
+							"aria-hidden": i % 2 === 0,
+							children: d
+						}, d))
+					}), /* @__PURE__ */ jsx("div", {
+						className: `flex ${gap}`,
+						children: weeks.map((week, colIdx) => /* @__PURE__ */ jsx("div", {
+							className: `flex flex-col ${gap}`,
+							children: week.map((cell) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								title: `${cell.date}: ${cell.value}`,
+								"aria-label": `${cell.date}: ${cell.value} activities`,
+								onMouseEnter: () => onCellHover?.(cell),
+								onMouseLeave: () => onCellHover?.(null),
+								onFocus: () => onCellHover?.(cell),
+								onBlur: () => onCellHover?.(null),
+								className: [
+									cellSize,
+									"rounded-sm transition-transform hover:scale-125 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/50",
+									colors[cell.intensity]
+								].join(" ")
+							}, cell.date))
+						}, colIdx))
+					})]
+				}),
+				showLegend && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 mt-1",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-[10px] font-bold text-slate-400",
+							children: "Less"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex gap-1",
+							children: colors.map((c, i) => /* @__PURE__ */ jsx("div", {
+								className: `w-3 h-3 rounded-sm ${c}`,
+								"aria-hidden": "true"
+							}, i))
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-[10px] font-bold text-slate-400",
+							children: "More"
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/stat-card/Statistic.tsx
+/**
+* Statistic — Design System Component
+*
+* A KPI card. Four variants: default, accent, minimal, compact.
+* Signature element: brand-navy left border strip + font-heading number.
+*
+* Usage:
+*   <Statistic label="Total Employees" value={142} icon={Users} />
+*   <Statistic label="Fill Rate" value="83%" variant="accent" trend="up" trendLabel="+2%" />
+*/
+var TREND_CONFIG = {
+	up: {
+		icon: TrendingUp,
+		color: "text-emerald-600",
+		label: "Up"
+	},
+	down: {
+		icon: TrendingDown,
+		color: "text-rose-500",
+		label: "Down"
+	},
+	neutral: {
+		icon: Minus,
+		color: "text-slate-400",
+		label: "No change"
+	}
+};
+function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, variant = "default" }) {
+	if (variant === "minimal") return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+			children: label
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "mt-1 font-heading text-4xl font-bold tabular-nums text-brand-navy",
+			children: value
+		}),
+		helper && /* @__PURE__ */ jsx("p", {
+			className: "mt-1 text-xs font-medium text-slate-400",
+			children: helper
+		})
+	] });
+	if (variant === "compact") return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm",
+		children: [Icon && /* @__PURE__ */ jsx("div", {
+			className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-navy/[0.06] text-brand-navy",
+			children: /* @__PURE__ */ jsx(Icon, {
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[11px] font-bold uppercase tracking-[0.18em] text-slate-400 truncate",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "font-heading text-2xl font-bold tabular-nums text-brand-navy leading-none mt-0.5",
+					children: value
+				}),
+				helper && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-xs font-medium text-slate-400 truncate",
+					children: helper
+				})
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `absolute inset-y-0 left-0 w-1 ${variant === "accent" ? "bg-brand-blue" : "bg-brand-navy"}`,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "px-6 py-5",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-3",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+						children: label
+					}), Icon && /* @__PURE__ */ jsx("div", {
+						className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-navy/[0.06] text-brand-navy",
+						children: /* @__PURE__ */ jsx(Icon, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-3 font-heading text-4xl font-bold tabular-nums leading-none text-brand-navy",
+					children: value
+				}),
+				trend ? /* @__PURE__ */ jsx("div", {
+					className: "mt-2.5 flex items-center gap-1.5",
+					children: (() => {
+						const cfg = TREND_CONFIG[trend];
+						const TrendIcon = cfg.icon;
+						return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TrendIcon, {
+							size: 13,
+							className: cfg.color,
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx("span", {
+							className: `text-xs font-semibold ${cfg.color}`,
+							children: trendLabel ?? cfg.label
+						})] });
+					})()
+				}) : helper ? /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-xs font-medium text-slate-400",
+					children: helper
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/status-dot/StatusDot.tsx
+function StatusDot({ status, label, className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `status-dot-cell ${className}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: `status-dot ${status}`,
+			"aria-hidden": "true"
+		}), label && /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/status-actions/statusActions.ts
 /**
 * statusActions — Gallery-native lifecycle transition utilities.
@@ -4621,4 +4933,4 @@ var shadow = {
 	overlay: "shadow-xl"
 };
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, Avatar, Badge, BarChart, Breadcrumb, Button, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, IconButton, Input, Kanban, LineChart, Menu, Modal, OtpInput, PageHeader, Pagination, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, StatusBadge, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, typography_exports as typography, useFieldContext };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, Avatar, Badge, BarChart, Breadcrumb, Button, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, Kanban, LineChart, Menu, Modal, OtpInput, PageHeader, Pagination, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };

package/lib/types/ui-library/gallery/heatmap/Heatmap.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Heatmap — Design System Component
+ *
+ * A GitHub contribution-style calendar heatmap.
+ * HRIS use cases: attendance patterns, leave frequency, approval volume.
+ *
+ * Usage:
+ *   const data = [
+ *     { date: '2025-01-01', value: 3 },
+ *     { date: '2025-01-02', value: 0 },
+ *     ...
+ *   ];
+ *   <Heatmap data={data} aria-label="Attendance heatmap" />
+ */
+export type HeatmapScale = 'blue' | 'navy' | 'teal' | 'orange';
+export interface HeatmapDataPoint {
+    /** Date string in yyyy-MM-dd format */
+    date: string;
+    /** Raw value — automatically bucketed into 0–4 intensity levels */
+    value: number;
+}
+export interface HeatmapProps {
+    /** Array of date + value data points */
+    data: HeatmapDataPoint[];
+    /** Color scale — defaults to 'blue' */
+    scale?: HeatmapScale;
+    /** Show the Less → More legend strip — default true */
+    showLegend?: boolean;
+    /** Show month labels above columns — default true */
+    showMonthLabels?: boolean;
+    /** Show day labels (Mon/Wed/Fri) — default true */
+    showDayLabels?: boolean;
+    /** Cell size — default 'md' */
+    size?: 'sm' | 'md';
+    /** Called when a cell is hovered, with the cell data or null on leave */
+    onCellHover?: (cell: HeatmapDataPoint | null) => void;
+    /** Accessible label for the heatmap container */
+    'aria-label'?: string;
+}
+export declare function Heatmap({ data, scale, showLegend, showMonthLabels, showDayLabels, size, onCellHover, 'aria-label': ariaLabel, }: HeatmapProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/stat-card/Statistic.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Statistic — Design System Component
+ *
+ * A KPI card. Four variants: default, accent, minimal, compact.
+ * Signature element: brand-navy left border strip + font-heading number.
+ *
+ * Usage:
+ *   <Statistic label="Total Employees" value={142} icon={Users} />
+ *   <Statistic label="Fill Rate" value="83%" variant="accent" trend="up" trendLabel="+2%" />
+ */
+export type StatisticTrend = 'up' | 'down' | 'neutral';
+export type StatisticVariant = 'default' | 'accent' | 'minimal' | 'compact';
+export interface StatisticProps {
+    /** KPI label — shown above the number */
+    label: string;
+    /** The headline number or string */
+    value: string | number;
+    /** Secondary text below the value (not shown when trend is set) */
+    helper?: string;
+    /** Icon component — e.g. from lucide-react */
+    icon?: React.ElementType;
+    /** Trend direction — renders a TrendingUp/Down/Minus icon */
+    trend?: StatisticTrend;
+    /** Override the default trend label */
+    trendLabel?: string;
+    /** Visual variant */
+    variant?: StatisticVariant;
+}
+export declare function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, variant, }: StatisticProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+/**
+ * StatusDot — Design System Component
+ *
+ * A coloured glowing dot paired with a label. Used in tables to indicate
+ * account or entity status at a glance.
+ *
+ * Usage:
+ *   <StatusDot status="active" label="Active" />
+ *   <StatusDot status="locked" label="Locked" />
+ */
+export type StatusDotStatus = 'active' | 'locked' | 'inactive' | 'pending';
+export interface StatusDotProps {
+    status: StatusDotStatus;
+    label?: string;
+    className?: string;
+}
+export declare function StatusDot({ status, label, className }: StatusDotProps): import("react").JSX.Element;

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

@@ -118,6 +118,13 @@ export { Calendar } from './gallery/calendar/Calendar';
 export type { CalendarProps } from './gallery/calendar/Calendar';
 export { BarChart, LineChart } from './gallery/charts/Charts';
 export type { BarChartProps, LineChartProps, ChartDataPoint } from './gallery/charts/Charts';
+export { Heatmap } from './gallery/heatmap/Heatmap';
+export type { HeatmapProps, HeatmapDataPoint, HeatmapScale } from './gallery/heatmap/Heatmap';
+export { Statistic } from './gallery/stat-card/Statistic';
+export type { StatisticProps, StatisticTrend, StatisticVariant } from './gallery/stat-card/Statistic';
+export { StatusDot } from './gallery/status-dot/StatusDot';
+export type { StatusDotProps, StatusDotStatus } from './gallery/status-dot/StatusDot';
+export { Toaster, toast } from 'sonner';
 export { statusMenuItems } from './gallery/status-actions/statusActions';
 export type { ActionMenuItem, Lifecycle, StatusTransitionRequest, StatusMenuOptions } from './gallery/status-actions/statusActions';
 export * from './tokens/index';

package/package.json

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