@sikka/hawa 0.2.4-beta → 0.2.5-beta

package/dist/styles.css

@@ -388,7 +388,8 @@ video {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
+    /* --card: 0 0% 100%; */
+    --card: 210 50% 98%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
@@ -422,7 +423,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 1rem;
+    --radius: 0.5rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -445,7 +446,8 @@ video {
     --layout-primary-300: #4a4a4a;
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
+    /* --card: 240 10% 3.9%; */
+    --card: 0 0% 2%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;

package/package.json

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

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -1,8 +1,9 @@
 import React, { useState, FC } from "react"
 import { Controller, useForm } from "react-hook-form"
-import { HawaPhoneInput } from "../../elements"
+import { HawaPhoneInput, HawaPinInput } from "../../elements"
 import { Card, CardContent } from "../../elements/Card"
 import { Button } from "../../elements/Button"
+import { cn } from "../../util"
 
 type SignInPhoneTypes = {
   value: any
@@ -12,45 +13,147 @@ type SignInPhoneTypes = {
   handlePhoneChange: any
   phoneRequiredText: any
   SignInButtonText: any
-  handleSignIn: any
+  handleContinue: any
+  handleConfirm: any
+  loadingContinue?: boolean
+  loadingConfirm?: boolean
+  confirmationStage?: boolean
+  texts?: {
+    didntGetCode?: string
+    resendCode?: string
+    cancel?: string
+    confirm?: string
+    continue?: string
+  }
 }
 
 export const SignInPhone: FC<SignInPhoneTypes> = (props) => {
+  const [pins, setPins] = useState(null)
+
   const methods = useForm()
   const {
     formState: { errors },
     handleSubmit,
     control,
   } = methods
+  const [resendTimer, setResendTimer] = useState(null)
+  const [remainingTime, setRemainingTime] = useState(0)
+  const [showResendTimer, setShowResendTimer] = useState(false)
 
   const [userPhone, setUserPhone] = useState("")
+  const [phoneConfirm, setPhoneConfirm] = useState(props.confirmationStage)
+
+  const startResendTimer = () => {
+    // Clear any existing timer
+    clearTimeout(resendTimer)
+
+    // Set the timer duration (e.g., 60 seconds)
+    const timerDuration = 60
+    setRemainingTime(timerDuration)
+    setShowResendTimer(true)
+
+    const newTimer = setInterval(() => {
+      setRemainingTime((prevTime) => {
+        if (prevTime > 0) {
+          return prevTime - 1;
+        } else {
+          clearInterval(newTimer); // Stop the timer when it reaches zero
+          setShowResendTimer(false);
+          return 0;
+        }
+      });
+    }, 1000);
+
+    // Update the state with the new timer
+    setResendTimer(newTimer)
+
+    // Add logic to resend OTP here if needed
+  }
+
   return (
     <Card>
-      <CardContent headless>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault()
-            props.handleSignIn(userPhone)
-          }}
-        >
-          <Controller
-            control={control}
-            name="phone"
-            render={({ field }) => (
-              <HawaPhoneInput
-                country={props.country ?? ""}
-                label={props.label ?? ""}
-                handleChange={(e: any) => setUserPhone(e.target.value)}
-                {...field}
-              />
-            )}
-            rules={{
-              required: props.phoneRequiredText,
+      <CardContent className="transition-all" headless>
+        {phoneConfirm ? (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              if (pins) {
+                props.handleConfirm(pins)
+              }
+            }}
+          >
+            <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
+            <div className=" py-2 text-center text-xs text-muted-foreground">
+              {showResendTimer ? (
+                <span>
+                  Resend code in {remainingTime} seconds |{" "}
+                  <span
+                    className="clickable-link"
+                    onClick={() => {
+                      clearTimeout(resendTimer)
+                      setShowResendTimer(false)
+                      // Add logic to resend OTP here
+                    }}
+                  >
+                    Cancel
+                  </span>
+                </span>
+              ) : (
+                <span>
+                  {props.texts?.didntGetCode ?? "Didn't get the code?"}{" "}
+                  <span
+                    className="clickable-link"
+                    onClick={() => {
+                      startResendTimer()
+                      // Add logic to resend OTP here
+                    }}
+                  >
+                    {props.texts?.resendCode ?? "Click to resend"}
+                  </span>
+                </span>
+              )}
+            </div>
+
+            <div className="mt-4  grid grid-cols-2 gap-2">
+              <Button
+                variant="secondary"
+                onClick={() => setPhoneConfirm(false)}
+              >
+                {props.texts?.cancel ?? "Cancel"}
+              </Button>
+              <Button isLoading={props.loadingConfirm}>
+                {props.texts?.confirm ?? "Confirm"}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              setPhoneConfirm(true)
+              props.handleContinue(userPhone)
             }}
-          />
-          <div className="mt-2"></div>
-          <Button className="w-full">{props.SignInButtonText}</Button>
-        </form>
+          >
+            <Controller
+              control={control}
+              name="phone"
+              render={({ field }) => (
+                <HawaPhoneInput
+                  country={props.country ?? ""}
+                  label={props.label ?? ""}
+                  handleChange={(e: any) => setUserPhone(e.target.value)}
+                  {...field}
+                />
+              )}
+              rules={{
+                required: props.phoneRequiredText,
+              }}
+            />
+            <Button isLoading={props.loadingContinue} className="w-full">
+              {props.texts?.continue ?? "Continue"}
+            </Button>
+          </form>
+        )}
       </CardContent>
     </Card>
   )

package/src/styles.css

@@ -388,7 +388,8 @@ video {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
+    /* --card: 0 0% 100%; */
+    --card: 210 50% 98%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
@@ -422,7 +423,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 1rem;
+    --radius: 0.5rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -445,7 +446,8 @@ video {
     --layout-primary-300: #4a4a4a;
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
+    /* --card: 240 10% 3.9%; */
+    --card: 0 0% 2%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;

package/src/tailwind.css

@@ -54,7 +54,8 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
+    /* --card: 0 0% 100%; */
+    --card: 210 50% 98%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
@@ -88,7 +89,7 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 1rem;
+    --radius: 0.5rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -111,7 +112,8 @@
     --layout-primary-300: #4a4a4a;
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
+    /* --card: 240 10% 3.9%; */
+    --card: 0 0% 2%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;