@pagamio/frontend-commons-lib 0.8.246 → 0.8.248

package/lib/auth/components/AuthPageLayout.js

@@ -10,7 +10,7 @@ export function AuthPageLayout({ title, subtitle, errorMessage, showLogo = true,
 }, renderInAppLayout = false, className = '', horizontal = true, children, appLabel, sideContent, sideContentClass = 'bg-gradient-to-br from-primary-600 to-primary-800' /* TODO: migrate gradient */, footer, }) {
     // Split-screen layout for when sideContent is provided
     if (sideContent) {
-        return (_jsxs("div", { className: `flex h-screen overflow-hidden bg-background ${className}`, children: [_jsx("div", { className: "flex flex-1 flex-col px-4 py-8 sm:px-6 lg:w-1/2 lg:flex-none lg:px-16 xl:px-24 bg-background overflow-y-auto", children: _jsxs("div", { className: "flex flex-col justify-center mx-auto w-full max-w-sm lg:w-[420px] my-auto", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [showLogo && logo && (_jsxs("div", { className: "flex flex-col items-center mb-8", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: 180, height: 160, className: `mb-4${logo.darkSrc ? ' dark:hidden' : ''}` }), logo.darkSrc && (_jsx("img", { src: logo.darkSrc, alt: logo.alt, width: 180, height: 160, className: "mb-4 hidden dark:block" })), appLabel && _jsx(AppBanner, { text: appLabel })] })), _jsx("h2", { "data-testid": "auth-page-title", className: "text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl", children: title }), _jsx("p", { "data-testid": "auth-page-subtitle", className: "mt-2 text-sm text-neutral-600 dark:text-neutral-400", children: subtitle })] }), errorMessage && (_jsx("div", { "data-testid": "login-error-alert", className: "mt-6 rounded-md bg-red-50 p-4 text-sm text-red-700", children: errorMessage })), _jsx("div", { className: "mt-8", children: children }), footer && _jsx("div", { className: "mt-8", children: footer })] }) }), _jsx("div", { className: `relative hidden w-0 flex-1 lg:block lg:w-1/2 overflow-hidden ${sideContentClass}`, children: sideContent })] }));
+        return (_jsxs("div", { className: `flex h-screen overflow-hidden bg-background ${className}`, children: [_jsx("div", { className: "flex flex-1 flex-col px-4 py-8 sm:px-6 lg:w-1/2 lg:flex-none lg:px-16 xl:px-24 bg-background overflow-y-auto", children: _jsxs("div", { className: "flex flex-col justify-center mx-auto w-full max-w-sm lg:w-[420px] my-auto", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [showLogo && logo && (_jsxs("div", { className: "flex flex-col items-center mb-8", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: 180, height: 160, className: `mb-4${logo.darkSrc ? ' dark:hidden' : ''}` }), logo.darkSrc && (_jsx("img", { src: logo.darkSrc, alt: logo.alt, width: 180, height: 160, className: "mb-4 hidden dark:block" })), appLabel && _jsx(AppBanner, { text: appLabel })] })), _jsx("h2", { "data-testid": "auth-page-title", className: "text-2xl font-bold tracking-tight text-foreground sm:text-3xl", children: title }), _jsx("p", { "data-testid": "auth-page-subtitle", className: "mt-2 text-sm text-muted-foreground", children: subtitle })] }), errorMessage && (_jsx("div", { "data-testid": "login-error-alert", className: "mt-6 rounded-md bg-destructive/10 p-4 text-sm text-destructive", children: errorMessage })), _jsx("div", { className: "mt-8", children: children }), footer && _jsx("div", { className: "mt-8", children: footer })] }) }), _jsx("div", { className: `relative hidden w-0 flex-1 lg:block lg:w-1/2 overflow-hidden ${sideContentClass}`, children: sideContent })] }));
     }
     // Original Centered Card Layout
     return (_jsxs("div", { className: `-my-4 mx-auto flex w-full max-w-[640px] flex-col items-center justify-center px-4 py-8 sm:px-6 ${renderInAppLayout ? 'h-[calc(100vh-64px)]' : 'min-h-screen md:h-screen'} ${className}`, children: [showLogo && logo && (_jsxs("div", { className: "flex flex-col items-center mb-5", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: logo.width, height: logo.height, className: logo.darkSrc ? 'dark:hidden' : undefined }), logo.darkSrc && (_jsx("img", { src: logo.darkSrc, alt: logo.alt, width: logo.width, height: logo.height, className: "hidden dark:block" })), _jsx(AppBanner, { text: appLabel })] })), _jsxs(AuthCard, { className: "p-2 sm:p-3", horizontal: horizontal, children: [_jsxs("div", { children: [_jsx("h2", { "data-testid": "auth-page-title", className: "text-[1.5em] font-bold text-foreground sm:text-[1.875em]", children: title }), _jsx("h2", { "data-testid": "auth-page-subtitle", className: "text-[1em] font-medium text-muted-foreground sm:text-[1em]", children: subtitle })] }), errorMessage && (_jsx("div", { "data-testid": "login-error-alert", className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));

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

@@ -130,7 +130,7 @@ const NavbarV2EnvironmentBanner = ({ show = false, text, bgColor = 'red', color
  * Uses useSidebar() hook to control sidebar state.
  * Supports slots, custom renderers, and extensive styling options.
  */
-const NavbarV2 = ({ dashboardLink = '/dashboard', brandImage, linkComponent: LinkComp = 'a', showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], environmentBanner = { show: false }, navbarBackground = { light: 'bg-[#b45dae]', dark: 'dark:bg-[#b45dae]' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, slots = {}, renderToggle, renderUserDropdown, renderBrand, renderThemeToggle, fixed = true, zIndex = 100, className, style, showBorder = true, borderColor = { light: 'border-border', dark: '' }, additionalMenuItems, userInfo, }) => {
+const NavbarV2 = ({ dashboardLink = '/dashboard', brandImage, linkComponent: LinkComp = 'a', showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], environmentBanner = { show: false }, navbarBackground = { light: 'bg-navbar-bg', dark: '' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, slots = {}, renderToggle, renderUserDropdown, renderBrand, renderThemeToggle, fixed = true, zIndex = 100, className, style, showBorder = true, borderColor = { light: 'border-border', dark: '' }, additionalMenuItems, userInfo, }) => {
     const { openMobile, isMobile, open, toggleSidebar, config } = useSidebar();
     const { t } = useTranslation();
     // Determine toggle state based on viewport

package/lib/components/ui/Card.js

@@ -31,7 +31,7 @@ function CardImage({ imgSrc, imgAlt = '', renderImage, horizontal, }) {
     return (_jsx("img", { src: imgSrc, alt: imgAlt, className: horizontal ? cardImageClasses.horizontal : cardImageClasses.vertical }));
 }
 // ─── Card ─────────────────────────────────────────────────────────────────────
-const BASE = 'rounded-xl border border-border bg-background text-foreground shadow-sm ' + 'transition-shadow hover:shadow';
+const BASE = 'rounded-xl border border-border bg-card text-card-foreground shadow-sm ' + 'transition-shadow hover:shadow';
 const CLICKABLE = 'cursor-pointer hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring';
 export const Card = React.forwardRef(({ className, children, horizontal = false, href, imgSrc, imgAlt, renderImage, ...rest }, ref) => {
     const hasImage = !!(imgSrc || renderImage);

package/lib/components/ui/DateRangePickerWithPresets.js

@@ -149,8 +149,8 @@ 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", 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", variant: "ghost", 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) => {
+    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-popover text-popover-foreground 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]", children: _jsx("div", { className: "flex flex-col gap-1", children: presets.map((preset) => (_jsx(Button, { type: "button", variant: "ghost", 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", children: [_jsx(Calendar, { mode: "range", defaultMonth: tempRange?.from || new Date(), selected: tempRange, onSelect: handleCalendarSelect, numberOfMonths: numberOfMonths, disabled: (date) => {
                                         if (minDate && date < minDate)
                                             return true;
                                         if (maxDate && date > maxDate)

package/lib/components/ui/Dialog.js

@@ -9,9 +9,9 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), style: {
-                backgroundColor: 'var(--background, hsl(0 0% 100%))',
-                borderColor: 'var(--border, hsl(240 5.9% 90%))',
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover text-popover-foreground p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), style: {
+                backgroundColor: 'hsl(var(--popover))',
+                borderColor: 'hsl(var(--border))',
             }, ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));

package/lib/components/ui/LegacyCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Button from './Button';
 const Card = ({ title, description, children, className = '', showButton, buttonText, buttonVariant = 'primary', handleButtonClick, headerElement, }) => {
-    return (_jsxs("div", { className: `bg-background border rounded-[10px] shadow-sm ${className}`, children: [(title || description || showButton || headerElement) && (_jsx("div", { className: "p-6", children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4", children: [_jsxs("div", { children: [title && (_jsx("h2", { className: "text-[1.5rem] font-semibold leading-[1] tracking-[-0.025em] text-foreground", children: title })), description && (_jsx("p", { className: "mt-2 text-[0.875rem] leading-[1.25rem] text-muted-foreground", children: description }))] }), headerElement && _jsx("div", { children: headerElement }), showButton && (_jsx("div", { children: _jsx(Button, { onClick: handleButtonClick, variant: buttonVariant, className: buttonVariant, style: { height: 39 }, children: buttonText ?? 'Add' }) }))] }) })), _jsx("div", { className: "p-6 pt-0", children: children })] }));
+    return (_jsxs("div", { className: `bg-card text-card-foreground border rounded-[10px] shadow-sm ${className}`, children: [(title || description || showButton || headerElement) && (_jsx("div", { className: "p-6", children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4", children: [_jsxs("div", { children: [title && (_jsx("h2", { className: "text-[1.5rem] font-semibold leading-[1] tracking-[-0.025em] text-foreground", children: title })), description && (_jsx("p", { className: "mt-2 text-[0.875rem] leading-[1.25rem] text-muted-foreground", children: description }))] }), headerElement && _jsx("div", { children: headerElement }), showButton && (_jsx("div", { children: _jsx(Button, { onClick: handleButtonClick, variant: buttonVariant, className: buttonVariant, style: { height: 39 }, children: buttonText ?? 'Add' }) }))] }) })), _jsx("div", { className: "p-6 pt-0", children: children })] }));
 };
 export default Card;

package/lib/components/ui/MultiSelect.js

@@ -49,7 +49,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-background 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-accent", 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", variant: "ghost", 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-popover text-popover-foreground 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-accent", 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", variant: "ghost", onClick: () => handleToggle(option.value), onKeyDown: (e) => {
                                             if (e.key === 'Enter' || e.key === ' ') {
                                                 e.preventDefault();
                                                 handleToggle(option.value);

package/lib/components/ui/PagamioTabs.js

@@ -29,14 +29,14 @@ const containedTheme = {
                 default: {
                     base: 'rounded-t-lg',
                     active: {
-                        on: 'text-foreground bg-background active shadow-sm',
+                        on: 'text-foreground bg-card active shadow-sm',
                         off: 'border-b-2 border-transparent text-foreground/70',
                     },
                 },
                 fullWidth: {
                     base: '',
                     active: {
-                        on: 'text-foreground bg-background active shadow-sm',
+                        on: 'text-foreground bg-card active shadow-sm',
                         off: 'text-foreground/70',
                     },
                 },
@@ -84,10 +84,10 @@ function VerticalTabs({ tabs, activeIndex, onSelect, variant, className, tabPane
         }
         // default / fullWidth
         return isActive
-            ? `${base} text-foreground bg-background shadow-sm border border-border`
+            ? `${base} text-foreground bg-card shadow-sm border border-border`
             : `${base} text-foreground/70 bg-muted hover:text-foreground hover:bg-accent`;
     };
-    return (_jsxs("div", { className: `flex flex-col md:flex-row gap-4 ${className ?? ''}`, children: [_jsx("div", { className: "md:w-64 flex-shrink-0", children: _jsx("ul", { className: "flex flex-row md:flex-col space-x-2 md:space-x-0 md:space-y-2 text-sm font-medium text-muted-foreground overflow-x-auto md:overflow-x-visible", children: tabs.map((tab, index) => (_jsx("li", { className: "flex-shrink-0", children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => !tab.disabled && onSelect(index), disabled: tab.disabled, className: getItemClasses(activeIndex === index), children: [tab.icon && (_jsx("span", { className: `w-4 h-4 me-2 ${activeIndex === index ? 'text-current' : 'text-muted-foreground'}`, children: _jsx(tab.icon, {}) })), tab.title] }) }, tab.id))) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("div", { className: `bg-background border border-border rounded-lg p-6 ${tabPanelClassName ?? ''}`, children: tabs[activeIndex]?.content }) })] }));
+    return (_jsxs("div", { className: `flex flex-col md:flex-row gap-4 ${className ?? ''}`, children: [_jsx("div", { className: "md:w-64 flex-shrink-0", children: _jsx("ul", { className: "flex flex-row md:flex-col space-x-2 md:space-x-0 md:space-y-2 text-sm font-medium text-muted-foreground overflow-x-auto md:overflow-x-visible", children: tabs.map((tab, index) => (_jsx("li", { className: "flex-shrink-0", children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => !tab.disabled && onSelect(index), disabled: tab.disabled, className: getItemClasses(activeIndex === index), children: [tab.icon && (_jsx("span", { className: `w-4 h-4 me-2 ${activeIndex === index ? 'text-current' : 'text-muted-foreground'}`, children: _jsx(tab.icon, {}) })), tab.title] }) }, tab.id))) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("div", { className: `bg-card border border-border rounded-lg p-6 ${tabPanelClassName ?? ''}`, children: tabs[activeIndex]?.content }) })] }));
 }
 // ─── PagamioTabs Component ───────────────────────────────────────────
 const PagamioTabs = ({ tabs, variant = 'default', orientation = 'horizontal', activeTab: controlledTab, defaultTab = 0, onTabChange, isSticky = false, isFullWidth = true, title, description, className = '', tabListClassName = '', tabPanelClassName = '', theme: customTheme, }) => {

package/lib/components/ui/Select.js

@@ -43,7 +43,7 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
         };
         setFilteredChildren(filterChildren(children));
     }, [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-background 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' &&
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('z-[110] relative min-w-[8rem] overflow-hidden rounded-md border bg-popover 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: {}, position: position, ...props, children: [_jsx("div", { className: "p-2 border-b border-border", 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 border-input rounded bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring", 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-muted-foreground", children: "No options found" })) }), _jsx(SelectScrollDownButton, {})] }) }));

package/lib/components/ui/StatCard.js

@@ -38,10 +38,10 @@ const statCardVariants = cva('relative overflow-hidden rounded-xl transition-all
             dark: 'bg-gradient-to-r from-gray-800 to-gray-900 text-white',
             primary: 'bg-gradient-to-r from-primary to-primary/90 text-white',
             // Light variants (bottom row in DreamPOS)
-            light: 'bg-background border border-border text-foreground',
-            'light-orange': 'bg-background border border-orange-100 text-foreground',
-            'light-teal': 'bg-background border border-teal-100 text-foreground',
-            'light-green': 'bg-background border border-emerald-100 text-foreground',
+            light: 'bg-card border border-border text-card-foreground',
+            'light-orange': 'bg-card border border-orange-100 text-card-foreground',
+            'light-teal': 'bg-card border border-teal-100 text-card-foreground',
+            'light-green': 'bg-card border border-emerald-100 text-card-foreground',
         },
         size: {
             sm: 'p-3',

package/lib/components/ui/Toast.js

@@ -21,6 +21,6 @@ const variantStyles = {
 };
 const Toast = ({ id, title, message, variant = 'info', onClose }) => {
     const currentVariant = variantStyles[variant];
-    return (_jsx("div", { className: "w-full max-w-xs overflow-hidden rounded-lg bg-background shadow", role: "alert", children: _jsxs("div", { className: `flex items-center space-x-4 p-4 ${currentVariant.bg} ${currentVariant.text}`, children: [_jsx("div", { className: "shrink-0", children: currentVariant.icon }), _jsxs("div", { className: "flex-1", children: [title && _jsx("p", { className: `text-sm font-semibold ${currentVariant.text}`, children: title }), _jsx("p", { className: "text-sm", children: message })] }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => onClose(id), className: "inline-flex items-center justify-center rounded-lg bg-transparent p-1 text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Close", children: _jsx(AiOutlineClose, { className: "h-5 w-5" }) })] }) }));
+    return (_jsx("div", { className: "w-full max-w-xs overflow-hidden rounded-lg bg-card shadow", role: "alert", children: _jsxs("div", { className: `flex items-center space-x-4 p-4 ${currentVariant.bg} ${currentVariant.text}`, children: [_jsx("div", { className: "shrink-0", children: currentVariant.icon }), _jsxs("div", { className: "flex-1", children: [title && _jsx("p", { className: `text-sm font-semibold ${currentVariant.text}`, children: title }), _jsx("p", { className: "text-sm", children: message })] }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => onClose(id), className: "inline-flex items-center justify-center rounded-lg bg-transparent p-1 text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Close", children: _jsx(AiOutlineClose, { className: "h-5 w-5" }) })] }) }));
 };
 export default Toast;

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

@@ -116,6 +116,9 @@ export const getDefaultChartOptions = (type) => ({
         axisTicks: {
             show: false,
         },
+        crosshairs: {
+            show: false,
+        },
     },
     yaxis: {
         labels: {
@@ -226,6 +229,12 @@ containerClassName, loadingClassName, errorClassName, emptyClassName, iconClassN
         const fillSeriesColor = callerFillSeriesColor ?? (isNonAxisChart ? false : undefined);
         return {
             ...merged,
+            chart: {
+                ...merged.chart,
+                // Force transparent background so the chart inherits the card's
+                // bg-card surface instead of ApexCharts' default dark-mode #424242.
+                background: 'transparent',
+            },
             // Stamp theme.mode so the SVG paper background and foreground colours
             // match the app colour mode (separate from tooltip.theme).
             theme: {

package/lib/form-engine/components/inputs/password-input/PasswordInput.js

@@ -4,6 +4,6 @@ import { Button, Icon, Input } from '../../../../components';
 const PasswordInput = React.forwardRef(({ field, error, ...props }, ref) => {
     const [showPassword, setShowPassword] = useState(false);
     const handleShowPassword = () => setShowPassword(!showPassword);
-    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsxs("div", { className: "relative", children: [_jsx(Input, { type: showPassword ? 'text' : 'password', ...props, ref: ref, id: field.name, placeholder: field.placeholder, className: `mt-1 block w-full ${error ? 'border-red-500' : ''}` }), _jsx(Button, { className: "absolute inset-y-0 right-2 pr-3 flex items-center", type: "button", size: "icon", variant: "ghost", onClick: handleShowPassword, children: showPassword ? _jsx(Icon, { name: 'FaEye', size: 20 }) : _jsx(Icon, { name: 'FaEyeSlash', size: 20 }) })] }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsxs("div", { className: "relative mt-1", children: [_jsx(Input, { type: showPassword ? 'text' : 'password', ...props, ref: ref, id: field.name, placeholder: field.placeholder, className: `block w-full pr-10 ${error ? 'border-red-500' : ''}` }), _jsx(Button, { className: "absolute right-1 top-1/2 -translate-y-1/2", type: "button", size: "icon", variant: "ghost", onClick: handleShowPassword, children: showPassword ? _jsx(Icon, { name: 'FaEye', size: 18 }) : _jsx(Icon, { name: 'FaEyeSlash', size: 18 }) })] }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
 });
 export default PasswordInput;

package/lib/pagamio-drawer/components/BaseDrawer.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer } from 'flowbite-react';
 import Button from '../../components/ui/Button';
 const BaseDrawer = ({ title, isOpen, marginTop = '0px', onClose, children }) => {
-    return (_jsxs(Drawer, { open: isOpen, onClose: onClose, backdrop: false, position: "right", className: "flex flex-col px-0 bg-background border-l-2 border-border w-full md:w-[420px]", style: {
+    return (_jsxs(Drawer, { open: isOpen, onClose: onClose, backdrop: false, position: "right", className: "flex flex-col px-0 bg-card border-l-2 border-border w-full md:w-[420px]", style: {
             marginTop,
             height: `calc(100vh - ${marginTop})`,
             paddingTop: '0px',
-        }, children: [_jsxs("div", { className: "sticky top-0 flex items-center h-12 border-b border-border", style: { zIndex: 100 }, children: [_jsx("div", { className: "flex items-center justify-start pl-6 h-full bg-muted py-5", style: { width: '88%' }, children: _jsx("h2", { className: "text-lg font-semibold text-foreground truncate", children: title }) }), _jsx(Button, { type: "button", variant: "ghost", className: "hover:text-foreground/70 hover:bg-accent bg-background", onClick: onClose, style: { width: '12%', height: '3rem' }, children: "x" })] }), children] }));
+        }, children: [_jsxs("div", { className: "sticky top-0 flex items-center h-12 border-b border-border", style: { zIndex: 100 }, children: [_jsx("div", { className: "flex items-center justify-start pl-6 h-full bg-muted py-5", style: { width: '88%' }, children: _jsx("h2", { className: "text-lg font-semibold text-foreground truncate", children: title }) }), _jsx(Button, { type: "button", variant: "ghost", className: "hover:text-foreground/70 hover:bg-accent bg-card", onClick: onClose, style: { width: '12%', height: '3rem' }, children: "x" })] }), children] }));
 };
 export default BaseDrawer;

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

@@ -30,6 +30,6 @@ export function getDefaultTableOptions() {
         mantineLoadingOverlayProps: {
             children: _jsx(LoaderComponent, { size: "lg" }),
         },
-        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." })] })),
+        renderEmptyRowsFallback: () => (_jsxs("div", { style: { textAlign: 'center', padding: '20px' }, className: "text-muted-foreground", children: [_jsx("p", { children: "No data available" }), _jsx("p", { children: "Please adjust your filters or try again later." })] })),
     };
 }

package/lib/styles.css

@@ -507,24 +507,24 @@ video {
        ═══════════════════════════════════════════════════════════════ */
 
     /* Surfaces */
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --background: 220 14% 96%;
+    --foreground: 224 71% 4%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 224 71% 4%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+    --popover-foreground: 224 71% 4%;
 
     /* Brand */
     --primary: 255 56% 12%;
     --primary-foreground: 0 0% 100%;
 
     /* Semantic surfaces */
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --secondary: 220 13% 91%;
+    --secondary-foreground: 224 71% 4%;
+    --muted: 220 13% 91%;
+    --muted-foreground: 220 9% 46%;
+    --accent: 220 13% 91%;
+    --accent-foreground: 224 71% 4%;
 
     /* Status */
     --destructive: 0 84.2% 60.2%;
@@ -541,8 +541,8 @@ video {
     --info-text: 197 71% 25%;
 
     /* Boundaries */
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
+    --border: 220 13% 86%;
+    --input: 220 13% 86%;
     --ring: 255 56% 12%;
     --radius: 0.5rem;
 
@@ -565,31 +565,31 @@ video {
 
     /* Sidebar */
     --sidebar: 0 0% 100%;
-    --sidebar-foreground: 240 10% 3.9%;
-    --sidebar-border: 240 5.9% 90%;
+    --sidebar-foreground: 224 71% 4%;
+    --sidebar-border: 220 13% 86%;
     --sidebar-accent: 255 56% 95%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-accent-foreground: 224 71% 4%;
     --sidebar-primary: 255 56% 12%;
     --sidebar-primary-foreground: 0 0% 100%;
   }
 
   .dark {
     /* DEV FALLBACKS — dark mode. Consumer's globals.css provides real values. */
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 6% 10%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 6% 10%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 255 56% 60%;
-    --primary-foreground: 240 10% 3.9%;
-    --secondary: 240 5% 15%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 5% 15%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 5% 15%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --background: 222 47% 11%;
+    --foreground: 210 40% 98%;
+    --card: 220 30% 16%;
+    --card-foreground: 210 40% 98%;
+    --popover: 220 30% 16%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 263 70% 71%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 220 25% 21%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 220 25% 21%;
+    --muted-foreground: 218 11% 65%;
+    --accent: 220 25% 21%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 72% 51%;
     --destructive-foreground: 0 0% 98%;
     --destructive-text: 0 84.2% 70%;
     --success: 142 71% 45%;
@@ -598,19 +598,19 @@ video {
     --warning: 43 96% 56%;
     --warning-foreground: 0 0% 0%;
     --warning-text: 43 96% 70%;
-    --info: 197 71% 52%;
+    --info: 199 89% 48%;
     --info-foreground: 0 0% 100%;
     --info-text: 197 71% 70%;
-    --border: 240 4% 22%;
-    --input: 240 4% 22%;
-    --ring: 255 56% 60%;
-    --sidebar: 240 10% 3.9%;
-    --sidebar-foreground: 0 0% 98%;
-    --sidebar-border: 240 4% 22%;
-    --sidebar-accent: 255 56% 10%;
-    --sidebar-accent-foreground: 0 0% 98%;
-    --sidebar-primary: 255 56% 60%;
-    --sidebar-primary-foreground: 240 10% 3.9%;
+    --border: 220 15% 28%;
+    --input: 220 15% 28%;
+    --ring: 263 70% 71%;
+    --sidebar: 222 47% 11%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-border: 220 15% 28%;
+    --sidebar-accent: 260 30% 14%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-primary: 263 70% 71%;
+    --sidebar-primary-foreground: 0 0% 100%;
   }
   * {
   border-color: hsl(var(--border));
@@ -2177,10 +2177,6 @@ video {
 .\!bg-transparent {
   background-color: transparent !important;
 }
-.bg-\[\#b45dae\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(180 93 174 / var(--tw-bg-opacity, 1));
-}
 .bg-accent {
   background-color: hsl(var(--accent));
 }
@@ -2979,6 +2975,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(30 66 159 / var(--tw-text-opacity, 1));
 }
+.text-card-foreground {
+  color: hsl(var(--card-foreground));
+}
 .text-current {
   color: currentColor;
 }
@@ -3110,14 +3109,6 @@ video {
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
-.text-neutral-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
-}
-.text-neutral-900 {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
-}
 .text-orange-600 {
   --tw-text-opacity: 1;
   color: rgb(208 56 1 / var(--tw-text-opacity, 1));
@@ -3592,6 +3583,27 @@ video {
 .\[scrollbar-width\:none\] {
   scrollbar-width: none;
 }
+
+/* ApexCharts dark-mode overrides — force tooltip and crosshair to use
+   CSS custom properties so they match the active theme. */
+.dark .apexcharts-tooltip {
+  background: hsl(var(--popover)) !important;
+  color: hsl(var(--popover-foreground)) !important;
+  border-color: hsl(var(--border)) !important;
+}
+.dark .apexcharts-tooltip .apexcharts-tooltip-title {
+  background: hsl(var(--muted)) !important;
+  border-color: hsl(var(--border)) !important;
+}
+.dark .apexcharts-xaxistooltip {
+  background: hsl(var(--popover)) !important;
+  color: hsl(var(--popover-foreground)) !important;
+  border-color: hsl(var(--border)) !important;
+}
+.dark .apexcharts-xaxistooltip-bottom::before,
+.dark .apexcharts-xaxistooltip-bottom::after {
+  border-bottom-color: hsl(var(--border)) !important;
+}
 .file\:-ms-4::file-selector-button {
   margin-inline-start: -1rem;
 }
@@ -4905,10 +4917,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(114 59 19 / var(--tw-border-opacity, 1));
 }
-.dark\:bg-\[\#b45dae\]:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(180 93 174 / var(--tw-bg-opacity, 1));
-}
 .dark\:bg-amber-900\/30:is(.dark *) {
   background-color: rgb(120 53 15 / 0.3);
 }
@@ -5253,10 +5261,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(54 83 20 / var(--tw-text-opacity, 1));
 }
-.dark\:text-neutral-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
-}
 .dark\:text-pink-500:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(231 70 148 / var(--tw-text-opacity, 1));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.246",
+  "version": "0.8.248",
   "publishConfig": {
     "access": "public",
     "provenance": false