@pagamio/frontend-commons-lib 0.8.244 → 0.8.246

package/lib/auth/components/AppBanner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const AppBanner = ({ text = 'EVENTS!', backgroundColor = '#b45dae' }) => {
-    return (_jsx("div", { className: "flex w-full justify-end mr-[29%] mt-[-7%]", children: _jsx("div", { className: "inline-block px-6 py-2 text-white font-bold uppercase text-[15px] relative bg-primary-500", style: {
+    return (_jsx("div", { className: "flex w-full justify-end mr-[29%] mt-[-7%]", children: _jsx("div", { className: "inline-block px-6 py-2 text-white font-bold uppercase text-[15px] relative bg-primary", style: {
                 // backgroundColor: backgroundColor,
                 // This clip-path creates the right arrow shape
                 clipPath: 'polygon(14% 18%, 85% 18%, 97% 51%, 85% 85%, 14% 85%)',

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

@@ -8,6 +8,8 @@ export interface BaseAuthPageProps {
     /** Logo configuration for branding */
     logo?: {
         src: string;
+        /** Optional alternative logo source to use in dark mode */
+        darkSrc?: string;
         alt: string;
         width: number;
         height: number;

package/lib/auth/components/AuthFormUtils.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../..';
 import { detectErrorType } from '../utils/errorDetection';
 /**
  * Common password validation for authentication forms
@@ -12,7 +13,7 @@ export const passwordValidation = {
 /**
  * Renders a back to login button
  */
-export const BackToLoginButton = ({ onBackToLogin, label }) => (_jsx("div", { className: "flex items-center justify-center mt-4", children: _jsx("button", { type: "button", onClick: onBackToLogin, className: "text-right text-sm text-primary-500 hover:underline dark:text-primary-500", children: label }) }));
+export const BackToLoginButton = ({ onBackToLogin, label }) => (_jsx("div", { className: "flex items-center justify-center mt-4", children: _jsx(Button, { type: "button", variant: "link", onClick: onBackToLogin, className: "text-right text-sm text-primary hover:underline", children: label }) }));
 /**
  * Creates a standardized form submission handler
  * @param config Form submission configuration

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

@@ -27,6 +27,8 @@ interface AuthPageLayoutProps {
     /** Logo configuration */
     logo?: {
         src: string;
+        /** Optional alternative logo source to use in dark mode */
+        darkSrc?: string;
         alt: string;
         width: number;
         height: number;

package/lib/auth/components/AuthPageLayout.js

@@ -7,11 +7,11 @@ export function AuthPageLayout({ title, subtitle, errorMessage, showLogo = true,
     width: 280,
     height: 250,
     className: 'mb-[2.5em]',
-}, renderInAppLayout = false, className = '', horizontal = true, children, appLabel, sideContent, sideContentClass = 'bg-gradient-to-br from-primary-600 to-primary-800', footer, }) {
+}, 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-white ${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-white 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" }), appLabel && _jsx(AppBanner, { text: appLabel })] })), _jsx("h2", { "data-testid": "auth-page-title", className: "text-2xl font-bold tracking-tight text-neutral-900 dark:text-white 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-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 })] }));
     }
     // 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 }), _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-gray-900 dark:text-white sm:text-[1.875em]", children: title }), _jsx("h2", { "data-testid": "auth-page-subtitle", className: "text-[1em] font-medium text-gray-600 dark:text-white 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] })] }));
+    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/auth/components/ChangePasswordPage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
+import { Button } from '../..';
 import { useToast } from '../../context';
 import { FormEngine } from '../../form-engine';
 import { createFormSubmissionHandler, passwordValidation } from './AuthFormUtils';
@@ -54,6 +55,6 @@ const ChangePasswordPage = ({ backHome = 'Back Home', submitButtonText = 'Change
             confirmationPassword,
         });
     }, 'Password changed successfully', 'Failed to change password. Please try again.');
-    return (_jsx(AuthPageLayout, { title: "Change Password", subtitle: "Ready for a new password? Enter your current password, then create a new one to update it!", errorMessage: error, showLogo: false, renderInAppLayout: true, horizontal: false, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: changePasswordFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 p-0", submitButtonClass: "w-full", submitButtonText: isLoading ? 'Updating...' : submitButtonText, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), showBackHomeButton && (_jsx("div", { className: "flex items-center justify-center mt-4", children: _jsx("button", { type: "button", onClick: onClickBackHome, className: "text-sm text-primary-500 hover:underline dark:text-primary-500", children: backHome }) }))] }) }));
+    return (_jsx(AuthPageLayout, { title: "Change Password", subtitle: "Ready for a new password? Enter your current password, then create a new one to update it!", errorMessage: error, showLogo: false, renderInAppLayout: true, horizontal: false, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: changePasswordFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 p-0", submitButtonClass: "w-full", submitButtonText: isLoading ? 'Updating...' : submitButtonText, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), showBackHomeButton && (_jsx("div", { className: "flex items-center justify-center mt-4", children: _jsx(Button, { type: "button", variant: "ghost", onClick: onClickBackHome, className: "text-sm text-primary hover:underline dark:text-primary", children: backHome }) }))] }) }));
 };
 export default ChangePasswordPage;

package/lib/auth/components/CustomerRegistrationPage.js

@@ -22,6 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ```
  */
 import { useRef, useState } from 'react';
+import { Button } from '../..';
 import { useToast } from '../../context';
 import { FormEngine } from '../../form-engine';
 import { useAuth } from '../context';
@@ -136,6 +137,6 @@ export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrat
         // Use the transformed data directly when custom mapper is provided
         return authService.register(registrationData);
     }, 'Registration successful', 'Registration failed. Please try again.');
-    return (_jsx(AuthPageLayout, { title: text.registerTitle, subtitle: text.registerSubtitle, errorMessage: error?.message, logo: logo, appLabel: appLabel, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: customRegistrationFields ?? registrationFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.registerButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), onBackToLogin && (_jsxs("div", { className: "mt-6 text-center text-sm", children: [_jsx("span", { className: "text-gray-500", children: "Already have an account? " }), _jsx("button", { type: "button", onClick: onBackToLogin, className: "font-medium text-primary-500 hover:underline dark:text-primary-500", children: text.backToLoginLabel })] }))] }) }));
+    return (_jsx(AuthPageLayout, { title: text.registerTitle, subtitle: text.registerSubtitle, errorMessage: error?.message, logo: logo, appLabel: appLabel, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: customRegistrationFields ?? registrationFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.registerButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), onBackToLogin && (_jsxs("div", { className: "mt-6 text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Already have an account? " }), _jsx(Button, { type: "button", variant: "link", onClick: onBackToLogin, className: "font-medium text-primary hover:underline", children: text.backToLoginLabel })] }))] }) }));
 }
 export default PagamioCustomerRegistrationPage;

package/lib/auth/components/FeatureCarousel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { Button } from '../..';
 import { cn } from '../../helpers';
 export function FeatureCarousel({ features, className, interval = 5000 }) {
     const [activeIndex, setActiveIndex] = useState(0);
@@ -13,5 +14,5 @@ export function FeatureCarousel({ features, className, interval = 5000 }) {
         return null;
     return (_jsx("div", { className: cn('relative h-full flex flex-col justify-center items-center px-12 text-white text-center overflow-hidden', className), children: _jsxs("div", { className: "relative z-10 w-full max-w-md mx-auto", children: [features.map((feature, index) => (_jsxs("div", { className: cn('transition-all duration-700 ease-in-out absolute top-0 left-0 w-full transform flex flex-col items-center', index === activeIndex
                         ? 'opacity-100 translate-y-0 relative'
-                        : 'opacity-0 translate-y-8 absolute pointer-events-none'), "aria-hidden": index !== activeIndex, children: [feature.icon && (_jsx("div", { className: "mb-8 flex h-24 w-24 items-center justify-center rounded-2xl bg-white/10 backdrop-blur-md shadow-xl border border-white/20", children: feature.icon })), _jsx("h2", { className: "mb-4 text-3xl font-bold tracking-tight", children: feature.title }), _jsx("p", { className: "text-lg text-primary-100 leading-relaxed font-light opacity-90", children: feature.description })] }, index))), _jsx("div", { className: "mt-16 flex gap-3 justify-center", children: features.map((_, index) => (_jsx("button", { onClick: () => setActiveIndex(index), className: cn('h-2 rounded-full transition-all duration-300', index === activeIndex ? 'w-8 bg-white' : 'w-2 bg-white/40 hover:bg-white/60'), "aria-label": `Go to slide ${index + 1}` }, index))) })] }) }));
+                        : 'opacity-0 translate-y-8 absolute pointer-events-none'), "aria-hidden": index !== activeIndex, children: [feature.icon && (_jsx("div", { className: "mb-8 flex h-24 w-24 items-center justify-center rounded-2xl bg-white/10 backdrop-blur-md shadow-xl border border-white/20", children: feature.icon })), _jsx("h2", { className: "mb-4 text-3xl font-bold tracking-tight", children: feature.title }), _jsx("p", { className: "text-lg text-primary-foreground/80 leading-relaxed font-light opacity-90", children: feature.description })] }, index))), _jsx("div", { className: "mt-16 flex gap-3 justify-center", children: features.map((_, index) => (_jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => setActiveIndex(index), className: cn('h-2 rounded-full transition-all duration-300', index === activeIndex ? 'w-8 bg-background' : 'w-2 bg-white/40 hover:bg-white/60'), "aria-label": `Go to slide ${index + 1}` }, index))) })] }) }));
 }

package/lib/auth/components/LoginPage.js

@@ -22,6 +22,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * ```
  */
 import { useRef, useState } from 'react';
+import { Button } from '../..';
 import { useToast } from '../../context';
 import { FormEngine } from '../../form-engine';
 import { AuthenticatorFactory } from '../authenticators';
@@ -139,6 +140,6 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
                         ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
                         password: '',
                         rememberMe: false,
-                    } }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx("button", { type: "button", onClick: onForgotPassword, className: "text-sm text-primary-500 hover:underline dark:text-primary-500", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-gray-500", children: "|" }), _jsx("button", { type: "button", onClick: handleCreateAccount, className: "text-sm text-primary-500 hover:underline dark:text-primary-500", children: text.createAccountLabel })] }))] })] }) }));
+                    } }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx(Button, { type: "button", variant: "link", onClick: onForgotPassword, className: "text-sm text-primary hover:underline", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })] }))] })] }) }));
 }
 export default PagamioLoginPage;

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

