@sikka/hawa 0.2.3-beta → 0.2.4-beta

package/package.json

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

package/src/blocks/AuthForms/SignInForm.tsx

@@ -5,12 +5,72 @@ import {
   HawaAlert,
   HawaPhoneInput,
   InterfaceSettings,
+  HawaLoading,
 } from "../../elements"
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 import { Icons } from "../../elements/Icons"
 import { cn } from "../../util"
 
+type SignInFormTypes = {
+  texts?: {
+    emailLabel?: string
+    emailPlaceholder?: string
+    emailRequiredText?: string
+    emailInvalidText?: string
+    usernameLabel?: string
+    usernamePlaceholder?: string
+    usernameRequired?: string
+    phoneRequiredText?: string
+    passwordLabel?: string
+    passwordPlaceholder?: string
+    passwordRequiredText?: string
+    forgotPasswordText?: string
+    newUserText?: string
+    createAccount?: string
+    signInText?: string
+    signInViaGoogleLabel?: string
+    signInViaGithubLabel?: string
+    signInViaTwitterLabel?: string
+  }
+  handleLanguage?: () => void
+  currentLanguage?: any
+  handleColorMode?: () => void
+  currentColorMode?: any
+  logosOnly?: boolean
+  direction?: "rtl" | "ltr"
+  showError?: any
+  errorTitle?: string
+  errorText?: string
+  signInType?: "email" | "username" | "phone"
+  withoutResetPassword?: boolean
+  withoutSignUp?: boolean
+  /**
+   *show spinner if true
+   */
+  isLoading?: any
+
+  isGoogleLoading?: boolean
+  isTwitterLoading?: boolean
+  isGithubLoading?: boolean
+
+  viaGoogle?: boolean
+  viaGithub?: boolean
+  viaTwitter?: boolean
+  /**
+   * Handle the sign in .
+   */
+  handleSignIn?: (e: any) => void
+  /**
+   * Handle routing to sign up page
+   */
+  handleRouteToSignUp?: () => void
+  handleForgotPassword?: () => void
+  handleGoogleSignIn?: () => void
+  handleGithubSignIn?: () => void
+  handleTwitterSignIn?: () => void
+}
+
 export const SignInForm: FC<SignInFormTypes> = (props) => {
   const {
     formState: { errors },
@@ -23,19 +83,6 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
       <Card dir={props.direction}>
         <CardContent headless>
           <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
-            {/* an attempt to animate the alert showing  */}
-            {/* <div
-            className={clsx(
-              "h-0 overflow-clip bg-blue-500 transition-all",
-              props.showError ? "h-auto" : ""
-            )}
-          >
-            <HawaAlert
-              title={props.errorTitle}
-              text={props.errorText}
-              severity="error"
-            />
-          </div> */}
             {props.showError && (
               <HawaAlert
                 title={props.errorTitle}
@@ -131,7 +178,15 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
               </>
             )}
 
-            <Button className="mt-4 w-full" isLoading={props.isLoading}>
+            <Button
+              className="mt-4 w-full"
+              // disabled={
+              //   props.isGithubLoading ||
+              //   props.isGoogleLoading ||
+              //   props.isTwitterLoading
+              // }
+              isLoading={props.isLoading}
+            >
               {props.texts.signInText}
             </Button>
             {!props.withoutSignUp && (
@@ -152,36 +207,53 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
         {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
           <CardFooter
             className={cn(
-              props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2"
+              props.logosOnly
+                ? "flex flex-row justify-center gap-2"
+                : "grid grid-cols-1 gap-2"
             )}
           >
             {props.viaGoogle && (
               <Button
+                // isLoading={props.isGoogleLoading}
                 className="flex flex-row items-center gap-2"
                 variant="outline"
                 onClick={props.handleGoogleSignIn}
               >
-                <Icons.google className="h-4 w-4" />
+                {props.isGoogleLoading ? (
+                  <HawaLoading size="button" />
+                ) : (
+                  <Icons.google className="h-4 w-4" />
+                )}
                 {!props.logosOnly && props.texts.signInViaGoogleLabel}
               </Button>
             )}
             {props.viaGithub && (
               <Button
+                // isLoading={props.isGithubLoading}
                 className="flex flex-row items-center gap-2"
                 variant="outline"
                 onClick={props.handleGithubSignIn}
               >
-                <Icons.gitHub className="h-4 w-4" />
+                {props.isGithubLoading ? (
+                  <HawaLoading size="button" />
+                ) : (
+                  <Icons.gitHub className="h-4 w-4" />
+                )}
                 {!props.logosOnly && props.texts.signInViaGithubLabel}
               </Button>
             )}
             {props.viaTwitter && (
               <Button
+                // isLoading={props.isTwitterLoading}
                 className="flex flex-row items-center gap-2"
                 variant="outline"
                 onClick={props.handleTwitterSignIn}
               >
-                <Icons.twitter className="h-4 w-4" />
+                {props.isTwitterLoading ? (
+                  <HawaLoading size="button" />
+                ) : (
+                  <Icons.twitter className="h-4 w-4" />
+                )}{" "}
                 {!props.logosOnly && props.texts.signInViaTwitterLabel}
               </Button>
             )}
@@ -197,57 +269,3 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
     </div>
   )
 }
-
-type SignInFormTypes = {
-  handleLanguage?: () => void
-  currentLanguage?: any
-  handleColorMode?: () => void
-  currentColorMode?: any
-  logosOnly?: boolean
-  direction?: "rtl" | "ltr"
-  showError?: any
-  errorTitle?: string
-  errorText?: string
-  signInType?: "email" | "username" | "phone"
-  texts?: {
-    emailLabel?: string
-    emailPlaceholder?: string
-    emailRequiredText?: string
-    emailInvalidText?: string
-    usernameLabel?: string
-    usernamePlaceholder?: string
-    usernameRequired?: string
-    phoneRequiredText?: string
-    passwordLabel?: string
-    passwordPlaceholder?: string
-    passwordRequiredText?: string
-    forgotPasswordText?: string
-    newUserText?: string
-    createAccount?: string
-    signInText?: string
-    signInViaGoogleLabel?: string
-    signInViaGithubLabel?: string
-    signInViaTwitterLabel?: string
-  }
-  withoutResetPassword?: boolean
-  withoutSignUp?: boolean
-  /**
-   *show spinner if true
-   */
-  isLoading?: any
-  viaGoogle?: boolean
-  viaGithub?: boolean
-  viaTwitter?: boolean
-  /**
-   * Handle the sign in .
-   */
-  handleSignIn?: (e: any) => void
-  /**
-   * Handle routing to sign up page
-   */
-  handleRouteToSignUp?: () => void
-  handleForgotPassword?: () => void
-  handleGoogleSignIn?: () => void
-  handleGithubSignIn?: () => void
-  handleTwitterSignIn?: () => void
-}

package/src/elements/UsageCard.tsx

@@ -9,11 +9,11 @@ type UsageCardTypes = {
 }
 export const UsageCard: FC<UsageCardTypes> = (props) => {
   return (
-    <div className="flex w-full flex-col gap-0 border p-4">
+    <div className="flex w-full flex-col gap-0 rounded border bg-card p-4">
       <div className="flex flex-row items-center gap-2">
         <span className="bg-white-200">{props.title}</span>
         {props.tooltip && (
-          <Tooltip content={props.tooltip} side="right">
+          <Tooltip content={props.tooltip} >
             <svg
               stroke="currentColor"
               aria-label="Exclamation Circle"