@sikka/hawa 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -107,6 +107,7 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",

package/src/blocks/Account/UserProfileForm.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react"
-import { HawaButton, HawaPhoneInput, HawaTextField } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
+import { HawaPhoneInput, HawaTextField } from "../../elements"
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 

package/src/blocks/Account/UserSettingsForm.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react"
-import { HawaContainer } from "../../layout"
 import { Card, CardContent } from "../../elements/Card"
 
 type UserSettingsFormTypes = {

package/src/blocks/AuthForms/AppLanding.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from "react"
-import { HawaButton, HawaRadio } from "../../elements"
-import { HawaContainer } from "../../layout/HawaContainer"
+import { HawaRadio } from "../../elements"
 import { Card, CardContent } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FC } from "react"
-import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
+import { HawaTextField, HawaAlert } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import {
   Card,

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -3,7 +3,6 @@ import {
   HawaTextField,
   HawaLogoButton,
   HawaAlert,
-  HawaButton,
   HawaCheckbox,
   HawaSelect,
 } from "../../elements"

package/src/blocks/Misc/EmptyState.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 

package/src/blocks/Misc/LeadGenerator.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from "react"
-import { HawaButton, HawaTextField } from "../../elements"
-import { HawaContainer } from "../../layout"
 import { Input } from "../../elements/Input"
 import { Button } from "../../elements/Button"
 import {

package/src/blocks/Misc/NoPermission.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react"
-import { HawaContainer } from "../../layout"
 import { Card, CardContent } from "../../elements/Card"
 
 type TNoPermission = {

package/src/blocks/Misc/NotFound.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
 import { Card, CardContent } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -1,6 +1,7 @@
 import React, { useState, FC } from "react"
 import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type ChargeWalletTypes = {
   currency: any
@@ -15,27 +16,28 @@ export const ChargeWalletForm: FC<ChargeWalletTypes> = (props) => {
   const [walletAmount, setWalletAmount] = useState(0)
 
   return (
-    <HawaContainer>
-      <div className="p-4 text-center">
-        <div className=" text-5xl font-extrabold">
-          {Number(walletAmount).toLocaleString("en") || "0"}
+    <Card>
+      <CardContent headless>
+        <div className="p-4 text-center">
+          <div className=" text-5xl font-extrabold">
+            {Number(walletAmount).toLocaleString("en") || "0"}
+          </div>
+          <div className="text-sm font-normal">{props.currency || "SAR"}</div>
         </div>
-        <div className="text-sm font-normal">{props.currency || "SAR"}</div>
-      </div>
-      <div className="mb-2 flex w-full flex-row gap-4 text-center">
-        <HawaButton variant="outlined" margins="none" className="h-full">
-          10 SAR
-        </HawaButton>
-        <HawaButton variant="outlined" margins="none" className="h-full">
-          100 SAR
-        </HawaButton>
+        <div className="mb-2 flex w-full flex-row gap-4 text-center">
+          <HawaButton variant="outlined" margins="none" className="h-full">
+            10 SAR
+          </HawaButton>
+          <HawaButton variant="outlined" margins="none" className="h-full">
+            100 SAR
+          </HawaButton>
 
-        <input
-          placeholder="Custom"
-          className="h-auto w-full rounded bg-gray-100 p-4"
-        />
-      </div>
-      {/* <FormProvider {...methods}>
+          <input
+            placeholder="Custom"
+            className="h-auto w-full rounded bg-gray-100 p-4"
+          />
+        </div>
+        {/* <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleChargeWallet)}>
           <Controller
             control={control}
@@ -74,9 +76,8 @@ export const ChargeWalletForm: FC<ChargeWalletTypes> = (props) => {
           </HawaButton>
           </form>
         </FormProvider> */}
-      <HawaButton color="primary" width="full">
-        {props.texts.chargeWallet}
-      </HawaButton>
-    </HawaContainer>
+        <Button className="mt-6 w-full">{props.texts.chargeWallet}</Button>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/Payment/CheckoutForm.tsx

@@ -1,12 +1,6 @@
 import React, { FC } from "react"
-import {
-  HawaTextField,
-  HawaTable,
-  HawaSelect,
-  HawaButton,
-} from "../../elements"
+import { HawaTextField, HawaTable, HawaSelect } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
 import countries from "../../countries"
 import {
   Card,

package/src/blocks/Payment/Confirmation.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react"
-import { HawaButton, HawaTable } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type ConfirmationPageTypes = {
   texts: {
@@ -42,19 +42,20 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
   let isArabic = props.lang === "ar"
 
   return (
-    <HawaContainer>
-      {" "}
-      <div className="py-5 text-center text-3xl font-bold dark:text-white">
-        {props.confirmationTitle}
-      </div>
-      <div className="py-5 dark:text-white">
-        <div className="mb-2 text-center">
-          {props.texts.successMessage} <strong>{props.userEmail}</strong>
+    <Card>
+      <CardContent headless>
+        {" "}
+        <div className="py-5 text-center text-3xl font-bold dark:text-white">
+          {props.confirmationTitle}
         </div>
-        <div className="text-center">{props.texts.yourOrderNumber}</div>
-        <div className="text-center font-bold">{props.orderNumber}</div>
-      </div>
-      {/* <div className="py-5">
+        <div className="py-5 dark:text-white">
+          <div className="mb-2 text-center">
+            {props.texts.successMessage} <strong>{props.userEmail}</strong>
+          </div>
+          <div className="text-center">{props.texts.yourOrderNumber}</div>
+          <div className="text-center font-bold">{props.orderNumber}</div>
+        </div>
+        {/* <div className="py-5">
         <div className="mb-3 text-center text-xl font-semibold">
           {props.texts.orderDetails}
         </div>
@@ -69,26 +70,27 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
           />
         )}
       </div> */}
-      <div className="flex flex-col items-center justify-center py-5 pt-0">
-        <HawaButton color="primary" width="full" onClick={props.handlePrint}>
-          {props.texts.print}
-        </HawaButton>
-        <HawaButton color="primary" width="full" onClick={props.handleHistory}>
-          {props.texts.history}
-        </HawaButton>
-        <HawaButton color="primary" width="full" onClick={props.handleHome}>
-          {props.texts.homePage}
-        </HawaButton>
-        <div className="mb-5 mt-5 text-center text-sm dark:text-white">
-          {props.texts.fasterPaymentNote}
+        <div className="flex flex-col items-center justify-center gap-4 py-5 pt-0">
+          <Button className="w-full" onClick={props.handlePrint}>
+            {props.texts.print}
+          </Button>
+          <Button className="w-full" onClick={props.handleHistory}>
+            {props.texts.history}
+          </Button>
+          <Button className="w-full" onClick={props.handleHome}>
+            {props.texts.homePage}
+          </Button>
+          <div className=" text-center text-sm dark:text-white">
+            {props.texts.fasterPaymentNote}
+          </div>
+          <a
+            className="w-fit cursor-pointer text-center  text-xs font-normal dark:text-white"
+            onClick={props.handleRefundPolicyLink}
+          >
+            {props.texts.refundPolicy}
+          </a>
         </div>
-        <a
-          className="w-fit cursor-pointer text-center  text-xs font-normal dark:text-white"
-          onClick={props.handleRefundPolicyLink}
-        >
-          {props.texts.refundPolicy}
-        </a>
-      </div>
-    </HawaContainer>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react"
-import { HawaButton, HawaTextField } from "../../elements"
+import { HawaTextField } from "../../elements"
 import { Controller, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type PayWithWalletTypes = {
   walletBalance: any
@@ -9,18 +9,16 @@ type PayWithWalletTypes = {
 }
 export const PayWithWallet: FC<PayWithWalletTypes> = (props) => {
   return (
-    <HawaContainer>
-      <div className="text-center text-5xl font-extrabold">
-        {props.walletBalance || "0"}
-        <div className="text-sm font-normal">{props.currency || "SAR"}</div>
-      </div>
-      <HawaButton
-        width="full"
-        color="primary"
-        onClick={props.handlePayWithWallet}
-      >
-        Pay Now
-      </HawaButton>
-    </HawaContainer>
+    <Card>
+      <CardContent headless>
+        <div className="text-center text-5xl font-extrabold">
+          {props.walletBalance || "0"}
+          <div className="text-sm font-normal">{props.currency || "SAR"}</div>
+        </div>
+        <Button className="mt-6 w-full" onClick={props.handlePayWithWallet}>
+          Pay Now
+        </Button>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from "react"
-import { HawaTypography, HawaLogoButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { HawaLogoButton } from "../../elements"
 import { Card, CardContent, CardHeader, CardTitle } from "../../elements/Card"
 
 type SelectPaymentTypes = {

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,6 @@
 import React, { useState, FC } from "react"
-import { HawaTabs, HawaTooltip } from "../../elements"
+import { HawaTabs } from "../../elements"
+import { Tooltip } from "../../elements/Tooltip"
 
 const CheckMark = () => (
   <svg
@@ -124,10 +125,7 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                 <div className="  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400">
                   {feature.text}
                   {feature.description && (
-                    <HawaTooltip
-                      position="top-right"
-                      content={feature.description}
-                    >
+                    <Tooltip side="right" content={feature.description}>
                       <svg
                         stroke="currentColor"
                         fill="currentColor"
@@ -138,7 +136,7 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                       >
                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
                       </svg>
-                    </HawaTooltip>
+                    </Tooltip>
                   )}
                 </div>
                 <UncheckMark />

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+
 import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type ReferralAccount = {
   referralLink: string
@@ -19,9 +19,9 @@ export const ReferralAccount: FC<ReferralAccount> = ({
           <div className="mb-1">Referral Code</div>
           <div className="flex flex-row items-center justify-between rounded border bg-background">
             <span className="ml-3 font-bold">{referralCode}</span>
-            <HawaButton
-              tooltip="Copy"
-              className="mr-1.5"
+            <Button
+              // tooltip="Copy"
+              // className="mr-1.5"
               onClick={() => navigator.clipboard.writeText(referralCode)}
             >
               <span className="bg-red flex items-center justify-center">
@@ -36,15 +36,15 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                   <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
                 </svg>{" "}
               </span>
-            </HawaButton>
+            </Button>
           </div>
         </div>
         <div className="my-2 mt-0">
           <div className="mb-1">Referral Link</div>
           <div className="flex flex-row items-center justify-between rounded border bg-background">
             <span className="ml-3 font-bold">{referralLink}</span>
-            <HawaButton
-              className="mr-1.5"
+            <Button
+              // className="mr-1.5"
               onClick={() => navigator.clipboard.writeText(referralLink)}
             >
               <span className="bg-red flex items-center justify-center">
@@ -59,7 +59,7 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                   <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
                 </svg>{" "}
               </span>
-            </HawaButton>
+            </Button>
           </div>
         </div>
       </CardContent>

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -7,8 +7,8 @@ import {
   HawaSelect,
   HawaTextField,
 } from "../../elements"
-import { HawaContainer } from "../../layout"
 import { Controller, FormProvider, useForm } from "react-hook-form"
+import { Card, CardContent } from "../../elements/Card"
 
 type TReferralSettlement = {
   referralLink: string
@@ -28,69 +28,71 @@ export const ReferralSettlement: FC<TReferralSettlement> = ({
     control,
   } = methods
   return (
-    <HawaContainer>
-      <div>
-        <FormProvider {...methods}>
-          <HawaTextField label={"IBAN"} />
-          <HawaTextField label={"Holder Name"} />
-          <Controller
-            control={control}
-            name="bank"
-            render={({ field }) => (
-              <HawaSelect
-                label="Bank"
-                isCreatable={false}
-                isMulti={false ?? false}
-                isSearchable={false}
-                isClearable={false ?? false}
-                options={[
-                  { value: "snb", label: "Saudi National Bank" },
-                  { value: "bilad", label: "Al Bilad Bank" },
-                  { value: "rajihi", label: "Al Rajihi Bank" },
-                ]}
-                onInputChange={(e: any, o: any) => console.log("changing", e)}
-                {...field}
-                onChange={(e: any, o: any) => console.log("chooo", e)}
-              />
-            )}
-          />
-        </FormProvider>
-      </div>
-      <div>
-        <HawaButton width="full">Add Bank Account</HawaButton>
-      </div>
-      {withdrawError && (
+    <Card>
+      <CardContent headless>
+        <div>
+          <FormProvider {...methods}>
+            <HawaTextField label={"IBAN"} />
+            <HawaTextField label={"Holder Name"} />
+            <Controller
+              control={control}
+              name="bank"
+              render={({ field }) => (
+                <HawaSelect
+                  label="Bank"
+                  isCreatable={false}
+                  isMulti={false ?? false}
+                  isSearchable={false}
+                  isClearable={false ?? false}
+                  options={[
+                    { value: "snb", label: "Saudi National Bank" },
+                    { value: "bilad", label: "Al Bilad Bank" },
+                    { value: "rajihi", label: "Al Rajihi Bank" },
+                  ]}
+                  onInputChange={(e: any, o: any) => console.log("changing", e)}
+                  {...field}
+                  onChange={(e: any, o: any) => console.log("chooo", e)}
+                />
+              )}
+            />
+          </FormProvider>
+        </div>
         <div>
-          <HawaAlert
-            text={
-              "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
-            }
-            severity="warning"
-          />
+          <HawaButton width="full">Add Bank Account</HawaButton>
         </div>
-      )}
-      <div className="mt-3">
-        <div className="mb-1">Settlement Accounts</div>
-        <div className="rounded">
-          <SettlementAccountCard
-            bank="Al Inma Bank"
-            iban="SA10228094028098329119"
-            accountHolder="Zakher Masri"
-            default
-          />
-          <SettlementAccountCard
-            bank="Al Rajihi Bank"
-            iban="SA10228094028098329119"
-            accountHolder="Zakher Masri"
-          />
-          <SettlementAccountCard
-            bank="Al Inma Bank"
-            iban="SA10228094028098329119"
-            accountHolder="Zakher Masri"
-          />
+        {withdrawError && (
+          <div>
+            <HawaAlert
+              text={
+                "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
+              }
+              severity="warning"
+            />
+          </div>
+        )}
+        <div className="mt-3">
+          <div className="mb-1">Settlement Accounts</div>
+          <div className="rounded">
+            <SettlementAccountCard
+              bank="Al Inma Bank"
+              iban="SA10228094028098329119"
+              accountHolder="Zakher Masri"
+              default
+            />
+            <SettlementAccountCard
+              bank="Al Rajihi Bank"
+              iban="SA10228094028098329119"
+              accountHolder="Zakher Masri"
+            />
+            <SettlementAccountCard
+              bank="Al Inma Bank"
+              iban="SA10228094028098329119"
+              accountHolder="Zakher Masri"
+            />
+          </div>
         </div>
-      </div>
-    </HawaContainer>
+      </CardContent>
+    </Card>
   )
 }
 
@@ -121,7 +123,7 @@ const SettlementAccountCard = (props) => {
           // position={direction === "rtl" ? "right-bottom" : "left-bottom"}
           // direction={direction}
         >
-          <HawaButton variant="outlined"  >
+          <HawaButton variant="outlined">
             <svg
               aria-label="Vertical Three Dots Menu Icon"
               className="rotate-90"