@@ -40,6 +40,8 @@ export interface OtpVerificationPageProps {
     /** Optional logo configuration */
     logo?: {
         src: string;
+        /** Optional alternative logo source to use in dark mode */
+        darkSrc?: string;
         alt: string;
         width: number;
         height: number;

package/lib/auth/components/OtpVerification.js

@@ -68,7 +68,7 @@ export const OtpInput = ({ length = 6, value, onChange, disabled = false, inputC
         const focusIndex = Math.min(pastedData.length, length - 1);
         inputRefs.current[focusIndex]?.focus();
     };
-    const defaultInputClassName = 'h-12 w-12 rounded-lg border border-gray-300 text-center text-lg font-semibold focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 disabled:bg-gray-100 disabled:text-gray-400';
+    const defaultInputClassName = 'h-12 w-12 rounded-lg border border-input text-center text-lg font-semibold focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/20 disabled:bg-muted disabled:text-muted-foreground';
     return (_jsx("div", { className: "flex justify-center gap-2", children: Array.from({ length }).map((_, index) => (_jsx("input", { ref: (el) => {
                 inputRefs.current[index] = el;
             }, type: "text", inputMode: "numeric", maxLength: 1, value: value[index] || '', onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, disabled: disabled, className: inputClassName ?? defaultInputClassName, autoComplete: "one-time-code", "aria-label": `Digit ${index + 1} of ${length}` }, `otp-input-${index}`))) }));
@@ -135,9 +135,9 @@ export const OtpVerificationPage = ({ email, onVerifySuccess, onBack, handlers,
             setIsResending(false);
         }
     };
-    return (_jsx("div", { className: `flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 ${classNames.container ?? ''}`, children: _jsxs("div", { className: "w-full max-w-md", children: [logo && (_jsx("div", { className: "mb-8 flex justify-center", children: _jsx("img", { src: logo.src, alt: logo.alt, width: logo.width, height: logo.height, className: "h-auto max-h-16" }) })), _jsxs("div", { className: `rounded-2xl border border-gray-200 bg-white p-8 shadow-sm ${classNames.card ?? ''}`, children: [_jsxs("div", { className: `mb-6 text-center ${classNames.header ?? ''}`, children: [_jsx("div", { className: `mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-100 ${classNames.icon ?? ''}`, children: _jsx(HiOutlineMail, { className: "h-8 w-8 text-primary-600" }) }), _jsx("h1", { className: "text-2xl font-bold text-gray-900", children: text.title }), _jsx("p", { className: "mt-2 text-sm text-gray-600", children: text.subtitle }), _jsx("p", { className: "mt-1 font-medium text-gray-900", children: email })] }), error && _jsx("div", { className: "mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600", children: error }), _jsxs("div", { className: "mb-6", children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-gray-700", children: text.codeLabel }), _jsx(OtpInput, { length: otpLength, value: otpValue, onChange: (value) => {
+    return (_jsx("div", { className: `flex min-h-screen items-center justify-center bg-muted px-4 py-12 ${classNames.container ?? ''}`, children: _jsxs("div", { className: "w-full max-w-md", children: [logo && (_jsxs("div", { className: "mb-8 flex justify-center", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: logo.width, height: logo.height, className: `h-auto max-h-16${logo.darkSrc ? ' dark:hidden' : ''}` }), logo.darkSrc && (_jsx("img", { src: logo.darkSrc, alt: logo.alt, width: logo.width, height: logo.height, className: "h-auto max-h-16 hidden dark:block" }))] })), _jsxs("div", { className: `rounded-2xl border border-border bg-background p-8 shadow-sm ${classNames.card ?? ''}`, children: [_jsxs("div", { className: `mb-6 text-center ${classNames.header ?? ''}`, children: [_jsx("div", { className: `mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/15 ${classNames.icon ?? ''}`, children: _jsx(HiOutlineMail, { className: "h-8 w-8 text-primary" }) }), _jsx("h1", { className: "text-2xl font-bold text-foreground", children: text.title }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: text.subtitle }), _jsx("p", { className: "mt-1 font-medium text-foreground", children: email })] }), error && _jsx("div", { className: "mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600", children: error }), _jsxs("div", { className: "mb-6", children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground", children: text.codeLabel }), _jsx(OtpInput, { length: otpLength, value: otpValue, onChange: (value) => {
                                         setOtpValue(value);
                                         clearError();
-                                    }, disabled: isVerifying })] }), _jsx(Button, { onClick: handleVerify, disabled: otpValue.length !== otpLength || isVerifying, className: "w-full", size: "lg", children: isVerifying ? (_jsxs(_Fragment, { children: [_jsx(Loader, { size: "sm", className: "mr-2" }), text.verifyingButton] })) : (text.verifyButton) }), _jsx("div", { className: "mt-6 text-center", children: canResend ? (_jsx("button", { onClick: handleResend, disabled: isResending, className: "text-sm font-medium text-primary-600 hover:text-primary-500 disabled:text-gray-400", children: isResending ? text.resendingButton : text.resendButton })) : (_jsxs("p", { className: "text-sm text-gray-500", children: [text.resendCountdownText, " ", _jsxs("span", { className: "font-medium text-gray-700", children: [countdown, "s"] })] })) }), _jsx("div", { className: "mt-6 border-t border-gray-200 pt-6", children: _jsxs("button", { onClick: onBack, className: "flex w-full items-center justify-center gap-2 text-sm text-gray-600 hover:text-gray-900", children: [_jsx(HiOutlineArrowLeft, { className: "h-4 w-4" }), text.backButton] }) })] })] }) }));
+                                    }, disabled: isVerifying })] }), _jsx(Button, { onClick: handleVerify, disabled: otpValue.length !== otpLength || isVerifying, className: "w-full", size: "lg", children: isVerifying ? (_jsxs(_Fragment, { children: [_jsx(Loader, { size: "sm", className: "mr-2" }), text.verifyingButton] })) : (text.verifyButton) }), _jsx("div", { className: "mt-6 text-center", children: canResend ? (_jsx(Button, { type: "button", variant: "ghost", onClick: handleResend, disabled: isResending, className: "text-sm font-medium text-primary hover:text-primary/90 disabled:text-muted-foreground", children: isResending ? text.resendingButton : text.resendButton })) : (_jsxs("p", { className: "text-sm text-muted-foreground", children: [text.resendCountdownText, " ", _jsxs("span", { className: "font-medium text-foreground", children: [countdown, "s"] })] })) }), _jsx("div", { className: "mt-6 border-t border-border pt-6", children: _jsxs(Button, { type: "button", variant: "ghost", onClick: onBack, className: "flex w-full items-center justify-center gap-2 text-sm text-foreground/70 hover:text-foreground", children: [_jsx(HiOutlineArrowLeft, { className: "h-4 w-4" }), text.backButton] }) })] })] }) }));
 };
 export default OtpVerificationPage;

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

