@pagamio/frontend-commons-lib 0.8.306 → 0.8.308

package/lib/auth/components/LoginPage.js

@@ -306,27 +306,27 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
     const passwordTabLabel = phoneOtpConfig?.passwordTabLabel ??
         phonePinConfig?.passwordTabLabel ??
         usernamePinConfig?.passwordTabLabel ??
-        'Email & Password';
-    const phoneTabLabel = phoneOtpConfig?.tabLabel ?? phonePinConfig?.tabLabel ?? (phonePinConfig ? 'Phone + PIN' : 'Phone + OTP');
-    const usernameTabLabel = usernamePinConfig?.tabLabel ?? 'Login Number + PIN';
-    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, 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: [showTabs && (_jsxs("div", { className: "mb-6 inline-flex w-full items-center gap-1 rounded-xl bg-muted/60 p-1", role: "tablist", "aria-label": "Login method", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 rounded-lg px-3 py-2 text-center text-sm font-medium transition-all ${activeTab === 'password'
-                                ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
-                                : 'text-muted-foreground hover:bg-background/40 hover:text-foreground'}`, children: passwordTabLabel }), showPhoneTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'phone', onClick: () => {
+        'Email';
+    const phoneTabLabel = phoneOtpConfig?.tabLabel ?? phonePinConfig?.tabLabel ?? 'Phone';
+    const usernameTabLabel = usernamePinConfig?.tabLabel ?? 'Login Number';
+    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, 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: [showTabs && (_jsxs("div", { className: "mb-6 flex divide-x divide-border overflow-hidden rounded-lg border border-border", role: "tablist", "aria-label": "Login method", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'password'
+                                ? 'bg-primary text-primary-foreground'
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel }), showPhoneTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'phone', onClick: () => {
                                 setActiveTab('phone');
                                 setPhoneStep('enterPhone');
                                 setPhoneOtpValue('');
                                 setPhonePinValue('');
                                 setPhoneError(null);
-                            }, className: `flex-1 rounded-lg px-3 py-2 text-center text-sm font-medium transition-all ${activeTab === 'phone'
-                                ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
-                                : 'text-muted-foreground hover:bg-background/40 hover:text-foreground'}`, children: phoneTabLabel })), showUsernameTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'username', onClick: () => {
+                            }, className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'phone'
+                                ? 'bg-primary text-primary-foreground'
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: phoneTabLabel })), showUsernameTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'username', onClick: () => {
                                 setActiveTab('username');
                                 setUsernameStep('enterLoginNumber');
                                 setLoginNumberPinValue('');
                                 setUsernameError(null);
-                            }, className: `flex-1 rounded-lg px-3 py-2 text-center text-sm font-medium transition-all ${activeTab === 'username'
-                                ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
-                                : 'text-muted-foreground hover:bg-background/40 hover:text-foreground'}`, children: usernameTabLabel }))] })), activeTab === 'password' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
+                            }, className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'username'
+                                ? 'bg-primary text-primary-foreground'
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: usernameTabLabel }))] })), activeTab === 'password' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
                                 ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
                                 password: '',
                                 rememberMe: false,

package/lib/form-engine/components/inputs/time-input/TimeInput.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { InputProps } from '../../../types';
-declare const TimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const TimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default TimeInput;

package/lib/form-engine/components/inputs/time-input/TimeInput.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TimeInput as MantineTimeInput } from '@mantine/dates';
+import { TimePicker } from '@mantine/dates';
 import React from 'react';
 const TimeInput = React.forwardRef(({ field, error, ...props }, ref) => {
     const { value, onChange, onBlur, name } = props;
-    const handleChange = (event) => {
-        if (onChange) {
-            onChange(event);
-        }
-    };
-    return (_jsx(MantineTimeInput, { ref: ref, label: field.label, value: value ? String(value) : '', onChange: handleChange, onBlur: onBlur, name: name || field.name, error: error?.message, disabled: field.disabled }));
+    return (_jsx(TimePicker, { ref: ref, label: field.label, value: value ? String(value) : '', onChange: onChange, onBlur: onBlur, name: name || field.name, error: error?.message, disabled: field.disabled, withDropdown: true, minutesStep: 5, clearable: true }));
 });
+TimeInput.displayName = 'TimeInput';
 export default TimeInput;

package/lib/styles.css

@@ -1927,6 +1927,9 @@ video {
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
+.divide-border > :not([hidden]) ~ :not([hidden]) {
+  border-color: hsl(var(--border));
+}
 .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
@@ -2486,9 +2489,6 @@ video {
 .bg-muted\/30 {
   background-color: hsl(var(--muted) / 0.3);
 }
-.bg-muted\/60 {
-  background-color: hsl(var(--muted) / 0.6);
-}
 .bg-orange-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 236 220 / var(--tw-bg-opacity, 1));
@@ -3594,11 +3594,6 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.ring-1 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3614,9 +3609,6 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.ring-border {
-  --tw-ring-color: hsl(var(--border));
-}
 .ring-cyan-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
@@ -4204,9 +4196,6 @@ video {
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
-.hover\:bg-background\/40:hover {
-  background-color: hsl(var(--background) / 0.4);
-}
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(195 221 253 / var(--tw-bg-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.306",
+  "version": "0.8.308",
   "publishConfig": {
     "access": "public",
     "provenance": false