@sikka/hawa 0.1.1 → 0.1.3

package/src/blocks/Referral/ReferralStats.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react"
-import { HawaAlert, HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { HawaAlert } from "../../elements"
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type TReferralStats = {
   referralLink: string
@@ -14,57 +15,58 @@ export const ReferralStats: FC<TReferralStats> = ({
   withdrawError,
 }) => {
   return (
-    <HawaContainer>
-      <div className="mb-1">Stats</div>
-      <div className="justi flex flex-row gap-1">
-        <NumberCard title="Clicks" number={22} />
-        <NumberCard title="Sign-ups" number={32} />
-        <NumberCard title="Commission" number={"213.22 SAR"} />
-      </div>
-      <div>
-        <HawaButton width="full">Withdraw Money</HawaButton>
-      </div>
-      {withdrawError && (
-        <div>
-          <HawaAlert
-            text={
-              "Sorry can't withdraw the money at the moment. Please try again in 2022/11/20"
-            }
-            severity="warning"
-          />
+    <Card>
+      <CardContent headless>
+        <div className="mb-1">Stats</div>
+        <div className="justi flex flex-row gap-1">
+          <NumberCard title="Clicks" number={22} />
+          <NumberCard title="Sign-ups" number={32} />
+          <NumberCard title="Commission" number={"213.22 SAR"} />
         </div>
-      )}
-      <div className="mt-3">
-        <div className="mb-1">Sign ups</div>
-        <div className="rounded">
-          <ReferralSignUpCard
-            date="2020/10/11 @ 9:45 pm"
-            email="zakher@sikka.io"
-            amount="3.4 SAR / Month"
-          />
-          <ReferralSignUpCard
-            date="2022/10/11 @ 9:45 pm"
-            email="zakher@sikka.io"
-            amount="3.4 SAR / Month"
-          />
-          <ReferralSignUpCard
-            date="2022/10/11 @ 9:45 pm"
-            email="zakher@sikka.io"
-            amount="3.4 SAR / Month"
-          />
-          <ReferralSignUpCard
-            date="2022/10/11 @ 9:45 pm"
-            email="zakher@sikka.io"
-            amount="3.4 SAR / Month"
-          />
-          <ReferralSignUpCard
-            date="2022/10/11 @ 9:45 pm"
-            email="zakher@sikka.io"
-            amount="3.4 SAR / Month"
-          />
+
+        <Button className="mt-6 w-full">Withdraw Money</Button>
+        {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">Sign ups</div>
+          <div className="rounded">
+            <ReferralSignUpCard
+              date="2020/10/11 @ 9:45 pm"
+              email="zakher@sikka.io"
+              amount="3.4 SAR / Month"
+            />
+            <ReferralSignUpCard
+              date="2022/10/11 @ 9:45 pm"
+              email="zakher@sikka.io"
+              amount="3.4 SAR / Month"
+            />
+            <ReferralSignUpCard
+              date="2022/10/11 @ 9:45 pm"
+              email="zakher@sikka.io"
+              amount="3.4 SAR / Month"
+            />
+            <ReferralSignUpCard
+              date="2022/10/11 @ 9:45 pm"
+              email="zakher@sikka.io"
+              amount="3.4 SAR / Month"
+            />
+            <ReferralSignUpCard
+              date="2022/10/11 @ 9:45 pm"
+              email="zakher@sikka.io"
+              amount="3.4 SAR / Month"
+            />
+          </div>
         </div>
-      </div>
-    </HawaContainer>
+      </CardContent>
+    </Card>
   )
 }
 

package/src/elements/HawaRadio.tsx

@@ -22,7 +22,7 @@ export const HawaRadio: FC<RadioTypes> = ({
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-500 rounded active"
+    "inline-block py-2 px-4  w-full text-white bg-primary rounded active"
   let inactiveTabStyle =
     "inline-block py-2 px-4 w-full bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
   let orientationStyle = {

package/src/styles.css

@@ -1059,6 +1059,9 @@ video {
 .h-96 {
   height: 24rem;
 }
+.h-\[1\.2rem\] {
+  height: 1.2rem;
+}
 .h-\[150px\] {
   height: 150px;
 }
@@ -1188,6 +1191,9 @@ video {
 .w-9 {
   width: 2.25rem;
 }
+.w-\[1\.2rem\] {
+  width: 1.2rem;
+}
 .w-\[12px\] {
   width: 12px;
 }
@@ -1338,6 +1344,11 @@ video {
   --tw-rotate: 90deg;
   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));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
 .transform {
   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));
 }
@@ -1819,9 +1830,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
-.bg-buttonPrimary-300 {
-  background-color: hsl(var(--button-primary-300));
-}
 .bg-buttonPrimary-500 {
   background-color: hsl(var(--button-primary-500));
 }
@@ -3123,6 +3131,19 @@ body {
 :is([dir="rtl"] .rtl\:pr-\[5px\]) {
   padding-right: 5px;
 }
+:is(.dark .dark\:-rotate-90) {
+  --tw-rotate: -90deg;
+  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));
+}
+:is(.dark .dark\:rotate-0) {
+  --tw-rotate: 0deg;
+  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));
+}
+:is(.dark .dark\:scale-100) {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
 :is(.dark .dark\:border-blue-500) {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));

package/es/blocks/Misc/Newsletter.d.ts

@@ -1,12 +0,0 @@
-import { FC } from "react";
-type TNewsletter = {
-    variant?: "outlined" | "contained" | "neobrutalism";
-    texts: {
-        wantToStayUpdated: string;
-        subscribeToNewsletter: string;
-        submit: string;
-    };
-    handleNewsletterSub: (e: string) => void;
-};
-export declare const Newsletter: FC<TNewsletter>;
-export {};

package/lib/blocks/Misc/Newsletter.d.ts

@@ -1,12 +0,0 @@
-import { FC } from "react";
-type TNewsletter = {
-    variant?: "outlined" | "contained" | "neobrutalism";
-    texts: {
-        wantToStayUpdated: string;
-        subscribeToNewsletter: string;
-        submit: string;
-    };
-    handleNewsletterSub: (e: string) => void;
-};
-export declare const Newsletter: FC<TNewsletter>;
-export {};

package/src/blocks/Misc/Newsletter.tsx

@@ -1,50 +0,0 @@
-import React, { FC } from "react"
-import { HawaButton, HawaTextField } from "../../elements"
-import { HawaContainer } from "../../layout"
-
-type TNewsletter = {
-  variant?: "outlined" | "contained" | "neobrutalism"
-  texts: {
-    wantToStayUpdated: string
-    subscribeToNewsletter: string
-    submit: string
-  }
-  handleNewsletterSub: (e: string) => void
-}
-
-export const Newsletter: FC<TNewsletter> = ({
-  variant = "contained",
-  texts,
-  handleNewsletterSub,
-}) => {
-  return (
-    <HawaContainer variant={variant} centered={true}>
-      <div className="p-4 pt-0">
-        <h1 className="font-bold">
-          {texts?.wantToStayUpdated ?? "Want to stay updated?"}
-        </h1>
-        <span>
-          {texts?.subscribeToNewsletter ?? "Subscribe to our newsletter"}
-        </span>
-      </div>
-      <form
-        className="flex flex-row gap-2"
-        onSubmit={(e) => {
-          e.preventDefault()
-          handleNewsletterSub(e.target[0].value)
-        }}
-      >
-        <HawaTextField
-          width="full"
-          type="email"
-          name="email"
-          placeholder={"example@sikka.io"}
-          margin="none"
-        />
-        <HawaButton  margins="none">
-          {texts?.submit ?? "Submit"}
-        </HawaButton>
-      </form>
-    </HawaContainer>
-  )
-}