@pagamio/frontend-commons-lib 0.8.239 → 0.8.243

package/lib/components/ui/Select.js

@@ -21,19 +21,20 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
                 .map((child) => {
                 if (!React.isValidElement(child))
                     return null;
+                const childProps = child.props;
                 // Handle SelectGroup
                 if (child.type === SelectGroup) {
-                    const filteredGroupChildren = filterChildren(child.props.children);
+                    const filteredGroupChildren = filterChildren(childProps.children);
                     if (filteredGroupChildren.length === 0)
                         return null;
                     return React.cloneElement(child, {
-                        ...child.props,
+                        ...childProps,
                         children: filteredGroupChildren,
                     });
                 }
                 // Handle SelectItem
-                if (typeof child.props.children === 'string' &&
-                    !child.props.children.toLowerCase().includes(searchTerm.toLowerCase())) {
+                if (typeof childProps.children === 'string' &&
+                    !childProps.children.toLowerCase().includes(searchTerm.toLowerCase())) {
                     return null;
                 }
                 return child;
@@ -44,9 +45,9 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
     }, [searchTerm, children]);
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('z-[110] relative min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
                 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: {
-                backgroundColor: 'var(--popover, hsl(0 0% 100%))',
-                color: 'var(--popover-foreground, hsl(240 10% 3.9%))',
-                borderColor: 'var(--border, hsl(240 5.9% 90%))',
+                backgroundColor: 'hsl(var(--popover, 0 0% 100%))',
+                color: 'hsl(var(--popover-foreground, 240 10% 3.9%))',
+                borderColor: 'hsl(var(--border, 240 5.9% 90%))',
             }, position: position, ...props, children: [_jsx("div", { className: "p-2 border-b", children: _jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-1 focus:ring-gray-400", onKeyDown: (e) => {
                             e.stopPropagation();
                         } }) }), _jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1 max-h-[200px] overflow-y-auto', position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]'), children: filteredChildren.length > 0 ? (filteredChildren) : (_jsx("div", { className: "px-2 py-1.5 text-sm text-gray-500", children: "No options found" })) }), _jsx(SelectScrollDownButton, {})] }) }));

package/lib/components/ui/Switch.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface SwitchProps {
     id: string;
     checked: boolean;
@@ -6,5 +7,5 @@ interface SwitchProps {
     disabled?: boolean;
     className?: string;
 }
-declare const Switch: ({ id, checked, onChange, label, disabled, className, ...props }: SwitchProps) => JSX.Element;
+declare const Switch: ({ id, checked, onChange, label, disabled, className, ...props }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/lib/components/ui/TailwindIndicator.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function TailwindIndicator() {
-    if (process.env.NODE_ENV === 'production')
+    // Use Vite-compatible env check. Avoids process.env.NODE_ENV which crashes in Vite browser bundles.
+    const isProduction = import.meta?.env?.PROD === true;
+    if (isProduction)
         return null;
     return (_jsxs("div", { className: "fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white", children: [_jsx("div", { className: "block sm:hidden", children: "xs" }), _jsx("div", { className: "hidden sm:block md:hidden", children: "sm" }), _jsx("div", { className: "hidden md:block lg:hidden", children: "md" }), _jsx("div", { className: "hidden lg:block xl:hidden", children: "lg" }), _jsx("div", { className: "hidden xl:block 2xl:hidden", children: "xl" }), _jsx("div", { className: "hidden 2xl:block", children: "2xl" })] }));
 }

package/lib/components/ui/Tooltip.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';

package/lib/components/ui/index.d.ts

@@ -35,6 +35,7 @@ export { default as ImageComponent } from './ImageComponent';
 export { default as Input } from './Input';
 export { default as Label } from './Label';
 export { default as Loader, type LoaderProps } from './Loader';
+export { default as PageLoader, type PageLoaderProps } from './PageLoader';
 export { default as Modal, type ModalProps } from './Modal';
 export { default as MultiSelect, type MultiSelectProps } from './MultiSelect';
 export { default as PhoneInput, type PhoneInputProps } from './PhoneInput';

package/lib/components/ui/index.js

@@ -37,6 +37,7 @@ export { default as ImageComponent } from './ImageComponent';
 export { default as Input } from './Input';
 export { default as Label } from './Label';
 export { default as Loader } from './Loader';
+export { default as PageLoader } from './PageLoader';
 export { default as Modal } from './Modal';
 export { default as MultiSelect } from './MultiSelect';
 export { default as PhoneInput } from './PhoneInput';

package/lib/context/BreadcrumbContext.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HiChartPie } from 'react-icons/hi';
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';

package/lib/dashboard-visuals/components/ChartWrapper.d.ts

@@ -7,5 +7,5 @@ interface ChartWrapperProps {
     onRetry: () => void;
     children: ReactNode;
 }
-declare const ChartWrapper: ({ loading, error, isEmpty, onRetry, children }: ChartWrapperProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+declare const ChartWrapper: ({ loading, error, isEmpty, onRetry, children }: ChartWrapperProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 export default ChartWrapper;

package/lib/dashboard-visuals/components/DataTable.js

@@ -52,6 +52,6 @@ const ReusableTable = ({ columns, data, title, initialState, enableGlobalSearch
         enableStickyHeader,
         tableOptions,
     ]);
-    return (_jsx(MantineReactTable, { ...tableOptionsMerged, renderTopToolbarCustomActions: () => title ? (_jsx(Text, { size: "lg", weight: 700, children: title })) : null }));
+    return (_jsx(MantineReactTable, { ...tableOptionsMerged, renderTopToolbarCustomActions: () => title ? (_jsx(Text, { size: "lg", fw: 700, children: title })) : null }));
 };
 export default ReusableTable;

package/lib/dashboard-visuals/components/ErrorState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ErrorState = ({ error, onRetry }) => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center space-y-2 py-4", children: [_jsx("div", { className: "text-red-500 mb-2", children: _jsx("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsx("p", { className: "text-sm text-gray-600 text-center", children: error.message ?? 'Failed to fetch data' }), onRetry && (_jsx("button", { onClick: onRetry, className: "mt-2 px-4 py-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600 transition-colors", children: "Retry" }))] }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center space-y-2 py-4", children: [_jsx("div", { className: "text-red-500 mb-2", children: _jsx("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsx("p", { className: "text-sm text-gray-600 text-center", children: error.message ?? 'Failed to fetch data' }), onRetry && (_jsx("button", { onClick: onRetry, className: "mt-2 px-4 py-2 text-sm text-white bg-primary rounded hover:opacity-90 transition-colors", children: "Retry" }))] }));
 };
 export default ErrorState;

