@diwauhris/ui 1.7.18 → 1.7.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/assets/ui.css CHANGED
@@ -809,6 +809,10 @@
809
809
  max-height: 6rem;
810
810
  }
811
811
 
812
+ .max-h-48 {
813
+ max-height: 12rem;
814
+ }
815
+
812
816
  .max-h-60 {
813
817
  max-height: 15rem;
814
818
  }
@@ -2899,6 +2903,10 @@
2899
2903
  background-color: rgb(255 255 255 / 0.75);
2900
2904
  }
2901
2905
 
2906
+ .bg-white\/95 {
2907
+ background-color: rgb(255 255 255 / 0.95);
2908
+ }
2909
+
2902
2910
  .bg-gradient-to-r {
2903
2911
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
2904
2912
  }
@@ -3701,6 +3709,11 @@
3701
3709
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
3702
3710
  }
3703
3711
 
3712
+ .text-rose-300 {
3713
+ --tw-text-opacity: 1;
3714
+ color: rgb(253 164 175 / var(--tw-text-opacity, 1));
3715
+ }
3716
+
3704
3717
  .text-rose-300\/60 {
3705
3718
  color: rgb(253 164 175 / 0.6);
3706
3719
  }
@@ -4121,6 +4134,11 @@
4121
4134
  --tw-ring-offset-width: 2px;
4122
4135
  }
4123
4136
 
4137
+ .blur {
4138
+ --tw-blur: blur(8px);
4139
+ 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);
4140
+ }
4141
+
4124
4142
  .drop-shadow {
4125
4143
  --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));
4126
4144
  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 CHANGED
@@ -4618,6 +4618,154 @@ function StatusPage({ eyebrow, title, description, code, icon, primaryAction, se
4618
4618
  });
4619
4619
  }
4620
4620
  //#endregion
