@native-systems/ui 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -112,6 +112,7 @@ const ForwardRef$4 = /*#__PURE__*/ React__namespace.forwardRef(EyeIcon);
 function InputField({
   id,
   label,
+  hideLabel = false,
   register,
   type,
   required,
@@ -122,12 +123,14 @@ function InputField({
   return jsxRuntime.jsxs('div', {
     className: 'flex flex-col space-y-2',
     children: [
-      jsxRuntime.jsx('label', {
-        htmlFor: id,
-        className:
-          'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
-        children: label,
-      }),
+      !hideLabel
+        ? jsxRuntime.jsx('label', {
+            htmlFor: id,
+            className:
+              'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
+            children: label,
+          })
+        : null,
       isPasswordField
         ? jsxRuntime.jsxs('div', {
             className: 'relative w-full',
@@ -138,12 +141,12 @@ function InputField({
                 type: isPasswordVisible ? 'text' : 'password',
                 autoComplete: autoCompleteId,
                 placeholder: label,
-                className: `w-full block py-3 pr-8 pl-3 text-gray-600 bg-white border-none rounded-lg shadow-sm shadow-input appearance-none focus:outline-none focus:ring-primary placeholder-gray-400 sm:text-sm dark:text-black dark:placeholder-gray-500 ${type === 'number' ? 'text-right' : ''}`,
+                className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
                 ...register,
               }),
               jsxRuntime.jsx('div', {
                 className:
-                  'absolute top-1/2 right-2 w-5 h-5 -translate-y-1/2 text-text-color-300 hover:cursor-pointer',
+                  'size-5 absolute top-1/2 right-2 -translate-y-1/2 text-font-400 transition-colors cursor-pointer hover:text-font-300 dark:text-font-600 dark:hover:text-font-500',
                 children: isPasswordVisible
                   ? jsxRuntime.jsx(ForwardRef$5, {
                       onClick: () => {
@@ -164,17 +167,24 @@ function InputField({
             type: type,
             autoComplete: autoCompleteId,
             placeholder: label,
-            className: `relative w-full block py-3 pr-10 pl-3 text-gray-600 bg-white border-none rounded-lg shadow-sm shadow-input appearance-none focus:outline-none focus:ring-primary placeholder-gray-400 sm:text-sm dark:text-black dark:placeholder-gray-500 ${type === 'number' ? 'text-right' : ''}`,
+            className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
             ...register,
           }),
     ],
   });
 }
 
-const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
+const SigninForm = ({
+  mapText,
+  onSubmit,
+  errorMessage,
+  hideLabels,
+  onForgotPassword,
+}) => {
   const { register, handleSubmit } = reactHookForm.useForm({
     shouldUseNativeValidation: true,
   });
+  const [email, setEmail] = React.useState('');
   return jsxRuntime.jsxs('form', {
     onSubmit: handleSubmit(onSubmit),
     className: 'space-y-6',
@@ -183,38 +193,39 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
         id: 'email',
         label: mapText('auth:form.email.label'),
         type: 'text',
+        hideLabel: hideLabels,
         required: true,
         autoCompleteId: 'email',
         register: register('email', {
           required: mapText('form.email.validations.required'),
+          onChange: (e) => setEmail(e.target.value),
         }),
       }),
-      jsxRuntime.jsx('div', {
-        className: 'relative',
-        children: jsxRuntime.jsx(InputField, {
-          id: 'password',
-          label: mapText('auth:form.password.label'),
-          type: 'password',
-          required: true,
-          autoCompleteId: 'password',
-          register: register('password', {
-            required: mapText('form.password.validations.required'),
-          }),
-          isPasswordField: true,
+      jsxRuntime.jsx(InputField, {
+        id: 'password',
+        label: mapText('auth:form.password.label'),
+        type: 'password',
+        hideLabel: hideLabels,
+        required: true,
+        autoCompleteId: 'password',
+        register: register('password', {
+          required: mapText('form.password.validations.required'),
         }),
+        isPasswordField: true,
       }),
       jsxRuntime.jsxs('div', {
         children: [
-          jsxRuntime.jsx('button', {
+          jsxRuntime.jsx('input', {
             type: 'submit',
+            value: mapText('auth:form.submit.text'),
             className:
-              'w-full flex justify-center px-4 py-3 text-sm font-medium text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
-            children: mapText('auth:form.submit.text'),
-          }),
-          jsxRuntime.jsx('span', {
-            className: 'block mt-2 text-sm font-medium text-red-500',
-            children: errorMessage,
+              'w-full flex justify-center px-4 py-3 text-sm text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed cursor-pointer hover:scale-105 focus:outline-none focus:ring-1 focus:ring-base-600/20 focus:ring-offset-0 dark:focus:ring-base-500',
           }),
+          errorMessage &&
+            jsxRuntime.jsx('span', {
+              className: 'block mt-2.5 text-sm text-red-600',
+              children: errorMessage,
+            }),
         ],
       }),
       jsxRuntime.jsx('div', {
@@ -224,9 +235,7 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
           children: jsxRuntime.jsx('button', {
             type: 'button',
             onClick: () => {
-              if (onForgotPassword) {
-                onForgotPassword();
-              }
+              if (onForgotPassword) onForgotPassword(email);
             },
             className:
               'font-medium text-primary transition-colors hover:text-primary-500 dark:text-white',
@@ -238,42 +247,45 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
   });
 };
 
-function SigninLayout({ mapText, onSubmit, errorMessage, onForgotPassword }) {
-  return jsxRuntime.jsxs('div', {
-    className: 'h-full flex flex-col sm:flex-row',
-    children: [
-      jsxRuntime.jsx('div', {
-        className:
-          "relative w-auto h-full bg-[url('/assets/signup_cover.png')] bg-no-repeat bg-center bg-cover sm:flex-1",
-      }),
-      jsxRuntime.jsx('div', {
+function SigninLayout({
+  mapText,
+  onSubmit,
+  errorMessage,
+  logoSrc,
+  hideLabels,
+  onForgotPassword,
+}) {
+  return jsxRuntime.jsx('div', {
+    className:
+      'sign-in-layout-container size-full z-10 relative flex justify-end items-center p-5 sm:p-10',
+    children: jsxRuntime.jsx('div', {
+      className: 'w-full flex flex-row justify-center items-stretch max-w-xl',
+      children: jsxRuntime.jsxs('div', {
         className:
-          'flex-1 w-auto flex flex-col lg:flex-none max-sm:absolute max-sm:top-1/2 max-sm:left-1/2 max-sm:w-full max-sm:-translate-x-1/2 max-sm:-translate-y-1/2 max-sm:max-w-96 dark:sm:bg-base-900',
-        children: jsxRuntime.jsx('div', {
-          className:
-            'flex-1 flex flex-col p-4 sm:justify-center sm:px-6 sm:py-12 lg:px-20 xl:px-24 2xl:px-40 max-sm:px-5 max-sm:mx-5 max-sm:bg-white/80 max-sm:rounded-lg dark:max-sm:bg-base-900/80',
-          children: jsxRuntime.jsxs('div', {
-            className: 'w-full mx-auto lg:w-96 max-w-xl',
-            children: [
-              jsxRuntime.jsx('h2', {
-                className:
-                  'mt-6 text-3xl font-extrabold text-gray-900 select-none dark:text-white',
-                children: mapText('auth:page.title'),
-              }),
-              jsxRuntime.jsx('div', {
-                className: 'mt-10',
-                children: jsxRuntime.jsx(SigninForm, {
-                  mapText: mapText,
-                  onSubmit: (values) => onSubmit(values.email, values.password),
-                  errorMessage: errorMessage,
-                  onForgotPassword: onForgotPassword,
-                }),
-              }),
-            ],
+          'sign-in-dialog w-full p-5 bg-base-0/70 rounded-lg sm:p-10 dark:bg-base-950/70',
+        children: [
+          jsxRuntime.jsx('img', {
+            className: 'w-auto h-10 mb-20 object-cover',
+            src: logoSrc,
+            alt: '',
           }),
-        }),
+          jsxRuntime.jsx('h2', {
+            className: '',
+            children: mapText('auth:form.submit.text'),
+          }),
+          jsxRuntime.jsx('div', {
+            className: 'mt-5',
+            children: jsxRuntime.jsx(SigninForm, {
+              mapText: mapText,
+              onSubmit: (values) => onSubmit(values.email, values.password),
+              errorMessage: errorMessage,
+              hideLabels: hideLabels,
+              onForgotPassword: onForgotPassword,
+            }),
+          }),
+        ],
       }),
-    ],
+    }),
   });
 }
 

package/dist/index.d.ts

@@ -2,13 +2,14 @@ declare module "@native-systems/ui" {
     type InputFieldProps = {
         id: string;
         label: string;
+        hideLabel?: boolean;
         register: any;
         type: string;
         required: boolean;
         autoCompleteId?: string;
         isPasswordField?: boolean;
     };
-    export function InputField({ id, label, register, type, required, autoCompleteId, isPasswordField, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+    export function InputField({ id, label, hideLabel, register, type, required, autoCompleteId, isPasswordField, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 }
 
 declare module "@native-systems/ui" {
@@ -20,9 +21,10 @@ declare module "@native-systems/ui" {
         mapText: (key: string) => string;
         onSubmit: (values: any) => void;
         errorMessage: string | null;
-        onForgotPassword?: () => void;
+        hideLabels?: boolean;
+        onForgotPassword?: (email: string) => void;
     };
-    export const SigninForm: ({ mapText, onSubmit, errorMessage, onForgotPassword }: ISigninFormProps) => import("react/jsx-runtime").JSX.Element;
+    export const SigninForm: ({ mapText, onSubmit, errorMessage, hideLabels, onForgotPassword }: ISigninFormProps) => import("react/jsx-runtime").JSX.Element;
 }
 
 declare module "@native-systems/ui" {
@@ -34,9 +36,11 @@ declare module "@native-systems/ui" {
         mapText: (key: string) => string;
         onSubmit: (email: string, password: string) => void;
         errorMessage: string | null;
-        onForgotPassword?: () => {};
+        logoSrc?: string;
+        hideLabels?: boolean;
+        onForgotPassword?: (email: string) => void;
     }
-    export function SigninLayout({ mapText, onSubmit, errorMessage, onForgotPassword, }: SigninLayoutProps): import("react/jsx-runtime").JSX.Element;
+    export function SigninLayout({ mapText, onSubmit, errorMessage, logoSrc, hideLabels, onForgotPassword, }: SigninLayoutProps): import("react/jsx-runtime").JSX.Element;
 }
 
 declare module "@native-systems/ui" {
@@ -147,11 +151,12 @@ declare module "@native-systems/ui" {
         SaveButton: typeof Util.SaveButton;
         Textarea: typeof Util.Textarea;
         SigninLayout: typeof UI.SigninLayout;
-        SigninForm: ({ mapText, onSubmit, errorMessage, onForgotPassword }: {
+        SigninForm: ({ mapText, onSubmit, errorMessage, hideLabels, onForgotPassword }: {
             mapText: (key: string) => string;
             onSubmit: (values: any) => void;
             errorMessage: string | null;
-            onForgotPassword?: () => void;
+            hideLabels?: boolean;
+            onForgotPassword?: (email: string) => void;
         }) => import("react/jsx-runtime").JSX.Element;
     };
     export default _default;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/util/views/Input.tsx","src/components/auth/widgets/SigninForm.tsx","src/components/auth/layout/SigninLayout.tsx","src/components/util/layout/MainContentFrame.tsx","src/components/util/widgets/Pagination.tsx","src/components/util/views/CancelButton.tsx","src/components/util/views/ErrorDisplay.tsx","src/components/util/views/HowToCloseText.tsx","src/components/util/views/LoadingSpinner.tsx","src/components/util/views/SaveButton.tsx","src/components/util/views/Textarea.tsx","src/context/TemplateParserContext.tsx","src/index.ts"],"names":[],"mappings":";IAIA,KAAK,eAAe,GAAG;QACrB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,GAAG,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IAEF,MAAM,UAAU,UAAU,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,eAAuB,GACxB,EAAE,eAAe,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAuDjB;;;;;;;;ICrED,KAAK,gBAAgB,GAAG;QACtB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;QACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;QAChC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;QAC5B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;KAC/B,CAAC;IAEF,MAAM,CAAC,MAAM,UAAU,EAAA,CAAA,EAAA,OAAA,EAAA,QAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAA2D,gBAAgB,KAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OA6DjG,CAAC;;;;;;;;ICtEF,UAAU,iBAAiB;QACzB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;QACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;QACpD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;QAC5B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;KAC5B;IAED,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACjB,EAAE,iBAAiB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAwBnB;;;;IC1CD,OAAO,EAAE,SAAS,EAAE,cAAc;IAElC,KAAK,qBAAqB,GAAG;QAC3B,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC;IAEF,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAQ5D;IAED,OAAO,EAAE,gBAAgB,EAAE,CAAC;;;;ICX5B,KAAK,eAAe,GAAG;QACrB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,WAAW,EAAE,OAAO,CAAC;QACrB,WAAW,EAAE,OAAO,CAAC;QACrB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;KAC1C,CAAC;IAEF,MAAM,UAAU,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,EAAE,eAAe,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CA6CjB;;;;ICtED,KAAK,iBAAiB,GAAG;QACvB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IAEF,SAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAUnD;IAED,OAAO,EAAE,YAAY,EAAE,CAAC;;;;IChBxB,KAAK,iBAAiB,GAAG;QACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEF,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,iBAAiB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAQjD;IAED,OAAO,EAAE,YAAY,EAAE,CAAC;;;;ICdxB,SAAS,cAAc,IAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAMtB;IAED,OAAO,EAAE,cAAc,EAAE,CAAC;;;;ICN1B,KAAK,mBAAmB,GAAG;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IAEF,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,mBAAmB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAoBzE;IAED,OAAO,EAAE,cAAc,EAAE,CAAC;;;;IC3B1B,KAAK,eAAe,GAAG;QACrB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IAEF,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAWnE;IAED,OAAO,EAAE,UAAU,EAAE,CAAC;;;;ICnBtB,KAAK,aAAa,CAAC,CAAC,IAAI;QACtB,KAAK,EAAE,CAAC,CAAC;QACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;QAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,SAAS,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EAClC,KAAK,EACL,QAAQ,EACR,IAAQ,GACT,EAAE,aAAa,CAAC,CAAC,CAAC,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAWlB;IAED,OAAO,EAAE,QAAQ,EAAE,CAAC;;;;ICzBpB,OAAO,EAAiB,KAAK,SAAS,EAAsB,cAAc;IAE1E,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,gCAAgC;IAEjC,KAAK,0BAA0B,GAAG;QAChC,KAAK,EAAE,SAAS,CAAC;QACjB,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KAC1D,CAAC;IAOF,MAAM,MAAM,2BAA2B,GAAG;QACxC,cAAc,EAAE,WAAW,CAAC;QAC5B,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC;IAEF,MAAM,CAAC,MAAM,sBAAsB,EAAA,CAAA,KAAA,EAAW,2BAA2B,KAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OA+CxE,CAAC;IAEF,MAAM,CAAC,MAAM,iBAAiB,EAAA,MAAA,0BAQ7B,CAAC;;;;IC/EF,OAAO,KAAK,EAAE,2BAA0B;IACxC,OAAO,KAAK,IAAI,2BAA0B;IAC1C,OAAO,KAAK,GAAG,2BAAkB;;;;;;;;;;;;;;;;;;;;;;;;IAEjC,eAAA,QAAA,CAIE","file":"index.d.ts","sourceRoot":".."}
+{"version":3,"sources":["src/components/util/views/Input.tsx","src/components/auth/widgets/SigninForm.tsx","src/components/auth/layout/SigninLayout.tsx","src/components/util/layout/MainContentFrame.tsx","src/components/util/widgets/Pagination.tsx","src/components/util/views/CancelButton.tsx","src/components/util/views/ErrorDisplay.tsx","src/components/util/views/HowToCloseText.tsx","src/components/util/views/LoadingSpinner.tsx","src/components/util/views/SaveButton.tsx","src/components/util/views/Textarea.tsx","src/context/TemplateParserContext.tsx","src/index.ts"],"names":[],"mappings":"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","file":"index.d.ts","sourceRoot":".."}

package/dist/index.esm.js

@@ -89,6 +89,7 @@ const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(EyeIcon);
 function InputField({
   id,
   label,
+  hideLabel = false,
   register,
   type,
   required,
@@ -99,12 +100,14 @@ function InputField({
   return jsxs('div', {
     className: 'flex flex-col space-y-2',
     children: [
-      jsx('label', {
-        htmlFor: id,
-        className:
-          'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
-        children: label,
-      }),
+      !hideLabel
+        ? jsx('label', {
+            htmlFor: id,
+            className:
+              'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
+            children: label,
+          })
+        : null,
       isPasswordField
         ? jsxs('div', {
             className: 'relative w-full',
@@ -115,12 +118,12 @@ function InputField({
                 type: isPasswordVisible ? 'text' : 'password',
                 autoComplete: autoCompleteId,
                 placeholder: label,
-                className: `w-full block py-3 pr-8 pl-3 text-gray-600 bg-white border-none rounded-lg shadow-sm shadow-input appearance-none focus:outline-none focus:ring-primary placeholder-gray-400 sm:text-sm dark:text-black dark:placeholder-gray-500 ${type === 'number' ? 'text-right' : ''}`,
+                className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
                 ...register,
               }),
               jsx('div', {
                 className:
-                  'absolute top-1/2 right-2 w-5 h-5 -translate-y-1/2 text-text-color-300 hover:cursor-pointer',
+                  'size-5 absolute top-1/2 right-2 -translate-y-1/2 text-font-400 transition-colors cursor-pointer hover:text-font-300 dark:text-font-600 dark:hover:text-font-500',
                 children: isPasswordVisible
                   ? jsx(ForwardRef$5, {
                       onClick: () => {
@@ -141,17 +144,24 @@ function InputField({
             type: type,
             autoComplete: autoCompleteId,
             placeholder: label,
-            className: `relative w-full block py-3 pr-10 pl-3 text-gray-600 bg-white border-none rounded-lg shadow-sm shadow-input appearance-none focus:outline-none focus:ring-primary placeholder-gray-400 sm:text-sm dark:text-black dark:placeholder-gray-500 ${type === 'number' ? 'text-right' : ''}`,
+            className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
             ...register,
           }),
     ],
   });
 }
 
-const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
+const SigninForm = ({
+  mapText,
+  onSubmit,
+  errorMessage,
+  hideLabels,
+  onForgotPassword,
+}) => {
   const { register, handleSubmit } = useForm({
     shouldUseNativeValidation: true,
   });
+  const [email, setEmail] = useState('');
   return jsxs('form', {
     onSubmit: handleSubmit(onSubmit),
     className: 'space-y-6',
@@ -160,38 +170,39 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
         id: 'email',
         label: mapText('auth:form.email.label'),
         type: 'text',
+        hideLabel: hideLabels,
         required: true,
         autoCompleteId: 'email',
         register: register('email', {
           required: mapText('form.email.validations.required'),
+          onChange: (e) => setEmail(e.target.value),
         }),
       }),
-      jsx('div', {
-        className: 'relative',
-        children: jsx(InputField, {
-          id: 'password',
-          label: mapText('auth:form.password.label'),
-          type: 'password',
-          required: true,
-          autoCompleteId: 'password',
-          register: register('password', {
-            required: mapText('form.password.validations.required'),
-          }),
-          isPasswordField: true,
+      jsx(InputField, {
+        id: 'password',
+        label: mapText('auth:form.password.label'),
+        type: 'password',
+        hideLabel: hideLabels,
+        required: true,
+        autoCompleteId: 'password',
+        register: register('password', {
+          required: mapText('form.password.validations.required'),
         }),
+        isPasswordField: true,
       }),
       jsxs('div', {
         children: [
-          jsx('button', {
+          jsx('input', {
             type: 'submit',
+            value: mapText('auth:form.submit.text'),
             className:
-              'w-full flex justify-center px-4 py-3 text-sm font-medium text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
-            children: mapText('auth:form.submit.text'),
-          }),
-          jsx('span', {
-            className: 'block mt-2 text-sm font-medium text-red-500',
-            children: errorMessage,
+              'w-full flex justify-center px-4 py-3 text-sm text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed cursor-pointer hover:scale-105 focus:outline-none focus:ring-1 focus:ring-base-600/20 focus:ring-offset-0 dark:focus:ring-base-500',
           }),
+          errorMessage &&
+            jsx('span', {
+              className: 'block mt-2.5 text-sm text-red-600',
+              children: errorMessage,
+            }),
         ],
       }),
       jsx('div', {
@@ -201,9 +212,7 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
           children: jsx('button', {
             type: 'button',
             onClick: () => {
-              if (onForgotPassword) {
-                onForgotPassword();
-              }
+              if (onForgotPassword) onForgotPassword(email);
             },
             className:
               'font-medium text-primary transition-colors hover:text-primary-500 dark:text-white',
@@ -215,42 +224,45 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
   });
 };
 
-function SigninLayout({ mapText, onSubmit, errorMessage, onForgotPassword }) {
-  return jsxs('div', {
-    className: 'h-full flex flex-col sm:flex-row',
-    children: [
-      jsx('div', {
-        className:
-          "relative w-auto h-full bg-[url('/assets/signup_cover.png')] bg-no-repeat bg-center bg-cover sm:flex-1",
-      }),
-      jsx('div', {
+function SigninLayout({
+  mapText,
+  onSubmit,
+  errorMessage,
+  logoSrc,
+  hideLabels,
+  onForgotPassword,
+}) {
+  return jsx('div', {
+    className:
+      'sign-in-layout-container size-full z-10 relative flex justify-end items-center p-5 sm:p-10',
+    children: jsx('div', {
+      className: 'w-full flex flex-row justify-center items-stretch max-w-xl',
+      children: jsxs('div', {
         className:
-          'flex-1 w-auto flex flex-col lg:flex-none max-sm:absolute max-sm:top-1/2 max-sm:left-1/2 max-sm:w-full max-sm:-translate-x-1/2 max-sm:-translate-y-1/2 max-sm:max-w-96 dark:sm:bg-base-900',
-        children: jsx('div', {
-          className:
-            'flex-1 flex flex-col p-4 sm:justify-center sm:px-6 sm:py-12 lg:px-20 xl:px-24 2xl:px-40 max-sm:px-5 max-sm:mx-5 max-sm:bg-white/80 max-sm:rounded-lg dark:max-sm:bg-base-900/80',
-          children: jsxs('div', {
-            className: 'w-full mx-auto lg:w-96 max-w-xl',
-            children: [
-              jsx('h2', {
-                className:
-                  'mt-6 text-3xl font-extrabold text-gray-900 select-none dark:text-white',
-                children: mapText('auth:page.title'),
-              }),
-              jsx('div', {
-                className: 'mt-10',
-                children: jsx(SigninForm, {
-                  mapText: mapText,
-                  onSubmit: (values) => onSubmit(values.email, values.password),
-                  errorMessage: errorMessage,
-                  onForgotPassword: onForgotPassword,
-                }),
-              }),
-            ],
+          'sign-in-dialog w-full p-5 bg-base-0/70 rounded-lg sm:p-10 dark:bg-base-950/70',
+        children: [
+          jsx('img', {
+            className: 'w-auto h-10 mb-20 object-cover',
+            src: logoSrc,
+            alt: '',
           }),
-        }),
+          jsx('h2', {
+            className: '',
+            children: mapText('auth:form.submit.text'),
+          }),
+          jsx('div', {
+            className: 'mt-5',
+            children: jsx(SigninForm, {
+              mapText: mapText,
+              onSubmit: (values) => onSubmit(values.email, values.password),
+              errorMessage: errorMessage,
+              hideLabels: hideLabels,
+              onForgotPassword: onForgotPassword,
+            }),
+          }),
+        ],
       }),
-    ],
+    }),
   });
 }
 

package/package.json

@@ -10,7 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.5",
+  "version": "1.0.7",
   "license": "MIT",
   "private": false,
   "engines": {