package/lib/dashboard-visuals/components/Switch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 const CustomSwitch = ({ checked, onCheckedChange, themeColor }) => {
-    return (_jsx(SwitchPrimitive.Root, { className: `relative inline-flex h-6 w-11 items-center rounded-full border-2 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500`, checked: checked, onCheckedChange: onCheckedChange, style: {
+    return (_jsx(SwitchPrimitive.Root, { className: `relative inline-flex h-6 w-11 items-center rounded-full border-2 transition-colors focus:outline-none focus:ring-2 focus:ring-primary`, checked: checked, onCheckedChange: onCheckedChange, style: {
             backgroundColor: checked ? themeColor : '#E5E7EB',
         }, children: _jsx(SwitchPrimitive.Thumb, { className: `block h-4 w-4 rounded-full border-transparent bg-white transition-transform ${checked ? 'translate-x-5' : 'translate-x-1'}`, style: {
                 border: `2px solid ${themeColor}`,

package/lib/dashboard-visuals/components/molecules/NoChartData.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HiChartPie, HiInformationCircle, HiTable } from 'react-icons/hi';
 const NoChartData = ({ onSwitchToTable }) => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-[60vh] p-6 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "relative mb-4", children: [_jsx(HiChartPie, { className: "w-16 h-16 text-gray-300" }), _jsx("div", { className: "absolute -top-1 -right-1", children: _jsx(HiInformationCircle, { className: "w-6 h-6 text-blue-500" }) })] }), _jsx("h3", { className: "text-xl font-semibold text-gray-700 mb-2", children: "Chart Visualization Unavailable" }), _jsx("p", { className: "text-gray-600 text-center max-w-md mb-6", children: "The chart visualization is not available for this dataset. You can still view and analyze the data in table format." }), onSwitchToTable && (_jsxs("button", { onClick: onSwitchToTable, className: "flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg \n                    hover:bg-blue-600 transition-colors duration-200 shadow-sm", children: [_jsx(HiTable, { className: "w-5 h-5" }), _jsx("span", { children: "View Data Table" })] })), _jsx("div", { className: "mt-8 p-4 bg-blue-50 rounded-lg max-w-md", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(HiInformationCircle, { className: "w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-blue-700", children: [_jsx("p", { className: "font-medium mb-1", children: "Why might chart data be unavailable?" }), _jsxs("ul", { className: "list-disc list-inside space-y-1 ml-2", children: [_jsx("li", { children: "The dataset is too large to be properly rendered for chart visualization" }), _jsx("li", { children: "The dataset structure doesn't support chart visualization" }), _jsx("li", { children: "The required data fields for charting are missing" }), _jsx("li", { children: "The data format is incompatible with chart rendering" })] })] })] }) })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-[60vh] p-6 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "relative mb-4", children: [_jsx(HiChartPie, { className: "w-16 h-16 text-gray-300" }), _jsx("div", { className: "absolute -top-1 -right-1", children: _jsx(HiInformationCircle, { className: "w-6 h-6 text-blue-500" }) })] }), _jsx("h3", { className: "text-xl font-semibold text-gray-700 mb-2", children: "Chart Visualization Unavailable" }), _jsx("p", { className: "text-gray-600 text-center max-w-md mb-6", children: "The chart visualization is not available for this dataset. You can still view and analyze the data in table format." }), onSwitchToTable && (_jsxs("button", { onClick: onSwitchToTable, className: "flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg\n                    hover:opacity-90 transition-colors duration-200 shadow-sm", children: [_jsx(HiTable, { className: "w-5 h-5" }), _jsx("span", { children: "View Data Table" })] })), _jsx("div", { className: "mt-8 p-4 bg-blue-50 rounded-lg max-w-md", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(HiInformationCircle, { className: "w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-blue-700", children: [_jsx("p", { className: "font-medium mb-1", children: "Why might chart data be unavailable?" }), _jsxs("ul", { className: "list-disc list-inside space-y-1 ml-2", children: [_jsx("li", { children: "The dataset is too large to be properly rendered for chart visualization" }), _jsx("li", { children: "The dataset structure doesn't support chart visualization" }), _jsx("li", { children: "The required data fields for charting are missing" }), _jsx("li", { children: "The data format is incompatible with chart rendering" })] })] })] }) })] }));
 };
 export default NoChartData;

package/lib/dashboard-visuals/hooks/useChartData.js

@@ -1,6 +1,27 @@
-import { isEqual } from 'lodash';
 import { useCallback, useEffect, useRef } from 'react';
 import { useApiSWRWithMutation } from '../../api';
+/** Lightweight deep-equal (replaces lodash/isEqual to avoid CJS/ESM interop issues) */
+function deepEqual(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (typeof a !== typeof b)
+        return false;
+    if (Array.isArray(a)) {
+        if (!Array.isArray(b) || a.length !== b.length)
+            return false;
+        return a.every((v, i) => deepEqual(v, b[i]));
+    }
+    if (typeof a === 'object') {
+        const ka = Object.keys(a);
+        const kb = Object.keys(b);
+        if (ka.length !== kb.length)
+            return false;
+        return ka.every((k) => deepEqual(a[k], b[k]));
+    }
+    return false;
+}
 // Constants for cache control
 const CACHE_EXPIRY_TIME = 5 * 60 * 1000; // 5 minutes in milliseconds
 /**
@@ -14,7 +35,7 @@ export const useChartData = (url, query, transform) => {
     const lastFetchTimeRef = useRef(null);
     // Custom comparison function to determine if data has changed
     const isDataEqual = useCallback((a, b) => {
-        return isEqual(a, b);
+        return deepEqual(a, b);
     }, []);
     // Custom cache comparison function for SWR to determine if data needs to be revalidated
     const compareCache = useCallback((cachedData, newData) => {

package/lib/dashboard-visuals/hooks/useChartDataV2.js

@@ -7,7 +7,7 @@
  */
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useApi } from '../../api/context';
+import { useApiSafe } from '../../api/context';
 /**
  * Hook for fetching chart data using TanStack Query
  *
@@ -39,12 +39,14 @@ import { useApi } from '../../api/context';
 export function useChartDataV2({ url, query, transform, enabled = true, staleTime = 5 * 60 * 1000, // 5 minutes
 gcTime = 10 * 60 * 1000, // 10 minutes
 queryKey: customQueryKey, onSuccess, onError, }) {
-    const api = useApi();
+    const api = useApiSafe();
     const queryClient = useQueryClient();
     // Generate query key from url and query params
     const queryKey = useMemo(() => customQueryKey ?? ['chart-data', url, query], [customQueryKey, url, query]);
     // Fetch function using POST
     const fetchChartData = useCallback(async () => {
+        if (!api)
+            throw new Error('ApiProvider is required for fetch-mode charts');
         const response = await api.post(url, query);
         onSuccess?.(response);
         return response;

package/lib/dashboard-visuals/v2/components/ApexChartWrapper.js

@@ -10,15 +10,58 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Error and empty states with Tabler icons
  */
 import { IconAlertTriangle, IconChartBar, IconRefresh } from '@tabler/icons-react';
