@sikka/hawa 0.1.54 → 0.1.55

package/dist/index.d.mts

@@ -1211,6 +1211,10 @@ type SignInFormTypes = {
 declare function SignInBlock(): React$1.JSX.Element;
 
 type SignUpFormTypes = {
+    handleLanguage?: () => void;
+    currentLanguage?: any;
+    handleColorMode?: () => void;
+    currentColorMode?: any;
     direction?: "rtl" | "ltr";
     texts: {
         fullNameLabel: string;

package/dist/index.d.ts

@@ -1211,6 +1211,10 @@ type SignInFormTypes = {
 declare function SignInBlock(): React$1.JSX.Element;
 
 type SignUpFormTypes = {
+    handleLanguage?: () => void;
+    currentLanguage?: any;
+    handleColorMode?: () => void;
+    currentColorMode?: any;
     direction?: "rtl" | "ltr";
     texts: {
         fullNameLabel: string;

package/dist/index.js

@@ -9019,7 +9019,9 @@ var SignUpForm = function(props) {
     var methods = (0, import_react_hook_form4.useForm)();
     var errors = methods.formState.errors, handleSubmit = methods.handleSubmit, control = methods.control;
     var _field_value, _field_value1, _field_value2, _field_value3;
-    return /* @__PURE__ */ import_react76.default.createElement(Card, {
+    return /* @__PURE__ */ import_react76.default.createElement("div", {
+        className: "flex flex-col gap-4"
+    }, /* @__PURE__ */ import_react76.default.createElement(Card, {
         dir: props.direction
     }, /* @__PURE__ */ import_react76.default.createElement(CardContent, {
         headless: true
@@ -9252,7 +9254,12 @@ var SignUpForm = function(props) {
         onClick: props.handleTwitterSignUp
     }, /* @__PURE__ */ import_react76.default.createElement(Icons.twitter, {
         className: (0, import_clsx36.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signUpViaTwitterLabel)) : null);
+    }), props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ import_react76.default.createElement(InterfaceSettings, {
+        currentColorMode: props.currentColorMode,
+        currentLanguage: props.currentLanguage,
+        handleColorMode: props.handleColorMode,
+        handleLanguage: props.handleLanguage
+    }));
 };
 // src/blocks/AuthForms/NewPasswordForm.tsx
 var import_react77 = __toESM(require("react"));

package/dist/index.mjs

@@ -9346,7 +9346,7 @@ var SignUpForm = (props) => {
     handleSubmit,
     control
   } = methods;
-  return /* @__PURE__ */ React88.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React88.createElement(CardContent, { headless: true }, /* @__PURE__ */ React88.createElement("div", null, props.showError && /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React88.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React88.createElement(Card, { dir: props.direction }, /* @__PURE__ */ React88.createElement(CardContent, { headless: true }, /* @__PURE__ */ React88.createElement("div", null, props.showError && /* @__PURE__ */ React88.createElement(
     HawaAlert,
     {
       title: props.errorTitle,
@@ -9584,7 +9584,15 @@ var SignUpForm = (props) => {
         props.direction === "rtl" ? "ml-2" : "mr-2"
       )
     }
-  ), props.texts.signUpViaTwitterLabel)) : null);
+  ), props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ React88.createElement(
+    InterfaceSettings,
+    {
+      currentColorMode: props.currentColorMode,
+      currentLanguage: props.currentLanguage,
+      handleColorMode: props.handleColorMode,
+      handleLanguage: props.handleLanguage
+    }
+  ));
 };
 
 // src/blocks/AuthForms/NewPasswordForm.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react"
 import {
   HawaTextField,
-  HawaLogoButton,
+  InterfaceSettings,
   HawaAlert,
   HawaCheckbox,
   HawaSelect,
@@ -13,6 +13,10 @@ import { Icons } from "../../elements/Icons"
 import clsx from "clsx"
 
 type SignUpFormTypes = {
+  handleLanguage?: () => void
+  currentLanguage?: any
+  handleColorMode?: () => void
+  currentColorMode?: any
   direction?: "rtl" | "ltr"
   texts: {
     fullNameLabel: string
@@ -74,268 +78,276 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
   } = methods
 
   return (
-    <Card dir={props.direction}>
-      <CardContent headless>
-        <div>
-          {props.showError && (
-            <HawaAlert
-              title={props.errorTitle}
-              text={props.errorText}
-              severity="error"
-            />
-          )}
-          <FormProvider {...methods}>
-            <form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
-              <div>
-                {props.signUpFields.map((fld, i) => {
-                  if (fld === "fullname") {
-                    return (
-                      <Controller
-                        key={i}
-                        control={control}
-                        name="fullName"
-                        render={({ field }) => (
-                          <HawaTextField
-                            width="full"
-                            type="text"
-                            label={props.texts.fullNameLabel}
-                            placeholder={props.texts.fullNamePlaceholder}
-                            helpertext={errors.fullName?.message}
-                            onChange={field.onChange}
-                            value={field.value ?? ""}
-                          />
-                        )}
-                        rules={{
-                          required: props.texts.fullNameRequiredText,
-                        }}
-                      />
-                    )
-                  }
-                  if (fld === "email") {
-                    return (
-                      <Controller
-                        control={control}
-                        name="email"
-                        render={({ field }) => (
-                          <HawaTextField
-                            width="full"
-                            type="text"
-                            autoComplete="email"
-                            label={props.texts.emailLabel}
-                            helpertext={errors.email?.message}
-                            placeholder={props.texts.emailPlaceholder}
-                            onChange={field.onChange}
-                            value={field.value ?? ""}
-                          />
-                        )}
-                        rules={{
-                          required: props.texts.emailRequiredText,
-                          pattern: {
-                            value:
-                              /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                            message: props.texts.emailInvalidText,
-                          },
-                        }}
-                      />
-                    )
-                  }
-                  if (fld === "username") {
-                    return (
-                      <Controller
-                        control={control}
-                        name="username"
-                        render={({ field }) => (
-                          <HawaTextField
-                            width="full"
-                            type="text"
-                            autoComplete="username"
-                            label={props.texts.usernameLabel}
-                            helpertext={errors.username?.message}
-                            placeholder={props.texts.usernamePlaceholder}
-                            onChange={field.onChange}
-                            value={field.value ?? ""}
-                          />
-                        )}
-                        rules={{
-                          required: props.texts.usernameRequired,
-                        }}
-                      />
-                    )
-                  }
-                })}
-              </div>
-              <Controller
-                control={control}
-                name="password"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="password"
-                    autoComplete="new-password"
-                    // defaultValue={field.value ?? ""}
-                    label={props.texts.passwordLabel}
-                    placeholder={props.texts.passwordPlaceholder}
-                    helpertext={errors.password?.message}
-                    onChange={field.onChange}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{ required: props.texts.passwordRequiredText }}
-              />
-              <Controller
-                control={control}
-                name="confirm_password"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="password"
-                    autoComplete="new-password"
-                    // defaultValue={field.value ?? ""}
-                    label={props.texts.confirmPasswordLabel}
-                    placeholder={props.texts.confirmPasswordPlaceholder}
-                    helpertext={errors.confirm_password?.message}
-                    onChange={field.onChange}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{ required: props.texts.passwordRequiredText }}
+    <div className="flex flex-col gap-4">
+      <Card dir={props.direction}>
+        <CardContent headless>
+          <div>
+            {props.showError && (
+              <HawaAlert
+                title={props.errorTitle}
+                text={props.errorText}
+                severity="error"
               />
-              {props.showRefCode && (
+            )}
+            <FormProvider {...methods}>
+              <form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
+                <div>
+                  {props.signUpFields.map((fld, i) => {
+                    if (fld === "fullname") {
+                      return (
+                        <Controller
+                          key={i}
+                          control={control}
+                          name="fullName"
+                          render={({ field }) => (
+                            <HawaTextField
+                              width="full"
+                              type="text"
+                              label={props.texts.fullNameLabel}
+                              placeholder={props.texts.fullNamePlaceholder}
+                              helpertext={errors.fullName?.message}
+                              onChange={field.onChange}
+                              value={field.value ?? ""}
+                            />
+                          )}
+                          rules={{
+                            required: props.texts.fullNameRequiredText,
+                          }}
+                        />
+                      )
+                    }
+                    if (fld === "email") {
+                      return (
+                        <Controller
+                          control={control}
+                          name="email"
+                          render={({ field }) => (
+                            <HawaTextField
+                              width="full"
+                              type="text"
+                              autoComplete="email"
+                              label={props.texts.emailLabel}
+                              helpertext={errors.email?.message}
+                              placeholder={props.texts.emailPlaceholder}
+                              onChange={field.onChange}
+                              value={field.value ?? ""}
+                            />
+                          )}
+                          rules={{
+                            required: props.texts.emailRequiredText,
+                            pattern: {
+                              value:
+                                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                              message: props.texts.emailInvalidText,
+                            },
+                          }}
+                        />
+                      )
+                    }
+                    if (fld === "username") {
+                      return (
+                        <Controller
+                          control={control}
+                          name="username"
+                          render={({ field }) => (
+                            <HawaTextField
+                              width="full"
+                              type="text"
+                              autoComplete="username"
+                              label={props.texts.usernameLabel}
+                              helpertext={errors.username?.message}
+                              placeholder={props.texts.usernamePlaceholder}
+                              onChange={field.onChange}
+                              value={field.value ?? ""}
+                            />
+                          )}
+                          rules={{
+                            required: props.texts.usernameRequired,
+                          }}
+                        />
+                      )
+                    }
+                  })}
+                </div>
                 <Controller
                   control={control}
-                  name="refCode"
+                  name="password"
                   render={({ field }) => (
                     <HawaTextField
                       width="full"
-                      type="text"
-                      defaultValue={field.value ?? ""}
-                      label={props.texts.refCode}
+                      type="password"
+                      autoComplete="new-password"
+                      // defaultValue={field.value ?? ""}
+                      label={props.texts.passwordLabel}
                       placeholder={props.texts.passwordPlaceholder}
                       helpertext={errors.password?.message}
+                      onChange={field.onChange}
                       value={field.value ?? ""}
+                    />
+                  )}
+                  rules={{ required: props.texts.passwordRequiredText }}
+                />
+                <Controller
+                  control={control}
+                  name="confirm_password"
+                  render={({ field }) => (
+                    <HawaTextField
+                      width="full"
+                      type="password"
+                      autoComplete="new-password"
+                      // defaultValue={field.value ?? ""}
+                      label={props.texts.confirmPasswordLabel}
+                      placeholder={props.texts.confirmPasswordPlaceholder}
+                      helpertext={errors.confirm_password?.message}
                       onChange={field.onChange}
+                      value={field.value ?? ""}
                     />
                   )}
+                  rules={{ required: props.texts.passwordRequiredText }}
                 />
-              )}
-              {props.showUserSource && (
-                <div>
+                {props.showRefCode && (
                   <Controller
                     control={control}
-                    name="reference"
+                    name="refCode"
                     render={({ field }) => (
-                      <HawaSelect
-                        label="How did you learn about us?"
-                        isCreatable={false}
-                        isMulti={false ?? false}
-                        isSearchable={false}
-                        isClearable={false ?? false}
-                        options={[
-                          { value: "friend", label: "From a friend" },
-                          { value: "ad", label: "Advertisement" },
-                          { value: "other", label: "Other" },
-                        ]}
-                        onChange={(e: any) => {
-                          field.onChange(e.value)
-                        }}
+                      <HawaTextField
+                        width="full"
+                        type="text"
+                        defaultValue={field.value ?? ""}
+                        label={props.texts.refCode}
+                        placeholder={props.texts.passwordPlaceholder}
+                        helpertext={errors.password?.message}
+                        value={field.value ?? ""}
+                        onChange={field.onChange}
                       />
                     )}
                   />
-                </div>
-              )}
-              {props.showTermsOption && (
-                <Controller
-                  control={control}
-                  name="terms_accepted"
-                  render={({ field }) => (
-                    <HawaCheckbox
-                      id="terms_accepted"
-                      helperText={errors.terms_accepted?.message}
-                      onChange={(e) => field.onChange(e)}
-                      label={
-                        <span>
-                          {props.texts.iAcceptText}{" "}
-                          <a
-                            onClick={props.handleRouteToTOS}
-                            className="clickable-link"
-                          >
-                            {props.texts.termsText}
-                          </a>
-                        </span>
-                      }
+                )}
+                {props.showUserSource && (
+                  <div>
+                    <Controller
+                      control={control}
+                      name="reference"
+                      render={({ field }) => (
+                        <HawaSelect
+                          label="How did you learn about us?"
+                          isCreatable={false}
+                          isMulti={false ?? false}
+                          isSearchable={false}
+                          isClearable={false ?? false}
+                          options={[
+                            { value: "friend", label: "From a friend" },
+                            { value: "ad", label: "Advertisement" },
+                            { value: "other", label: "Other" },
+                          ]}
+                          onChange={(e: any) => {
+                            field.onChange(e.value)
+                          }}
+                        />
+                      )}
                     />
+                  </div>
+                )}
+                {props.showTermsOption && (
+                  <Controller
+                    control={control}
+                    name="terms_accepted"
+                    render={({ field }) => (
+                      <HawaCheckbox
+                        id="terms_accepted"
+                        helperText={errors.terms_accepted?.message}
+                        onChange={(e) => field.onChange(e)}
+                        label={
+                          <span>
+                            {props.texts.iAcceptText}{" "}
+                            <a
+                              onClick={props.handleRouteToTOS}
+                              className="clickable-link"
+                            >
+                              {props.texts.termsText}
+                            </a>
+                          </span>
+                        }
+                      />
+                    )}
+                    rules={{ required: props.texts.termsRequiredText }}
+                  />
+                )}
+                {props.showNewsletterOption && (
+                  <Controller
+                    control={control}
+                    name="newsletter_accepted"
+                    render={({ field }) => (
+                      <HawaCheckbox
+                        id="newsletter_accepted"
+                        label={props.texts.subscribeToNewsletter}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                )}
+
+                <Button className="w-full" isLoading={props.isLoading}>
+                  {props.texts.signUpText}
+                </Button>
+              </form>
+            </FormProvider>
+            <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white">
+              <span>{props.texts.existingUserText}</span>
+              <span
+                onClick={props.handleRouteToSignIn}
+                className="clickable-link"
+              >
+                {props.texts.signInText}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+
+        {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
+          <CardFooter className="grid grid-cols-1 gap-2 ">
+            {props.viaGoogle && (
+              <Button variant="outline" onClick={props.handleGoogleSignUp}>
+                <Icons.google
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
                   )}
-                  rules={{ required: props.texts.termsRequiredText }}
                 />
-              )}
-              {props.showNewsletterOption && (
-                <Controller
-                  control={control}
-                  name="newsletter_accepted"
-                  render={({ field }) => (
-                    <HawaCheckbox
-                      id="newsletter_accepted"
-                      label={props.texts.subscribeToNewsletter}
-                      onChange={field.onChange}
-                    />
+                {props.texts.signUpViaGoogleLabel}
+              </Button>
+            )}
+            {props.viaGithub && (
+              <Button variant="outline" onClick={props.handleGithubSignUp}>
+                <Icons.gitHub
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
                   )}
                 />
-              )}
-
-              <Button className="w-full" isLoading={props.isLoading}>
-                {props.texts.signUpText}
+                {props.texts.signUpViaGithubLabel}
               </Button>
-            </form>
-          </FormProvider>
-          <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white">
-            <span>{props.texts.existingUserText}</span>
-            <span
-              onClick={props.handleRouteToSignIn}
-              className="clickable-link"
-            >
-              {props.texts.signInText}
-            </span>
-          </div>
-        </div>
-      </CardContent>
-
-      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-        <CardFooter className="grid grid-cols-1 gap-2 ">
-          {props.viaGoogle && (
-            <Button variant="outline" onClick={props.handleGoogleSignUp}>
-              <Icons.google
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
-              />
-              {props.texts.signUpViaGoogleLabel}
-            </Button>
-          )}
-          {props.viaGithub && (
-            <Button variant="outline" onClick={props.handleGithubSignUp}>
-              <Icons.gitHub
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
-              />
-              {props.texts.signUpViaGithubLabel}
-            </Button>
-          )}
-          {props.viaTwitter && (
-            <Button variant="outline" onClick={props.handleTwitterSignUp}>
-              <Icons.twitter
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
-              />
-              {props.texts.signUpViaTwitterLabel}
-            </Button>
-          )}
-        </CardFooter>
-      ) : null}
-    </Card>
+            )}
+            {props.viaTwitter && (
+              <Button variant="outline" onClick={props.handleTwitterSignUp}>
+                <Icons.twitter
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
+                  )}
+                />
+                {props.texts.signUpViaTwitterLabel}
+              </Button>
+            )}
+          </CardFooter>
+        ) : null}
+      </Card>
+      <InterfaceSettings
+        currentColorMode={props.currentColorMode}
+        currentLanguage={props.currentLanguage}
+        handleColorMode={props.handleColorMode}
+        handleLanguage={props.handleLanguage}
+      />
+    </div>
   )
 }