4621
+ //#region src/ui-library/gallery/not-found-error/NotFoundError.tsx
4622
+ /**
4623
+ * NotFoundError — Design System Component
4624
+ *
4625
+ * Full-page 404 Not Found screen. Composes StatusPage internally using the
4626
+ * `notFound` preset. Navigation is the consumer's responsibility — wire it
4627
+ * via `primaryAction.onClick` and `secondaryAction.onClick`.
4628
+ *
4629
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
4630
+ *
4631
+ * Usage:
4632
+ * import { NotFoundError } from '@diwauhris/ui';
4633
+ * import { useNavigate } from 'react-router-dom';
4634
+ *
4635
+ * function NotFoundPage() {
4636
+ * const navigate = useNavigate();
4637
+ * return (
4638
+ * <NotFoundError
4639
+ * primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
4640
+ * secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
4641
+ * />
4642
+ * );
4643
+ * }
4644
+ */
4645
+ function NotFoundError({ primaryAction, secondaryAction, className }) {
4646
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
4647
+ ...STATUS_PAGE_PRESETS.notFound,
4648
+ primaryAction,
4649
+ secondaryAction,
4650
+ className
4651
+ });
4652
+ }
4653
+ //#endregion
4654
+ //#region src/ui-library/gallery/forbidden-error/ForbiddenError.tsx
4655
+ /**
4656
+ * ForbiddenError — Design System Component
4657
+ *
4658
+ * Full-page 403 Access Restricted screen. Composes StatusPage internally
4659
+ * using the `forbidden` preset. Navigation is the consumer's responsibility
4660
+ * — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
4661
+ *
4662
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
4663
+ *
4664
+ * Usage:
4665
+ * import { ForbiddenError } from '@diwauhris/ui';
4666
+ * import { useNavigate } from 'react-router-dom';
4667
+ *
4668
+ * function ForbiddenPage() {
4669
+ * const navigate = useNavigate();
4670
+ * return (
4671
+ * <ForbiddenError
4672
+ * primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
4673
+ * secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
4674
+ * />
4675
+ * );
4676
+ * }
4677
+ */
4678
+ function ForbiddenError({ primaryAction, secondaryAction, className }) {
4679
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
4680
+ ...STATUS_PAGE_PRESETS.forbidden,
4681
+ primaryAction,
4682
+ secondaryAction,
4683
+ className
4684
+ });
4685
+ }
4686
+ //#endregion
4687
+ //#region src/ui-library/gallery/application-error/ApplicationError.tsx
4688
+ /**
4689
+ * ApplicationError — Design System Component
4690
+ *
4691
+ * Full-page 500 / unexpected error screen. Composes StatusPage internally
4692
+ * using the `serverError` preset. Includes a dev-only collapsible details
4693
+ * panel (error message, stack trace, component stack) rendered only when
4694
+ * `import.meta.env.DEV && error !== undefined`.
4695
+ *
4696
+ * Navigation is the consumer's responsibility — wire onRetry and onDashboard.
4697
+ *
4698
+ * Two exports:
4699
+ *
4700
+ * ApplicationError — primary component. Consumer provides both callbacks.
4701
+ * Used as React Router `errorElement` (pair with useRouteError + useNavigate).
4702
+ *
4703
+ * ApplicationErrorFallback — convenience wrapper for ErrorBoundary usage.
4704
+ * Accepts onReset (maps to onRetry) and uses window.location.href for
4705
+ * dashboard navigation when outside router context.
4706
+ *
4707
+ * No routing imports in this file. Works with any router.
4708
+ *
4709
+ * Usage (router errorElement):
4710
+ * import { ApplicationError } from '@diwauhris/ui';
4711
+ * import { useRouteError, useNavigate } from 'react-router-dom';
4712
+ *
4713
+ * export function ErrorPage() {
4714
+ * const error = useRouteError();
4715
+ * const navigate = useNavigate();
4716
+ * return (
4717
+ * <ApplicationError
4718
+ * error={error}
4719
+ * onRetry={() => navigate(0)}
4720
+ * onDashboard={() => navigate('/dashboard')}
4721
+ * />
4722
+ * );
4723
+ * }
4724
+ *
4725
+ * Usage (ErrorBoundary fallback):
4726
+ * import { ApplicationErrorFallback } from '@diwauhris/ui';
4727
+ *
4728
+ * <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => (
4729
+ * <ApplicationErrorFallback
4730
+ * error={error}
4731
+ * onReset={resetErrorBoundary}
4732
+ * />
4733
+ * )} />
4734
+ */
4735
+ function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className }) {
4736
+ const showDevDetails = false;
4737
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
4738
+ className,
4739
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
4740
+ ...STATUS_PAGE_PRESETS.serverError,
4741
+ primaryAction: {
4742
+ label: "Try Again",
4743
+ onClick: onRetry
4744
+ },
4745
+ secondaryAction: {
4746
+ label: "Go to Dashboard",
4747
+ onClick: onDashboard
4748
+ }
4749
+ }), showDevDetails]
4750
+ });
4751
+ }
4752
+ /**
4753
+ * Convenience wrapper for use with class-based ErrorBoundary components.
4754
+ * Outside router context — uses window.location.href for dashboard navigation.
4755
+ * Maps `onReset` to ApplicationError's `onRetry`.
4756
+ */
4757
+ function ApplicationErrorFallback({ error, componentStack, errorId, onReset }) {
4758
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApplicationError, {
4759
+ error,
4760
+ componentStack,
4761
+ errorId,
4762
+ onRetry: onReset,
4763
+ onDashboard: () => {
4764
+ window.location.href = "/dashboard";
4765
+ }
4766
+ });
4767
+ }
4768
+ //#endregion
4621
4769
  //#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
4622
4770
  function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
4623
4771
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
@@ -8608,6 +8756,8 @@ exports.AccordionItem = AccordionItem;
8608
8756
  exports.AccordionTrigger = AccordionTrigger;
8609
8757
  exports.ActivityFeed = ActivityFeed;
8610
8758
  exports.Alert = Alert;
8759
+ exports.ApplicationError = ApplicationError;
8760
+ exports.ApplicationErrorFallback = ApplicationErrorFallback;
8611
8761
  exports.ApprovalTimeline = ApprovalTimeline;
8612
8762
  exports.AreaChart = AreaChart;
8613
8763
  exports.Avatar = Avatar;
@@ -8645,6 +8795,7 @@ exports.FieldContext = FieldContext;
8645
8795
  exports.FieldInput = FieldInput;
8646
8796
  exports.FileUpload = FileUpload;
8647
8797
  exports.FilterChip = FilterChip;
8798
+ exports.ForbiddenError = ForbiddenError;
8648
8799
  exports.Heatmap = Heatmap;
8649
8800
  exports.IconButton = IconButton;
8650
8801
  exports.Input = Input;
@@ -8654,6 +8805,7 @@ exports.LineChart = LineChart;
8654
8805
  exports.MaskedValue = MaskedValue;
8655
8806
  exports.Menu = Menu;
8656
8807
  exports.Modal = Modal;