@@ -10,6 +10,6 @@ const AuthPageLayout = ({ title, subtitle, errorMessage, showLogo = true, render
                             on: 'hidden w-2/3 rounded-l-lg md:w-96 md:p-0 lg:block',
                         },
                     },
-                }, children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h2", { className: "text-[1.5em] sm:text-[1.875em] font-bold text-gray-900 dark:text-white", children: title }), _jsx("p", { className: "text-[1em] font-medium text-gray-600 dark:text-white", children: subtitle })] }), errorMessage && (_jsx("div", { className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));
+                }, children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h2", { className: "text-[1.5em] sm:text-[1.875em] font-bold text-foreground", children: title }), _jsx("p", { className: "text-[1em] font-medium text-muted-foreground", children: subtitle })] }), errorMessage && (_jsx("div", { className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));
 };
 export default AuthPageLayout;

package/lib/components/charts/LineGraph.js

@@ -124,7 +124,7 @@ className = '', loading = false, }) => {
         return (_jsx("div", { className: `animate-pulse ${className}`, children: _jsx("div", { className: "w-full aspect-[16/9] bg-gray-200 rounded-lg" }) }));
     }
     if (!data?.length) {
-        return (_jsx("div", { className: `flex items-center justify-center w-full aspect-[16/9] bg-gray-50 rounded-lg ${className}`, children: _jsx("p", { className: "text-gray-500", children: "No data available" }) }));
+        return (_jsx("div", { className: `flex items-center justify-center w-full aspect-[16/9] bg-muted rounded-lg ${className}`, children: _jsx("p", { className: "text-muted-foreground", children: "No data available" }) }));
     }
     return (_jsx("div", { className: `relative ${className}`, children: _jsx(ReactECharts, { option: chartOptions, style: { height: '100%' }, className: "w-full aspect-[16/9] sm:aspect-[16/9]", opts: { renderer: 'canvas' }, notMerge: true }) }));
 };

