@diwauhris/ui 1.5.0 → 1.7.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/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/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 {};