8808
+ exports.NotFoundError = NotFoundError;
8657
8809
  exports.OrgChart = OrgChart;
8658
8810
  exports.OrgUnitTree = OrgUnitTree;
8659
8811
  exports.OtpInput = OtpInput;
package/lib/index.mjs CHANGED
@@ -4594,6 +4594,107 @@ function StatusPage({ eyebrow, title, description, code, icon, primaryAction, se
4594
4594
  });
4595
4595
  }
4596
4596
  //#endregion
4597
+ //#region src/ui-library/gallery/not-found-error/NotFoundError.tsx
4598
+ /**
4599
+ * NotFoundError — Design System Component
4600
+ *
4601
+ * Full-page 404 Not Found screen. Composes StatusPage internally using the
4602
+ * `notFound` preset. Navigation is the consumer's responsibility — wire it
4603
+ * via `primaryAction.onClick` and `secondaryAction.onClick`.
4604
+ *
4605
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
4606
+ *
4607
+ * Usage:
4608
+ * import { NotFoundError } from '@diwauhris/ui';
4609
+ * import { useNavigate } from 'react-router-dom';
4610
+ *
4611
+ * function NotFoundPage() {
4612
+ * const navigate = useNavigate();
4613
+ * return (
4614
+ * <NotFoundError
4615
+ * primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
4616
+ * secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
4617
+ * />
4618
+ * );
4619
+ * }
4620
+ */
4621
+ function NotFoundError({ primaryAction, secondaryAction, className }) {
4622
+ return /* @__PURE__ */ jsx(StatusPage, {
4623
+ ...STATUS_PAGE_PRESETS.notFound,
4624
+ primaryAction,
4625
+ secondaryAction,
4626
+ className
4627
+ });
4628
+ }
4629
+ //#endregion
4630
+ //#region src/ui-library/gallery/forbidden-error/ForbiddenError.tsx
4631
+ /**
4632
+ * ForbiddenError — Design System Component
4633
+ *
4634
+ * Full-page 403 Access Restricted screen. Composes StatusPage internally
4635
+ * using the `forbidden` preset. Navigation is the consumer's responsibility
4636
+ * — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
4637
+ *
4638
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
4639
+ *
4640
+ * Usage:
4641
+ * import { ForbiddenError } from '@diwauhris/ui';
4642
+ * import { useNavigate } from 'react-router-dom';
4643
+ *
4644
+ * function ForbiddenPage() {
4645
+ * const navigate = useNavigate();
4646
+ * return (
4647
+ * <ForbiddenError
4648
+ * primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
4649
+ * secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
4650
+ * />
4651
+ * );
4652
+ * }
4653
+ */
4654
+ function ForbiddenError({ primaryAction, secondaryAction, className }) {
4655
+ return /* @__PURE__ */ jsx(StatusPage, {
4656
+ ...STATUS_PAGE_PRESETS.forbidden,
4657
+ primaryAction,
4658
+ secondaryAction,
4659
+ className
4660
+ });
4661
+ }
4662
+ //#endregion
4663
+ //#region src/ui-library/gallery/application-error/ApplicationError.tsx
4664
+ function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className }) {
4665
+ const showDevDetails = false;
4666
+ return /* @__PURE__ */ jsxs("div", {
4667
+ className,
4668
+ children: [/* @__PURE__ */ jsx(StatusPage, {
4669
+ ...STATUS_PAGE_PRESETS.serverError,
4670
+ primaryAction: {
4671
+ label: "Try Again",
4672
+ onClick: onRetry
4673
+ },
4674
+ secondaryAction: {
4675
+ label: "Go to Dashboard",
4676
+ onClick: onDashboard
4677
+ }
4678
+ }), showDevDetails]
4679
+ });
4680
+ }
4681
+ /**
4682
+ * Convenience wrapper for use with class-based ErrorBoundary components.
4683
+ * Outside router context — uses window.location.href for dashboard navigation.
4684
+ * Maps `onReset` to ApplicationError's `onRetry`.
4685
+ */
4686
+ function ApplicationErrorFallback({ error, componentStack, errorId, onReset }) {
4687
+ return /* @__PURE__ */ jsx(ApplicationError, {
4688
+ error,
4689
+ componentStack,
4690
+ errorId,
4691
+ onRetry: onReset,
4692
+ onDashboard: () => {
4693
+ window.location.href = "/dashboard";
4694
+ }
4695
+ });
4696
+ }
4697
+ //#endregion
4597
4698
  //#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
4598
4699
  function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