package/lib/components/layout/AuthPageLayout.js

@@ -10,6 +10,6 @@ const AuthPageLayout = ({ title, subtitle, errorMessage, logo, showLogo = true,
                             on: 'hidden w-2/3 rounded-l-lg md:w-96 md:p-0 lg:block',
                         },
                     },
-                }, children: [_jsxs("div", { children: [_jsx("h2", { className: "text-[1.5em] font-bold text-gray-900 dark:text-white sm:text-[1.875em]", children: title }), _jsx("h2", { className: "text-[1em] font-medium text-gray-600 dark:text-white sm:text-[1em]", children: subtitle })] }), errorMessage && (_jsx("div", { className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));
+                }, children: [_jsxs("div", { children: [_jsx("h2", { className: "text-[1.5em] font-bold text-foreground sm:text-[1.875em]", children: title }), _jsx("h2", { className: "text-[1em] font-medium text-muted-foreground sm:text-[1em]", children: subtitle })] }), errorMessage && (_jsx("div", { className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));
 };
 export default AuthPageLayout;

package/lib/components/layout/BreadcrumbNav.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Breadcrumb } from 'flowbite-react';
+import { Breadcrumb, BreadcrumbItem } from 'flowbite-react';
 import { useAppBreadcrumbs } from '../../context';
 import { useTranslation } from '../../translations';
 const AppBreadcrumbNav = () => {
     const { breadcrumbs, pathname, rootPageIcon: PageIcon } = useAppBreadcrumbs();
     const { t } = useTranslation();
-    return (_jsx(Breadcrumb, { className: "mb-5", children: breadcrumbs.map((item, index) => (_jsx(Breadcrumb.Item, { href: index === breadcrumbs.length - 1 || !item.path ? undefined : item.path, children: _jsxs("div", { className: "flex items-center gap-x-3 text-2xl", children: [index === 0 && PageIcon && _jsx(PageIcon, {}), _jsx("span", { className: "text-sm dark:text-white", children: t(item.label) })] }) }, `breadcrumb-item-${item.path || item.key || index}-${item.label}`))) }, pathname));
+    return (_jsx(Breadcrumb, { className: "mb-5", children: breadcrumbs.map((item, index) => (_jsx(BreadcrumbItem, { href: index === breadcrumbs.length - 1 || !item.path ? undefined : item.path, children: _jsxs("div", { className: "flex items-center gap-x-3 text-2xl", children: [index === 0 && PageIcon && _jsx(PageIcon, {}), _jsx("span", { className: "text-sm", children: t(item.label) })] }) }, `breadcrumb-item-${item.path || item.key || index}-${item.label}`))) }, pathname));
 };
 export default AppBreadcrumbNav;

package/lib/components/layout/Navbar.d.ts

@@ -74,7 +74,7 @@ interface AppDashboardNavbarProps extends AppUserDropdownProps {
         light?: string;
         /**
          * Background color for dark mode
-         * @default 'dark:bg-gray-800'
+         * @default ''
          */
         dark?: string;
     };

package/lib/components/layout/Navbar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, DarkThemeToggle, Dropdown, Navbar, Tooltip } from 'flowbite-react';
+import { Avatar, DarkThemeToggle, Dropdown, DropdownDivider, DropdownHeader, DropdownItem, Navbar, NavbarBrand, Tooltip, } from 'flowbite-react';
 import { HiLockClosed, HiLogout, HiMenuAlt1, HiUser, HiX } from 'react-icons/hi';
 import { v4 as uuidv4 } from 'uuid';
 import React, { useCallback } from 'react';
@@ -7,13 +7,14 @@ import { useAuth } from '../../auth';
 import { useAppSidebarContext } from '../../context';
 import { useMediaQueries } from '../../shared';
 import { LocaleSwitcher, useLibTranslations, useTranslation } from '../../translations';
+import Button from '../ui/Button';
 const AppSidebarToggleButton = React.memo(({ isMobileOpen, onToggle }) => {
     const { tLib } = useLibTranslations();
-    return (_jsxs("button", { onClick: onToggle, className: "mr-3 cursor-pointer rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), _jsx("div", { className: "md:hidden", children: isMobileOpen ? _jsx(HiX, { className: "h-6 w-6" }) : _jsx(HiMenuAlt1, { className: "h-6 w-6" }) }), _jsx("div", { className: "hidden md:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }));
+    return (_jsxs(Button, { type: "button", variant: "ghost", onClick: onToggle, className: "mr-3 cursor-pointer rounded p-2 text-foreground/70 hover:bg-accent hover:text-foreground", children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), _jsx("div", { className: "md:hidden", children: isMobileOpen ? _jsx(HiX, { className: "h-6 w-6" }) : _jsx(HiMenuAlt1, { className: "h-6 w-6" }) }), _jsx("div", { className: "hidden md:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }));
 });
 const AppDarkThemeToggleWithTooltip = React.memo(() => {
     const { tLib } = useLibTranslations();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden dark:block", children: _jsx(Tooltip, { content: tLib('theme.toggleLight', 'Toggle light mode'), children: _jsx(DarkThemeToggle, {}) }) }), _jsx("div", { className: "dark:hidden", children: _jsx(Tooltip, { content: tLib('theme.toggleDark', 'Toggle dark mode'), children: _jsx(DarkThemeToggle, {}) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden dark:block", children: _jsx(Tooltip, { content: tLib('theme.toggleLight', 'Toggle light mode'), children: _jsx(DarkThemeToggle, {}) }) }), _jsx("div", { className: "hidden dark:hidden", children: _jsx(Tooltip, { content: tLib('theme.toggleDark', 'Toggle dark mode'), children: _jsx(DarkThemeToggle, {}) }) })] }));
 });
 const AppUserDropdown = React.memo(({ onLogout, onSelectChangePassword, onSelectProfile, navbarTextColors = { general: 'text-white' }, }) => {
     const { user, logout } = useAuth();
@@ -28,7 +29,7 @@ const AppUserDropdown = React.memo(({ onLogout, onSelectChangePassword, onSelect
         await logout();
         onLogout?.();
     }, [logout, onLogout]);
-    return (_jsxs(Dropdown, { className: "rounded", arrowIcon: false, inline: true, label: _jsxs("span", { className: navbarTextColors.general, children: [_jsx("span", { className: "sr-only", children: user?.userName }), _jsx(Avatar, { rounded: true, size: "sm", placeholderInitials: initials })] }), children: [_jsx(Dropdown.Header, { className: "px-4 py-3", children: _jsx("span", { className: "block text-sm font-medium capitalize text-primary-500", children: user?.userName }) }), _jsx(Dropdown.Item, { onClick: () => onSelectProfile(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiUser, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('userProfile', 'User Profile') })] }) }), _jsx(Dropdown.Item, { onClick: () => onSelectChangePassword?.(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLockClosed, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('changePassword', 'Change Password') })] }) }), _jsx(Dropdown.Divider, {}), _jsx(Dropdown.Item, { onClick: handleLogout, children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLogout, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('signOut', 'Sign Out') })] }) })] }));
+    return (_jsxs(Dropdown, { className: "rounded", arrowIcon: false, inline: true, label: _jsxs("span", { className: navbarTextColors.general, children: [_jsx("span", { className: "sr-only", children: user?.userName }), _jsx(Avatar, { rounded: true, size: "sm", placeholderInitials: initials })] }), children: [_jsx(DropdownHeader, { className: "px-4 py-3", children: _jsx("span", { className: "block text-sm font-medium capitalize text-primary", children: user?.userName }) }), _jsx(DropdownItem, { onClick: () => onSelectProfile(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiUser, { className: "text-foreground/70", size: 18 }), _jsx("span", { children: tLib('userProfile', 'User Profile') })] }) }), _jsx(DropdownItem, { onClick: () => onSelectChangePassword?.(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLockClosed, { className: "text-foreground/70", size: 18 }), _jsx("span", { children: tLib('changePassword', 'Change Password') })] }) }), _jsx(DropdownDivider, {}), _jsx(DropdownItem, { onClick: handleLogout, children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLogout, { className: "text-foreground/70", size: 18 }), _jsx("span", { children: tLib('signOut', 'Sign Out') })] }) })] }));
 });
 const EnvironmentBanner = ({ show = false, text, bgColor = 'red', color = 'black', }) => {
     if (!show)
@@ -47,7 +48,7 @@ const EnvironmentBanner = ({ show = false, text, bgColor = 'red', color = 'black
                     letterSpacing: '0.1em',
                 }, children: text }) }) }));
 };
-const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComponent, showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], showLocaleSwitcher = false, localeNames, environmentBanner = { show: false, text: '' }, navbarBackground = { light: 'bg-purple', dark: 'dark:bg-gray-800' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, }) => {
+const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComponent, showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], showLocaleSwitcher = false, localeNames, environmentBanner = { show: false, text: '' }, navbarBackground = { light: 'bg-purple', dark: '' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, }) => {
     const sidebar = useAppSidebarContext();
     const { isMd } = useMediaQueries();
     const { t } = useTranslation();
@@ -59,8 +60,8 @@ const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComp
             sidebar.mobile.toggle();
         }
     }, [isMd, sidebar.desktop, sidebar.mobile]);
