@diwauhris/ui 1.7.18 → 1.7.20

package/lib/assets/ui.css

@@ -809,6 +809,10 @@
   max-height: 6rem;
 }
 
+.max-h-48 {
+  max-height: 12rem;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -2899,6 +2903,10 @@
   background-color: rgb(255 255 255 / 0.75);
 }
 
+.bg-white\/95 {
+  background-color: rgb(255 255 255 / 0.95);
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -3701,6 +3709,11 @@
   color: rgb(234 88 12 / var(--tw-text-opacity, 1));
 }
 
+.text-rose-300 {
+  --tw-text-opacity: 1;
+  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
+}
+
 .text-rose-300\/60 {
   color: rgb(253 164 175 / 0.6);
 }
@@ -4121,6 +4134,11 @@
   --tw-ring-offset-width: 2px;
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .drop-shadow {
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/lib/index.cjs

@@ -3957,16 +3957,40 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 	const [panelStyle, setPanelStyle] = (0, react.useState)({});
 	(0, react.useEffect)(() => {
 		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
+		const GAP = 4;
+		const MARGIN = 8;
 		const PANEL_MIN_WIDTH = 176;
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: align === "left" ? rect.left : Math.max(0, rect.right - PANEL_MIN_WIDTH),
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
-		});
-	}, [open, align]);
+		const ROW_HEIGHT = 36;
+		const HEADER_HEIGHT = 8;
+		const reposition = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
+			setPanelStyle({
+				position: "fixed",
+				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
+				left: align === "left" ? rect.left : Math.max(MARGIN, rect.right - PANEL_MIN_WIDTH),
+				zIndex: 9999,
+				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+			});
+		};
+		reposition();
+		const raf = window.requestAnimationFrame(reposition);
+		window.addEventListener("scroll", reposition, true);
+		window.addEventListener("resize", reposition);
+		return () => {
+			window.cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		open,
+		align,
+		items.length
+	]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {
@@ -4618,6 +4642,154 @@ function StatusPage({ eyebrow, title, description, code, icon, primaryAction, se
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/not-found-error/NotFoundError.tsx
+/**
+* NotFoundError — Design System Component
+*
+* Full-page 404 Not Found screen. Composes StatusPage internally using the
+* `notFound` preset. Navigation is the consumer's responsibility — wire it
+* via `primaryAction.onClick` and `secondaryAction.onClick`.
+*
+* No routing imports. Works with any router (React Router, Next.js, window.location).
+*
+* Usage:
+*   import { NotFoundError } from '@diwauhris/ui';
+*   import { useNavigate } from 'react-router-dom';
+*
+*   function NotFoundPage() {
+*     const navigate = useNavigate();
+*     return (
+*       <NotFoundError
+*         primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+*         secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+*       />
+*     );
+*   }
+*/
+function NotFoundError({ primaryAction, secondaryAction, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
+		...STATUS_PAGE_PRESETS.notFound,
+		primaryAction,
+		secondaryAction,
+		className
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/forbidden-error/ForbiddenError.tsx
+/**
+* ForbiddenError — Design System Component
+*
+* Full-page 403 Access Restricted screen. Composes StatusPage internally
+* using the `forbidden` preset. Navigation is the consumer's responsibility
+* — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
+*
+* No routing imports. Works with any router (React Router, Next.js, window.location).
+*
+* Usage:
+*   import { ForbiddenError } from '@diwauhris/ui';
+*   import { useNavigate } from 'react-router-dom';
+*
+*   function ForbiddenPage() {
+*     const navigate = useNavigate();
+*     return (
+*       <ForbiddenError
+*         primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+*         secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+*       />
+*     );
+*   }
+*/
+function ForbiddenError({ primaryAction, secondaryAction, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
+		...STATUS_PAGE_PRESETS.forbidden,
+		primaryAction,
+		secondaryAction,
+		className
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/application-error/ApplicationError.tsx
+/**
+* ApplicationError — Design System Component
+*
+* Full-page 500 / unexpected error screen. Composes StatusPage internally
+* using the `serverError` preset. Includes a dev-only collapsible details
+* panel (error message, stack trace, component stack) rendered only when
+* `import.meta.env.DEV && error !== undefined`.
+*
+* Navigation is the consumer's responsibility — wire onRetry and onDashboard.
+*
+* Two exports:
+*
+* ApplicationError — primary component. Consumer provides both callbacks.
+*   Used as React Router `errorElement` (pair with useRouteError + useNavigate).
+*
+* ApplicationErrorFallback — convenience wrapper for ErrorBoundary usage.
+*   Accepts onReset (maps to onRetry) and uses window.location.href for
+*   dashboard navigation when outside router context.
+*
+* No routing imports in this file. Works with any router.
+*
+* Usage (router errorElement):
+*   import { ApplicationError } from '@diwauhris/ui';
+*   import { useRouteError, useNavigate } from 'react-router-dom';
+*
+*   export function ErrorPage() {
+*     const error = useRouteError();
+*     const navigate = useNavigate();
+*     return (
+*       <ApplicationError
+*         error={error}
+*         onRetry={() => navigate(0)}
+*         onDashboard={() => navigate('/dashboard')}
+*       />
+*     );
+*   }
+*
+* Usage (ErrorBoundary fallback):
+*   import { ApplicationErrorFallback } from '@diwauhris/ui';
+*
+*   <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => (
+*     <ApplicationErrorFallback
+*       error={error}
+*       onReset={resetErrorBoundary}
+*     />
+*   )} />
+*/
+function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className }) {
+	const showDevDetails = false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
+			...STATUS_PAGE_PRESETS.serverError,
+			primaryAction: {
+				label: "Try Again",
+				onClick: onRetry
+			},
+			secondaryAction: {
+				label: "Go to Dashboard",
+				onClick: onDashboard
+			}
+		}), showDevDetails]
+	});
+}
+/**
+* Convenience wrapper for use with class-based ErrorBoundary components.
+* Outside router context — uses window.location.href for dashboard navigation.
+* Maps `onReset` to ApplicationError's `onRetry`.
+*/
+function ApplicationErrorFallback({ error, componentStack, errorId, onReset }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApplicationError, {
+		error,
+		componentStack,
+		errorId,
+		onRetry: onReset,
+		onDashboard: () => {
+			window.location.href = "/dashboard";
+		}
+	});
+}
+//#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", {
@@ -8608,6 +8780,8 @@ exports.AccordionItem = AccordionItem;
 exports.AccordionTrigger = AccordionTrigger;
 exports.ActivityFeed = ActivityFeed;
 exports.Alert = Alert;
