react-unified-auth 1.0.2 → 1.0.3

package/dist/index.esm.js

@@ -4062,19 +4062,14 @@ function useDynamicForm(formId) {
 }
 
 function Button({ variant = 'primary', size = 'md', loading = false, fullWidth = false, children, disabled, className = '', ...props }) {
-    const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
-    const variantStyles = {
-        primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
-        secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
-        outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
-    };
-    const sizeStyles = {
-        sm: 'px-3 py-1.5 text-sm',
-        md: 'px-4 py-2 text-base',
-        lg: 'px-6 py-3 text-lg',
-    };
-    const widthStyles = fullWidth ? 'w-full' : '';
-    return (jsxs("button", { className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${widthStyles} ${className}`, disabled: disabled || loading, ...props, children: [loading && (jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), children] }));
+    const buttonClasses = [
+        'usa-button',
+        `usa-button--${variant}`,
+        `usa-button--${size}`,
+        fullWidth ? 'usa-button--full-width' : '',
+        className
+    ].filter(Boolean).join(' ');
+    return (jsxs("button", { className: buttonClasses, disabled: disabled || loading, ...props, children: [loading && (jsxs("svg", { className: "usa-loading-spinner", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), children] }));
 }
 
 function validateField(field, value) {
@@ -4163,8 +4158,8 @@ function DynamicForm({ fields, onSubmit, submitText = 'Submit', submitVariant =
     const renderField = (field) => {
         const error = touched[field.name] ? errors[field.name] : '';
         const hasError = !!error;
-        const baseInputStyles = 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 transition-colors';
-        const errorStyles = hasError ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500';
+        const baseInputStyles = 'usa-form__input';
+        const errorStyles = hasError ? 'usa-form__input--error' : '';
         switch (field.type) {
             case 'text':
             case 'email':
@@ -4172,18 +4167,18 @@ function DynamicForm({ fields, onSubmit, submitText = 'Submit', submitVariant =
             case 'number':
                 return (jsx("input", { type: field.type, name: field.name, value: values[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), onBlur: () => handleBlur(field.name), placeholder: field.placeholder, className: `${baseInputStyles} ${errorStyles}`, disabled: loading }));
             case 'textarea':
-                return (jsx("textarea", { name: field.name, value: values[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), onBlur: () => handleBlur(field.name), placeholder: field.placeholder, rows: 4, className: `${baseInputStyles} ${errorStyles}`, disabled: loading }));
+                return (jsx("textarea", { name: field.name, value: values[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), onBlur: () => handleBlur(field.name), placeholder: field.placeholder, rows: 4, className: "usa-form__textarea", disabled: loading }));
             case 'select':
-                return (jsxs("select", { name: field.name, value: values[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), onBlur: () => handleBlur(field.name), className: `${baseInputStyles} ${errorStyles}`, disabled: loading, children: [jsx("option", { value: "", children: "Select an option" }), field.options?.map((option) => (jsx("option", { value: option.value, children: option.label }, option.value)))] }));
+                return (jsxs("select", { name: field.name, value: values[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), onBlur: () => handleBlur(field.name), className: "usa-form__select", disabled: loading, children: [jsx("option", { value: "", children: "Select an option" }), field.options?.map((option) => (jsx("option", { value: option.value, children: option.label }, option.value)))] }));
             case 'checkbox':
-                return (jsx("input", { type: "checkbox", name: field.name, checked: values[field.name] || false, onChange: (e) => handleChange(field.name, e.target.checked), onBlur: () => handleBlur(field.name), className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500", disabled: loading }));
+                return (jsx("input", { type: "checkbox", name: field.name, checked: values[field.name] || false, onChange: (e) => handleChange(field.name, e.target.checked), onBlur: () => handleBlur(field.name), className: "usa-form__checkbox", disabled: loading }));
             case 'radio':
-                return (jsx("div", { className: "space-y-2", children: field.options?.map((option) => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx("input", { type: "radio", name: field.name, value: option.value, checked: values[field.name] === option.value, onChange: (e) => handleChange(field.name, e.target.value), onBlur: () => handleBlur(field.name), className: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500", disabled: loading }), jsx("span", { children: option.label })] }, option.value))) }));
+                return (jsx("div", { className: "usa-form__radio-group", children: field.options?.map((option) => (jsxs("label", { className: "usa-form__radio-label", children: [jsx("input", { type: "radio", name: field.name, value: option.value, checked: values[field.name] === option.value, onChange: (e) => handleChange(field.name, e.target.value), onBlur: () => handleBlur(field.name), className: "usa-form__radio", disabled: loading }), jsx("span", { children: option.label })] }, option.value))) }));
             default:
                 return null;
         }
     };
-    return (jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [fields.map((field) => (jsxs("div", { children: [jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [field.label, field.required && jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field), touched[field.name] && errors[field.name] && (jsx("p", { className: "mt-1 text-sm text-red-600", children: errors[field.name] }))] }, field.name))), jsx(Button, { type: "submit", variant: submitVariant, loading: loading, fullWidth: true, children: submitText })] }));
+    return (jsxs("form", { onSubmit: handleSubmit, className: "usa-form", children: [fields.map((field) => (jsxs("div", { className: "usa-form__field-group", children: [jsx("label", { className: `usa-form__label ${field.required ? 'usa-form__label--required' : ''}`, children: field.label }), renderField(field), touched[field.name] && errors[field.name] && (jsx("p", { className: "usa-form__error", children: errors[field.name] }))] }, field.name))), jsx(Button, { type: "submit", variant: submitVariant, loading: loading, fullWidth: true, children: submitText })] }));
 }
 
 function LoginForm({ formId, onSuccess, onError }) {
@@ -4216,32 +4211,32 @@ function LoginForm({ formId, onSuccess, onError }) {
         }
     };
     if (formLoading) {
-        return (jsx("div", { className: "flex items-center justify-center p-8", children: jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) }));
+        return (jsx("div", { className: "usa-login-form__loading", children: jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) }));
     }
     if (formError) {
-        return (jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: jsx("p", { className: "text-red-600", children: formError }) }));
+        return (jsx("div", { className: "usa-login-form__error", children: jsx("p", { className: "text-red-600", children: formError }) }));
     }
     if (!formConfig) {
         return null;
     }
-    return (jsx("div", { className: "w-full", children: jsx(DynamicForm, { fields: formConfig.fields, onSubmit: handleSubmit, submitText: formConfig.submitButton?.text || 'Login', submitVariant: formConfig.submitButton?.variant || 'primary', loading: submitting }) }));
+    return (jsx("div", { className: "usa-login-form", children: jsx(DynamicForm, { fields: formConfig.fields, onSubmit: handleSubmit, submitText: formConfig.submitButton?.text || 'Login', submitVariant: formConfig.submitButton?.variant || 'primary', loading: submitting }) }));
 }
 
 function UserInfoBox({ user, onLogout, loading = false, className = '' }) {
-    return (jsxs("div", { className: `bg-white rounded-lg shadow-md p-6 ${className}`, children: [jsxs("div", { className: "flex items-center space-x-4", children: [user.avatar && (jsx("img", { src: user.avatar, alt: user.name, className: "w-16 h-16 rounded-full object-cover" })), jsxs("div", { className: "flex-1", children: [jsx("h3", { className: "text-lg font-semibold text-gray-900", children: user.name }), user.email && (jsx("p", { className: "text-sm text-gray-600", children: user.email }))] })] }), onLogout && (jsx("div", { className: "mt-4", children: jsx(Button, { variant: "outline", size: "sm", onClick: onLogout, loading: loading, fullWidth: true, children: "Logout" }) }))] }));
+    return (jsxs("div", { className: `usa-user-info-box ${className}`, children: [jsxs("div", { className: "usa-user-info-box__header", children: [user.avatar && (jsx("img", { src: user.avatar, alt: user.name, className: "usa-user-info-box__avatar" })), jsxs("div", { className: "usa-user-info-box__details", children: [jsx("h3", { className: "usa-user-info-box__name", children: user.name }), user.email && (jsx("p", { className: "usa-user-info-box__email", children: user.email }))] })] }), onLogout && (jsx("div", { className: "mt-4", children: jsx(Button, { variant: "outline", size: "sm", onClick: onLogout, loading: loading, fullWidth: true, children: "Logout" }) }))] }));
 }
 
 function SocialLoginButton({ provider, onClick, loading = false, className = '' }) {
     const handleClick = () => {
         onClick(provider);
     };
-    return (jsxs(Button, { variant: "outline", onClick: handleClick, loading: loading, fullWidth: true, className: `flex items-center justify-center space-x-2 ${className}`, children: [provider.icon && (jsx("img", { src: provider.icon, alt: provider.name, className: "w-5 h-5" })), jsxs("span", { children: ["Continue with ", provider.name] })] }));
+    return (jsxs(Button, { variant: "outline", onClick: handleClick, loading: loading, fullWidth: true, className: `usa-social-login-button ${className}`, children: [provider.icon && (jsx("img", { src: provider.icon, alt: provider.name, className: "usa-social-login-button__icon" })), jsxs("span", { children: ["Continue with ", provider.name] })] }));
 }
 function SocialLogin({ providers, onLogin, loading = false, className = '' }) {
     if (providers.length === 0) {
         return null;
     }
-    return (jsx("div", { className: `space-y-3 ${className}`, children: providers.map((provider) => (jsx(SocialLoginButton, { provider: provider, onClick: onLogin, loading: loading }, provider.id))) }));
+    return (jsx("div", { className: `usa-social-login ${className}`, children: providers.map((provider) => (jsx(SocialLoginButton, { provider: provider, onClick: onLogin, loading: loading }, provider.id))) }));
 }
 
 export { ApiClient, AuthProvider, Button, DynamicForm, LoginForm, SocialLogin, SocialLoginButton, UserInfoBox, useAuth, useAuthConfig, useDynamicForm, validateField, validateForm };