@diwauhris/ui 1.5.0 → 1.6.0

package/lib/types/ui-library/gallery/charts/AreaChart.d.ts

@@ -0,0 +1,110 @@
+/**
+ * AreaChart — Design System Component
+ *
+ * SVG area/line chart with gradient fill, explicit Y-axis ticks, optional
+ * threshold line, point annotations, highlight regions, and multi-series support.
+ * No external charting library — native SVG only.
+ *
+ * Gradient IDs are scoped per instance via useId() to avoid SVG ID collisions
+ * when multiple charts appear on the same page.
+ *
+ * Usage:
+ *   <AreaChart
+ *     data={monthlyData}
+ *     series={{ dataKey: 'value', color: '#6366f1', fillOpacity: { top: 0.22, bottom: 0.01 } }}
+ *     yTicks={[0, 25, 50, 75, 100]}
+ *     yTickFormat={(v) => `${v}%`}
+ *     annotations={[{ dataIndex: 5, label: 'Peak', radius: 5, color: '#ef4444' }]}
+ *     height={170}
+ *   />
+ *
+ * Accessibility:
+ *   - role="img" on the SVG with aria-label
+ *   - Each dot has aria-label with label and value
+ *   - Decorative elements are aria-hidden
+ */
+/** Independent top/bottom gradient stop opacities */
+export interface GradientOpacity {
+    top: number;
+    bottom: number;
+}
+export interface AreaChartSeries {
+    /** Key in each data point object that holds the Y value */
+    dataKey: string;
+    /** Stroke and fill color (hex or rgb) */
+    color: string;
+    /** Stroke style. Default: 'solid' */
+    strokeStyle?: 'solid' | 'dashed';
+    /**
+     * Gradient area fill opacity.
+     * - number: same value applied to both top and bottom gradient stops
+     * - { top, bottom }: independent stop opacities for precise gradient control
+     * Default: { top: 0.15, bottom: 0 }
+     */
+    fillOpacity?: number | GradientOpacity;
+}
+export interface ThresholdLine {
+    /** Data value at which the horizontal reference line is drawn */
+    value: number;
+    /** Line color. Default: '#f59e0b' */
+    color?: string;
+    /** Line style. Default: 'dashed' */
+    strokeStyle?: 'solid' | 'dashed';
+}
+export interface ChartAnnotation {
+    /** Zero-based index into the data array */
+    dataIndex: number;
+    /** Text label rendered near the dot */
+    label: string;
+    /** Dot radius in SVG units. Default: 4 */
+    radius?: number;
+    /** Dot and label color. Defaults to the primary series color */
+    color?: string;
+    /** Position of the label relative to the dot. Default: 'above' */
+    labelPosition?: 'above' | 'below';
+}
+export interface HighlightRegion {
+    /** Inclusive start index */
+    startIndex: number;
+    /** Inclusive end index */
+    endIndex: number;
+    /** Fill color for the shaded region. Default: '#eef0ff' */
+    color?: string;
+    /** Optional label centered over the region */
+    label?: string;
+}
+export interface AreaChartDataPoint {
+    /** X-axis label */
+    label: string;
+    [key: string]: string | number;
+}
+export interface AreaChartProps {
+    /** Data points — each must have a 'label' string plus the series dataKey(s) */
+    data: AreaChartDataPoint[];
+    /**
+     * Series definition(s). Pass a single object for one series or an array for
+     * multi-series. Only the first series receives the gradient area fill.
+     */
+    series: AreaChartSeries | AreaChartSeries[];
+    /** Explicit Y-axis tick values. When omitted, no Y-axis grid lines are drawn. */
+    yTicks?: number[];
+    /** Format Y-axis tick labels. Default: String(v) */
+    yTickFormat?: (value: number) => string;
+    /**
+     * Show data-point circles on the primary series line.
+     * Default: true — pass false for charts where dots are not desired.
+     */
+    showDots?: boolean;
+    /** Horizontal threshold reference line */
+    threshold?: ThresholdLine;
+    /** Annotated data points rendered on top of regular dots */
+    annotations?: ChartAnnotation[];
+    /** Shaded background region between two x-axis indices */
+    highlightRegion?: HighlightRegion;
+    /** SVG height in pixels. Default: 170 */
+    height?: number;
+    /** Accessible description for screen readers */
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function AreaChart({ data, series, yTicks, yTickFormat, showDots, threshold, annotations, highlightRegion, height, 'aria-label': ariaLabel, className, }: AreaChartProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/charts/BarList.d.ts

@@ -0,0 +1,65 @@
+/**
+ * BarList — Design System Component
+ *
+ * Ranked horizontal bar list for categorical value distributions.
+ * Bars animate in from the left via .os-bar-in with configurable stagger.
+ * No external library — pure CSS animation.
+ *
+ * Usage:
+ *   <BarList
+ *     items={[
+ *       { label: 'Category A', value: 94, color: '#3b82f6' },
+ *       { label: 'Category B', value: 72, color: '#6366f1' },
+ *     ]}
+ *     totalLabel="Total"
+ *     staggerDelay={70}
+ *   />
+ *
+ * Accessibility:
+ *   - role="list" / role="listitem" semantics
+ *   - aria-label on each row conveys label + formatted value
+ *   - Bar fill is aria-hidden (data already conveyed by listitem label)
+ *   - .os-bar-in respects prefers-reduced-motion
+ */
+export interface BarListItem {
+    /** Row label */
+    label: string;
+    /** Raw numeric value */
+    value: number;
+    /**
+     * CSS color for the bar fill — hex, rgb, or named color only.
+     * Do NOT pass Tailwind class names (e.g. 'bg-blue-500') — they will
+     * not resolve at runtime and the bar will render colorless.
+     */
+    color: string;
+}
+export type BarHeight = 'h-1' | 'h-2' | 'h-2.5' | 'h-3' | 'h-4';
+export interface BarListProps {
+    /** Data rows */
+    items: BarListItem[];
+    /**
+     * Format the displayed value string.
+     * Default: bare number.
+     * Example: (v) => `${v}%` or (v) => `${v} users`
+     */
+    valueFormat?: (value: number) => string;
+    /**
+     * Label for the total row shown at the bottom of the list.
+     * When omitted, no total row is rendered.
+     */
+    totalLabel?: string;
+    /**
+     * Tailwind height class applied to both the bar track and the fill.
+     * Default: 'h-2'
+     */
+    barHeight?: BarHeight;
+    /**
+     * Stagger delay between bar animations in milliseconds.
+     * Each bar at index i receives: animationDelay = i × staggerDelay ms.
+     * Pass 0 to animate all bars simultaneously.
+     * Default: 70
+     */
+    staggerDelay?: number;
+    className?: string;
+}
+export declare function BarList({ items, valueFormat, totalLabel, barHeight, staggerDelay, className, }: BarListProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/charts/Charts.d.ts

@@ -5,14 +5,30 @@
  * Suitable for simple analytics/KPI displays.
  *
  * Components:
- *   BarChart  — vertical bar chart
- *   LineChart — line/area chart (SVG path)
+ *   BarChart      — vertical bar chart
+ *   LineChart     — line/area chart (SVG path)
+ *   CHART_PALETTE — shared default color sequence for multi-series charts
+ *
+ * Visual language (applied as defaults, no new props):
+ *   - BarChart: top-only rounded corners, subtle same-hue gradient fill,
+ *     baseline rule, value labels inside SVG above bars, comfortable gaps
+ *   - LineChart: gradient area fill fading to transparent, strokeWidth 2,
+ *     white-ring dots only when ≤ 12 data points, no horizontal distortion
  *
  * Accessibility:
- *   - role="img" on the SVG with aria-label describing the chart
- *   - Each bar/point has aria-label with value
- *   - Summary table available via a visually-hidden caption (optional)
+ *   - role="img" on every SVG with aria-label describing the chart
+ *   - Each bar/point has aria-label with label and value
+ *   - Decorative elements are aria-hidden
+ */
+/**
+ * Default color sequence for multi-series / per-item charts.
+ * Built on the brand's blue-sky hue family with a single warm accent.
+ * Import this directly when constructing per-item color arrays:
+ *
+ *   import { CHART_PALETTE } from '@diwauhris/ui';
+ *   const data = items.map((item, i) => ({ ...item, color: CHART_PALETTE[i % CHART_PALETTE.length] }));
  */
+export declare const CHART_PALETTE: readonly ["#034EA2", "#2D8ACA", "#4F6FBF", "#0E7490", "#B45309"];
 export interface ChartDataPoint {
     label: string;
     value: number;

package/lib/types/ui-library/gallery/combobox/Combobox.d.ts

@@ -10,5 +10,6 @@ export interface ComboboxProps {
     disabled?: boolean;
     loading?: boolean;
     error?: string;
+    'aria-label'?: string;
 }
-export declare function Combobox({ value, onChange, options, placeholder, className, disabled, loading, error }: ComboboxProps): import("react").JSX.Element;
+export declare function Combobox({ value, onChange, options, placeholder, className, disabled, loading, error, 'aria-label': ariaLabel }: ComboboxProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/org-chart/OrgChart.d.ts

@@ -0,0 +1,77 @@
+/**
+ * OrgChart — Design System Component
+ *
+ * A D3-powered SVG organization chart matching the UHRIS Company Structure
+ * diagram mode. Renders a top-down tree with rectangular nodes and
+ * stepped orthogonal connectors.
+ *
+ * Technology: D3 v7 (d3.hierarchy + d3.tree layout + d3.zoom)
+ * Already a production dependency — no new packages introduced.
+ *
+ * Visual design (sourced from CompanyStructurePage diagram mode):
+ *   Nodes:
+ *     - 250 × 84 px rounded rectangles (rx=14)
+ *     - Root (depth 0): dark navy fill (#0f172a), white text
+ *     - Children: white fill (#fff), slate border (#e2e8f0)
+ *     - drop-shadow: 0 6px 12px rgba(15,23,42,0.08)
+ *     - Name: 13px, font-weight 800, centered
+ *     - Description: 11px, font-weight 600, #64748b / #cbd5e1 (root)
+ *     - Selected: indigo border overlay ring
+ *   Connectors:
+ *     - Stepped orthogonal path: M→V→H→V
+ *     - Stroke: #cbd5e1, stroke-width 1.5
+ *   Canvas:
+ *     - Viewport sized to container; fit-to-view on render
+ *     - Zoom: scaleExtent [0.05, 1.8]
+ *     - Pan: mouse/touch drag
+ *     - Layout: nodeSize [280, 185] — horizontal × vertical spacing
+ *   Controls:
+ *     - ZoomIn, Reset, ZoomOut buttons (top-right overlay panel)
+ *
+ * Accessibility:
+ *   - SVG has role="img" + aria-label
+ *   - Zoom controls have aria-label
+ *   - Keyboard: Tab to control buttons; diagram itself is navigated visually
+ *   - Note: full ARIA tree semantics are not possible in an SVG diagram;
+ *     use OrgUnitTree for a fully keyboard-accessible list-based alternative
+ *
+ * Usage:
+ *   <OrgChart
+ *     nodes={orgNodes}
+ *     selectedId={selectedId}
+ *     onSelect={setSelectedId}
+ *     aria-label="Company organization chart"
+ *   />
+ */
+export interface OrgChartNode {
+    /** Unique identifier. */
+    id: string;
+    /** Primary label — org unit name. */
+    label: string;
+    /** Secondary text line inside the node. */
+    description?: string;
+    /** Child nodes. */
+    children?: OrgChartNode[];
+}
+export interface OrgChartProps {
+    /**
+     * Root-level nodes. The chart renders one connected tree.
+     * If multiple roots are provided, a synthetic invisible root is created
+     * to connect them (matching D3 hierarchy requirements).
+     */
+    nodes: OrgChartNode[];
+    /** Currently selected node id — renders an indigo ring on the node. */
+    selectedId?: string;
+    /** Called when a node is clicked. */
+    onSelect?: (id: string) => void;
+    /**
+     * Container height. Default: '75vh' — matching the production CompanyStructurePage.
+     * Pass a fixed pixel value for demos: '480px'.
+     */
+    height?: string;
+    /** Accessible label for the SVG element. */
+    'aria-label'?: string;
+    /** Additional class on the root container div. */
+    className?: string;
+}
+export declare function OrgChart({ nodes, selectedId, onSelect, height, 'aria-label': ariaLabel, className, }: OrgChartProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/org-unit-tree/OrgUnitTree.d.ts

@@ -0,0 +1,84 @@
+/**
+ * OrgUnitTree — Design System Component
+ *
+ * A card-based hierarchical organization tree matching the UHRIS
+ * Company Structure list-mode visual design. Purely presentational —
+ * no API calls, no domain logic, no permissions.
+ *
+ * Visual design (sourced from CompanyStructurePage StructureDesigner):
+ *   - Root node:  dark navy (bg-slate-900) card with light text
+ *   - Child nodes: white bordered cards with blue hover accent
+ *   - Connector:  left border (border-l border-slate-200) + indentation
+ *   - Icon badge: rounded-xl colored square containing the icon
+ *   - Actions:    hover-reveal slot (opacity-0 → group-hover:opacity-100)
+ *   - Meta:       right-aligned, hidden on narrow screens
+ *
+ * Accessibility (WAI-ARIA Tree pattern, RFC 1.2):
+ *   - role="tree" on root list
+ *   - role="treeitem" + aria-expanded + aria-selected + aria-level + aria-disabled
+ *   - role="group" on nested lists
+ *   - Keyboard: ArrowDown/Up/Left/Right/Home/End/Enter/Space
+ *   - Roving tabIndex: only focused item has tabIndex=0
+ *
+ * Usage:
+ *   <OrgUnitTree
+ *     nodes={orgNodes}
+ *     onSelect={(id) => navigate(`/org/${id}`)}
+ *     aria-label="Company structure"
+ *   />
+ */
+import { type ReactNode } from 'react';
+export interface OrgUnitNode {
+    /** Unique identifier. */
+    id: string;
+    /** Primary label (org unit name). */
+    label: string;
+    /** Secondary label shown below the main label. */
+    description?: string;
+    /**
+     * Icon rendered inside the colored badge square.
+     * Mark it aria-hidden="true" — the label is the accessible name.
+     */
+    icon?: ReactNode;
+    /**
+     * Right-side metadata slot (headcount, budget, status counts…).
+     * Caller provides any ReactNode. Hidden below md breakpoint.
+     */
+    meta?: ReactNode;
+    /**
+     * Action buttons shown on hover/focus-within.
+     * Use <IconButton aria-label="Edit {name}" />.
+     */
+    actions?: ReactNode;
+    /** Inline badge (StatusBadge, "Unit Head" tag, etc.). */
+    badge?: ReactNode;
+    /** Child nodes. */
+    children?: OrgUnitNode[];
+    /** Prevents selection; node is skipped by keyboard navigation. */
+    disabled?: boolean;
+}
+export interface OrgUnitTreeProps {
+    /** Root-level nodes. */
+    nodes: OrgUnitNode[];
+    /** Currently selected node id. */
+    selectedId?: string;
+    /** Called when a node is selected via click or keyboard. */
+    onSelect?: (id: string) => void;
+    /**
+     * IDs that start expanded (uncontrolled).
+     * Defaults to top-level node IDs.
+     */
+    defaultExpandedIds?: string[];
+    /**
+     * Controlled expanded IDs. When provided, caller owns expansion state.
+     * Must supply onExpandedChange to update.
+     */
+    expandedIds?: string[];
+    /** Called when expansion state changes (controlled mode). */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Accessible label for the tree. */
+    'aria-label'?: string;
+    /** Additional class on the root element. */
+    className?: string;
+}
+export declare function OrgUnitTree({ nodes, selectedId, onSelect, defaultExpandedIds, expandedIds: controlledExpandedIds, onExpandedChange, 'aria-label': ariaLabel, className, }: OrgUnitTreeProps): import("react").JSX.Element | null;

package/lib/types/ui-library/gallery/page-sample/IsoCubeBlock.d.ts

@@ -0,0 +1,28 @@
+/**
+ * IsoCubeBlock — Design System Component
+ *
+ * DIWA brand geometric watermark — isometric staircase boxes.
+ * Reference: DIWA Certificate bottom-right corner decoration.
+ *
+ * Three-faced isometric boxes arranged in a 4×4 diagonal staircase
+ * (bottom-left → top-right). Drop it as an absolute-positioned child
+ * in any container to get the brand watermark effect.
+ *
+ * Usage:
+ *   <div className="relative overflow-hidden">
+ *     <IsoCubeBlock />
+ *     {children}
+ *   </div>
+ *
+ * Colors match DIWA Certificate spec:
+ *   top face  #F3F3F5 (light grey)
+ *   left face #7D739B (brand purple)
+ *   right face #9B92B8 (lighter purple)
+ */
+export interface IsoCubeBlockProps {
+    /** Width of each box in SVG units. Default: 80 */
+    boxWidth?: number;
+    /** Additional className on the SVG element */
+    className?: string;
+}
+export declare function IsoCubeBlock({ boxWidth, className }: IsoCubeBlockProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/template-samples/templates/PafTemplate.d.ts

@@ -0,0 +1,57 @@
+/**
+ * PafTemplate — self-contained preview component
+ *
+ * Ported from unified-hris/components/PAFTemplate.tsx.
+ * All context deps removed. Data passed via props.
+ */
+interface PafSalaryComponent {
+    label: string;
+    from: string;
+    to: string;
+}
+export interface PafPreviewData {
+    id: string;
+    type: string;
+    date: string;
+    effectiveDate?: string;
+    fromTemplate?: string;
+    toTemplate?: string;
+    employee: {
+        name: string;
+        idNo: string;
+        position: string;
+        department: string;
+        dateHired?: string;
+    };
+    from: {
+        rank: string;
+        status: string;
+        position: string;
+        department: string;
+        company: string;
+        supervisor: string;
+        departmentHead: string;
+        basicSalary: string;
+    };
+    to: {
+        rank: string;
+        status: string;
+        position: string;
+        department: string;
+        company: string;
+        supervisor: string;
+        departmentHead: string;
+        basicSalary: string;
+    };
+    reason: string;
+    preparedBy: string;
+    preparedByTitle?: string;
+    approvedBy?: string;
+    approvedByTitle?: string;
+    salaryComponents?: PafSalaryComponent[];
+}
+interface Props {
+    data: PafPreviewData;
+}
+export declare function PafTemplate({ data }: Props): import("react").JSX.Element;
+export {};

package/lib/types/ui-library/gallery/template-samples/templates/PayslipTemplate.d.ts

@@ -0,0 +1,42 @@
+/**
+ * PayslipTemplate — self-contained preview component
+ *
+ * Ported from unified-hris/components/PayslipTemplate.tsx.
+ * No context deps. All data prop-driven with sane defaults.
+ */
+export interface PayslipPreviewData {
+    id: string;
+    name: string;
+    role: string;
+    department: string;
+    payPeriod?: string;
+    netPay?: number;
+    rates?: {
+        hourly: number;
+        daily: number;
+        monthly: number;
+    };
+    taxCode?: string;
+    taxableGross?: number;
+    nonTaxableGross?: number;
+    ytd?: {
+        gross: number;
+        tax: number;
+    };
+    leaveBalances?: {
+        vacation: {
+            remaining: number;
+        };
+        sick: {
+            remaining: number;
+        };
+        personal?: {
+            remaining: number;
+        };
+    };
+}
+interface Props {
+    data: PayslipPreviewData;
+}
+export declare function PayslipTemplate({ data }: Props): import("react").JSX.Element;
+export {};

package/lib/types/ui-library/gallery/template-samples/templates/ReportTemplate.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ReportTemplate — self-contained preview component
+ *
+ * A generic HRIS Masterlist / Report document layout.
+ * Mimics the tabular report format used in unified-hris reports.
+ */
+export interface ReportPreviewData {
+    title?: string;
+    subtitle?: string;
+    asOf?: string;
+    preparedBy?: string;
+    company?: string;
+}
+interface Props {
+    data: ReportPreviewData;
+}
+export declare function ReportTemplate({ data }: Props): import("react").JSX.Element;
+export {};

package/lib/types/ui-library/gallery/template-samples/templates/TimekeepingTemplate.d.ts

@@ -0,0 +1,22 @@
+/**
+ * TimekeepingTemplate — self-contained preview component
+ *
+ * Ported from unified-hris/components/TimekeepingFileTemplate.tsx.
+ * No context deps. All data is mock + prop-driven.
+ */
+import React from 'react';
+export interface TimekeepingPreviewData {
+    employee: {
+        name: string;
+        role: string;
+        department: string;
+        empId?: string;
+        supervisor?: string;
+    };
+    period: string;
+}
+interface Props {
+    data: TimekeepingPreviewData;
+}
+export declare function TimekeepingTemplate({ data }: Props): React.JSX.Element;
+export {};

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

@@ -116,10 +116,28 @@ export { PermissionMatrix } from './gallery/permission-matrix/PermissionMatrix';
 export type { PermissionMatrixProps, PermissionMatrixCell } from './gallery/permission-matrix/PermissionMatrix';
 export { Calendar } from './gallery/calendar/Calendar';
 export type { CalendarProps } from './gallery/calendar/Calendar';
-export { BarChart, LineChart } from './gallery/charts/Charts';
+export { BarChart, LineChart, CHART_PALETTE } from './gallery/charts/Charts';
 export type { BarChartProps, LineChartProps, ChartDataPoint } from './gallery/charts/Charts';
+export { AreaChart } from './gallery/charts/AreaChart';
+export type { AreaChartProps, AreaChartSeries, AreaChartDataPoint, GradientOpacity, ThresholdLine, ChartAnnotation, HighlightRegion } from './gallery/charts/AreaChart';
+export { BarList } from './gallery/charts/BarList';
+export type { BarListProps, BarListItem, BarHeight } from './gallery/charts/BarList';
 export { Heatmap } from './gallery/heatmap/Heatmap';
 export type { HeatmapProps, HeatmapDataPoint, HeatmapScale } from './gallery/heatmap/Heatmap';
+export { OrgChart } from './gallery/org-chart/OrgChart';
+export type { OrgChartProps, OrgChartNode } from './gallery/org-chart/OrgChart';
+export { OrgUnitTree } from './gallery/org-unit-tree/OrgUnitTree';
+export type { OrgUnitTreeProps, OrgUnitNode } from './gallery/org-unit-tree/OrgUnitTree';
+export { PafTemplate } from './gallery/template-samples/templates/PafTemplate';
+export type { PafPreviewData } from './gallery/template-samples/templates/PafTemplate';
+export { IsoCubeBlock } from './gallery/page-sample/IsoCubeBlock';
+export type { IsoCubeBlockProps } from './gallery/page-sample/IsoCubeBlock';
+export { PayslipTemplate } from './gallery/template-samples/templates/PayslipTemplate';
+export type { PayslipPreviewData } from './gallery/template-samples/templates/PayslipTemplate';
+export { ReportTemplate } from './gallery/template-samples/templates/ReportTemplate';
+export type { ReportPreviewData } from './gallery/template-samples/templates/ReportTemplate';
+export { TimekeepingTemplate } from './gallery/template-samples/templates/TimekeepingTemplate';
+export type { TimekeepingPreviewData } from './gallery/template-samples/templates/TimekeepingTemplate';
 export { Statistic } from './gallery/stat-card/Statistic';
 export type { StatisticProps, StatisticTrend, StatisticVariant } from './gallery/stat-card/Statistic';
 export { StatusDot } from './gallery/status-dot/StatusDot';

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

@@ -25,13 +25,7 @@ export interface ComponentEntry {
 export declare const GALLERY_CATEGORIES: readonly ["Foundations", "Inputs", "Display", "Navigation", "Overlay", "Layout", "Data Display", "Enterprise"];
 export type GalleryCategory = typeof GALLERY_CATEGORIES[number];
 export declare const COMPONENT_REGISTRY: ComponentEntry[];
-/** All components marked popular */
-export declare const POPULAR_COMPONENTS: ComponentEntry[];
-/** Components grouped by category, preserving GALLERY_CATEGORIES order */
-export declare function getComponentsByCategory(): Map<GalleryCategory, ComponentEntry[]>;
-/** Search the registry by query (name, aliases, category) */
-export declare function searchComponents(query: string): ComponentEntry[];
-/** Look up a single component by id */
-export declare function getComponent(id: string): ComponentEntry | undefined;
-/** Look up related components by id list */
+/** Look up multiple components by id for the RelatedComponents section */
 export declare function getRelatedComponents(ids: string[]): ComponentEntry[];
+/** Get all components grouped by category as a Map */
+export declare function getComponentsByCategory(): Map<GalleryCategory, ComponentEntry[]>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [
@@ -35,7 +35,8 @@
     "build:css": "vite build --config vite.css.config.ts",
     "build:dts": "tsc --project tsconfig.lib.json --outDir lib/types",
     "build:lib": "tsc -b && vite build --config vite.lib.config.ts && npm run build:css && npm run build:dts",
-    "lint": "eslint .",
+    "test": "node --experimental-vm-modules node_modules/.bin/jest --config jest.config.cjs",
+    "test:audit": "node --experimental-vm-modules node_modules/.bin/jest --config jest.config.cjs --verbose",
     "preview": "vite preview"
   },
   "peerDependencies": {
@@ -58,17 +59,29 @@
     "@fontsource/barlow": "^5.3.0"
   },
   "devDependencies": {
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
+    "@babel/preset-react": "^8.0.1",
+    "@babel/preset-typescript": "^8.0.1",
     "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
     "@types/d3": "^7.4.3",
+    "@types/jest": "^30.0.0",
     "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.4",
     "autoprefixer": "^10.5.2",
+    "babel-jest": "^30.4.1",
     "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "globals": "^17.7.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.4.2",
+    "jest-axe": "^11.0.0",
+    "jest-environment-jsdom": "^30.4.1",
     "postcss": "^8.5.15",
     "tailwindcss": "^3.4.17",
     "typescript": "~6.0.2",