@sikka/hawa 0.1.91 → 0.1.93

package/dist/styles.css

@@ -422,7 +422,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0.5rem;
+    --radius: 0rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -470,10 +470,11 @@ video {
     margin-right: 0.25em;
     width: 0.75em;
     vertical-align: middle;
-    color: var(--button-primary-500-hsl);
+    color: hsl(var(--primary));
+
   }
   .link {
-    color: var(--button-primary-500-hsl);
+    color: hsl(var(--primary));
   }
   .link:hover {
     text-decoration: underline;
@@ -531,10 +532,10 @@ video {
     height: 9px;
     position: absolute;
     top: 6px;
-    left: 11px;
+    left: 3px;
     content: " ";
     display: block;
-    background: var(--button-primary-500-hsl);
+    background: hsl(var(--primary));
   }
   .radio-item-bordered input[type="radio"]:checked + label:after {
     border-radius: 100%;
@@ -545,7 +546,7 @@ video {
     left: 23px;
     content: " ";
     display: block;
-    background: var(--button-primary-500-hsl);
+    background: hsl(var(--primary));
   }
   * {
   border-color: hsl(var(--border));
@@ -803,6 +804,9 @@ video {
 .right-0 {
   right: 0px;
 }
+.right-1 {
+  right: 0.25rem;
+}
 .right-2 {
   right: 0.5rem;
 }
@@ -848,6 +852,9 @@ video {
 .top-\[22px\] {
   top: 22px;
 }
+.top-\[41px\] {
+  top: 41px;
+}
 .top-\[50\%\] {
   top: 50%;
 }
@@ -905,6 +912,10 @@ video {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
@@ -1386,6 +1397,9 @@ video {
 .w-screen {
   width: 100vw;
 }
+.min-w-0 {
+  min-width: 0px;
+}
 .min-w-\[220px\] {
   min-width: 220px;
 }
@@ -1418,6 +1432,9 @@ video {
 .max-w-2xs {
   max-width: 250px;
 }
+.max-w-5xl {
+  max-width: 64rem;
+}
 .max-w-\[200px\] {
   max-width: 200px;
 }
@@ -1696,6 +1713,13 @@ video {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
 }
+.gap-x-8 {
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+}
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -2104,6 +2128,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
 .bg-info {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--info) / var(--tw-bg-opacity));
@@ -2337,6 +2365,10 @@ video {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -2428,6 +2460,9 @@ video {
 .text-right {
   text-align: right;
 }
+.text-start {
+  text-align: start;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -2524,6 +2559,12 @@ video {
 .leading-4 {
   line-height: 1rem;
 }
+.leading-7 {
+  line-height: 1.75rem;
+}
+.leading-8 {
+  line-height: 2rem;
+}
 .leading-\[25px\] {
   line-height: 25px;
 }
@@ -2608,6 +2649,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
 .text-info-foreground {
   --tw-text-opacity: 1;
   color: hsl(var(--info-foreground) / var(--tw-text-opacity));
@@ -2952,6 +2997,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 +3370,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 +3867,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));
@@ -3993,9 +4066,8 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
-:is(.dark .peer:checked ~ .dark\:peer-checked\:text-blue-500) {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+:is(.dark .peer:checked ~ .dark\:peer-checked\:text-primary) {
+  color: hsl(var(--primary));
 }
 @media (min-width: 440px) {
 
@@ -4073,6 +4145,11 @@ body {
     padding: 5rem;
   }
 
+  .sm\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -4082,6 +4159,11 @@ body {
     line-height: 2rem;
   }
 
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .sm\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -4108,6 +4190,14 @@ body {
 }
 @media (min-width: 768px) {
 
+  .md\:sticky {
+    position: sticky;
+  }
+
+  .md\:top-10 {
+    top: 2.5rem;
+  }
+
   .md\:mb-0 {
     margin-bottom: 0px;
   }
@@ -4128,6 +4218,10 @@ body {
     margin-right: 1rem;
   }
 
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
   .md\:h-auto {
     height: auto;
   }
@@ -4136,6 +4230,10 @@ body {
     width: 12rem;
   }
 
+  .md\:w-\[28rem\] {
+    width: 28rem;
+  }
+
   .md\:w-full {
     width: 100%;
   }
@@ -4220,6 +4318,10 @@ body {
     max-width: 80rem;
   }
 
+  .lg\:max-w-none {
+    max-width: none;
+  }
+
   .lg\:columns-4 {
     -moz-columns: 4;
          columns: 4;
@@ -4232,6 +4334,15 @@ body {
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
+  .lg\:gap-y-16 {
+    row-gap: 4rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 @media (min-width: 1280px) {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.91",
+  "version": "0.1.93",
   "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/blocks/Payment/CreditCardForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react"
+import React, { FC, useEffect, useState } from "react"
 import { HawaTextField } from "../../elements"
 import { Controller, useForm } from "react-hook-form"
 import { Card, CardContent, CardFooter } from "../../elements/Card"
@@ -10,6 +10,8 @@ type CreditCardFormTypes = {
 }
 
 export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
+  const [cardNumber, setCardNumber] = useState("")
+  const [cardType, setCardType] = useState("")
   const methods = useForm()
   const {
     formState: { errors },
@@ -17,6 +19,56 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
     control,
   } = methods
 
+  const getCardType = (card_bin) => {
+    const visa_regex = /^4[0-9]{0,15}$/m
+    const mastercard_regex = /^5$|^5[0-5][0-9]{0,16}$/m
+    const amex_regex = /^3$|^3[47][0-9]{0,13}$/m
+    const mada_regex =
+      /^(440647|440795|446404|457865|968208|457997|474491|636120|417633|468540|468541|468542|468543|968201|446393|409201|458456|484783|462220|455708|410621|455036|486094|486095|486096|504300|440533|489318|489319|445564|968211|410685|406996|432328|428671|428672|428673|968206|446672|543357|434107|407197|407395|412565|431361|604906|521076|529415|535825|543085|524130|554180|549760|968209|524514|529741|537767|535989|536023|513213|520058|558563|588982|589005|531095|530906|532013|968204|422817|422818|422819|428331|483010|483011|483012|589206|968207|419593|439954|530060|531196|420132)/
+    const meeza_regex =
+      /^507803[0-6][0-9]|507808[3-9][0-9]|507809[0-9][0-9]|507810[0-2][0-9]/
+    let card_type = "visa"
+    if (card_bin.replace(/[^\d]/g, "").match(mada_regex)) {
+      card_type = "mada"
+    } else if (card_bin.replace(/[^\d]/g, "").match(meeza_regex)) {
+      card_type = "meeza"
+    } else if (card_bin.replace(/[^\d]/g, "").match(visa_regex)) {
+      card_type = "visa"
+    } else if (card_bin.replace(/[^\d]/g, "").match(mastercard_regex)) {
+      card_type = "mastercard"
+    } else if (card_bin.replace(/[^\d]/g, "").match(amex_regex)) {
+      card_type = "amex"
+    }
+    return card_type
+  }
+  const onCardNumberChange = (event) => {
+    let { value, name } = event.target
+    let cardNumber = value
+    value = value.replace(/\D/g, "")
+    if (/^3[47]\d{0,13}$/.test(value)) {
+      cardNumber = value
+        .replace(/(\d{4})/, "$1 ")
+        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
+    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
+      // diner's club, 14 digits
+      cardNumber = value
+        .replace(/(\d{4})/, "$1 ")
+        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
+    } else if (/^\d{0,16}$/.test(value)) {
+      // regular cc number, 16 digits
+      cardNumber = value
+        .replace(/(\d{4})/, "$1 ")
+        .replace(/(\d{4}) (\d{4})/, "$1 $2 ")
+        .replace(/(\d{4}) (\d{4}) (\d{4})/, "$1 $2 $3 ")
+    }
+    console.log("card number is ", cardNumber.trimRight())
+    setCardNumber(cardNumber.trimRight())
+    // onUpdateState(name, cardNumber);
+  }
+  useEffect(() => {
+    let cardTypeSlug = getCardType(cardNumber)
+    setCardType(cardTypeSlug)
+  })
   return (
     <Card>
       <form onSubmit={handleSubmit(props.handle)}>
@@ -24,15 +76,24 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
           <div className="flex flex-row gap-4">
             <Controller
               control={control}
-              name="cardName"
+              name="cardNumber"
               render={({ field }) => (
                 <HawaTextField
                   width="full"
                   name="cardNumber"
                   placeholder="1234 1234 1234 1234"
                   type="number"
+                  onChange={onCardNumberChange}
+                  // onChange={(e) => setCardNumber(e.target.value)}
                   label="Card Number"
                   helpertext={errors.password?.message}
+                  iconInside={
+                    <img
+                      src={`https://sikka-images.s3.ap-southeast-1.amazonaws.com/payment-symbols/borderless/${cardType}.png`}
+                      alt=""
+                      className="h-8"
+                    />
+                  }
                 />
               )}
               rules={{

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"
           />
         ) : (