@insforge/react 0.1.7 → 0.2.1

package/dist/components.mjs

@@ -244,11 +244,11 @@ function AuthPasswordStrengthIndicator({
 }
 function createRequirements(config) {
   const requirements = [];
-  const minLength = config.email.passwordMinLength;
-  const requireUppercase = config.email.requireUppercase;
-  const requireLowercase = config.email.requireLowercase;
-  const requireNumber = config.email.requireNumber;
-  const requireSpecialChar = config.email.requireSpecialChar;
+  const minLength = config.passwordMinLength;
+  const requireUppercase = config.requireUppercase;
+  const requireLowercase = config.requireLowercase;
+  const requireNumber = config.requireNumber;
+  const requireSpecialChar = config.requireSpecialChar;
   if (requireUppercase) {
     requirements.push({
       label: "At least 1 Uppercase letter",
@@ -787,72 +787,129 @@ function SignInForm({
   signUpUrl = "/sign-up",
   dividerText = "or"
 }) {
-  return /* @__PURE__ */ jsxs(AuthContainer, { appearance, children: [
-    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
-    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit,
-        noValidate: true,
-        className: "flex flex-col items-stretch justify-center gap-6",
-        children: [
-          /* @__PURE__ */ jsx(
-            AuthFormField,
-            {
-              id: "email",
-              type: "email",
-              label: emailLabel,
-              placeholder: emailPlaceholder,
-              value: email,
-              onChange: (e) => onEmailChange(e.target.value),
-              required: true,
-              autoComplete: "email"
+  return /* @__PURE__ */ jsxs(
+    AuthContainer,
+    {
+      appearance: {
+        containerClassName: appearance.container,
+        cardClassName: appearance.card
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AuthHeader,
+          {
+            title,
+            subtitle,
+            appearance: {
+              containerClassName: appearance.header?.container,
+              titleClassName: appearance.header?.title,
+              subtitleClassName: appearance.header?.subtitle
             }
-          ),
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthErrorBanner,
+          {
+            error: error || "",
+            className: appearance.errorBanner
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit,
+            noValidate: true,
+            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
+            children: [
+              /* @__PURE__ */ jsx(
+                AuthFormField,
+                {
+                  id: "email",
+                  type: "email",
+                  label: emailLabel,
+                  placeholder: emailPlaceholder,
+                  value: email,
+                  onChange: (e) => onEmailChange(e.target.value),
+                  required: true,
+                  autoComplete: "email",
+                  appearance: {
+                    containerClassName: appearance.form?.emailField?.container,
+                    labelClassName: appearance.form?.emailField?.label,
+                    inputClassName: appearance.form?.emailField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthPasswordField,
+                {
+                  id: "password",
+                  label: passwordLabel,
+                  placeholder: passwordPlaceholder,
+                  value: password,
+                  onChange: (e) => onPasswordChange(e.target.value),
+                  required: true,
+                  autoComplete: "current-password",
+                  emailAuthConfig,
+                  forgotPasswordLink: forgotPasswordUrl ? {
+                    href: forgotPasswordUrl,
+                    text: forgotPasswordText
+                  } : void 0,
+                  appearance: {
+                    containerClassName: appearance.form?.passwordField?.container,
+                    labelClassName: appearance.form?.passwordField?.label,
+                    inputClassName: appearance.form?.passwordField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthSubmitButton,
+                {
+                  isLoading: loading,
+                  disabled: loading || oauthLoading !== null,
+                  className: appearance.button,
+                  children: loading ? loadingButtonText : submitButtonText
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthLink,
+          {
+            text: signUpText,
+            linkText: signUpLinkText,
+            href: signUpUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
+            }
+          }
+        ),
+        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthPasswordField,
+            AuthDivider,
             {
-              id: "password",
-              label: passwordLabel,
-              placeholder: passwordPlaceholder,
-              value: password,
-              onChange: (e) => onPasswordChange(e.target.value),
-              required: true,
-              autoComplete: "current-password",
-              emailAuthConfig,
-              forgotPasswordLink: forgotPasswordUrl ? {
-                href: forgotPasswordUrl,
-                text: forgotPasswordText
-              } : void 0
+              text: dividerText,
+              className: appearance.divider
             }
           ),
           /* @__PURE__ */ jsx(
-            AuthSubmitButton,
+            AuthOAuthProviders,
             {
-              isLoading: loading,
+              providers: availableProviders,
+              onClick: onOAuthClick,
               disabled: loading || oauthLoading !== null,
-              className: appearance.buttonClassName,
-              children: loading ? loadingButtonText : submitButtonText
+              loading: oauthLoading,
+              appearance: {
+                containerClassName: appearance.oauth?.container,
+                buttonClassName: appearance.oauth?.button
+              }
             }
           )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
-    availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
-      /* @__PURE__ */ jsx(
-        AuthOAuthProviders,
-        {
-          providers: availableProviders,
-          onClick: onOAuthClick,
-          disabled: loading || oauthLoading !== null,
-          loading: oauthLoading
-        }
-      )
-    ] })
-  ] });
+        ] })
+      ]
+    }
+  );
 }
 function SignIn({
   afterSignInUrl = "/",
@@ -959,70 +1016,127 @@ function SignUpForm({
   signInUrl = "/sign-in",
   dividerText = "or"
 }) {
-  return /* @__PURE__ */ jsxs(AuthContainer, { appearance, children: [
-    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
-    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit,
-        noValidate: true,
-        className: "flex flex-col items-stretch justify-center gap-6",
-        children: [
-          /* @__PURE__ */ jsx(
-            AuthFormField,
-            {
-              id: "email",
-              type: "email",
-              label: emailLabel,
-              placeholder: emailPlaceholder,
-              value: email,
-              onChange: (e) => onEmailChange(e.target.value),
-              required: true,
-              autoComplete: "email"
+  return /* @__PURE__ */ jsxs(
+    AuthContainer,
+    {
+      appearance: {
+        containerClassName: appearance.container,
+        cardClassName: appearance.card
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AuthHeader,
+          {
+            title,
+            subtitle,
+            appearance: {
+              containerClassName: appearance.header?.container,
+              titleClassName: appearance.header?.title,
+              subtitleClassName: appearance.header?.subtitle
             }
-          ),
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthErrorBanner,
+          {
+            error: error || "",
+            className: appearance.errorBanner
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit,
+            noValidate: true,
+            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
+            children: [
+              /* @__PURE__ */ jsx(
+                AuthFormField,
+                {
+                  id: "email",
+                  type: "email",
+                  label: emailLabel,
+                  placeholder: emailPlaceholder,
+                  value: email,
+                  onChange: (e) => onEmailChange(e.target.value),
+                  required: true,
+                  autoComplete: "email",
+                  appearance: {
+                    containerClassName: appearance.form?.emailField?.container,
+                    labelClassName: appearance.form?.emailField?.label,
+                    inputClassName: appearance.form?.emailField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthPasswordField,
+                {
+                  id: "password",
+                  label: passwordLabel,
+                  placeholder: passwordPlaceholder,
+                  value: password,
+                  onChange: (e) => onPasswordChange(e.target.value),
+                  required: true,
+                  minLength: emailAuthConfig.passwordMinLength,
+                  autoComplete: "new-password",
+                  showStrengthIndicator: true,
+                  emailAuthConfig,
+                  appearance: {
+                    containerClassName: appearance.form?.passwordField?.container,
+                    labelClassName: appearance.form?.passwordField?.label,
+                    inputClassName: appearance.form?.passwordField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthSubmitButton,
+                {
+                  isLoading: loading,
+                  disabled: loading || oauthLoading !== null,
+                  className: appearance.button,
+                  children: loading ? loadingButtonText : submitButtonText
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthLink,
+          {
+            text: signInText,
+            linkText: signInLinkText,
+            href: signInUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
+            }
+          }
+        ),
+        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthPasswordField,
+            AuthDivider,
             {
-              id: "password",
-              label: passwordLabel,
-              placeholder: passwordPlaceholder,
-              value: password,
-              onChange: (e) => onPasswordChange(e.target.value),
-              required: true,
-              minLength: emailAuthConfig.email.passwordMinLength,
-              autoComplete: "new-password",
-              showStrengthIndicator: true,
-              emailAuthConfig
+              text: dividerText,
+              className: appearance.divider
             }
           ),
           /* @__PURE__ */ jsx(
-            AuthSubmitButton,
+            AuthOAuthProviders,
             {
-              isLoading: loading,
+              providers: availableProviders,
+              onClick: onOAuthClick,
               disabled: loading || oauthLoading !== null,
-              className: appearance.buttonClassName,
-              children: loading ? loadingButtonText : submitButtonText
+              loading: oauthLoading,
+              appearance: {
+                containerClassName: appearance.oauth?.container,
+                buttonClassName: appearance.oauth?.button
+              }
             }
           )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
-    availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
-      /* @__PURE__ */ jsx(
-        AuthOAuthProviders,
-        {
-          providers: availableProviders,
-          onClick: onOAuthClick,
-          disabled: loading || oauthLoading !== null,
-          loading: oauthLoading
-        }
-      )
-    ] })
-  ] });
+        ] })
+      ]
+    }
+  );
 }
 function SignUp({
   afterSignUpUrl = "/",
@@ -1368,57 +1482,101 @@ function ForgotPasswordForm({
   successMessage
 }) {
   if (success) {
-    return /* @__PURE__ */ jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
-      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
-      /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs(AuthContainer, { appearance, children: [
-    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
-    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    /* @__PURE__ */ jsxs(
-      "form",
+    return /* @__PURE__ */ jsx(
+      AuthContainer,
       {
-        onSubmit,
-        noValidate: true,
-        className: "flex flex-col items-stretch justify-center gap-6",
-        children: [
-          /* @__PURE__ */ jsx(
-            AuthFormField,
-            {
-              id: "email",
-              type: "email",
-              label: emailLabel,
-              placeholder: emailPlaceholder,
-              value: email,
-              onChange: (e) => onEmailChange(e.target.value),
-              required: true,
-              autoComplete: "email"
+        appearance: {
+          containerClassName: appearance.container,
+          cardClassName: appearance.card
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
+          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    AuthContainer,
+    {
+      appearance: {
+        containerClassName: appearance.container,
+        cardClassName: appearance.card
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AuthHeader,
+          {
+            title,
+            subtitle,
+            appearance: {
+              containerClassName: appearance.header?.container,
+              titleClassName: appearance.header?.title,
+              subtitleClassName: appearance.header?.subtitle
             }
-          ),
-          /* @__PURE__ */ jsx(
-            AuthSubmitButton,
-            {
-              isLoading: loading,
-              disabled: loading,
-              className: appearance.buttonClassName,
-              children: loading ? loadingButtonText : submitButtonText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthErrorBanner,
+          {
+            error: error || "",
+            className: appearance.errorBanner
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit,
+            noValidate: true,
+            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
+            children: [
+              /* @__PURE__ */ jsx(
+                AuthFormField,
+                {
+                  id: "email",
+                  type: "email",
+                  label: emailLabel,
+                  placeholder: emailPlaceholder,
+                  value: email,
+                  onChange: (e) => onEmailChange(e.target.value),
+                  required: true,
+                  autoComplete: "email",
+                  appearance: {
+                    containerClassName: appearance.form?.emailField?.container,
+                    labelClassName: appearance.form?.emailField?.label,
+                    inputClassName: appearance.form?.emailField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthSubmitButton,
+                {
+                  isLoading: loading,
+                  disabled: loading,
+                  className: appearance.button,
+                  children: loading ? loadingButtonText : submitButtonText
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthLink,
+          {
+            text: backToSignInText,
+            linkText: "Back to Sign In",
+            href: backToSignInUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
             }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AuthLink,
-      {
-        text: backToSignInText,
-        linkText: "Back to Sign In",
-        href: backToSignInUrl
-      }
-    )
-  ] });
+          }
+        )
+      ]
+    }
+  );
 }
 function ResetPasswordForm({
   newPassword,
@@ -1441,63 +1599,99 @@ function ResetPasswordForm({
   backToSignInText = "",
   backToSignInUrl = "/sign-in"
 }) {
-  return /* @__PURE__ */ jsxs(AuthContainer, { appearance, children: [
-    /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
-    /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit,
-        noValidate: true,
-        className: "flex flex-col items-stretch justify-center gap-6",
-        children: [
-          /* @__PURE__ */ jsx(
-            AuthPasswordField,
-            {
-              id: "newPassword",
-              label: newPasswordLabel,
-              placeholder: newPasswordPlaceholder,
-              value: newPassword,
-              onChange: (e) => onNewPasswordChange(e.target.value),
-              required: true,
-              autoComplete: "new-password",
-              showStrengthIndicator: true,
-              emailAuthConfig
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AuthPasswordField,
-            {
-              id: "confirmPassword",
-              label: confirmPasswordLabel,
-              placeholder: confirmPasswordPlaceholder,
-              value: confirmPassword,
-              onChange: (e) => onConfirmPasswordChange(e.target.value),
-              required: true,
-              autoComplete: "new-password",
-              emailAuthConfig
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AuthSubmitButton,
-            {
-              isLoading: loading,
-              disabled: loading,
-              className: appearance.buttonClassName,
-              children: loading ? loadingButtonText : submitButtonText
+  return /* @__PURE__ */ jsxs(
+    AuthContainer,
+    {
+      appearance: {
+        containerClassName: appearance.container,
+        cardClassName: appearance.card
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AuthHeader,
+          {
+            title,
+            subtitle,
+            appearance: {
+              containerClassName: appearance.header?.container,
+              titleClassName: appearance.header?.title,
+              subtitleClassName: appearance.header?.subtitle
             }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-gray-600 dark:text-gray-400", children: [
-      backToSignInText && /* @__PURE__ */ jsxs("span", { children: [
-        backToSignInText,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" })
-    ] })
-  ] });
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthErrorBanner,
+          {
+            error: error || "",
+            className: appearance.errorBanner
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit,
+            noValidate: true,
+            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
+            children: [
+              /* @__PURE__ */ jsx(
+                AuthPasswordField,
+                {
+                  id: "newPassword",
+                  label: newPasswordLabel,
+                  placeholder: newPasswordPlaceholder,
+                  value: newPassword,
+                  onChange: (e) => onNewPasswordChange(e.target.value),
+                  required: true,
+                  autoComplete: "new-password",
+                  showStrengthIndicator: true,
+                  emailAuthConfig,
+                  appearance: {
+                    containerClassName: appearance.form?.newPasswordField?.container,
+                    labelClassName: appearance.form?.newPasswordField?.label,
+                    inputClassName: appearance.form?.newPasswordField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthPasswordField,
+                {
+                  id: "confirmPassword",
+                  label: confirmPasswordLabel,
+                  placeholder: confirmPasswordPlaceholder,
+                  value: confirmPassword,
+                  onChange: (e) => onConfirmPasswordChange(e.target.value),
+                  required: true,
+                  autoComplete: "new-password",
+                  emailAuthConfig,
+                  appearance: {
+                    containerClassName: appearance.form?.confirmPasswordField?.container,
+                    labelClassName: appearance.form?.confirmPasswordField?.label,
+                    inputClassName: appearance.form?.confirmPasswordField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthSubmitButton,
+                {
+                  isLoading: loading,
+                  disabled: loading,
+                  className: appearance.button,
+                  children: loading ? loadingButtonText : submitButtonText
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("p", { className: appearance.backToSignIn || "text-center text-sm text-gray-600 dark:text-gray-400", children: [
+          backToSignInText && /* @__PURE__ */ jsxs("span", { children: [
+            backToSignInText,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" })
+        ] })
+      ]
+    }
+  );
 }
 function VerifyEmailStatus({
   status,