@native-systems/ui 1.0.4 → 1.0.5

package/dist/index.cjs

@@ -112,7 +112,6 @@ const ForwardRef$4 = /*#__PURE__*/ React__namespace.forwardRef(EyeIcon);
 function InputField({
   id,
   label,
-  hideLabel = false,
   register,
   type,
   required,
@@ -123,14 +122,12 @@ function InputField({
   return jsxRuntime.jsxs('div', {
     className: 'flex flex-col space-y-2',
     children: [
-      !hideLabel
-        ? jsxRuntime.jsx('label', {
-            htmlFor: id,
-            className:
-              'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
-            children: label,
-          })
-        : null,
+      jsxRuntime.jsx('label', {
+        htmlFor: id,
+        className:
+          'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
+        children: label,
+      }),
       isPasswordField
         ? jsxRuntime.jsxs('div', {
             className: 'relative w-full',
@@ -141,12 +138,12 @@ function InputField({
                 type: isPasswordVisible ? 'text' : 'password',
                 autoComplete: autoCompleteId,
                 placeholder: label,
-                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' : ''}`,
+                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' : ''}`,
                 ...register,
               }),
               jsxRuntime.jsx('div', {
                 className:
-                  'absolute top-1/2 right-2 size-5 -translate-y-1/2 text-font-400 dark:text-font-600 cursor-pointer transition-colors hover:text-font-300 dark:hover:text-font-500',
+                  'absolute top-1/2 right-2 w-5 h-5 -translate-y-1/2 text-text-color-300 hover:cursor-pointer',
                 children: isPasswordVisible
                   ? jsxRuntime.jsx(ForwardRef$5, {
                       onClick: () => {
@@ -167,14 +164,14 @@ function InputField({
             type: type,
             autoComplete: autoCompleteId,
             placeholder: label,
-            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' : ''}`,
+            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' : ''}`,
             ...register,
           }),
     ],
   });
 }
 
-const SigninForm = ({ mapText, onSubmit, errorMessage, hideLabels }) => {
+const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
   const { register, handleSubmit } = reactHookForm.useForm({
     shouldUseNativeValidation: true,
   });
@@ -186,90 +183,97 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, hideLabels }) => {
         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'),
         }),
       }),
-      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'),
+      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,
         }),
-        isPasswordField: true,
       }),
       jsxRuntime.jsxs('div', {
         children: [
-          jsxRuntime.jsx('input', {
+          jsxRuntime.jsx('button', {
             type: 'submit',
-            value: mapText('auth:form.submit.text'),
             className:
-              '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',
+              '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,
           }),
-          errorMessage &&
-            jsxRuntime.jsx('span', {
-              className: 'block mt-2.5 text-sm text-red-600',
-              children: errorMessage,
-            }),
         ],
       }),
       jsxRuntime.jsx('div', {
         className: 'flex justify-between items-center',
-        children: jsxRuntime.jsx('a', {
-          href: '',
-          className:
-            'text-sm text-font-600 transition-colors hover:text-primary-500 dark:text-font-400',
-          children: mapText('auth:form.forgot.text'),
+        children: jsxRuntime.jsx('div', {
+          className: 'text-sm',
+          children: jsxRuntime.jsx('button', {
+            type: 'button',
+            onClick: () => {
+              if (onForgotPassword) {
+                onForgotPassword();
+              }
+            },
+            className:
+              'font-medium text-primary transition-colors hover:text-primary-500 dark:text-white',
+            children: mapText('auth:form.forgot.text'),
+          }),
         }),
       }),
     ],
   });
 };
 
-function SigninLayout({
-  mapText,
-  onSubmit,
-  errorMessage,
-  logoSrc,
-  hideLabels = false,
-}) {
-  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', {
+function SigninLayout({ mapText, onSubmit, errorMessage, onForgotPassword }) {
+  return jsxRuntime.jsxs('div', {
+    className: 'h-full flex flex-col sm:flex-row',
+    children: [
+      jsxRuntime.jsx('div', {
         className:
-          '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,
-            }),
+          "relative w-auto h-full bg-[url('/assets/signup_cover.png')] bg-no-repeat bg-center bg-cover sm:flex-1",
+      }),
+      jsxRuntime.jsx('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,
+                }),
+              }),
+            ],
           }),
-        ],
+        }),
       }),
-    }),
+    ],
   });
 }
 

package/dist/index.d.ts

