@sikka/hawa 0.1.91 → 0.1.92

package/dist/styles.css

@@ -2428,6 +2428,9 @@ video {
 .text-right {
   text-align: right;
 }
+.text-start {
+  text-align: start;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -2952,6 +2955,10 @@ video {
 .repeat-infinite {
   animation-iteration-count: infinite;
 }
+.shadow-color-primary {
+    --tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -3321,6 +3328,26 @@ body {
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
+.active\:translate-x-0:active {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-x-0\.5:active {
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-y-0:active {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-y-0\.5:active {
+  --tw-translate-y: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:shadow-color-primary-active:active {
+    --tw-shadow: 0.125rem 0.125rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -3798,6 +3825,10 @@ body {
 :is(.dark .dark\:bg-background) {
   background-color: hsl(var(--background));
 }
+:is(.dark .dark\:bg-black) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 :is(.dark .dark\:bg-blue-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));

package/package.json

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

package/src/blocks/AuthForms/AppLanding.tsx

@@ -5,72 +5,121 @@ import { Button } from "../../elements/Button"
 import { Icons } from "../../elements/Icons"
 
 type AppLandingTypes = {
-  handleSignIn: () => void
-  handleSignUp: () => void
-  handleLanguage: () => void
-  handleColorMode: () => void
   texts?: {
     signIn: string
     signUp: string
     lang: string
     newUserText?: string
     createAccount?: string
+    continueWithGoogle?: string
+    continueWithTwitter?: string
+    continueWithApple?: string
+    continueWithMicrosoft?: string
+    continueWithGithub?: string
+    continueWithEmail?: string
+    continueWithPhone?: string
   }
+  viaGoogle?: boolean
+  viaTwitter?: boolean
+  viaGithub?: boolean
+  viaMicrosoft?: boolean
+  viaEmail?: boolean
+  viaPhone?: boolean
+  viaApple?: boolean
+
   withoutSignUp?: boolean
-  handleRouteToSignUp?: () => void
   size: "small" | "normal" | "full"
+  direction: "rtl" | "ltr"
+  handleSignIn: () => void
+  handleSignUp: () => void
+  handleLanguage: () => void
+  handleColorMode: () => void
+  handleRouteToSignUp?: () => void
+  handleGoogle?: () => void
+  handleTwitter?: () => void
+  handleApple?: () => void
+  handleMicrosoft?: () => void
+  handleGithub?: () => void
+  handleEmail?: () => void
+  handlePhone?: () => void
 }
 
-//TODO: update Google auth button
 export const AppLanding: FC<AppLandingTypes> = (props) => {
   return (
-    <div>
+    <div dir={props.direction}>
       <Card>
         <CardContent headless className="flex flex-col gap-6">
-          <Button
-            className="flex flex-row items-center gap-2"
-            variant="outline"
-            // onClick={props.handleGoogleSignIn}
-          >
-            <Icons.google className="h-4 w-4" />
-            {/* {!props.logosOnly && props.texts.signInViaGoogleLabel} */}
-            Continue With Google
-          </Button>
-          <Button
-            className="flex flex-row items-center gap-2"
-            variant="outline"
-            // onClick={props.handleGoogleSignIn}
-          >
-            <Icons.twitter className="h-4 w-4" />
-            {/* {!props.logosOnly && props.texts.signInViaGoogleLabel} */}
-            Continue With Twitter
-          </Button>
-          <Button
-            className="flex flex-row items-center gap-2"
-            variant="outline"
-            // onClick={props.handleGoogleSignIn}
-          >
-            <Icons.apple className="h-4 w-4" />
-            {/* {!props.logosOnly && props.texts.signInViaGoogleLabel} */}
-            Continue With Apple
-          </Button>
-          <Button
-            className="flex flex-row items-center gap-2"
-            variant="outline"
-            // onClick={props.handleGoogleSignIn}
-          >
-            <Icons.mail className="h-4 w-4" />
-            {/* {!props.logosOnly && props.texts.signInViaGoogleLabel} */}
-            Continue With Email
-          </Button>
-
-          {/* {props.handleSignIn && (
-            <Button onClick={props.handleSignIn}>{props.texts.signIn}</Button>
-            // <Button onClick={props.handleSignIn}>Continue With Google</Button>
+          {props.viaGoogle && (
+            <Button
+              className="flex flex-row items-center gap-2"
+              variant="outline"
+              onClick={props.handleGoogle}
+            >
+              <Icons.google className="h-4 w-4" />
+              {props.texts?.continueWithGoogle ?? "Continue With Google"}
+            </Button>
+          )}
+          {props.viaGithub && (
+            <Button
+              className="flex flex-row items-center gap-2"
+              variant="outline"
+              onClick={props.handleGithub}
+            >
+              <Icons.gitHub className="h-4 w-4" />
+              {props.texts?.continueWithGithub ?? "Continue With Github"}
+            </Button>
+          )}
+          {props.viaTwitter && (
+            <Button
+              className="flex flex-row items-center gap-2"
+              variant="outline"
+              onClick={props.handleTwitter}
+            >
+              <Icons.twitter className="h-4 w-4" />
+              {props.texts?.continueWithTwitter ?? "Continue With Twitter"}
+            </Button>
+          )}
+          {props.viaApple && (
+            <Button
+              className="flex flex-row items-center gap-2"
+              variant="outline"
+              onClick={props.handleApple}
+            >
+              <Icons.apple className="h-4 w-4" />
+              {props.texts?.continueWithApple ?? "Continue With Apple"}
+            </Button>
           )}
-          {props.handleSignUp && (
-            <Button onClick={props.handleSignUp}>{props.texts.signUp}</Button>
-          )} */}
+          {props.viaMicrosoft && (
+            <Button
+              className="flex flex-row items-center gap-2"
+              variant="outline"
+              onClick={props.handleMicrosoft}
+            >
+              <Icons.microsoft className="h-4 w-4" />
+              {props.texts?.continueWithMicrosoft ?? "Continue With Microsoft"}
+            </Button>
+          )}
+          {props.viaEmail && (
+            <Button
+              className="flex flex-row items-center gap-2"
+              variant="outline"
+              onClick={props.handleEmail}
+            >
+              <Icons.mail className="h-4 w-4" />
+              {props.texts?.continueWithEmail ?? "Continue With Email"}
+            </Button>
+          )}
+          {props.viaPhone && (
+            <Button
+              className="flex flex-row items-center gap-2"
+              variant="outline"
+              onClick={props.handlePhone}
+            >
+              <Icons.phone className="h-4 w-4" />
+              {props.texts?.continueWithPhone ?? "Continue With Phone"}
+            </Button>
+          )}
+
           {!props.withoutSignUp && (
             <div className="p-3 text-center text-sm font-normal dark:text-gray-300">
               {props.texts.newUserText}{" "}
@@ -82,7 +131,6 @@ export const AppLanding: FC<AppLandingTypes> = (props) => {
               </span>
             </div>
           )}
-         
         </CardContent>
       </Card>
       <div className="mt-6 flex flex-row justify-between">

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -25,6 +25,8 @@ type ResetPasswordType = {
     signUpText: string
     dontHaveAccount: string
   }
+  headless?: boolean
+  direction?: "rtl" | "ltr"
 }
 
 export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
@@ -36,17 +38,19 @@ export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
     control,
   } = methods
   return (
-    <Card>
+    <Card dir={props.direction}>
       {!props.sent ? (
         <>
-          <CardHeader>
-            <CardTitle>Reset Password</CardTitle>
-            <CardDescription>
-              Enter your email to reset your account password
-            </CardDescription>
-          </CardHeader>
+          {!props.headless && (
+            <CardHeader>
+              <CardTitle>Reset Password</CardTitle>
+              <CardDescription>
+                Enter your email to reset your account password
+              </CardDescription>
+            </CardHeader>
+          )}
           <form onSubmit={handleSubmit(props.handleResetPassword)}>
-            <CardContent>
+            <CardContent headless={props.headless}>
               <Controller
                 control={control}
                 name="email"
@@ -70,7 +74,7 @@ export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
                   },
                 }}
               />
-              <div className=" pb-2 text-left text-sm dark:text-gray-300">
+              <div className="pb-2 text-start text-sm dark:text-gray-300">
                 {props.texts?.dontHaveAccount ?? "Don't have an account? "}
                 <span
                   onClick={props.handleRouteToSignUp}

package/src/elements/Button.tsx

@@ -19,6 +19,8 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        neoBrutalism:
+          "cursor-pointer transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms] active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -59,6 +61,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     const Comp = "button"
+
+    // Determine the color for the HawaLoading component based on the variant
+    const loadingColor =
+      variant === "outline" || variant === "ghost" || variant === "neoBrutalism"
+        ? "bg-primary"
+        : "bg-primary-foreground"
+
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
@@ -68,7 +77,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {isLoading ? (
           <HawaLoading
             design="dots-pulse"
-            color="bg-primary-foreground"
+            color={loadingColor} // Apply the computed color here
             size="button"
           />
         ) : (

package/src/elements/Icons.tsx

@@ -45,6 +45,25 @@ export const Icons = {
       <polyline points="22,6 12,13 2,6"></polyline>
     </svg>
   ),
+  phone: (props: IconProps) => (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+      ></path>
+    </svg>
+  ),
   twitter: (props: IconProps) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
       <path
@@ -53,6 +72,11 @@ export const Icons = {
       />
     </svg>
   ),
+  microsoft: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" {...props}>
+      <path d="M7.462 0H0v7.19h7.462V0zM16 0H8.538v7.19H16V0zM7.462 8.211H0V16h7.462V8.211zm8.538 0H8.538V16H16V8.211z"></path>
+    </svg>
+  ),
   gitHub: (props: IconProps) => (
     <svg viewBox="0 0 438.549 438.549" {...props}>
       <path

package/src/elements/Toaster.tsx

@@ -18,9 +18,7 @@ export function Toaster(props) {
       {toasts.map(function ({ id, title, description, action, ...toastProps }) {
         return (
           <Toast direction={props.direction} key={id} {...toastProps}>
-            <div
-              className={cn("grid gap-1", isRTL ? "text-right" : "text-left")}
-            >
+            <div className={"grid gap-1 text-start"}>
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && (
                 <ToastDescription>{description}</ToastDescription>

package/src/styles.css

@@ -2428,6 +2428,9 @@ video {
 .text-right {
   text-align: right;
 }
+.text-start {
+  text-align: start;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -2952,6 +2955,10 @@ video {
 .repeat-infinite {
   animation-iteration-count: infinite;
 }
+.shadow-color-primary {
+    --tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -3321,6 +3328,26 @@ body {
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
+.active\:translate-x-0:active {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-x-0\.5:active {
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-y-0:active {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-y-0\.5:active {
+  --tw-translate-y: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:shadow-color-primary-active:active {
+    --tw-shadow: 0.125rem 0.125rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -3798,6 +3825,10 @@ body {
 :is(.dark .dark\:bg-background) {
   background-color: hsl(var(--background));
 }
+:is(.dark .dark\:bg-black) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 :is(.dark .dark\:bg-blue-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));

package/src/tailwind.css

@@ -234,6 +234,16 @@
   }
 }
 @layer utilities {
+
+  .shadow-color-primary {
+    --tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
+  .shadow-color-primary-active {
+    --tw-shadow: 0.125rem 0.125rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
+
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
     display: none;

package/src/translations/ar.json

@@ -22,6 +22,15 @@
   "createAccount": "أنشئ حساب",
   "expandSidebar": "توسيع القائمة",
   "collapseSidebar": "طي القائمة",
+
+  "continueWithGoogle": "الإستمرار بواسطة Google",
+  "continueWithTwitter": "الإستمرار بواسطة Twitter",
+  "continueWithApple": "الإستمرار بواسطة Apple",
+  "continueWithMicrosoft": "الإستمرار بواسطة Microsoft",
+  "continueWithGithub": "الإستمرار بواسطة Github",
+  "continueWithEmail": "الإستمرار بواسطة Email",
+  "continueWithPhone": "الإستمرار بواسطة Phone",
+
   "signInViaGoogleLabel": "الدخول بواسطة Google",
   "signInViaGithubLabel": "الدخول بواسطة Github",
   "signInViaTwitterLabel": "الدخول بواسطة Twitter",

package/src/translations/en.json

@@ -20,6 +20,15 @@
   "signUpText": "Sign up",
   "createAccount": "Create Account",
   "signInText": "Sign in",
+  
+  "continueWithGoogle": "Continue with Google",
+  "continueWithTwitter": "Continue with Twitter",
+  "continueWithApple": "Continue with Apple",
+  "continueWithMicrosoft": "Continue with Microsoft",
+  "continueWithGithub": "Continue with Github",
+  "continueWithEmail": "Continue with Email",
+  "continueWithPhone": "Continue with Phone",
+
   "signInViaGoogleLabel": "Sign in with Google",
   "signInViaGithubLabel": "Sign in with Github",
   "signInViaTwitterLabel": "Sign in with Twitter",