@diwauhris/ui 1.6.0 → 1.7.1

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/gallery/validation-summary/ValidationSummary.d.ts

@@ -17,6 +17,13 @@
  *   setIssues([{ field: 'Employee ID', message: 'is required' }]);
  *   // Render:
  *   <ValidationSummary issues={issues} />
+ *
+ *   // With scroll-to-field (wizard steps):
+ *   <ValidationSummary
+ *     issues={issues}
+ *     fieldIds={{ 'Employee ID': 'employee-id-input', 'Position': 'position-select' }}
+ *     fieldLabels={{ 'Employee ID': 'Employee ID', 'Position': 'Position Title' }}
+ *   />
  */
 export interface ValidationIssue {
     /** Human-readable field label. */
@@ -32,8 +39,23 @@ export interface ValidationSummaryProps {
      * Default: "Review these fields before saving"
      */
     heading?: string;
+    /**
+     * Maps issue.field → the DOM element id that the user should be
+     * scrolled to when they click the error.
+     * When provided, each matching issue renders as a clickable link
+     * that scrolls to and focuses the target element.
+     * Issues with no matching key render as plain text.
+     */
+    fieldIds?: Record<string, string>;
+    /**
+     * Maps issue.field → a human-friendly display label.
+     * When provided, the display label replaces the raw field key in
+     * the rendered message. Useful when the field key is a code/ID and
+     * the label is the visible form field name.
+     */
+    fieldLabels?: Record<string, string>;
     /** Additional class on the root element. */
     className?: string;
 }
-export declare function ValidationSummary({ issues, heading, className, }: ValidationSummaryProps): import("react").JSX.Element | null;
+export declare function ValidationSummary({ issues, heading, fieldIds, fieldLabels, className, }: ValidationSummaryProps): import("react").JSX.Element | null;
 export type { ValidationIssue as ValidationSummaryIssue };

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';
@@ -142,6 +144,10 @@ 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 { ColumnManager, applyColumnOrder } from './gallery/column-manager/ColumnManager';
+export type { ColumnManagerProps, ColumnManagerColumn } from './gallery/column-manager/ColumnManager';
+export { MaskedValue } from './gallery/status-dot/MaskedValue';
+export type { MaskedValueProps } from './gallery/status-dot/MaskedValue';
 export { Toaster, toast } from 'sonner';
 export { statusMenuItems } from './gallery/status-actions/statusActions';
 export type { ActionMenuItem, Lifecycle, StatusTransitionRequest, StatusMenuOptions } from './gallery/status-actions/statusActions';

package/package.json

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