-    const navbarClasses = `fixed top-0 w-full border-b border-gray-200 ${navbarBackground.light} p-0 dark:border-gray-700 ${navbarBackground.dark} sm:p-0`;
-    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { fluid: true, className: navbarClasses, style: { zIndex: 100 }, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [!hideSidebarToggle && (_jsx(AppSidebarToggleButton, { isMobileOpen: sidebar.mobile.isOpen, onToggle: handleToggleSidebar })), _jsxs(Navbar.Brand, { as: linkComponent, href: dashboardLink, className: "mr-14", children: [brandImage && (_jsx("img", { src: brandImage.src, alt: t(brandImage.alt), width: brandImage.width, height: brandImage.height, className: "h-8" })), _jsx("p", { className: `font-bold ${navbarTextColors.brand} text-[15px] mb-0`, children: t(appLabel) })] })] }), _jsxs("div", { className: "flex items-center lg:gap-3", children: [navBarActionComponents.map((action) => (_jsx(React.Fragment, { children: action }, `app-nav-bar-component-${uuidv4()}`))), showThemeToggler && _jsx(AppDarkThemeToggleWithTooltip, {}), showLocaleSwitcher && (_jsx("div", { className: `mx-2 ${navbarTextColors.general}`, children: _jsx(LocaleSwitcher, { localeNames: localeNames, className: "min-w-[120px] text-sm text-white bg-white z-50" }) })), _jsx("div", { className: "flex items-center", children: _jsx(AppUserDropdown, { onLogout: onLogout, onSelectChangePassword: onSelectChangePassword, onSelectProfile: onSelectProfile, navbarTextColors: navbarTextColors }) })] })] }) }) }), _jsx(EnvironmentBanner, { ...environmentBanner })] }));
+    const navbarClasses = `fixed top-0 w-full border-b border-border ${navbarBackground.light} p-0 ${navbarBackground.dark} sm:p-0`;
+    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { fluid: true, className: navbarClasses, style: { zIndex: 100 }, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [!hideSidebarToggle && (_jsx(AppSidebarToggleButton, { isMobileOpen: sidebar.mobile.isOpen, onToggle: handleToggleSidebar })), _jsxs(NavbarBrand, { as: linkComponent, href: dashboardLink, className: "mr-14", children: [brandImage && (_jsx("img", { src: brandImage.src, alt: t(brandImage.alt), width: brandImage.width, height: brandImage.height, className: "h-8" })), _jsx("p", { className: `font-bold ${navbarTextColors.brand} text-[15px] mb-0`, children: t(appLabel) })] })] }), _jsxs("div", { className: "flex items-center lg:gap-3", children: [navBarActionComponents.map((action) => (_jsx(React.Fragment, { children: action }, `app-nav-bar-component-${uuidv4()}`))), showThemeToggler && _jsx(AppDarkThemeToggleWithTooltip, {}), showLocaleSwitcher && (_jsx("div", { className: `mx-2 ${navbarTextColors.general}`, children: _jsx(LocaleSwitcher, { localeNames: localeNames, className: "min-w-[120px] text-sm text-white bg-background z-50" }) })), _jsx("div", { className: "flex items-center", children: _jsx(AppUserDropdown, { onLogout: onLogout, onSelectChangePassword: onSelectChangePassword, onSelectProfile: onSelectProfile, navbarTextColors: navbarTextColors }) })] })] }) }) }), _jsx(EnvironmentBanner, { ...environmentBanner })] }));
 };
 export default AppDashboardNavbar;
 export { AppSidebarToggleButton, AppDarkThemeToggleWithTooltip, AppUserDropdown, AppDashboardNavbar };