4599
4700
  return /* @__PURE__ */ jsxs("article", {
@@ -8578,4 +8679,4 @@ var shadow = {
8578
8679
  overlay: "shadow-xl"
8579
8680
  };
8580
8681
  //#endregion
8581
- 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 };
8682
+ 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 };
@@ -0,0 +1,96 @@
1
+ /**
2
+ * ApplicationError — Design System Component
3
+ *
4
+ * Full-page 500 / unexpected error screen. Composes StatusPage internally
5
+ * using the `serverError` preset. Includes a dev-only collapsible details
6
+ * panel (error message, stack trace, component stack) rendered only when
7
+ * `import.meta.env.DEV && error !== undefined`.
8
+ *
9
+ * Navigation is the consumer's responsibility — wire onRetry and onDashboard.
10
+ *
11
+ * Two exports:
12
+ *
13
+ * ApplicationError — primary component. Consumer provides both callbacks.
14
+ * Used as React Router `errorElement` (pair with useRouteError + useNavigate).
15
+ *
16
+ * ApplicationErrorFallback — convenience wrapper for ErrorBoundary usage.
17
+ * Accepts onReset (maps to onRetry) and uses window.location.href for
18
+ * dashboard navigation when outside router context.
19
+ *
20
+ * No routing imports in this file. Works with any router.
21
+ *
22
+ * Usage (router errorElement):
23
+ * import { ApplicationError } from '@diwauhris/ui';
24
+ * import { useRouteError, useNavigate } from 'react-router-dom';
25
+ *
26
+ * export function ErrorPage() {
27
+ * const error = useRouteError();
28
+ * const navigate = useNavigate();
29
+ * return (
30
+ * <ApplicationError
31
+ * error={error}
32
+ * onRetry={() => navigate(0)}
33
+ * onDashboard={() => navigate('/dashboard')}
34
+ * />
35
+ * );
36
+ * }
37
+ *
38
+ * Usage (ErrorBoundary fallback):
39
+ * import { ApplicationErrorFallback } from '@diwauhris/ui';
40
+ *
41
+ * <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => (
42
+ * <ApplicationErrorFallback
43
+ * error={error}
44
+ * onReset={resetErrorBoundary}
45
+ * />
46
+ * )} />
47
+ */
48
+ export interface ApplicationErrorProps {
49
+ /**
50
+ * The caught error object.
51
+ * Used to extract message and stack in the dev-only details panel.
52
+ * Pass the value from useRouteError() or ErrorBoundary's error prop.
53
+ */
54
+ error?: unknown;
55
+ /**
56
+ * React component stack from ErrorInfo.componentStack.
57
+ * Shown in the dev panel when provided. Optional.
58
+ */
59
+ componentStack?: string;
60
+ /**
61
+ * Short error ID for support correlation (e.g. "ERR-A1B2C").
62
+ * Rendered below the action buttons when provided.
63
+ */
64
+ errorId?: string;
65
+ /**
66
+ * "Try Again" callback.
67
+ * Router usage: () => navigate(0)
68
+ * Boundary usage: onReset / resetErrorBoundary
69
+ */
70
+ onRetry: () => void;
71
+ /**
72
+ * "Go to Dashboard" callback.
73
+ * Router usage: () => navigate('/dashboard')
74
+ * Boundary usage: () => { window.location.href = '/dashboard'; }
75
+ */
76
+ onDashboard: () => void;
77
+ /** Additional class on the root wrapper. */
78
+ className?: string;
79
+ }
80
+ export interface ApplicationErrorFallbackProps {
81
+ /** The caught error object passed by the ErrorBoundary. */
82
+ error?: unknown;
83
+ /** React component stack from ErrorInfo.componentStack. */
84
+ componentStack?: string;
85
+ /** Short error ID for support correlation. */
86
+ errorId?: string;
87
+ /** Called when the user clicks "Try Again". Maps to onRetry. */
88
+ onReset: () => void;
89
+ }
90
+ export declare function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className, }: ApplicationErrorProps): import("react").JSX.Element;
91
+ /**
92
+ * Convenience wrapper for use with class-based ErrorBoundary components.
93
+ * Outside router context — uses window.location.href for dashboard navigation.
94
+ * Maps `onReset` to ApplicationError's `onRetry`.
95
+ */
96
+ export declare function ApplicationErrorFallback({ error, componentStack, errorId, onReset, }: ApplicationErrorFallbackProps): import("react").JSX.Element;
@@ -0,0 +1,39 @@
1
+ /**
2
+ * ForbiddenError — Design System Component
3
+ *
4
+ * Full-page 403 Access Restricted screen. Composes StatusPage internally
5
+ * using the `forbidden` preset. Navigation is the consumer's responsibility
6
+ * — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
7
+ *
8
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
9
+ *
10
+ * Usage:
11
+ * import { ForbiddenError } from '@diwauhris/ui';
12
+ * import { useNavigate } from 'react-router-dom';
13
+ *
14
+ * function ForbiddenPage() {
15
+ * const navigate = useNavigate();
16
+ * return (
17
+ * <ForbiddenError
18
+ * primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
19
+ * secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
20
+ * />
21
+ * );
22
+ * }
23
+ */
24
+ import type { StatusPageAction } from '../status-page/StatusPage';
25
+ export interface ForbiddenErrorProps {
26
+ /**
27
+ * Primary action button.
28
+ * Typically "Go to Dashboard" with onClick: () => navigate('/dashboard').
29
+ */
30
+ primaryAction: StatusPageAction;
31
+ /**
32
+ * Optional secondary action button.
33
+ * Typically "Go Back" with onClick: () => navigate(-1).
34
+ */
35
+ secondaryAction?: StatusPageAction;
36
+ /** Additional class on the root wrapper. */
37
+ className?: string;
38
+ }
39
+ export declare function ForbiddenError({ primaryAction, secondaryAction, className, }: ForbiddenErrorProps): import("react").JSX.Element;
@@ -0,0 +1,39 @@
1
+ /**
2
+ * NotFoundError — Design System Component
3
+ *
4
+ * Full-page 404 Not Found screen. Composes StatusPage internally using the
5
+ * `notFound` preset. Navigation is the consumer's responsibility — wire it
6
+ * via `primaryAction.onClick` and `secondaryAction.onClick`.
7
+ *
8
+ * No routing imports. Works with any router (React Router, Next.js, window.location).
9
+ *
10
+ * Usage:
11
+ * import { NotFoundError } from '@diwauhris/ui';
12
+ * import { useNavigate } from 'react-router-dom';
13
+ *
14
+ * function NotFoundPage() {
15
+ * const navigate = useNavigate();
16
+ * return (
17
+ * <NotFoundError
18
+ * primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
19
+ * secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
20
+ * />
21
+ * );
22
+ * }
23
+ */
24
+ import type { StatusPageAction } from '../status-page/StatusPage';
25
+ export interface NotFoundErrorProps {
26
+ /**
27
+ * Primary action button.
28
+ * Typically "Go to Dashboard" with onClick: () => navigate('/dashboard').
29
+ */
30
+ primaryAction: StatusPageAction;
31
+ /**
32
+ * Optional secondary action button.
33
+ * Typically "Go Back" with onClick: () => navigate(-1).
34
+ */
35
+ secondaryAction?: StatusPageAction;
36
+ /** Additional class on the root wrapper. */
37
+ className?: string;
38
+ }
39
+ export declare function NotFoundError({ primaryAction, secondaryAction, className, }: NotFoundErrorProps): import("react").JSX.Element;
@@ -110,6 +110,12 @@ export { EmptyState } from './gallery/empty-state/EmptyState';
110
110
  export type { EmptyStateProps } from './gallery/empty-state/EmptyState';
111
111
  export { StatusPage, STATUS_PAGE_PRESETS } from './gallery/status-page/StatusPage';
112
112
  export type { StatusPageProps, StatusPageAction } from './gallery/status-page/StatusPage';
113
+ export { NotFoundError } from './gallery/not-found-error/NotFoundError';
114
+ export type { NotFoundErrorProps } from './gallery/not-found-error/NotFoundError';
115
+ export { ForbiddenError } from './gallery/forbidden-error/ForbiddenError';
116
+ export type { ForbiddenErrorProps } from './gallery/forbidden-error/ForbiddenError';
117
+ export { ApplicationError, ApplicationErrorFallback } from './gallery/application-error/ApplicationError';
118
+ export type { ApplicationErrorProps, ApplicationErrorFallbackProps } from './gallery/application-error/ApplicationError';
113
119
  export { EmployeeCard } from './gallery/employee-card/EmployeeCard';
114
120
  export type { EmployeeCardProps, EmployeeCardMeta } from './gallery/employee-card/EmployeeCard';
115
121
  export { TreeView } from './gallery/tree-view/TreeView';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@diwauhris/ui",
3
3
  "private": false,
4
- "version": "1.7.18",
4
+ "version": "1.7.19",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [