@diwauhris/ui 1.6.0 → 1.7.0

package/lib/assets/ui.css

@@ -3310,6 +3310,10 @@
   line-height: 1;
 }
 
+.text-\[100px\] {
+  font-size: 100px;
+}
+
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -3350,6 +3354,10 @@
   font-size: 7px;
 }
 
+.text-\[80px\] {
+  font-size: 80px;
+}
+
 .text-\[8px\] {
   font-size: 8px;
 }
@@ -3853,6 +3861,14 @@
   opacity: 0.8;
 }
 
+.opacity-\[0\.07\] {
+  opacity: 0.07;
+}
+
+.opacity-\[0\.12\] {
+  opacity: 0.12;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -5052,6 +5068,9 @@ body {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+  .sm\:text-\[120px\] {
+    font-size: 120px;
+  }
 }
 @media (min-width: 768px) {
   .md\:relative {
@@ -5180,3 +5199,9 @@ body {
     grid-template-columns: 340px minmax(0,1fr);
   }
 }
+.\[\&\>svg\]\:h-24>svg {
+  height: 6rem;
+}
+.\[\&\>svg\]\:w-24>svg {
+  width: 6rem;
+}

package/lib/index.cjs

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

package/lib/index.mjs

@@ -3821,6 +3821,100 @@ function EmptyState({ title, hint, icon, action, className = "" }) {
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/status-page/StatusPage.tsx
+/**
+* Named presets for the three common status states.
+* Each preset supplies code, eyebrow, title, and description.
+* Consumer always provides actions — presets never include navigation.
+*
+* Usage:
+*   <StatusPage
+*     {...STATUS_PAGE_PRESETS.notFound}
+*     primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+*     secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+*   />
+*/
+var STATUS_PAGE_PRESETS = {
+	notFound: {
+		code: "404",
+		eyebrow: "404 — Not Found",
+		title: "Page Not Found",
+		description: "The page you're looking for doesn't exist or may have been moved."
+	},
+	forbidden: {
+		code: "403",
+		eyebrow: "403 — Access Restricted",
+		title: "Access Restricted",
+		description: "You don't have permission to view this page. Contact your system administrator if you need access."
+	},
+	serverError: {
+		code: "500",
+		eyebrow: "500 — Server Error",
+		title: "Something Went Wrong",
+		description: "We encountered an unexpected problem. Please try again or return to the dashboard."
+	}
+};
+var BASE_ANCHOR = "inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 select-none h-10 gap-2 rounded-md px-4 text-sm";
+var ANCHOR_PRIMARY = `${BASE_ANCHOR} font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 focus-visible:ring-brand-blue/30`;
+var ANCHOR_OUTLINE = `${BASE_ANCHOR} font-semibold border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-brand-blue/40 hover:bg-blue-50/40 hover:text-brand-blue focus-visible:ring-brand-blue/20`;
+function ActionButton({ action, variant }) {
+	if (action.href) return /* @__PURE__ */ jsx("a", {
+		href: action.href,
+		className: variant === "primary" ? ANCHOR_PRIMARY : ANCHOR_OUTLINE,
+		children: action.label
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		onClick: action.onClick,
+		children: action.label
+	});
+}
+function StatusPage({ eyebrow, title, description, code, icon, primaryAction, secondaryAction, className = "" }) {
+	const hasActions = primaryAction || secondaryAction;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative flex min-h-screen items-center justify-center bg-surface-page px-6 py-16 overflow-hidden ${className}`,
+		children: [code ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute select-none font-heading font-bold text-brand-navy opacity-[0.07] text-[80px] sm:text-[120px] leading-none",
+			children: code
+		}) : icon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute select-none text-brand-navy opacity-[0.12]",
+			style: { fontSize: 0 },
+			children: /* @__PURE__ */ jsx("span", {
+				className: "block [&>svg]:h-24 [&>svg]:w-24",
+				children: icon
+			})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "relative z-10 max-w-sm w-full os-slide-up",
+			children: [
+				eyebrow && /* @__PURE__ */ jsx("p", {
+					className: "mb-3 text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+					children: eyebrow
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "font-heading text-3xl font-bold text-brand-navy leading-tight",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-3 text-sm font-medium text-slate-500 leading-relaxed",
+					children: description
+				}),
+				hasActions && /* @__PURE__ */ jsxs("div", {
+					className: "mt-8 flex flex-wrap items-center gap-3",
+					children: [primaryAction && /* @__PURE__ */ jsx(ActionButton, {
+						action: primaryAction,
+						variant: "primary"
+					}), secondaryAction && /* @__PURE__ */ jsx(ActionButton, {
+						action: secondaryAction,
+						variant: "outline"
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
 function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
 	return /* @__PURE__ */ jsxs("article", {
@@ -7592,4 +7686,4 @@ var shadow = {
 	overlay: "shadow-xl"
 };
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, AreaChart, Avatar, Badge, BarChart, BarList, Breadcrumb, Button, CHART_PALETTE, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, Menu, Modal, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, AreaChart, Avatar, Badge, BarChart, BarList, Breadcrumb, Button, CHART_PALETTE, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, Menu, Modal, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, STATUS_PAGE_PRESETS, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, StatusPage, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };

package/lib/types/ui-library/gallery/status-page/StatusPage.d.ts

@@ -0,0 +1,112 @@
+/**
+ * StatusPage — Design System Component
+ *
+ * Full-page status screen for 404, 403, 500, and custom states.
+ *
+ * Signature element: the status code itself rendered as a large Barlow
+ * watermark behind the heading — brand typography as the primary visual,
+ * no icon-in-a-circle required.
+ *
+ * Layout: full-page centered on bg-surface-page, no card wrapper.
+ * Motion: content block enters with .os-slide-up (respects prefers-reduced-motion).
+ * Watermark stays static — animating it would be distracting.
+ *
+ * No routing logic in this component. Action buttons accept onClick/href;
+ * the consumer wires navigation (e.g. useNavigate from react-router-dom).
+ *
+ * Usage:
+ *   <StatusPage
+ *     {...STATUS_PAGE_PRESETS.notFound}
+ *     primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+ *     secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+ *   />
+ *
+ * Accessibility:
+ *   - Heading is <h1> — appropriate for a full-page status screen.
+ *   - Watermark is aria-hidden="true" — decorative; the heading communicates the state.
+ *   - Action buttons have descriptive labels via the `label` prop.
+ *   - The watermark is opacity-[0.07] and has no contrast requirement (aria-hidden).
+ */
+import type { ReactNode } from 'react';
+export interface StatusPageAction {
+    /** Button label */
+    label: string;
+    /**
+     * Click handler — consumer wires navigation.
+     * Example: () => navigate('/dashboard')
+     */
+    onClick?: () => void;
+    /**
+     * Renders an <a> tag instead of <button> when provided.
+     * Use for external links (e.g. a status-page URL) or non-SPA navigation.
+     */
+    href?: string;
+}
+export interface StatusPageProps {
+    /**
+     * Short eyebrow label shown above the heading.
+     * Rendered in the brand-sky uppercase tracking style.
+     * Example: "404 — Not Found"
+     * Omit to skip the eyebrow row.
+     */
+    eyebrow?: string;
+    /** Main heading. Rendered as <h1>. Required. */
+    title: string;
+    /** Body description below the heading. Rendered as <p>. Required. */
+    description: string;
+    /**
+     * Status code string used as the large typographic watermark
+     * rendered behind the heading (e.g. "404", "403", "500").
+     * When omitted and `icon` is provided, the icon renders as the
+     * background mark instead.
+     */
+    code?: string;
+    /**
+     * Lucide icon used as the background mark when `code` is not set.
+     * Ignored when `code` is provided.
+     * Pass with aria-hidden="true"; rendered at large size automatically.
+     */
+    icon?: ReactNode;
+    /** Primary action — rendered as Button variant="primary". */
+    primaryAction?: StatusPageAction;
+    /**
+     * Secondary action — rendered as Button variant="outline".
+     * Omit for single-action states.
+     */
+    secondaryAction?: StatusPageAction;
+    /** Additional class on the root wrapper. */
+    className?: string;
+}
+/**
+ * Named presets for the three common status states.
+ * Each preset supplies code, eyebrow, title, and description.
+ * Consumer always provides actions — presets never include navigation.
+ *
+ * Usage:
+ *   <StatusPage
+ *     {...STATUS_PAGE_PRESETS.notFound}
+ *     primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+ *     secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+ *   />
+ */
+export declare const STATUS_PAGE_PRESETS: {
+    readonly notFound: {
+        readonly code: "404";
+        readonly eyebrow: "404 — Not Found";
+        readonly title: "Page Not Found";
+        readonly description: "The page you're looking for doesn't exist or may have been moved.";
+    };
+    readonly forbidden: {
+        readonly code: "403";
+        readonly eyebrow: "403 — Access Restricted";
+        readonly title: "Access Restricted";
+        readonly description: "You don't have permission to view this page. Contact your system administrator if you need access.";
+    };
+    readonly serverError: {
+        readonly code: "500";
+        readonly eyebrow: "500 — Server Error";
+        readonly title: "Something Went Wrong";
+        readonly description: "We encountered an unexpected problem. Please try again or return to the dashboard.";
+    };
+};
+export declare function StatusPage({ eyebrow, title, description, code, icon, primaryAction, secondaryAction, className, }: StatusPageProps): import("react").JSX.Element;

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

@@ -106,6 +106,8 @@ export { Timeline, TimelineItem, TimelineValueCard, TimelineFooter, TimelineEmpt
 export type { TimelineProps, TimelineItemProps, TimelineValueCardProps, TimelineFooterProps, TimelineEmptyStateProps } from './gallery/timeline/Timeline';
 export { EmptyState } from './gallery/empty-state/EmptyState';
 export type { EmptyStateProps } from './gallery/empty-state/EmptyState';
+export { StatusPage, STATUS_PAGE_PRESETS } from './gallery/status-page/StatusPage';
+export type { StatusPageProps, StatusPageAction } from './gallery/status-page/StatusPage';
 export { EmployeeCard } from './gallery/employee-card/EmployeeCard';
 export type { EmployeeCardProps, EmployeeCardMeta } from './gallery/employee-card/EmployeeCard';
 export { TreeView } from './gallery/tree-view/TreeView';

package/package.json

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