@@ -2,14 +2,13 @@ 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, hideLabel, register, type, required, autoCompleteId, isPasswordField, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+    export function InputField({ id, label, register, type, required, autoCompleteId, isPasswordField, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 }
 
 declare module "@native-systems/ui" {
@@ -21,9 +20,9 @@ declare module "@native-systems/ui" {
         mapText: (key: string) => string;
         onSubmit: (values: any) => void;
         errorMessage: string | null;
-        hideLabels: boolean;
+        onForgotPassword?: () => void;
     };
-    export const SigninForm: ({ mapText, onSubmit, errorMessage, hideLabels }: ISigninFormProps) => import("react/jsx-runtime").JSX.Element;
+    export const SigninForm: ({ mapText, onSubmit, errorMessage, onForgotPassword }: ISigninFormProps) => import("react/jsx-runtime").JSX.Element;
 }
 
 declare module "@native-systems/ui" {
@@ -35,10 +34,9 @@ declare module "@native-systems/ui" {
         mapText: (key: string) => string;
         onSubmit: (email: string, password: string) => void;
         errorMessage: string | null;
-        logoSrc?: string;
-        hideLabels?: boolean;
+        onForgotPassword?: () => {};
     }
-    export function SigninLayout({ mapText, onSubmit, errorMessage, logoSrc, hideLabels }: SigninLayoutProps): import("react/jsx-runtime").JSX.Element;
+    export function SigninLayout({ mapText, onSubmit, errorMessage, onForgotPassword, }: SigninLayoutProps): import("react/jsx-runtime").JSX.Element;
 }
 
 declare module "@native-systems/ui" {
@@ -149,11 +147,11 @@ declare module "@native-systems/ui" {
         SaveButton: typeof Util.SaveButton;
         Textarea: typeof Util.Textarea;
         SigninLayout: typeof UI.SigninLayout;
-        SigninForm: ({ mapText, onSubmit, errorMessage, hideLabels }: {
+        SigninForm: ({ mapText, onSubmit, errorMessage, onForgotPassword }: {
             mapText: (key: string) => string;
             onSubmit: (values: any) => void;
             errorMessage: string | null;
-            hideLabels: boolean;
+            onForgotPassword?: () => 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":"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","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,7 +89,6 @@ const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(EyeIcon);
 function InputField({
   id,
   label,
-  hideLabel = false,
   register,
   type,
   required,
@@ -100,14 +99,12 @@ function InputField({
   return jsxs('div', {
     className: 'flex flex-col space-y-2',
     children: [
-      !hideLabel
-        ? jsx('label', {
-            htmlFor: id,
-            className:
-              'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
-            children: label,
-          })
-        : null,
+      jsx('label', {
+        htmlFor: id,
+        className:
+          'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
+        children: label,
+      }),
       isPasswordField
         ? jsxs('div', {
             className: 'relative w-full',
@@ -118,12 +115,12 @@ function InputField({
                 type: isPasswordVisible ? 'text' : 'password',
                 autoComplete: autoCompleteId,
                 placeholder: label,
-                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' : ''}`,
+                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' : ''}`,
                 ...register,
               }),
               jsx('div', {
                 className:
-                  'absolute top-1/2 right-2 size-5 -translate-y-1/2 text-font-400 dark:text-font-600 cursor-pointer transition-colors hover:text-font-300 dark:hover:text-font-500',
+                  'absolute top-1/2 right-2 w-5 h-5 -translate-y-1/2 text-text-color-300 hover:cursor-pointer',
                 children: isPasswordVisible
                   ? jsx(ForwardRef$5, {
                       onClick: () => {
@@ -144,14 +141,14 @@ function InputField({
             type: type,
             autoComplete: autoCompleteId,
             placeholder: label,
-            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' : ''}`,
+            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' : ''}`,
             ...register,
           }),
     ],
   });
 }
 
-const SigninForm = ({ mapText, onSubmit, errorMessage, hideLabels }) => {
+const SigninForm = ({ mapText, onSubmit, errorMessage, onForgotPassword }) => {
   const { register, handleSubmit } = useForm({
     shouldUseNativeValidation: true,
   });
@@ -163,90 +160,97 @@ const SigninForm = ({ mapText, onSubmit, errorMessage, hideLabels }) => {
         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'),
         }),
       }),
-      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'),
+      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,
         }),
-        isPasswordField: true,
       }),
       jsxs('div', {
         children: [
-          jsx('input', {
+          jsx('button', {
             type: 'submit',
-            value: mapText('auth:form.submit.text'),
             className:
-              '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',
+              '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,
           }),
-          errorMessage &&
-            jsx('span', {
-              className: 'block mt-2.5 text-sm text-red-600',
-              children: errorMessage,
-            }),
         ],
       }),
       jsx('div', {
         className: 'flex justify-between items-center',
-        children: jsx('a', {
-          href: '',
-          className:
-            'text-sm text-font-600 transition-colors hover:text-primary-500 dark:text-font-400',
-          children: mapText('auth:form.forgot.text'),
+        children: jsx('div', {
+          className: 'text-sm',
+          children: jsx('button', {
+            type: 'button',
+            onClick: () => {
+              if (onForgotPassword) {
+                onForgotPassword();
+              }
+            },
+            className:
+              'font-medium text-primary transition-colors hover:text-primary-500 dark:text-white',
+            children: mapText('auth:form.forgot.text'),
+          }),
         }),
       }),
     ],
   });
 };
 
-function SigninLayout({
-  mapText,
-  onSubmit,
-  errorMessage,
-  logoSrc,
-  hideLabels = false,
-}) {
-  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', {
+function SigninLayout({ mapText, onSubmit, errorMessage, onForgotPassword }) {
+  return jsxs('div', {
+    className: 'h-full flex flex-col sm:flex-row',
+    children: [
+      jsx('div', {
         className:
-          '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,
-            }),
+          "relative w-auto h-full bg-[url('/assets/signup_cover.png')] bg-no-repeat bg-center bg-cover sm:flex-1",
+      }),
+      jsx('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,
+                }),
+              }),
+            ],
           }),
-        ],
+        }),
       }),
-    }),
+    ],
   });
 }
 

package/package.json

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