@sikka/hawa 0.0.269 → 0.0.271

package/src/styles.css

@@ -398,6 +398,13 @@ video {
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
     --border-radius: 10px;
     --border-radius-inner: calc(
       var(--border-radius) - calc(var(--border-radius) / 3)
@@ -787,6 +794,9 @@ video {
 .m-5 {
   margin: 1.25rem;
 }
+.m-\[5px\] {
+  margin: 5px;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -944,6 +954,9 @@ video {
 .inline-block {
   display: inline-block;
 }
+.inline {
+  display: inline;
+}
 .flex {
   display: flex;
 }
@@ -1034,6 +1047,9 @@ video {
 .h-\[2\.36rem\] {
   height: 2.36rem;
 }
+.h-\[25px\] {
+  height: 25px;
+}
 .h-\[32px\] {
   height: 32px;
 }
@@ -1154,6 +1170,9 @@ video {
 .w-\[12px\] {
   width: 12px;
 }
+.w-\[25px\] {
+  width: 25px;
+}
 .w-\[32px\] {
   width: 32px;
 }
@@ -1186,6 +1205,9 @@ video {
 .w-screen {
   width: 100vw;
 }
+.min-w-\[220px\] {
+  min-width: 220px;
+}
 .min-w-\[24px\] {
   min-width: 24px;
 }
@@ -1442,9 +1464,6 @@ video {
 .self-center {
   align-self: center;
 }
-.justify-self-end {
-  justify-self: end;
-}
 .overflow-auto {
   overflow: auto;
 }
@@ -1535,6 +1554,10 @@ video {
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
 }
+.rounded-t-inner {
+  border-top-left-radius: var(--border-radius-inner);
+  border-top-right-radius: var(--border-radius-inner);
+}
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -1724,6 +1747,9 @@ video {
 .bg-buttonSecondary-500 {
   background-color: var(--button-secondary-500);
 }
+.bg-card {
+  background-color: hsl(var(--card));
+}
 .bg-cyan-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 117 / var(--tw-bg-opacity));
@@ -1817,6 +1843,10 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-violet-6 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 77.8% 89.4% / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1848,6 +1878,9 @@ video {
 .fill-gray-200 {
   fill: #e5e7eb;
 }
+.fill-white {
+  fill: #fff;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1885,6 +1918,9 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
+.p-\[5px\] {
+  padding: 5px;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1917,6 +1953,10 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.px-\[5px\] {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1977,6 +2017,12 @@ video {
 .pl-6 {
   padding-left: 1.5rem;
 }
+.pl-\[20px\] {
+  padding-left: 20px;
+}
+.pl-\[25px\] {
+  padding-left: 25px;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2038,6 +2084,9 @@ video {
 .text-\[11px\] {
   font-size: 11px;
 }
+.text-\[13px\] {
+  font-size: 13px;
+}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -2094,6 +2143,9 @@ video {
 .leading-4 {
   line-height: 1rem;
 }
+.leading-\[25px\] {
+  line-height: 25px;
+}
 .leading-none {
   line-height: 1;
 }
@@ -2122,6 +2174,9 @@ video {
 .text-buttonPrimary-500 {
   color: var(--button-primary-500);
 }
+.text-card-foreground {
+  color: hsl(var(--card-foreground));
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2154,6 +2209,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
+.text-mauve-11 {
+  --tw-text-opacity: 1;
+  color: hsl(252 5.0% 40.7% / var(--tw-text-opacity));
+}
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -2174,6 +2236,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
 }
+.text-violet-11 {
+  --tw-text-opacity: 1;
+  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2215,6 +2281,11 @@ video {
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[0px_10px_38px_-10px_rgba\(22\2c _23\2c _24\2c _0\.35\)\2c _0px_10px_20px_-15px_rgba\(22\2c _23\2c _24\2c _0\.2\)\] {
+  --tw-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  --tw-shadow-colored: 0px 10px 38px -10px var(--tw-shadow-color), 0px 10px 20px -15px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2277,6 +2348,10 @@ video {
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2299,6 +2374,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.will-change-\[opacity\2c transform\] {
+  will-change: opacity,transform;
+}
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -2615,15 +2693,151 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
+.data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
+@keyframes slideUpAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.data-\[side\=bottom\]\:animate-slideUpAndFade[data-side=bottom] {
+  animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes slideRightAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.data-\[side\=left\]\:animate-slideRightAndFade[data-side=left] {
+  animation: slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes slideLeftAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.data-\[side\=right\]\:animate-slideLeftAndFade[data-side=right] {
+  animation: slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes slideDownAndFade {
+
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.data-\[side\=top\]\:animate-slideDownAndFade[data-side=top] {
+  animation: slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.data-\[highlighted\]\:bg-violet-9[data-highlighted] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
+}
+.data-\[highlighted\]\:data-\[state\=open\]\:bg-violet-9[data-state=open][data-highlighted] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
+}
+.data-\[state\=open\]\:bg-violet-4[data-state=open] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(252 91.5% 95.5% / var(--tw-bg-opacity));
+}
+.data-\[disabled\]\:text-mauve-8[data-disabled] {
+  --tw-text-opacity: 1;
+  color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));
+}
+.data-\[highlighted\]\:data-\[state\=open\]\:text-violet-1[data-state=open][data-highlighted] {
+  --tw-text-opacity: 1;
+  color: hsl(255 65.0% 99.4% / var(--tw-text-opacity));
+}
+.data-\[highlighted\]\:text-violet-1[data-highlighted] {
+  --tw-text-opacity: 1;
+  color: hsl(255 65.0% 99.4% / var(--tw-text-opacity));
+}
+.data-\[state\=open\]\:text-violet-11[data-state=open] {
+  --tw-text-opacity: 1;
+  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
+}
+.group[data-disabled] .group-data-\[disabled\]\:text-mauve-8 {
+  --tw-text-opacity: 1;
+  color: hsl(249 10.4% 75.5% / var(--tw-text-opacity));
+}
+.group[data-highlighted] .group-data-\[highlighted\]\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+:is([dir="ltr"] .ltr\:left-0) {
+  left: 0px;
+}
+:is([dir="ltr"] .ltr\:ml-auto) {
+  margin-left: auto;
+}
+:is([dir="ltr"] .ltr\:pl-\[0px\]) {
+  padding-left: 0px;
+}
+:is([dir="ltr"] .ltr\:pl-\[25px\]) {
+  padding-left: 25px;
+}
+:is([dir="ltr"] .ltr\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:right-0) {
+  right: 0px;
+}
 :is([dir="rtl"] .rtl\:ml-1) {
   margin-left: 0.25rem;
 }
 :is([dir="rtl"] .rtl\:ml-2) {
   margin-left: 0.5rem;
 }
+:is([dir="rtl"] .rtl\:mr-auto) {
+  margin-right: auto;
+}
+:is([dir="rtl"] .rtl\:rotate-180) {
+  --tw-rotate: 180deg;
+  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([dir="rtl"] .rtl\:flex-row-reverse) {
   flex-direction: row-reverse;
 }
+:is([dir="rtl"] .rtl\:pl-\[0px\]) {
+  padding-left: 0px;
+}
+:is([dir="rtl"] .rtl\:pl-\[25px\]) {
+  padding-left: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[5px\]) {
+  padding-right: 5px;
+}
 :is(.dark .dark\:border-blue-500) {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));

package/src/tailwind.css

@@ -17,6 +17,13 @@
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
     --border-radius: 10px;
     --border-radius-inner: calc(
       var(--border-radius) - calc(var(--border-radius) / 3)

package/tailwind.config.js

@@ -5,7 +5,7 @@ const LAYOUT_PRIMARY = "#EEF7FC";
 
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: "class",
+  darkMode: ["class"],
   theme: {
     fontFamily: {
       plex: ["IBM Plex Sans Arabic"]
@@ -58,18 +58,49 @@ module.exports = {
             // maxHeight: 0,
             height: "0rem"
           }
+        },
+        slideDownAndFade: {
+          from: { opacity: 0, transform: "translateY(-2px)" },
+          to: { opacity: 1, transform: "translateY(0)" }
+        },
+        slideLeftAndFade: {
+          from: { opacity: 0, transform: "translateX(2px)" },
+          to: { opacity: 1, transform: "translateX(0)" }
+        },
+        slideUpAndFade: {
+          from: { opacity: 0, transform: "translateY(2px)" },
+          to: { opacity: 1, transform: "translateY(0)" }
+        },
+        slideRightAndFade: {
+          from: { opacity: 0, transform: "translateX(-2px)" },
+          to: { opacity: 1, transform: "translateX(0)" }
         }
       },
       animation: {
         collapse: "collapse",
         expandDown: "expandDown 500ms ease-in-out",
-        expandUp: "expandUp 100ms ease-in-out"
+        expandUp: "expandUp 100ms ease-in-out",
+        slideDownAndFade:
+          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade:
+          "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade:
+          "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)"
       },
       borderRadius: {
         DEFAULT: "var(--border-radius)",
         inner: "var(--border-radius-inner)"
       },
       colors: {
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
         // #f6f5fe
         // #edebfd lighter
         // #d2cdfa
@@ -80,6 +111,50 @@ module.exports = {
         // #3929b0 700 (darker)
         // #2e218d
         // #251b73
+
+        blackA:{
+          1: "hsla(0, 0%, 0%, 0.012)",
+          2: "hsla(0, 0%, 0%, 0.024)",
+          3: "hsla(0, 0%, 0%, 0.055)",
+          4: "hsla(0, 0%, 0%, 0.078)",
+          5: "hsla(0, 0%, 0%, 0.106)",
+          6: "hsla(0, 0%, 0%, 0.133)",
+          7: "hsla(0, 0%, 0%, 0.169)",
+          8: "hsla(0, 0%, 0%, 0.267)",
+          9: "hsla(0, 0%, 0%, 0.447)",
+          10: "hsla(0, 0%, 0%, 0.498)",
+          11: "hsla(0, 0%, 0%, 0.608)",
+          12: "hsla(0, 0%, 0%, 0.875)",
+        },
+        mauve:{
+          1: "hsl(300, 26.0%, 99.0%)",
+          2: "hsl(270, 20.0%, 98.0%)",
+          3: "hsl(267, 13.8%, 95.3%)",
+          4: "hsl(265, 12.2%, 92.7%)",
+          5: "hsl(263, 11.6%, 90.3%)",
+          6: "hsl(261, 11.1%, 87.7%)",
+          7: "hsl(257, 10.8%, 84.3%)",
+          8: "hsl(249, 10.4%, 75.5%)",
+          9: "hsl(252, 6.0%, 57.3%)",
+          10: "hsl(250, 5.0%, 52.3%)",
+          11: "hsl(252, 5.0%, 40.7%)",
+          12: "hsl(260, 10.0%, 13.5%)",
+        },
+        violet:{
+          1: "hsl(255, 65.0%, 99.4%)",
+          2: "hsl(252, 100%, 99.0%)",
+          3: "hsl(252, 96.9%, 97.4%)",
+          4: "hsl(252, 91.5%, 95.5%)",
+          5: "hsl(252, 85.1%, 93.0%)",
+          6: "hsl(252, 77.8%, 89.4%)",
+          7: "hsl(252, 71.0%, 83.7%)",
+          8: "hsl(252, 68.6%, 76.3%)",
+          9: "hsl(252, 56.0%, 57.5%)",
+          10: "hsl(251, 48.1%, 53.5%)",
+          11: "hsl(250, 43.0%, 48.0%)",
+          12: "hsl(250, 43.0%, 26.0%)",
+        },
+
         buttonPrimary: {
           300: "var(--button-primary-300)",
           500: "var(--button-primary-500)",

package/es/elements/HawaDrawer.d.ts

@@ -1,13 +0,0 @@
-import { FC, ReactNode } from "react";
-type TDrawerTypes = {
-    open: boolean;
-    setOpen: any;
-    position: any;
-    heading: any;
-    children?: ReactNode;
-    drawerHeader?: any;
-    drawerBody?: any;
-    drawerFooter?: any;
-};
-export declare const HawaDrawer: FC<TDrawerTypes>;
-export {};

package/lib/elements/HawaDrawer.d.ts

@@ -1,13 +0,0 @@
-import { FC, ReactNode } from "react";
-type TDrawerTypes = {
-    open: boolean;
-    setOpen: any;
-    position: any;
-    heading: any;
-    children?: ReactNode;
-    drawerHeader?: any;
-    drawerBody?: any;
-    drawerFooter?: any;
-};
-export declare const HawaDrawer: FC<TDrawerTypes>;
-export {};

package/src/elements/HawaDrawer.tsx

@@ -1,116 +0,0 @@
-import React, { FC, ReactElement, ReactNode } from "react"
-import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
-import clsx from "clsx"
-// TODO: This element should either be removed or improved
-type TDrawerTypes = {
-  open: boolean
-  setOpen: any
-  position: any
-  heading: any
-  children?: ReactNode
-  drawerHeader?: any
-  drawerBody?: any
-  drawerFooter?: any
-}
-
-export const HawaDrawer: FC<TDrawerTypes> = ({
-  open,
-  setOpen,
-  position,
-  heading,
-  children,
-  ...props
-}) => {
-  const leftDrawer =
-    "w-60 z-50 h-full absolute overflow-x-clip top-0 left-0 border-r bg-white"
-  const rightDrawer =
-    "w-60 z-50 h-full absolute overflow-x-clip top-0 right-0 border-l bg-white"
-
-  return (
-    <div
-      className={clsx(
-        position == "left" ? leftDrawer : rightDrawer,
-        position == "left" ? "flex-row-reverse" : "flex-row",
-        "overflow-x-clip transition-all",
-        open ? "w-60" : "w-0"
-      )}
-    >
-      {props.drawerHeader && (
-        <DrawerHeader direction={position} setOpen={setOpen}>
-          {props.drawerHeader}
-        </DrawerHeader>
-      )}
-
-      {props.drawerBody && (
-        <DrawerBody direction={position}>{props.drawerBody}</DrawerBody>
-      )}
-      {props.drawerFooter && (
-        <DrawerFooter direction={position}>{props.drawerFooter}</DrawerFooter>
-      )}
-    </div>
-  )
-}
-
-type TDrawerHeader = {
-  setOpen: any
-  children: ReactElement
-  direction: any
-}
-
-const DrawerHeader: FC<TDrawerHeader> = (props) => {
-  return (
-    <div
-      className={clsx(
-        "flex w-full flex-row items-center justify-between border-b p-4",
-        props.direction == "left" ? "flex-row" : "flex-row-reverse"
-      )}
-    >
-      {props.children}
-      <div
-        className="justify-self-end rounded border p-1 hover:cursor-pointer"
-        onClick={() => props.setOpen(false)}
-      >
-        {props.direction == "left" ? (
-          <FaChevronLeft size={20} strokeWidth={2} />
-        ) : (
-          <FaChevronRight size={20} strokeWidth={2} />
-        )}
-      </div>
-    </div>
-  )
-}
-
-type TDrawerBody = {
-  children: ReactElement
-  direction: any
-}
-const DrawerBody = (props: TDrawerBody) => {
-  return (
-    <div
-      className={clsx(
-        "overflow-clip whitespace-nowrap p-4",
-        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
-      )}
-    >
-      {props.children}
-    </div>
-  )
-}
-
-type TDrawerFooter = {
-  children: ReactElement
-  direction: any
-}
-
-const DrawerFooter = (props: TDrawerFooter) => {
-  return (
-    <div
-      className={clsx(
-        "absolute bottom-0 w-full whitespace-nowrap border-t p-4",
-        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
-      )}
-    >
-      {props.children}
-    </div>
-  )
-}