+exports.ApplicationError = ApplicationError;
+exports.ApplicationErrorFallback = ApplicationErrorFallback;
 exports.ApprovalTimeline = ApprovalTimeline;
 exports.AreaChart = AreaChart;
 exports.Avatar = Avatar;
@@ -8645,6 +8819,7 @@ exports.FieldContext = FieldContext;
 exports.FieldInput = FieldInput;
 exports.FileUpload = FileUpload;
 exports.FilterChip = FilterChip;
+exports.ForbiddenError = ForbiddenError;
 exports.Heatmap = Heatmap;
 exports.IconButton = IconButton;
 exports.Input = Input;
@@ -8654,6 +8829,7 @@ exports.LineChart = LineChart;
 exports.MaskedValue = MaskedValue;
 exports.Menu = Menu;
 exports.Modal = Modal;
+exports.NotFoundError = NotFoundError;
 exports.OrgChart = OrgChart;
 exports.OrgUnitTree = OrgUnitTree;
 exports.OtpInput = OtpInput;

package/lib/index.mjs

@@ -3933,16 +3933,40 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 	const [panelStyle, setPanelStyle] = useState({});
 	useEffect(() => {
 		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
+		const GAP = 4;
+		const MARGIN = 8;
 		const PANEL_MIN_WIDTH = 176;
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: align === "left" ? rect.left : Math.max(0, rect.right - PANEL_MIN_WIDTH),
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
-		});
-	}, [open, align]);
+		const ROW_HEIGHT = 36;
+		const HEADER_HEIGHT = 8;
+		const reposition = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
+			setPanelStyle({
+				position: "fixed",
+				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
+				left: align === "left" ? rect.left : Math.max(MARGIN, rect.right - PANEL_MIN_WIDTH),
+				zIndex: 9999,
+				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+			});
+		};
+		reposition();
+		const raf = window.requestAnimationFrame(reposition);
+		window.addEventListener("scroll", reposition, true);
+		window.addEventListener("resize", reposition);
+		return () => {
+			window.cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		open,
+		align,
+		items.length
+	]);
 	useEffect(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {
@@ -4594,6 +4618,107 @@ function StatusPage({ eyebrow, title, description, code, icon, primaryAction, se
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/not-found-error/NotFoundError.tsx
+/**
+* NotFoundError — Design System Component
+*
+* Full-page 404 Not Found screen. Composes StatusPage internally using the
+* `notFound` preset. Navigation is the consumer's responsibility — wire it
+* via `primaryAction.onClick` and `secondaryAction.onClick`.
+*
+* No routing imports. Works with any router (React Router, Next.js, window.location).
+*
+* Usage:
+*   import { NotFoundError } from '@diwauhris/ui';
+*   import { useNavigate } from 'react-router-dom';
+*
+*   function NotFoundPage() {
+*     const navigate = useNavigate();
+*     return (
+*       <NotFoundError
+*         primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+*         secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+*       />
+*     );
+*   }
+*/
+function NotFoundError({ primaryAction, secondaryAction, className }) {
+	return /* @__PURE__ */ jsx(StatusPage, {
+		...STATUS_PAGE_PRESETS.notFound,
+		primaryAction,
+		secondaryAction,
+		className
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/forbidden-error/ForbiddenError.tsx
+/**
+* ForbiddenError — Design System Component
+*
+* Full-page 403 Access Restricted screen. Composes StatusPage internally
+* using the `forbidden` preset. Navigation is the consumer's responsibility
+* — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
+*
+* No routing imports. Works with any router (React Router, Next.js, window.location).
+*
+* Usage:
+*   import { ForbiddenError } from '@diwauhris/ui';
+*   import { useNavigate } from 'react-router-dom';
+*
+*   function ForbiddenPage() {
+*     const navigate = useNavigate();
+*     return (
+*       <ForbiddenError
+*         primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+*         secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+*       />
+*     );
+*   }
+*/
+function ForbiddenError({ primaryAction, secondaryAction, className }) {
+	return /* @__PURE__ */ jsx(StatusPage, {
+		...STATUS_PAGE_PRESETS.forbidden,
+		primaryAction,
+		secondaryAction,
+		className
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/application-error/ApplicationError.tsx
+function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className }) {
+	const showDevDetails = false;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsx(StatusPage, {
+			...STATUS_PAGE_PRESETS.serverError,
+			primaryAction: {
+				label: "Try Again",
+				onClick: onRetry
+			},
+			secondaryAction: {
+				label: "Go to Dashboard",
+				onClick: onDashboard
+			}
+		}), showDevDetails]
+	});
+}
+/**
+* Convenience wrapper for use with class-based ErrorBoundary components.
+* Outside router context — uses window.location.href for dashboard navigation.
+* Maps `onReset` to ApplicationError's `onRetry`.
+*/
+function ApplicationErrorFallback({ error, componentStack, errorId, onReset }) {
+	return /* @__PURE__ */ jsx(ApplicationError, {
+		error,
+		componentStack,
+		errorId,
+		onRetry: onReset,
+		onDashboard: () => {
+			window.location.href = "/dashboard";
+		}
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
 function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
 	return /* @__PURE__ */ jsxs("article", {
@@ -8578,4 +8703,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, ColumnManager, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, MaskedValue, Menu, Modal, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, STATUS_PAGE_PRESETS, Search, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, StatusPage, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, applyColumnOrder, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApplicationError, ApplicationErrorFallback, ApprovalTimeline, AreaChart, Avatar, Badge, BarChart, BarList, Breadcrumb, Button, CHART_PALETTE, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, ColumnManager, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, ForbiddenError, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, MaskedValue, Menu, Modal, NotFoundError, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, STATUS_PAGE_PRESETS, Search, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, StatusPage, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, applyColumnOrder, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };

package/lib/types/ui-library/gallery/application-error/ApplicationError.d.ts

@@ -0,0 +1,96 @@
+/**
+ * ApplicationError — Design System Component
+ *
+ * Full-page 500 / unexpected error screen. Composes StatusPage internally
+ * using the `serverError` preset. Includes a dev-only collapsible details
+ * panel (error message, stack trace, component stack) rendered only when
+ * `import.meta.env.DEV && error !== undefined`.
+ *
+ * Navigation is the consumer's responsibility — wire onRetry and onDashboard.
+ *
+ * Two exports:
+ *
+ * ApplicationError — primary component. Consumer provides both callbacks.
+ *   Used as React Router `errorElement` (pair with useRouteError + useNavigate).
+ *
+ * ApplicationErrorFallback — convenience wrapper for ErrorBoundary usage.
+ *   Accepts onReset (maps to onRetry) and uses window.location.href for
+ *   dashboard navigation when outside router context.
+ *
+ * No routing imports in this file. Works with any router.
+ *
+ * Usage (router errorElement):
+ *   import { ApplicationError } from '@diwauhris/ui';
+ *   import { useRouteError, useNavigate } from 'react-router-dom';
+ *
+ *   export function ErrorPage() {
+ *     const error = useRouteError();
+ *     const navigate = useNavigate();
+ *     return (
+ *       <ApplicationError
+ *         error={error}
+ *         onRetry={() => navigate(0)}
+ *         onDashboard={() => navigate('/dashboard')}
+ *       />
+ *     );
+ *   }
+ *
+ * Usage (ErrorBoundary fallback):
+ *   import { ApplicationErrorFallback } from '@diwauhris/ui';
+ *
+ *   <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => (
+ *     <ApplicationErrorFallback
+ *       error={error}
+ *       onReset={resetErrorBoundary}
+ *     />
+ *   )} />
+ */
+export interface ApplicationErrorProps {
+    /**
+     * The caught error object.
+     * Used to extract message and stack in the dev-only details panel.
+     * Pass the value from useRouteError() or ErrorBoundary's error prop.
+     */
+    error?: unknown;
+    /**
+     * React component stack from ErrorInfo.componentStack.
+     * Shown in the dev panel when provided. Optional.
+     */
+    componentStack?: string;
+    /**
+     * Short error ID for support correlation (e.g. "ERR-A1B2C").
+     * Rendered below the action buttons when provided.
+     */
+    errorId?: string;
+    /**
+     * "Try Again" callback.
+     * Router usage: () => navigate(0)
+     * Boundary usage: onReset / resetErrorBoundary
+     */
+    onRetry: () => void;
+    /**
+     * "Go to Dashboard" callback.
+     * Router usage: () => navigate('/dashboard')
+     * Boundary usage: () => { window.location.href = '/dashboard'; }
+     */
+    onDashboard: () => void;
+    /** Additional class on the root wrapper. */
+    className?: string;
+}
+export interface ApplicationErrorFallbackProps {
+    /** The caught error object passed by the ErrorBoundary. */
+    error?: unknown;
+    /** React component stack from ErrorInfo.componentStack. */
+    componentStack?: string;
+    /** Short error ID for support correlation. */
+    errorId?: string;
+    /** Called when the user clicks "Try Again". Maps to onRetry. */
+    onReset: () => void;
+}
+export declare function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className, }: ApplicationErrorProps): import("react").JSX.Element;
+/**
+ * Convenience wrapper for use with class-based ErrorBoundary components.
+ * Outside router context — uses window.location.href for dashboard navigation.
+ * Maps `onReset` to ApplicationError's `onRetry`.
+ */
+export declare function ApplicationErrorFallback({ error, componentStack, errorId, onReset, }: ApplicationErrorFallbackProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/forbidden-error/ForbiddenError.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ForbiddenError — Design System Component
+ *
+ * Full-page 403 Access Restricted screen. Composes StatusPage internally
+ * using the `forbidden` preset. Navigation is the consumer's responsibility
+ * — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
+ *
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
+ *
+ * Usage:
+ *   import { ForbiddenError } from '@diwauhris/ui';
+ *   import { useNavigate } from 'react-router-dom';
+ *
+ *   function ForbiddenPage() {
+ *     const navigate = useNavigate();
+ *     return (
+ *       <ForbiddenError
+ *         primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+ *         secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+ *       />
+ *     );
+ *   }
+ */
+import type { StatusPageAction } from '../status-page/StatusPage';
+export interface ForbiddenErrorProps {
+    /**
+     * Primary action button.
+     * Typically "Go to Dashboard" with onClick: () => navigate('/dashboard').
+     */
+    primaryAction: StatusPageAction;
+    /**
+     * Optional secondary action button.
+     * Typically "Go Back" with onClick: () => navigate(-1).
+     */
+    secondaryAction?: StatusPageAction;
+    /** Additional class on the root wrapper. */
+    className?: string;
+}
+export declare function ForbiddenError({ primaryAction, secondaryAction, className, }: ForbiddenErrorProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/not-found-error/NotFoundError.d.ts

@@ -0,0 +1,39 @@
+/**
+ * NotFoundError — Design System Component
+ *
+ * Full-page 404 Not Found screen. Composes StatusPage internally using the
+ * `notFound` preset. Navigation is the consumer's responsibility — wire it
+ * via `primaryAction.onClick` and `secondaryAction.onClick`.
+ *
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
+ *
+ * Usage:
+ *   import { NotFoundError } from '@diwauhris/ui';
+ *   import { useNavigate } from 'react-router-dom';
+ *
+ *   function NotFoundPage() {
+ *     const navigate = useNavigate();
+ *     return (
+ *       <NotFoundError
+ *         primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+ *         secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+ *       />
+ *     );
+ *   }
+ */
+import type { StatusPageAction } from '../status-page/StatusPage';
+export interface NotFoundErrorProps {
+    /**
+     * Primary action button.
+     * Typically "Go to Dashboard" with onClick: () => navigate('/dashboard').
+     */
+    primaryAction: StatusPageAction;
+    /**
+     * Optional secondary action button.
+     * Typically "Go Back" with onClick: () => navigate(-1).
+     */
+    secondaryAction?: StatusPageAction;
+    /** Additional class on the root wrapper. */
+    className?: string;
+}
+export declare function NotFoundError({ primaryAction, secondaryAction, className, }: NotFoundErrorProps): import("react").JSX.Element;

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

@@ -110,6 +110,12 @@ 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 { NotFoundError } from './gallery/not-found-error/NotFoundError';
+export type { NotFoundErrorProps } from './gallery/not-found-error/NotFoundError';
+export { ForbiddenError } from './gallery/forbidden-error/ForbiddenError';
+export type { ForbiddenErrorProps } from './gallery/forbidden-error/ForbiddenError';
+export { ApplicationError, ApplicationErrorFallback } from './gallery/application-error/ApplicationError';
+export type { ApplicationErrorProps, ApplicationErrorFallbackProps } from './gallery/application-error/ApplicationError';
 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.7.18",
+  "version": "1.7.20",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [