@pagamio/frontend-commons-lib 0.8.239 → 0.8.243

package/lib/api/ReactQuery.js

@@ -43,7 +43,9 @@ const createDefaultQueryClient = () => new QueryClient({
  */
 export function QueryClientProvider({ children, queryClient, showDevTools }) {
     const [client] = useState(() => queryClient || createDefaultQueryClient());
-    const shouldShowDevTools = showDevTools ?? process.env.NODE_ENV === 'development';
+    // Use explicit prop; fall back to Vite's import.meta.env.DEV (works in both Vite & SSR).
+    // Avoids process.env.NODE_ENV which crashes in Vite browser bundles.
+    const shouldShowDevTools = showDevTools ?? import.meta?.env?.DEV === true;
     return (_jsxs(TanStackQueryClientProvider, { client: client, children: [children, shouldShowDevTools && _jsx(ReactQueryDevtools, { initialIsOpen: false })] }));
 }
 /**

package/lib/api/context.d.ts

@@ -77,6 +77,12 @@ export declare function ApiProvider<T extends CustomAuthConfig>({ children, apiC
  * ```
  */
 export declare function useApi<T extends CustomAuthConfig>(): ApiClient<T>;
+/**
+ * Non-throwing variant of useApi.
+ * Returns the API client if inside an ApiProvider, or null otherwise.
+ * Useful for hooks/components that optionally use the API (e.g. static-mode charts).
+ */
+export declare function useApiSafe<T extends CustomAuthConfig>(): ApiClient<T>;
 /**
  * Factory function to create a configured ApiClient instance
  *

package/lib/api/context.js

@@ -69,6 +69,15 @@ export function useApi() {
     }
     return context.apiClient;
 }
+/**
+ * Non-throwing variant of useApi.
+ * Returns the API client if inside an ApiProvider, or null otherwise.
+ * Useful for hooks/components that optionally use the API (e.g. static-mode charts).
+ */
+export function useApiSafe() {
+    const context = useContext(ApiContext);
+    return context?.apiClient ?? null;
+}
 /**
  * Factory function to create a configured ApiClient instance
  *

package/lib/api/swr.d.ts

@@ -42,5 +42,5 @@ export declare function useApiSWRWithMutation<ResponseData>(endpoint: Key, confi
     data: ResponseData | undefined;
     error: ApiErrorResponse | undefined;
     isValidating: boolean;
-    isLoading: boolean;
+    isLoading: import("swr/dist/_internal").IsLoadingResponse<Data, Config>;
 };

package/lib/auth/components/AuthFormUtils.d.ts

@@ -43,7 +43,7 @@ export interface FormSubmissionConfig {
     setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
     setError?: React.Dispatch<React.SetStateAction<string | null>>;
     addToast: (toast: PartialToastData) => void;
-    formRef: React.MutableRefObject<FormRef | undefined>;
+    formRef: React.MutableRefObject<FormRef | undefined> | React.RefObject<FormRef | null>;
     onSuccess?: (response?: any) => void;
     onError?: (error: Error) => void;
 }

package/lib/auth/components/ChangePasswordPage.js

@@ -8,7 +8,7 @@ const ChangePasswordPage = ({ backHome = 'Back Home', submitButtonText = 'Change
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    const formRef = useRef();
+    const formRef = useRef(null);
     const changePasswordFields = [
         {
             name: 'oldPassword',

package/lib/auth/components/CustomerRegistrationPage.js

@@ -49,7 +49,7 @@ export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrat
     const { authService, error } = useAuth();
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
-    const formRef = useRef();
+    const formRef = useRef(null);
     const registrationFields = [
         {
             name: 'email',

package/lib/auth/components/ForgotPasswordPage.js

@@ -45,7 +45,7 @@ export function PagamioForgotPasswordPage({ logo, text = forgotPasswordDefaultTe
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    const formRef = useRef();
+    const formRef = useRef(null);
     const emailField = [
         {
             name: 'email',

package/lib/auth/components/LoginPage.js

@@ -50,7 +50,7 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    const formRef = useRef();
+    const formRef = useRef(null);
     // Generate the identifier field based on loginFieldType
     const identifierField = loginFieldType === 'email'
         ? {

package/lib/auth/components/ResetPasswordPage.js

@@ -47,7 +47,7 @@ export function PagamioResetPasswordPage({ logo, text = resetPasswordDefaultText
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    const formRef = useRef();
+    const formRef = useRef(null);
     const resetPasswordFields = [
         {
             name: 'password',

package/lib/auth/shared/layout/AuthPageLayout.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from 'flowbite-react';
 const AuthPageLayout = ({ title, subtitle, errorMessage, showLogo = true, renderInAppLayout = false, children, }) => {

package/lib/components/layout/VerticalTabsLayout.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { useState } from 'react';

package/lib/components/sidebar-v2/NavbarV2.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * @fileoverview NavbarV2 - Fully customizable navbar for SidebarV2 system
  *
@@ -23,8 +24,6 @@
  * />
  * ```
  */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconLock, IconLogout, IconMenu2, IconUser, IconX } from '@tabler/icons-react';
 import { Avatar, DarkThemeToggle, Dropdown, Tooltip } from 'flowbite-react';
 import React, { useCallback } from 'react';

package/lib/components/sidebar-v2/SidebarV2.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * @fileoverview SidebarV2 - High-level composed sidebar component
  *
@@ -8,8 +9,6 @@
  * - Collapses to icons on desktop
  * - Full mobile support with offcanvas
  */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
 import React, { useMemo, useState } from 'react';
 import { cn } from '../../helpers/utils';

package/lib/components/sidebar-v2/SidebarV2Context.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @fileoverview SidebarV2 Context and Provider
  *
@@ -9,8 +10,6 @@
  * - Cookie persistence
  * - Pathname for active state
  */
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { TooltipProvider } from '../ui/Tooltip';
 import { DEFAULT_SIDEBAR_CONFIG } from './types';

package/lib/components/sidebar-v2/SidebarV2Primitives.js

@@ -1,11 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @fileoverview SidebarV2 Primitives
  *
  * Core building blocks for the v2 sidebar following shadcn patterns.
  * These are composable components that can be used to build custom sidebars.
  */
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand, IconX } from '@tabler/icons-react';
 import { forwardRef } from 'react';
 import { cn } from '../../helpers/utils';
@@ -32,7 +31,6 @@ const SidebarContainer = forwardRef(({ className, side = 'left', variant = 'defa
             height: 'calc(100vh - 4rem)', // Full height minus navbar (64px)
             backgroundColor: 'var(--sidebar, hsl(0 0% 100%))',
             color: 'var(--sidebar-foreground, hsl(240 10% 3.9%))',
-            borderColor: 'var(--sidebar-border, hsl(240 5.9% 90%))',
         }, ...props, children: children }));
 });
 SidebarContainer.displayName = 'SidebarContainer';

package/lib/components/sidebar-v2/iconResolver.d.ts

@@ -27,43 +27,43 @@ export declare const resolveIcon: (icon: SidebarIcon | undefined, resolver?: Ico
  * Commonly used icons for quick access
  */
 export declare const SidebarIcons: {
-    readonly Dashboard: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Home: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Menu: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Settings: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Search: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Plus: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Edit: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Trash: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ShoppingCart: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Package: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly CreditCard: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Receipt: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ChartBar: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ChartLine: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ChartPie: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly TrendingUp: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Users: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly User: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly UserPlus: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly File: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly FileAnalytics: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Folder: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Bell: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Help: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Info: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Logout: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ChevronDown: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ChevronRight: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ChevronLeft: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ChevronUp: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly MoreHorizontal: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly ExternalLink: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Check: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly X: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly AlertCircle: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly Clock: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly PanelLeft: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
-    readonly PanelLeftClose: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<TablerIcons.Icon>>;
+    readonly Dashboard: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Home: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Menu: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Settings: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Search: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Plus: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Edit: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Trash: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ShoppingCart: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Package: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly CreditCard: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Receipt: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ChartBar: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ChartLine: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ChartPie: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly TrendingUp: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Users: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly User: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly UserPlus: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly File: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly FileAnalytics: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Folder: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Bell: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Help: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Info: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Logout: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ChevronDown: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ChevronRight: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ChevronLeft: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ChevronUp: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly MoreHorizontal: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly ExternalLink: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Check: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly X: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly AlertCircle: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly Clock: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly PanelLeft: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    readonly PanelLeftClose: import("react").ForwardRefExoticComponent<TablerIcons.IconProps & import("react").RefAttributes<SVGSVGElement>>;
 };
 export type SidebarIconName = keyof typeof SidebarIcons;

package/lib/components/sidebar-v2/iconResolver.js

@@ -56,8 +56,9 @@ export const resolveIcon = (icon, resolver = defaultIconResolver, fallbackIcon)
         const resolved = resolver(icon);
         if (resolved)
             return resolved;
-        // Log warning in development
-        if (process.env.NODE_ENV === 'development') {
+        // Log warning in development (Vite-compatible env check)
+        const isDev = import.meta?.env?.DEV === true;
+        if (isDev) {
             console.warn(`[SidebarV2] Icon "${icon}" not found in Tabler icons`);
         }
         // Return fallback if provided, otherwise use a default circle icon

package/lib/components/ui/Calendar.js

@@ -3,14 +3,7 @@ import { DayPicker } from 'react-day-picker';
 import { cn } from '../../helpers';
 import { variantStyles } from '../ui';
 const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) => {
-    return (_jsx("div", { style: {
-            // Provide fallback CSS variables for colors
-            ['--primary']: 'var(--primary, hsl(305 38% 54%))',
-            ['--primary-foreground']: 'var(--primary-foreground, hsl(0 0% 100%))',
-            ['--accent']: 'var(--accent, hsl(305 38% 94%))',
-            ['--accent-foreground']: 'var(--accent-foreground, hsl(305 38% 20%))',
-            ['--muted-foreground']: 'var(--muted-foreground, hsl(0 0% 45%))',
-        }, children: _jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('p-3', className), classNames: {
+    return (_jsx("div", { style: {}, children: _jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('p-3', className), classNames: {
                 months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
                 month: 'space-y-4',
                 caption: 'flex justify-center pt-1 relative items-center',

package/lib/components/ui/Chart.js

@@ -1,16 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactApexChart from 'react-apexcharts';
 import { useEffect, useState } from 'react';
 import { Loader } from '../ui';
 // TODO:  Define proper props type
 const Chart = (props) => {
-    const [mounted, setMounted] = useState(false);
+    const [ApexChart, setApexChart] = useState(null);
     useEffect(() => {
-        setMounted(true);
+        let cancelled = false;
+        import('react-apexcharts').then((mod) => {
+            if (!cancelled) {
+                setApexChart(() => mod.default);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
     }, []);
-    if (!mounted) {
+    if (!ApexChart) {
         return _jsx(Loader, { colorClassName: "primary-500" });
     }
-    return _jsx(ReactApexChart, { ...props, width: "100%" });
+    return _jsx(ApexChart, { ...props, width: "100%" });
 };
 export default Chart;

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

@@ -1,4 +1,3 @@
-import 'flowbite';
 type DatePickerProps = {
     ref?: any;
     name?: string;

package/lib/components/ui/DatePicker.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'flowbite';
 import { Datepicker } from 'flowbite-react';
 import { useEffect, useState } from 'react';
 function DatePicker({ value, disabled, name, onChange }) {

package/lib/components/ui/DateRangeModal.js

@@ -84,6 +84,6 @@ const CustomDateRangeModal = ({ isOpen, showTimeSelect, onClose, onApply, initia
             setEndDate(newDate);
         }
     };
-    return (_jsxs(Modal, { show: isOpen, size: "xl", popup: true, onClose: onClose, dismissible: true, children: [_jsx(Modal.Header, { className: "border-b border-gray-200", children: _jsx("h3", { className: "px-4 text-lg font-bold text-gray-900", children: "Select Custom Date Range" }) }), _jsx(Modal.Body, { className: "p-6", children: _jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "startDate", className: "mb-2 text-sm font-medium text-gray-700", children: "Start Date" }), _jsx(DatePicker, { selected: startDate, onChange: handleStartDateChange, selectsStart: true, startDate: startDate, endDate: endDate, showTimeSelect: showTimeSelect, timeIntervals: timeIntervals, dateFormat: datePickerFormat, placeholderText: "Select start date", className: `w-full rounded-md border ${!isValidRange ? 'border-red-500' : 'border-gray-300'} px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500`, minDate: minDate, maxDate: maxDate })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "endDate", className: "mb-2 text-sm font-medium text-gray-700", children: "End Date" }), _jsx(DatePicker, { selected: endDate, onChange: handleEndDateChange, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, maxDate: maxDate, showTimeSelect: showTimeSelect, timeIntervals: timeIntervals, dateFormat: datePickerFormat, placeholderText: "Select end date", className: `w-full rounded-md border ${!isValidRange ? 'border-red-500' : 'border-gray-300'} px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500` })] })] }), !isValidRange && _jsx("p", { className: "text-sm text-red-600 mt-2", children: "End date must be on or after start date." })] }) }), _jsxs(Modal.Footer, { className: "flex justify-end space-x-3 border-t border-gray-200 px-6 py-4", children: [_jsx(Button, { variant: "outline", onClick: onClose, className: "px-4 py-2", children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleApply, disabled: !isValidRange, className: "px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed", children: "Apply" })] })] }));
+    return (_jsxs(Modal, { show: isOpen, size: "xl", popup: true, onClose: onClose, dismissible: true, children: [_jsx(Modal.Header, { className: "border-b border-gray-200", children: _jsx("h3", { className: "px-4 text-lg font-bold text-gray-900", children: "Select Custom Date Range" }) }), _jsx(Modal.Body, { className: "p-6", children: _jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "startDate", className: "mb-2 text-sm font-medium text-gray-700", children: "Start Date" }), _jsx(DatePicker, { selected: startDate, onChange: handleStartDateChange, selectsStart: true, startDate: startDate, endDate: endDate, showTimeSelect: showTimeSelect, timeIntervals: timeIntervals, dateFormat: datePickerFormat, placeholderText: "Select start date", className: `w-full rounded-md border ${!isValidRange ? 'border-red-500' : 'border-gray-300'} px-3 py-2 shadow-sm focus:ring-2 focus:ring-primary focus:border-primary`, minDate: minDate, maxDate: maxDate })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "endDate", className: "mb-2 text-sm font-medium text-gray-700", children: "End Date" }), _jsx(DatePicker, { selected: endDate, onChange: handleEndDateChange, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, maxDate: maxDate, showTimeSelect: showTimeSelect, timeIntervals: timeIntervals, dateFormat: datePickerFormat, placeholderText: "Select end date", className: `w-full rounded-md border ${!isValidRange ? 'border-red-500' : 'border-gray-300'} px-3 py-2 shadow-sm focus:ring-2 focus:ring-primary focus:border-primary` })] })] }), !isValidRange && _jsx("p", { className: "text-sm text-red-600 mt-2", children: "End date must be on or after start date." })] }) }), _jsxs(Modal.Footer, { className: "flex justify-end space-x-3 border-t border-gray-200 px-6 py-4", children: [_jsx(Button, { variant: "outline", onClick: onClose, className: "px-4 py-2", children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleApply, disabled: !isValidRange, className: "px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed", children: "Apply" })] })] }));
 };
 export default CustomDateRangeModal;

package/lib/components/ui/DateRangePickerWithPresets.js

@@ -149,16 +149,7 @@ const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePres
         e.stopPropagation();
         onChange?.(undefined, undefined);
     };
-    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0 bg-background border border-border shadow-lg", align: "start", sideOffset: 8, children: _jsxs("div", { className: "flex", style: {
-                        // Provide fallback CSS variables for colors
-                        ['--primary']: 'var(--primary, hsl(305 38% 54%))',
-                        ['--primary-foreground']: 'var(--primary-foreground, hsl(0 0% 100%))',
-                        ['--accent']: 'var(--accent, hsl(305 38% 94%))',
-                        ['--accent-foreground']: 'var(--accent-foreground, hsl(305 38% 20%))',
-                        ['--background']: 'var(--background, hsl(0 0% 100%))',
-                        ['--border']: 'var(--border, hsl(0 0% 90%))',
-                        ['--muted-foreground']: 'var(--muted-foreground, hsl(0 0% 45%))',
-                    }, children: [_jsx("div", { className: "border-r border-border p-2 min-w-[140px] bg-background", children: _jsx("div", { className: "flex flex-col gap-1", children: presets.map((preset) => (_jsx("button", { type: "button", onClick: () => handlePresetSelect(preset), className: cn('text-left px-3 py-2 text-sm rounded-md transition-colors', 'hover:bg-accent hover:text-accent-foreground', tempPreset === preset.value &&
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0 bg-background border border-border shadow-lg", align: "start", sideOffset: 8, children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "border-r border-border p-2 min-w-[140px] bg-background", children: _jsx("div", { className: "flex flex-col gap-1", children: presets.map((preset) => (_jsx("button", { type: "button", onClick: () => handlePresetSelect(preset), className: cn('text-left px-3 py-2 text-sm rounded-md transition-colors', 'hover:bg-accent hover:text-accent-foreground', tempPreset === preset.value &&
                                         'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'), children: preset.label }, preset.value))) }) }), tempPreset === 'custom' && (_jsxs("div", { className: "p-3 bg-background", children: [_jsx(Calendar, { mode: "range", defaultMonth: tempRange?.from || new Date(), selected: tempRange, onSelect: handleCalendarSelect, numberOfMonths: numberOfMonths, disabled: (date) => {
                                         if (minDate && date < minDate)
                                             return true;

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

@@ -12,5 +12,5 @@ interface DetailsCardProps {
     onClickButton: () => void;
     actionContent?: React.ReactNode;
 }
-declare const DetailsCard: ({ data, loading, buttonText, showButton, onClickButton, actionContent, }: DetailsCardProps) => JSX.Element | null;
+declare const DetailsCard: ({ data, loading, buttonText, showButton, onClickButton, actionContent, }: DetailsCardProps) => React.JSX.Element | null;
 export default DetailsCard;

package/lib/components/ui/FilterComponent.js

@@ -69,7 +69,7 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
             resetFilters();
         }
     };
-    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsx("div", { className: "w-full sm:w-[300px]", children: _jsx(Input, { icon: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), onKeyDown: handleSearchKeyDown, className: "w-full", sx: { input: { height: 39 } }, "aria-label": "Search" }) })), filters.map((filter) => {
+    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsx("div", { className: "w-full sm:w-[300px]", children: _jsx(Input, { leftSection: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), onKeyDown: handleSearchKeyDown, className: "w-full", styles: { input: { height: 39 } }, "aria-label": "Search" }) })), filters.map((filter) => {
                         const { name, type, options } = filter;
                         const value = selectedFilters[name];
                         const renderFilterInput = () => {
@@ -106,9 +106,13 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                                 return (_jsx(DatePicker, { value: value || null, onChange: (date) => handleFilterChange(name, date), placeholder: filter.placeholder ?? `Select ${name}` }));
                             }
                             if (type === 'multi-select') {
-                                return (_jsx(MultiSelect, { data: options || [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || [], onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: { ...sharedStyles }, sx: {
-                                        'input[type="search"]': {
-                                            fontSize: '0.9rem',
+                                return (_jsx(MultiSelect, { data: options || [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || [], onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: {
+                                        ...sharedStyles,
+                                        input: {
+                                            ...sharedStyles.input,
+                                            '&[type="search"]': {
+                                                fontSize: '0.9rem',
+                                            },
                                         },
                                     }, ...commonProps, onKeyDown: (e) => handleFilterKeyDown(e, name), "aria-label": filter.placeholder ?? name }));
                             }

package/lib/components/ui/FilterList.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, Radio } from 'flowbite-react';
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';

package/lib/components/ui/FilterSection.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
 /**

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

@@ -1,6 +1,7 @@
+import React from 'react';
 interface FilterWrapperProps {
     isNarrow: boolean;
     children: React.ReactNode;
 }
-declare const FilterWrapper: ({ isNarrow, children }: FilterWrapperProps) => JSX.Element;
+declare const FilterWrapper: ({ isNarrow, children }: FilterWrapperProps) => React.JSX.Element;
 export default FilterWrapper;

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

@@ -2,6 +2,7 @@ import React from 'react';
 export interface ImageUploaderProps {
     project: 'vas' | 'stocklink' | 'events' | 'commerce';
     env: 'dev' | 'uat' | 'prod';
+    endpoint: string;
     onUploadSuccess?: (url: string) => void;
     onError?: (error: Error) => void;
     className?: string;

package/lib/components/ui/ImageUploader.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image as ImageIcon, Loader2, Upload, X } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
@@ -6,14 +5,14 @@ import { useCallback, useState } from 'react';
 import { Button, cn, useToast } from '../..';
 import { useImageUpload } from '../../shared/hooks/useImageUpload';
 import { Progress } from './Progress';
-const ImageUploader = ({ project, env, onUploadSuccess, onError, className, disabled = false, maxFileSize = 5 * 1024 * 1024, // 5MB default
+const ImageUploader = ({ project, env, endpoint, onUploadSuccess, onError, className, disabled = false, maxFileSize = 5 * 1024 * 1024, // 5MB default
 acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], placeholder = 'Click to upload or drag and drop an image', showPreview = true, value, onChange, }) => {
     const [previewUrl, setPreviewUrl] = useState(value || null);
     const [isUploading, setIsUploading] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
     const [error, setError] = useState(null);
     const { addToast } = useToast();
-    const { uploadFile } = useImageUpload({ project, env });
+    const { uploadFile } = useImageUpload({ project, env, endpoint });
     const handleFileUpload = async (file) => {
         if (disabled)
             return;
@@ -92,6 +91,6 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
         setError(null);
         onChange?.(null);
     };
-    return (_jsxs("div", { className: cn('w-full', className), children: [previewUrl && showPreview ? (_jsxs("div", { className: "relative mb-4", children: [_jsx("img", { src: previewUrl, alt: "Preview", className: "max-h-64 w-full rounded-lg object-contain border border-gray-200" }), !isUploading && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "absolute top-2 right-2", onClick: handleRemove, children: _jsx(X, { className: "h-4 w-4" }) }))] })) : (_jsxs("div", { ...getRootProps(), className: cn('border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-gray-400', isDragActive && 'border-blue-500 bg-blue-50', disabled && 'cursor-not-allowed opacity-50', error && 'border-red-500 bg-red-50'), children: [_jsx("input", { ...getInputProps() }), isUploading ? (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-blue-500" }), _jsx("p", { className: "text-sm text-gray-600", children: "Uploading image..." }), _jsx(Progress, { value: uploadProgress, className: "w-full max-w-xs" })] })) : (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [isDragActive ? (_jsx(Upload, { className: "h-8 w-8 text-blue-500" })) : (_jsx(ImageIcon, { className: "h-8 w-8 text-gray-400" })), _jsx("p", { className: "text-sm text-gray-600", children: isDragActive ? 'Drop the image here' : placeholder }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Supported formats: ", acceptedFileTypes.map((type) => type.split('/')[1]).join(', ')] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Max size: ", Math.round(maxFileSize / 1024 / 1024), "MB"] })] }))] })), error && _jsx("p", { className: "mt-2 text-sm text-red-600", children: error })] }));
+    return (_jsxs("div", { className: cn('w-full', className), children: [previewUrl && showPreview ? (_jsxs("div", { className: "relative mb-4", children: [_jsx("img", { src: previewUrl, alt: "Preview", className: "max-h-64 w-full rounded-lg object-contain border border-gray-200" }), !isUploading && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "absolute top-2 right-2", onClick: handleRemove, children: _jsx(X, { className: "h-4 w-4" }) }))] })) : (_jsxs("div", { ...getRootProps(), className: cn('border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-gray-400', isDragActive && 'border-primary bg-primary/10', disabled && 'cursor-not-allowed opacity-50', error && 'border-red-500 bg-red-50'), children: [_jsx("input", { ...getInputProps() }), isUploading ? (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }), _jsx("p", { className: "text-sm text-gray-600", children: "Uploading image..." }), _jsx(Progress, { value: uploadProgress, className: "w-full max-w-xs" })] })) : (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [isDragActive ? (_jsx(Upload, { className: "h-8 w-8 text-primary" })) : (_jsx(ImageIcon, { className: "h-8 w-8 text-gray-400" })), _jsx("p", { className: "text-sm text-gray-600", children: isDragActive ? 'Drop the image here' : placeholder }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Supported formats: ", acceptedFileTypes.map((type) => type.split('/')[1]).join(', ')] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Max size: ", Math.round(maxFileSize / 1024 / 1024), "MB"] })] }))] })), error && _jsx("p", { className: "mt-2 text-sm text-red-600", children: error })] }));
 };
 export default ImageUploader;

package/lib/components/ui/MultiSelect.js

@@ -48,7 +48,7 @@ const MultiSelect = forwardRef(({ options, value, defaultValue = [], disabled, o
                             }
                         }, children: [_jsxs("div", { id: field?.name, className: "flex items-center w-full px-4 py-2 border rounded-md", style: { minHeight: '41px' }, children: [_jsx("div", { className: "flex-1 text-left", children: tagPosition === 'inside' ? (_jsx(TagsList, { selectedOptions: selectedOptions, removeTag: removeTag, placeholder: field?.placeholder })) : (_jsx("span", { className: "truncate", children: selectedOptions.length === 0
                                                 ? (field?.placeholder ?? placeholder ?? 'Select options')
-                                                : `${selectedOptions.length} selected` })) }), _jsx(ChevronDownIcon, { className: "ml-2 flex-shrink-0" })] }), tagPosition === 'bottom' && selectedOptions.length > 0 && (_jsx("div", { className: "mt-2", children: _jsx(TagsList, { selectedOptions: selectedOptions, removeTag: removeTag, placeholder: field?.placeholder }) }))] }) }), _jsxs(Popover.Content, { className: "p-2 bg-white border rounded shadow-md w-full z-50", align: "start", sideOffset: 5, onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 mb-2 border rounded", onClick: (e) => e.stopPropagation() }), _jsx("div", { className: "max-h-60 overflow-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => (_jsxs("div", { className: "flex items-center gap-2 px-2 py-1 cursor-pointer hover:bg-gray-100", children: [_jsx(Checkbox.Root, { type: "button", checked: internalValues.includes(option.value), onCheckedChange: () => handleToggle(option.value), className: "w-4 h-4 border rounded", children: _jsx(Checkbox.Indicator, { children: _jsx(CheckIcon, { className: "w-4 h-4 text-blue-500" }) }) }), _jsx("button", { type: "button", onClick: () => handleToggle(option.value), onKeyDown: (e) => {
+                                                : `${selectedOptions.length} selected` })) }), _jsx(ChevronDownIcon, { className: "ml-2 flex-shrink-0" })] }), tagPosition === 'bottom' && selectedOptions.length > 0 && (_jsx("div", { className: "mt-2", children: _jsx(TagsList, { selectedOptions: selectedOptions, removeTag: removeTag, placeholder: field?.placeholder }) }))] }) }), _jsxs(Popover.Content, { className: "p-2 bg-white border rounded shadow-md w-full z-50", align: "start", sideOffset: 5, onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 mb-2 border rounded", onClick: (e) => e.stopPropagation() }), _jsx("div", { className: "max-h-60 overflow-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => (_jsxs("div", { className: "flex items-center gap-2 px-2 py-1 cursor-pointer hover:bg-gray-100", children: [_jsx(Checkbox.Root, { type: "button", checked: internalValues.includes(option.value), onCheckedChange: () => handleToggle(option.value), className: "w-4 h-4 border rounded", children: _jsx(Checkbox.Indicator, { children: _jsx(CheckIcon, { className: "w-4 h-4 text-primary" }) }) }), _jsx("button", { type: "button", onClick: () => handleToggle(option.value), onKeyDown: (e) => {
                                             if (e.key === 'Enter' || e.key === ' ') {
                                                 e.preventDefault();
                                                 handleToggle(option.value);

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type LoaderProps } from './Loader';
+export interface PageLoaderProps {
+    /** Size of the loader spinner. Defaults to 'xl'. */
+    size?: LoaderProps['size'];
+    /** Additional CSS class names for the wrapper div. */
+    className?: string;
+}
+/**
+ * Full-page centered loader for page-level loading states.
+ * Accounts for navbar height (64px ≈ 5rem) so the spinner
+ * appears centered in the visible content area.
+ *
+ * Usage:
+ * ```tsx
+ * import { PageLoader } from '@pagamio/frontend-commons-lib';
+ *
+ * if (isLoading) return <PageLoader />;
+ * ```
+ */
+declare const PageLoader: React.FC<PageLoaderProps>;
+export default PageLoader;
+export { PageLoader };

package/lib/components/ui/PageLoader.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../helpers';
+import LoaderComponent from './Loader';
+/**
+ * Full-page centered loader for page-level loading states.
+ * Accounts for navbar height (64px ≈ 5rem) so the spinner
+ * appears centered in the visible content area.
+ *
+ * Usage:
+ * ```tsx
+ * import { PageLoader } from '@pagamio/frontend-commons-lib';
+ *
+ * if (isLoading) return <PageLoader />;
+ * ```
+ */
+const PageLoader = ({ size = 'xl', className }) => (_jsx("div", { className: cn('flex min-h-[calc(100vh-5rem)] w-full items-center justify-center', className), children: _jsx(LoaderComponent, { size: size }) }));
+export default PageLoader;
+export { PageLoader };

package/lib/components/ui/Popover.js

@@ -6,9 +6,9 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-[70] w-72 rounded-md border p-4 shadow-md outline-none', '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', 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%))',
         }, ...props }) })));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/lib/components/ui/Progress.js

@@ -1,7 +1,6 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from '../../helpers';
-const Progress = React.forwardRef(({ className, value = 0, max = 100, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('relative h-2 w-full overflow-hidden rounded-full bg-gray-200', className), ...props, children: _jsx("div", { className: "h-full w-full flex-1 bg-blue-500 transition-all duration-300 ease-in-out", style: { transform: `translateX(-${100 - (value / max) * 100}%)` } }) })));
+const Progress = React.forwardRef(({ className, value = 0, max = 100, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('relative h-2 w-full overflow-hidden rounded-full bg-gray-200', className), ...props, children: _jsx("div", { className: "h-full w-full flex-1 bg-primary transition-all duration-300 ease-in-out", style: { transform: `translateX(-${100 - (value / max) * 100}%)` } }) })));
 Progress.displayName = 'Progress';
 export { Progress };