-import dynamic from 'next/dynamic';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { SkeletonChart } from '../../../components/ui/Skeleton';
 import { cn } from '../../../helpers/utils';
-// Dynamically import ApexCharts to avoid SSR issues
-const ReactApexChart = dynamic(() => import('react-apexcharts'), {
-    ssr: false,
-    loading: () => (_jsx("div", { className: "flex h-full min-h-[200px] items-center justify-center p-4", children: _jsx(SkeletonChart, { height: 200 }) })),
-});
+function ChartLoadingFallback() {
+    return (_jsx("div", { className: "flex h-full min-h-[200px] items-center justify-center p-4", children: _jsx(SkeletonChart, { height: 200 }) }));
+}
+/**
+ * Client-only ApexChart component — dynamically imports react-apexcharts
+ * only in the browser to avoid SSR `window is not defined` errors.
+ */
+function ClientOnlyApexChart(props) {
+    const [Chart, setChart] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        import('react-apexcharts')
+            .then((mod) => {
+            if (!cancelled) {
+                // Handle CJS/ESM interop: mod.default may be the component directly,
+                // or mod.default.default in double-wrapped CJS scenarios,
+                // or mod itself if it's already a function (ESM default re-export).
+                const Component = typeof mod.default === 'function'
+                    ? mod.default
+                    : typeof mod.default?.default === 'function'
+                        ? mod.default.default
+                        : typeof mod === 'function'
+                            ? mod
+                            : null;
+                if (!Component) {
+                    setError('Failed to load chart component');
+                    return;
+                }
+                setChart(() => Component);
+            }
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setError(err.message);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    if (error) {
+        return (_jsxs("div", { className: "flex h-full min-h-[200px] items-center justify-center p-4 text-red-500", children: ["Chart loading error: ", error] }));
+    }
+    if (!Chart) {
+        return _jsx(ChartLoadingFallback, {});
+    }
+    return _jsx(Chart, { ...props });
+}
 /**
  * Default chart options with Pagamio theme
  */
@@ -180,7 +223,7 @@ containerClassName, loadingClassName, errorClassName, emptyClassName, iconClassN
     if (isEmpty || !series || (Array.isArray(series) && series.length === 0)) {
         return (emptyComponent ?? (_jsx("div", { className: cn('flex items-center justify-center', className, emptyClassName), style: { height: heightStyle }, children: _jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [_jsx("div", { className: cn('flex h-12 w-12 items-center justify-center rounded-full bg-muted', iconClassName), children: _jsx(IconChartBar, { size: 24, className: "text-muted-foreground" }) }), _jsx("p", { className: cn('text-sm text-muted-foreground', messageClassName), children: emptyMessage })] }) })));
     }
-    return (_jsx("div", { className: cn('w-full', className, containerClassName), children: _jsx(ReactApexChart, { type: type, series: series, options: options, height: height, width: width }) }));
+    return (_jsx("div", { className: cn('w-full', className, containerClassName), children: _jsx(ClientOnlyApexChart, { type: type, series: series, options: options, height: height, width: width }) }));
 };
 export { ApexChartWrapper };
 export default ApexChartWrapper;

package/lib/dashboard-visuals/v2/components/DashboardWrapperV2.js