package/lib/components/layout/PageHeader.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from '../../translations';
 const AppPageHeader = ({ title, description }) => {
     const { t } = useTranslation();
-    return (_jsxs("div", { className: "mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: t(title) }), description && _jsx("p", { className: "text-1xl text-gray-600", children: t(description) })] }));
+    return (_jsxs("div", { className: "mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: t(title) }), description && _jsx("p", { className: "text-1xl text-muted-foreground", children: t(description) })] }));
 };
 export default AppPageHeader;

package/lib/components/layout/SessionExpiryModal.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal } from 'flowbite-react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'flowbite-react';
 import { useLibTranslations } from '../../translations';
 import { Button } from '../ui';
 const SessionExpiryModal = ({ show, countdown, loading, onDismiss, onRenew }) => {
     const { tLib } = useLibTranslations();
-    return (_jsxs(Modal, { show: show, onClose: onDismiss, children: [_jsx(Modal.Header, { children: tLib('sessionExpiryModal.title', 'Session about to expire due to inactivity') }), _jsx(Modal.Body, { children: _jsx("div", { className: "space-y-6 p-6", children: _jsx("p", { className: "text-base leading-relaxed text-gray-500 dark:text-gray-400", children: tLib('sessionExpiryModal.message', `Your session will end in ${countdown} seconds and you will be automatically logged out.`) }) }) }), _jsx(Modal.Footer, { children: _jsxs("div", { className: "flex w-full justify-end space-x-2", children: [_jsx(Button, { onClick: onDismiss, variant: "outline", disabled: loading, children: tLib('sessionExpiryModal.dismiss', 'Log Out') }), _jsx(Button, { onClick: onRenew, variant: "primary", disabled: loading, children: tLib('sessionExpiryModal.renew', 'Stay logged in') })] }) })] }));
+    return (_jsxs(Modal, { show: show, onClose: onDismiss, children: [_jsx(ModalHeader, { children: tLib('sessionExpiryModal.title', 'Session about to expire due to inactivity') }), _jsx(ModalBody, { children: _jsx("div", { className: "space-y-6 p-6", children: _jsx("p", { className: "text-base leading-relaxed text-muted-foreground", children: tLib('sessionExpiryModal.message', `Your session will end in ${countdown} seconds and you will be automatically logged out.`) }) }) }), _jsx(ModalFooter, { children: _jsxs("div", { className: "flex w-full justify-end space-x-2", children: [_jsx(Button, { onClick: onDismiss, variant: "outline", disabled: loading, children: tLib('sessionExpiryModal.dismiss', 'Log Out') }), _jsx(Button, { onClick: onRenew, variant: "primary", disabled: loading, children: tLib('sessionExpiryModal.renew', 'Stay logged in') })] }) })] }));
 };
 export default SessionExpiryModal;

package/lib/components/layout/Sidebar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Sidebar } from 'flowbite-react';
+import { Sidebar, SidebarCollapse, SidebarItem, SidebarItemGroup, SidebarItems } from 'flowbite-react';
 import { twMerge } from 'tailwind-merge';
 import React, { useEffect, useState } from 'react';
 import { useAppSidebarContext } from '../../context';
@@ -10,14 +10,14 @@ const AppSidebarMenu = () => {
     const getItemKey = (item, index) => item.key || item.href || `${item.label}-${index}`;
     // If groupByItem is true each item gets its own ItemGroup
     if (groupByItem) {
-        return (_jsx(Sidebar.Items, { children: pages.map((item, index) => {
+        return (_jsx(SidebarItems, { children: pages.map((item, index) => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { key, ...itemProps } = item;
-                return (_jsx(Sidebar.ItemGroup, { children: _jsx(AppSidebarItem, { ...itemProps }) }, getItemKey(item, index)));
+                return (_jsx(SidebarItemGroup, { children: _jsx(AppSidebarItem, { ...itemProps }) }, getItemKey(item, index)));
             }) }));
     }
     // Default behavior all items in one ItemGroup
-    return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item, index) => {
+    return (_jsx(SidebarItems, { children: _jsx(SidebarItemGroup, { children: pages.map((item, index) => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { key, ...itemProps } = item;
                 return _jsx(AppSidebarItem, { ...itemProps }, getItemKey(item, index));
@@ -32,7 +32,7 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
         if (desktop.isCollapsed) {
             return null;
         }
-        return (_jsxs("div", { className: "pt-3 first:pt-0", children: [_jsx("hr", { className: "mb-2 border-t border-gray-200 dark:border-gray-700" }), _jsx("span", { className: "px-3 text-[10px] font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-400", children: t(label) })] }));
+        return (_jsxs("div", { className: "pt-3 first:pt-0", children: [_jsx("hr", { className: "mb-2 border-t border-border" }), _jsx("span", { className: "px-3 text-[10px] font-semibold uppercase tracking-wider text-foreground/70", children: t(label) })] }));
     }
     // Check if current path matches this item or any of its descendants
     const isParentActive = href ? pathname === href || pathname.startsWith(`${href}/`) : false;
@@ -51,69 +51,59 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
         const singleItem = items[0];
         if (!singleItem.href) {
             // If single item has no href, render without link
-            return (_jsx(Sidebar.Item, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(label) }));
+            return (_jsx(SidebarItem, { icon: icon, label: badge && t(badge), className: twMerge('text-foreground/70 cursor-default'), children: t(label) }));
         }
-        return (_jsx(Sidebar.Item, { as: Link, href: singleItem.href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === singleItem.href &&
-                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
+        return (_jsx(SidebarItem, { as: Link, href: singleItem.href, icon: icon, label: badge && t(badge), className: twMerge('text-foreground/70 hover:text-primary/80 hover:bg-primary/10', pathname === singleItem.href && 'text-primary bg-primary/15 hover:bg-primary/15'), children: t(label) }));
     }
     // Handle non-collapsible sections - render as section header with always-visible links
     if (items?.length && collapsible === false) {
-        return (_jsxs("div", { className: "space-y-1", children: [showSeparator && _jsx("hr", { className: "my-3 border-t border-gray-200 dark:border-gray-700" }), _jsxs("div", { className: twMerge('flex items-center gap-3 px-3 py-2 text-sm font-semibold uppercase tracking-wider', 'text-gray-500 dark:text-gray-400'), children: [icon && React.createElement(icon, { className: 'h-5 w-5' }), _jsx("span", { children: t(label) })] }), _jsx("div", { className: "space-y-1 pl-2", children: items.map((child, childIndex) => {
+        return (_jsxs("div", { className: "space-y-1", children: [showSeparator && _jsx("hr", { className: "my-3 border-t border-border" }), _jsxs("div", { className: twMerge('flex items-center gap-3 px-3 py-2 text-sm font-semibold uppercase tracking-wider', 'text-muted-foreground'), children: [icon && React.createElement(icon, { className: 'h-5 w-5' }), _jsx("span", { children: t(label) })] }), _jsx("div", { className: "space-y-1 pl-2", children: items.map((child, childIndex) => {
                         // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         const { key, ...childProps } = child;
                         return (_jsx(React.Fragment, { children: child.items?.length ? (
                             // Recursively render nested items
                             _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...childProps }) })) : child.href ? (
                             // Render leaf item with link
-                            _jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
-                                    'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) : (
+                            _jsx(SidebarItem, { as: Link, href: child.href, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-foreground/70 hover:text-primary/80 hover:bg-primary/10', pathname === child.href && 'text-primary bg-primary/15 hover:bg-primary/15'), children: t(child.label) })) : (
                             // Render leaf item without link
-                            _jsx(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(child.label) })) }, child.key || child.href || `${child.label}-${childIndex}`));
+                            _jsx(SidebarItem, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-foreground/70 cursor-default'), children: t(child.label) })) }, child.key || child.href || `${child.label}-${childIndex}`));
                     }) })] }));
     }
     if (items?.length) {
         const isOpen = isParentActive || hasActiveChild(items);
-        return (_jsx(Sidebar.Collapse, { icon: icon, label: t(label), open: isOpen, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 
+        return (_jsx(SidebarCollapse, { icon: icon, label: t(label), open: isOpen, className: twMerge('text-foreground/70 hover:text-primary/80 hover:bg-primary/10', 
             // Parent styling when its child is active
-            hasActiveChild(items) && 'text-primary-700 dark:text-primary-300', 
+            hasActiveChild(items) && 'text-primary', 
             // Parent styling when it's directly active
-            isParentActive &&
-                !hasActiveChild(items) &&
-                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), theme: { list: 'space-y-2 py-2 [&>li>div]:w-full' }, children: items.map((child, childIndex) => {
+            isParentActive && !hasActiveChild(items) && 'text-primary bg-primary/15 hover:bg-primary/15'), theme: { list: 'space-y-2 py-2 [&>li>div]:w-full' }, children: items.map((child, childIndex) => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { key, ...childProps } = child;
                 return (_jsx(React.Fragment, { children: child.items?.length ? (
                     // Recursively render nested items
                     _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...childProps }) })) : child.href ? (
                     // Render leaf item with link
-                    _jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
-                            'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) : (
+                    _jsx(SidebarItem, { as: Link, href: child.href, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-foreground/70 hover:text-primary/80 hover:bg-primary/10', pathname === child.href && 'text-primary bg-primary/15 hover:bg-primary/15'), children: t(child.label) })) : (
                     // Render leaf item without link
-                    _jsx(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(child.label) })) }, child.key || child.href || `${child.label}-${childIndex}`));
+                    _jsx(SidebarItem, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-foreground/70 cursor-default'), children: t(child.label) })) }, child.key || child.href || `${child.label}-${childIndex}`));
             }) }));
     }
     // Render leaf item
     // If no href, render as a non-link item
     if (!href) {
-        return (_jsx(Sidebar.Item, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 'cursor-default'), children: t(label) }));
+        return (_jsx(SidebarItem, { icon: icon, label: badge && t(badge), className: twMerge('text-foreground/70 hover:text-primary/80 hover:bg-primary/10', 'cursor-default'), children: t(label) }));
     }
     // Handle coming soon items - disabled with badge
     if (comingSoon) {
-        return (_jsx(Sidebar.Item, { icon: icon, label: _jsx("span", { className: "inline-flex items-center rounded-md px-1.5 py-0.5 text-[9px] font-medium", style: {
-                    backgroundColor: 'rgb(254 243 199)', // amber-100
-                    color: 'rgb(180 83 9)', // amber-700
-                    border: '1px solid rgb(252 211 77)', // amber-300
-                }, children: t('sidebar.comingSoon', 'Soon') }), className: twMerge('text-gray-400 cursor-not-allowed', 'dark:text-gray-500'), children: t(label) }));
+        return (_jsx(SidebarItem, { icon: icon, label: t('sidebar.comingSoon', 'Soon'), className: twMerge('text-muted-foreground cursor-not-allowed'), children: t(label) }));
     }
-    return (_jsx(Sidebar.Item, { as: Link, href: href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', isParentActive &&
-            'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
+    return (_jsx(SidebarItem, { as: Link, href: href, icon: icon, label: badge && t(badge), className: twMerge('text-foreground/70 hover:text-primary/80 hover:bg-primary/10', isParentActive && 'text-primary bg-primary/15 hover:bg-primary/15'), children: t(label) }));
 };
 const AppMobileSidebar = () => {
     const { mobile: { isOpen, close }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();
     const { t } = useTranslation();
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2 scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-3", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-3", children: sidebarFooter })] }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-border pt-16 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2 scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-3", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-border p-3", children: sidebarFooter })] }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16" })] }));
 };
 const AppDesktopSidebar = () => {
     const { desktop: { isCollapsed, setCollapsed }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();
@@ -136,7 +126,7 @@ const AppDesktopSidebar = () => {
             setCollapsed(true);
         },
     };
-    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700 bg-white dark:bg-gray-900', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2 scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-2", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-3", children: sidebarFooter })] }) }));
+    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-border pt-16 duration-75 bg-background', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2 scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-2", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-border p-3", children: sidebarFooter })] }) }));
 };
 const AppDashboardSidebar = () => {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "md:hidden", children: _jsx(AppMobileSidebar, {}) }), _jsx("div", { className: "hidden md:block", children: _jsx(AppDesktopSidebar, {}) })] }));

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

@@ -4,6 +4,5 @@ export { default as AppBreadcrumbNav } from './BreadcrumbNav';
 export { default as AppLayoutContent } from './LayoutContent';
 export { default as AppPageHeader, type AppPageHeaderProps } from './PageHeader';
 export { default as AppDashboardSidebar, AppDesktopSidebar, AppMobileSidebar, AppSidebarMenu } from './Sidebar';
-export { default as VerticalTabsLayout, type VerticalTabsLayoutProps } from './VerticalTabsLayout';
 export { default as AppLayout, type AppLayoutProps } from './AppLayout';
 export { default as SessionExpiryModal, type SessionExpiryModalProps } from './SessionExpiryModal';

package/lib/components/layout/index.js

@@ -4,6 +4,5 @@ export { default as AppBreadcrumbNav } from './BreadcrumbNav';
 export { default as AppLayoutContent } from './LayoutContent';
 export { default as AppPageHeader } from './PageHeader';
 export { default as AppDashboardSidebar, AppDesktopSidebar, AppMobileSidebar, AppSidebarMenu } from './Sidebar';
-export { default as VerticalTabsLayout } from './VerticalTabsLayout';
 export { default as AppLayout } from './AppLayout';
 export { default as SessionExpiryModal } from './SessionExpiryModal';

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

@@ -549,7 +549,7 @@ interface NavbarV2DarkThemeToggleProps {
     className?: string;
 }
 /**
- * Dark theme toggle with tooltip
+ * Dark theme toggle with tooltip — uses ColorModeProvider (behavioral only).
  */
 declare const NavbarV2DarkThemeToggle: React.FC<NavbarV2DarkThemeToggleProps>;
 /**