@sikka/hawa 0.1.92 → 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;
@@ -2527,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;
 }
@@ -2611,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));
@@ -4024,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) {
 
@@ -4104,6 +4145,11 @@ body {
     padding: 5rem;
   }
 
+  .sm\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -4113,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;
@@ -4139,6 +4190,14 @@ body {
 }
 @media (min-width: 768px) {
 
+  .md\:sticky {
+    position: sticky;
+  }
+
+  .md\:top-10 {
+    top: 2.5rem;
+  }
+
   .md\:mb-0 {
     margin-bottom: 0px;
   }
@@ -4159,6 +4218,10 @@ body {
     margin-right: 1rem;
   }
 
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
   .md\:h-auto {
     height: auto;
   }
@@ -4167,6 +4230,10 @@ body {
     width: 12rem;
   }
 
+  .md\:w-\[28rem\] {
+    width: 28rem;
+  }
+
   .md\:w-full {
     width: 100%;
   }
@@ -4251,6 +4318,10 @@ body {
     max-width: 80rem;
   }
 
+  .lg\:max-w-none {
+    max-width: none;
+  }
+
   .lg\:columns-4 {
     -moz-columns: 4;
          columns: 4;
@@ -4263,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.92",
+  "version": "0.1.93",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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/HawaRadio.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FC, useRef, useEffect } from "react"
-import clsx from "clsx"
+import { cn } from "../util"
 
 type RadioTypes = {
   orientation?: "vertical" | "horizontal"
@@ -49,7 +49,7 @@ export const HawaRadio: FC<RadioTypes> = ({
       return (
         <ul
           ref={ref}
-          className={clsx(
+          className={cn(
             props.options?.length > 2
               ? "flex-wrap xs:max-w-full xs:flex-nowrap"
               : "",
@@ -65,7 +65,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 setSelectedOption(opt.value)
                 props.onChangeTab(opt.value)
               }}
-              className={clsx(
+              className={cn(
                 "w-full cursor-pointer",
                 orientation === "horizontal" &&
                   parentDirection === "ltr" &&
@@ -89,7 +89,7 @@ export const HawaRadio: FC<RadioTypes> = ({
       )
     case "bordered":
       return (
-        <div className={clsx(orientationStyle[orientation], "gap-4")}>
+        <div className={cn(orientationStyle[orientation], "gap-4")}>
           {props.options.map((opt, i) => (
             <div className="rounded border border-gray-200   ">
               <div
@@ -106,7 +106,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 />
                 <label
                   htmlFor={opt.value.toString()}
-                  className={clsx(
+                  className={cn(
                     "ml-2 w-full  p-4 pl-3  text-sm font-medium dark:text-white",
                     opt.disabled ? "opacity-50" : "cursor-pointer text-gray-900"
                   )}
@@ -120,7 +120,7 @@ export const HawaRadio: FC<RadioTypes> = ({
       )
     case "cards":
       return (
-        <ul className={clsx(orientationStyle[orientation], "gap-4")}>
+        <ul className={cn(orientationStyle[orientation], "gap-4")}>
           {props.options?.map((opt: any, o) => (
             <li>
               <input
@@ -134,11 +134,11 @@ export const HawaRadio: FC<RadioTypes> = ({
               />
               <label
                 htmlFor={opt.value.toString()}
-                className={clsx(
-                  "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500",
+                className={cn(
+                  "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400  dark:peer-checked:text-primary",
                   opt.disabled
                     ? "opacity-50"
-                    : "cursor-pointer hover:bg-gray-100 hover:text-gray-600"
+                    : "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 hover:text-gray-600"
                 )}
               >
                 <div className="block  h-full w-full">
@@ -169,10 +169,10 @@ export const HawaRadio: FC<RadioTypes> = ({
 
     default:
       return (
-        <div className={orientationStyle[orientation]}>
+        <div className={cn(orientationStyle[orientation], "gap-2")}>
           {props.options.map((opt, i) => (
             <div
-              className="radio-item radio-item-default mb-4 flex items-center transition-all"
+              className="radio-item radio-item-default  flex items-center transition-all"
               key={i + 1}
             >
               <input
@@ -185,8 +185,8 @@ export const HawaRadio: FC<RadioTypes> = ({
               />
               <label
                 htmlFor={opt.value.toString()}
-                className={clsx(
-                  "ml-2 text-sm font-medium dark:text-white",
+                className={cn(
+                  "text-sm font-medium dark:text-white",
                   opt.disabled
                     ? "text-gray-400"
                     : "cursor-pointer text-gray-900"

package/src/elements/HawaTextField.tsx

@@ -32,6 +32,7 @@ type TextFieldTypes = {
   preview?: boolean
   autoComplete?: any
   maxLength?: any
+  iconInside?: React.ReactNode
 }
 
 export const HawaTextField: FC<TextFieldTypes> = ({
@@ -79,12 +80,16 @@ export const HawaTextField: FC<TextFieldTypes> = ({
             className={cn(
               defaultInputStyle,
               props.icon && "pl-10",
-              preview && "border-transparent bg-transparent px-0" 
+              preview && "border-transparent bg-transparent px-0"
             )}
             disabled={preview}
           />
         </div>
-
+        {props.iconInside && (
+          <div className="absolute right-1 top-[41px]  -translate-y-1/2">
+            {props.iconInside}
+          </div>
+        )}
         {props.helpertext ? (
           <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
             {props.helpertext}

package/src/elements/StickyFeatures.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+
+interface Feature {
+  icon: React.ReactNode
+  title: string
+  description: string
+}
+
+type StickyFeaturesType = {
+  features?: Feature[]
+  tag?: string
+  title?: string
+  description?: string
+}
+
+export const StickyFeatures: React.FC<StickyFeaturesType> = (props) => {
+  return (
+    <div className="bg-white py-24 sm:py-32">
+
+      <div className="mx-auto flex max-w-5xl flex-col items-start gap-10 px-6 md:flex-row lg:px-8">
+        <div className="w-full md:sticky md:top-10 md:w-[28rem]">
+          <h2 className="text-lg font-semibold leading-8 tracking-tight text-indigo-600">
+            {props.tag}
+          </h2>
+          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            {props.title}
+          </p>
+          <p className="mb-2 mt-6 text-base leading-7 text-gray-600">
+            {props.description}
+          </p>
+        </div>
+        <div className="mt-5 w-full min-w-0 flex-1 md:mt-0">
+          <dl className="grid grid-cols-1 gap-x-8 gap-y-10 md:max-w-xl lg:max-w-none lg:gap-y-16">
+            {props.features.map((f) => (
+              <div className="relative rounded-lg bg-gray-50 p-10">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
+                  {f.icon}
+                </div>
+
+                <dt className="mt-4 text-lg font-semibold leading-7 text-gray-900">
+                  {f.title}
+                </dt>
+                <dd className="mt-2 text-base leading-7 text-gray-600">
+                  {f.description}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/elements/UserReferralSource.tsx

@@ -0,0 +1,101 @@
+import React, { FC, useEffect, useRef, useState } from "react"
+import clsx from "clsx"
+import { HawaButton } from "./HawaButton"
+import { Button } from "./Button"
+import { HawaRadio } from "./HawaRadio"
+import { Card, CardContent, CardHeader, CardTitle } from "./Card"
+import { HawaTextField } from "./HawaTextField"
+import { Textarea } from "./Textarea"
+
+type ComponentTypes = {
+  title?: string
+  question: string
+  options?: []
+  texts?: {
+    least: string
+    most: string
+  }
+  position?: "bottom-right" | "bottom-left"
+  onOptionClicked?: (option) => void
+}
+export const UserReferralSource: FC<ComponentTypes> = ({
+  position = "bottom-right",
+  ...props
+}) => {
+  const [closed, setClosed] = useState(false)
+  const [answered, setAnswered] = useState(false)
+  const [clickedOption, setClickedOption] = useState(null)
+  const [closingTimer, setClosingTimer] = useState(5)
+  const popUpRef = useRef(null)
+
+  const boxPosition = {
+    "bottom-right": "right-4",
+    "bottom-left": "left-4",
+  }
+  useEffect(() => {
+    //To change opacity and hide the component
+    const timeoutHide = setTimeout(() => {
+      if (closingTimer >= 0) {
+        setClosingTimer(closingTimer - 1)
+      }
+    }, 1000)
+
+    return () => {
+      clearTimeout(timeoutHide)
+    }
+  }, [closingTimer])
+
+  const slowClose = () => {
+    setClosed(true)
+    setTimeout(() => {
+      popUpRef.current.removeChild(popUpRef.current.children[0])
+    }, 200)
+  }
+  return (
+    <Card
+      ref={popUpRef}
+      className={clsx("fixed bottom-4 p-4 ", boxPosition[position])}
+    >
+      <button
+        type="button"
+        className="absolute right-2 top-2 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+        data-dismiss-target="#toast-default"
+        aria-label="Close"
+        onClick={() => slowClose()}
+      >
+        <svg
+          aria-hidden="true"
+          className="h-5 w-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+      <CardContent headless>
+        <div
+          className={clsx(
+            "flex flex-col gap-4", // "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
+            closed ? "opacity-0" : "opacity-100"
+          )}
+        >
+          <div className="mt-4 font-bold">{props.question}</div>
+          <div className="flex w-full flex-row gap-1 rounded ">
+            <HawaRadio
+              orientation="vertical"
+              options={props.options}
+            ></HawaRadio>
+          </div>
+          <div>
+            <Textarea />
+          </div>
+        </div>
+        <Button className="mt-4 w-full">Submit</Button>
+      </CardContent>
+    </Card>
+  )
+}

package/src/elements/index.ts

@@ -51,6 +51,8 @@ export * from "./HawaButton"
 export * from "./HawaStoreButtons"
 
 export * from "./ActionCard"
+export * from "./StickyFeatures"
+export * from "./UserReferralSource"
 
 // v0.1
 export * from "./Button"