@@ -103,7 +103,7 @@ const DashboardWrapperV2 = ({ header, sections, userName = 'User', businessUnitI
     if (!businessUnitId && emptyState) {
         return (_jsx(DashboardEmptyState, { icon: emptyState.icon, title: emptyState.title, description: emptyState.description, action: emptyState.action }));
     }
-    return (_jsxs("div", { className: cn('min-h-screen bg-background p-6', className), children: [header && (_jsx(DashboardHeader, { title: resolveTitle(), subtitle: header.subtitle, showDateFilter: header.showDateFilter, dateFilterOptions: header.dateFilterOptions || DEFAULT_DATE_FILTER_OPTIONS, dateFilter: dateFilter, onDateFilterChange: handleDateFilterChange, useDateRangePicker: header.useDateRangePicker, dateRange: dateRange, onDateRangeChange: onDateRangeChange, filters: header.filters, filterValues: filterValues, onFilterChange: onFilterChange, showRefresh: header.showRefresh, onRefresh: onRefresh, loading: loading, actions: header.actions, className: header.className })), _jsx("div", { className: contentClassName, children: sections.map((section) => (_jsx(SectionRenderer, { section: section, loading: loading }, section.type === 'stat-cards'
+    return (_jsxs("div", { className: cn('min-h-screen transition-[margin-left] duration-200 ease-in-out margin-left: 16rem;', className), children: [header && (_jsx(DashboardHeader, { title: resolveTitle(), subtitle: header.subtitle, showDateFilter: header.showDateFilter, dateFilterOptions: header.dateFilterOptions || DEFAULT_DATE_FILTER_OPTIONS, dateFilter: dateFilter, onDateFilterChange: handleDateFilterChange, useDateRangePicker: header.useDateRangePicker, dateRange: dateRange, onDateRangeChange: onDateRangeChange, filters: header.filters, filterValues: filterValues, onFilterChange: onFilterChange, showRefresh: header.showRefresh, onRefresh: onRefresh, loading: loading, actions: header.actions, className: header.className })), _jsx("div", { className: contentClassName, children: sections.map((section) => (_jsx(SectionRenderer, { section: section, loading: loading }, section.type === 'stat-cards'
                     ? section.config.id
                     : section.type === 'charts'
                         ? section.config.id

package/lib/dashboard-visuals/visuals/DistributionChart.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ChartToolTipProps } from '../types';
 export interface DataPoint {
     value: number;
@@ -7,5 +8,5 @@ interface DistributionChartProps {
     data: DataPoint[];
     chartToolTip?: ChartToolTipProps;
 }
-declare const DistributionChart: ({ data, chartToolTip }: DistributionChartProps) => JSX.Element;
+declare const DistributionChart: ({ data, chartToolTip }: DistributionChartProps) => React.JSX.Element;
 export default DistributionChart;

package/lib/form-engine/Form.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import FormEngine from './FormEngine';
-import { setupInputRegistry } from './registry';
+import { isRegistryReady, setupInputRegistry } from './registry';
 const FormEngineForm = ({ fieldDefinitions, initialValues = {}, layout = 'vertical', isNotTrigger, showCancelButton, onFormSubmit = () => { }, onFormCancel = () => { }, }) => {
     const handleSubmit = async (dto) => {
         onFormSubmit(dto);
     };
+    const [ready, setReady] = useState(isRegistryReady);
     useEffect(() => {
-        setupInputRegistry();
-    }, []);
+        if (!ready) {
+            setupInputRegistry().then(() => setReady(true));
+        }
+    }, [ready]);
+    if (!ready)
+        return null;
     return (_jsx(FormEngine, { fields: fieldDefinitions, onSubmit: handleSubmit, layout: layout, initialValues: initialValues, isNotTrigger: isNotTrigger, showCancelButton: showCancelButton, onCancel: onFormCancel }));
 };
 export default FormEngineForm;

package/lib/form-engine/FormEngine.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { FormEngineProps } from './types';
-declare const FormEngine: <T extends Record<string, any>>({ fields, onSubmit, initialValues, layout, isNotTrigger, showCancelButton, submitButtonText, showSubmittingText, submitButtonClass, onCancel, getFieldValues, formRef, className, persistenceKey, }: FormEngineProps<T>) => JSX.Element;
+declare const FormEngine: <T extends Record<string, any>>({ fields, onSubmit, initialValues, layout, isNotTrigger, showCancelButton, submitButtonText, showSubmittingText, submitButtonClass, onCancel, getFieldValues, formRef, className, persistenceKey, }: FormEngineProps<T>) => React.JSX.Element;
 export default FormEngine;

package/lib/form-engine/FormEngine.js

@@ -3,9 +3,11 @@ import clsx from 'clsx';
 import { useForm } from 'react-hook-form';
 import { useEffect, useState } from 'react';
 import { Button, SheetRoot, SheetTrigger } from '../components';
+import Loader from '../components/ui/Loader';
 import { cn } from '../helpers';
 import FieldWrapper from './components/FieldWrapper';
 import { useFormPersistence } from './hooks/useFormPersistence';
+import { isRegistryReady, setupInputRegistry } from './registry';
 const CancelButton = ({ isSubmitting, onCancel, isNotTrigger, onClearData }) => {
     const handleCancel = () => {
         if (onClearData) {
@@ -17,6 +19,12 @@ const CancelButton = ({ isSubmitting, onCancel, isNotTrigger, onClearData }) =>
     return isNotTrigger ? (_jsx(Button, { className: sharedClasses, disabled: isSubmitting, onClick: handleCancel, children: "Cancel" })) : (_jsx(SheetRoot, { children: _jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { className: sharedClasses, disabled: isSubmitting, onClick: handleCancel, children: "Cancel" }) }) }));
 };
 const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNotTrigger, showCancelButton = true, submitButtonText = 'Save', showSubmittingText = true, submitButtonClass, onCancel, getFieldValues, formRef, className, persistenceKey, }) => {
+    const [registryLoaded, setRegistryLoaded] = useState(isRegistryReady);
+    useEffect(() => {
+        if (!registryLoaded) {
+            setupInputRegistry().then(() => setRegistryLoaded(true));
+        }
+    }, [registryLoaded]);
     const { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
     // Determine initial values: persisted data takes precedence over provided initialValues
     const getEffectiveInitialValues = () => {
@@ -98,6 +106,9 @@ const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNo
             return 'Passwords do not match';
         return true;
     };
+    if (!registryLoaded) {
+        return (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader, {}) }));
+    }
     return (_jsxs("form", { className: cn(`${layout === 'horizontal' ? 'flex flex-wrap -mx-4' : ''} mb-6 border-gray-400 p-3`, className), onSubmit: handleSubmit(handleFormSubmit), children: [_jsx("div", { className: `${layout === 'vertical' ? 'grid grid-cols-12 gap-2 align-middle' : 'w-full flex flex-wrap'}`, children: fields?.map((field) => {
                     // Extract validation logic
                     const getFieldValidation = () => {

package/lib/form-engine/components/FieldWrapper.js

@@ -11,7 +11,6 @@ const FieldWrapper = ({ field, control, errors, layout, onFieldUpdate, onFieldCh
         return `col-span-${field?.gridSpan ?? '12'}`;
     }, [layout, field?.gridSpan]);
     if (!InputComponent) {
-        console.error(`No component registered for type: ${field.type}`);
         return null;
     }
     const handleFieldChange = (value, onChange, onChangeField) => {

package/lib/form-engine/index.d.ts

@@ -3,3 +3,4 @@ export * from './types';
 export { default as FormEngine } from './FormEngine';
 export { default as FormEngineForm } from './Form';
 export { useFormPersistence } from './hooks/useFormPersistence';
+export { setupInputRegistry } from './registry';

package/lib/form-engine/index.js

@@ -3,3 +3,4 @@ export * from './types';
 export { default as FormEngine } from './FormEngine';
 export { default as FormEngineForm } from './Form';
 export { useFormPersistence } from './hooks/useFormPersistence';
+export { setupInputRegistry } from './registry';

package/lib/form-engine/registry/RegisterComponents.d.ts

@@ -1 +1,5 @@
-export declare const setupInputRegistry: () => void;
+/** Returns true if the registry has finished populating. */
+export declare const isRegistryReady: () => boolean;
+/** Returns the singleton promise (starts setup on first call). */
+export declare const getRegistryPromise: () => Promise<void>;
+export declare const setupInputRegistry: () => Promise<void>;

package/lib/form-engine/registry/RegisterComponents.js

@@ -1,21 +1,54 @@
-import { PhoneInput } from '../../components';
-import CardExpiryInput from '../components/inputs/card-expiry-input/CardExpiryInput';
-import CheckboxInput from '../components/inputs/checkbox-input/CheckboxInput';
-import CreditCardInput from '../components/inputs/credit-card-input/CreditCardInput';
-import DateInput from '../components/inputs/date-input/DateInput';
-import EmailInput from '../components/inputs/email-input/EmailInput';
-import LabelInput from '../components/inputs/label-input/LabelInput';
-import MultiSelectInputComponent from '../components/inputs/multi-select-input/MultiSelectInput';
-import NumberInput from '../components/inputs/number-input/NumberInput';
-import PasswordInput from '../components/inputs/password-input/PasswordInput';
-import RadioInput from '../components/inputs/radio-button/RadioInput';
-import SelectInput from '../components/inputs/select/SelectInput';
-import TextareaInputFW from '../components/inputs/textarea-input/TextareaInput';
-import TimeInput from '../components/inputs/time-input/TimeInput';
-import ToggleSwitchInput from '../components/inputs/toggle-switch-input/ToggleSwitchInput';
-import UploadFieldForm from '../components/inputs/upload-field/UploadFieldForm';
 import { registerInput } from './Registry';
-export const setupInputRegistry = () => {
+/**
+ * Lazily registers all built-in input components.
+ *
+ * We intentionally use **inline dynamic `import()` resolved at call-time**
+ * instead of top-level static `import` statements. The static imports
+ * created a circular-dependency TDZ crash:
+ *
+ *   index.ts  ──▸  form-engine  ──▸  registry/RegisterComponents
+ *       │                                       │
+ *       └──▸ components/index ◀─────────────────┘
+ *
+ * When Vite pre-bundled this into a single chunk, `DateInput` (and
+ * potentially others) had not finished initialising — producing:
+ *   "Cannot access 'DateInput' before initialization"
+ *
+ * By deferring the imports to an async call we guarantee every component
+ * module has fully evaluated before we reference its default export.
+ */
+/** Singleton promise so concurrent callers share one init. */
+let registryPromise = null;
+let registryDone = false;
+/** Returns true if the registry has finished populating. */
+export const isRegistryReady = () => registryDone;
+/** Returns the singleton promise (starts setup on first call). */
+export const getRegistryPromise = () => {
+    registryPromise ??= doSetup();
+    return registryPromise;
+};
+export const setupInputRegistry = async () => {
+    return getRegistryPromise();
+};
+const doSetup = async () => {
+    const [{ default: CardExpiryInput }, { default: CheckboxInput }, { default: CreditCardInput }, { default: DateInput }, { default: EmailInput }, { default: LabelInput }, { default: MultiSelectInputComponent }, { default: NumberInput }, { default: PasswordInput }, { default: RadioInput }, { default: SelectInput }, { default: TextareaInputFW }, { default: TimeInput }, { default: ToggleSwitchInput }, { default: UploadFieldForm }, { default: PhoneInput },] = await Promise.all([
+        import('../components/inputs/card-expiry-input/CardExpiryInput'),
+        import('../components/inputs/checkbox-input/CheckboxInput'),
+        import('../components/inputs/credit-card-input/CreditCardInput'),
+        import('../components/inputs/date-input/DateInput'),
+        import('../components/inputs/email-input/EmailInput'),
+        import('../components/inputs/label-input/LabelInput'),
+        import('../components/inputs/multi-select-input/MultiSelectInput'),
+        import('../components/inputs/number-input/NumberInput'),
+        import('../components/inputs/password-input/PasswordInput'),
+        import('../components/inputs/radio-button/RadioInput'),
+        import('../components/inputs/select/SelectInput'),
+        import('../components/inputs/textarea-input/TextareaInput'),
+        import('../components/inputs/time-input/TimeInput'),
+        import('../components/inputs/toggle-switch-input/ToggleSwitchInput'),
+        import('../components/inputs/upload-field/UploadFieldForm'),
+        import('../../components/ui/PhoneInput'),
+    ]);
     registerInput('card-expiry-input', CardExpiryInput);
     registerInput('checkbox', CheckboxInput);
     registerInput('credit-card', CreditCardInput);
@@ -32,4 +65,5 @@ export const setupInputRegistry = () => {
     registerInput('text', LabelInput);
     registerInput('textarea', TextareaInputFW);
     registerInput('time', TimeInput);
+    registryDone = true;
 };

package/lib/form-engine/registry/Registry.d.ts

@@ -3,3 +3,5 @@ import type { BaseInputProps } from '../types';
 export type InputComponent = React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<any>>;
 export declare const registerInput: (type: string, component: InputComponent) => InputComponent;
 export declare const getInputComponent: (type: string) => InputComponent | undefined;
+/** Debug helper — returns a snapshot of all registered types. */
+export declare const getRegistrySnapshot: () => Record<string, boolean>;

package/lib/form-engine/registry/Registry.js

@@ -5,9 +5,13 @@ export const registerInput = (type, component) => {
 };
 // Retrieve an input component from the registry
 export const getInputComponent = (type) => {
-    const component = InputRegistry[type];
-    if (!component) {
-        console.warn(`No input component found for type: ${type}`);
+    return InputRegistry[type];
+};
+/** Debug helper — returns a snapshot of all registered types. */
+export const getRegistrySnapshot = () => {
+    const snapshot = {};
+    for (const key of Object.keys(InputRegistry)) {
+        snapshot[key] = !!InputRegistry[key];
     }
-    return component;
+    return snapshot;
 };

package/lib/form-engine/types/index.d.ts

@@ -90,7 +90,7 @@ export interface FormEngineProps<T extends Record<string, any>> {
      * When not provided, the form will automatically reset after successful submission.
      * When provided, the parent component controls form reset behavior.
      */
-    formRef?: React.MutableRefObject<FormRef | undefined>;
+    formRef?: React.MutableRefObject<FormRef | undefined> | React.RefObject<FormRef | null>;
 }
 /**
  * Defines validation rules that can be applied to form fields

package/lib/pagamio-table/data-table/MantineCoreTable.js

@@ -12,10 +12,11 @@ const CoreTable = ({ columns, isLoading = false, data, sortable = false, sortCon
             enableColumnFilter: false,
             enableColumnActions: false,
             mantineTableHeadCellProps: {
-                sx: {
-                    svg: {
-                        display: 'none',
-                    },
+                style: {
+                    padding: 0,
+                    border: 'none',
+                    height: 0,
+                    overflow: 'hidden',
                 },
             },
         };
@@ -104,24 +105,17 @@ const CoreTable = ({ columns, isLoading = false, data, sortable = false, sortCon
             sorting: sortingState,
             expanded,
         }, onPaginationChange: handlePaginationChangeInternal, renderEmptyRowsFallback: () => (_jsxs("div", { style: { textAlign: 'center', padding: '20px', color: '#888' }, children: [_jsx("p", { children: "No data available" }), _jsx("p", { children: "Please adjust your filters or try again later." })] })), mantineTableContainerProps: {
-            sx: {
+            style: {
                 border: 'transparent',
                 borderRadius: '4px',
                 minHeight: '400px',
             },
         }, mantineLoadingOverlayProps: {
-            loader: _jsx(LoaderComponent, { size: "lg" }),
-            overlayColor: 'rgba(255, 255, 255, 0.8)',
-            overlayBlur: 2,
+            children: _jsx(LoaderComponent, { size: "lg" }),
         }, onExpandedChange: setExpanded, enableExpanding: expandable, renderDetailPanel: renderExpandableComponent, mantineTableBodyRowProps: ({ row }) => ({
             onClick: (event) => handleRowClick(row, event),
-            sx: {
+            style: {
                 cursor: onRowClick ? 'pointer' : 'default',
-                '&:hover': onRowClick
-                    ? {
-                        backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                    }
-                    : {},
             },
             className: rowClassName,
         }), ...props }));

package/lib/pagamio-table/data-table/Pagination.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Pagination = ({ currentPage, totalPages, onPageChange, itemsPerPage, itemsPerPageOptions, onItemsPerPageChange, }) => {
-    return (_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-gray-200 sm:px-6", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: "text-sm text-gray-700", children: "Rows per page:" }), _jsx("select", { value: itemsPerPage, onChange: (e) => onItemsPerPageChange(Number(e.target.value)), className: "block w-20 pl-3 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md", children: itemsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700", children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Next" })] })] }));
+    return (_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-gray-200 sm:px-6", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: "text-sm text-gray-700", children: "Rows per page:" }), _jsx("select", { value: itemsPerPage, onChange: (e) => onItemsPerPageChange(Number(e.target.value)), className: "block w-20 pl-3 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md", children: itemsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700", children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Next" })] })] }));
 };
 export default Pagination;

package/lib/pagamio-table/utils/functionHelper.d.ts

@@ -1,11 +1,12 @@
 import type { MRT_ColumnDef } from 'mantine-react-table';
 import type { IconType } from 'react-icons';
+import React from 'react';
 interface ActionsColumnProps<T> {
     buttonTitle: string;
     icon?: IconType;
     label: string;
     showIconButton?: boolean;
-    renderContent?: (data: T) => JSX.Element;
+    renderContent?: (data: T) => React.JSX.Element;
     handleOnclickButton?: (data: T) => void;
 }
 export declare const createTableActionsColumn: <T extends Record<string, any>>({ buttonTitle, icon, label, showIconButton, renderContent, handleOnclickButton, }: ActionsColumnProps<T>) => MRT_ColumnDef<T>;