@sikka/hawa 0.1.98 → 0.1.99

package/src/elements/UserReferralSource.tsx

@@ -1,10 +1,8 @@
 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 { Card, CardContent } from "./Card"
 import { Textarea } from "./Textarea"
 
 type ComponentTypes = {

package/src/elements/index.ts

@@ -12,11 +12,9 @@ export * from "./HawaColorPicker"
 export * from "./HawaSearchBar"
 export * from "./HawaAccordion"
 export * from "./HawaPhoneInput"
-export * from "./HawaTooltip"
 export * from "./HawaTabs"
 export * from "./HawaModal"
 export * from "./HawaMenu"
-export * from "./HawaDropdownMenu"
 export * from "./HawaCopyrights"
 export * from "./HawaStepper"
 export * from "./HawaStats"

package/src/layout/Banner.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, FC, useRef, useState } from "react"
+import React, { FC, useRef, useState } from "react"
 import clsx from "clsx"
-import { HawaButton } from "../elements"
+import { Button } from "../elements"
 
 type BannerTypes = {
   showBanner?: boolean
@@ -82,9 +82,7 @@ export const HawaBanner: FC<BannerTypes> = ({
               props.direction === "rtl" ? "ml-0 md:ml-10" : "mr-0 md:mr-10"
             )}
           >
-            <HawaButton onClick={props.onActionClick}>
-              {props.actionText}
-            </HawaButton>
+            <Button onClick={props.onActionClick}>{props.actionText}</Button>
           </div>
         )}
         <button

package/src/layout/HawaAppLayout.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx"
 import { FaChevronRight } from "react-icons/fa"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { HawaButton, HawaMenu } from "../elements"
+import { HawaMenu } from "../elements"
 
 // TODO: when no pagetitle, navbar gets messy
 

package/src/layout/Sidebar.tsx

@@ -192,7 +192,7 @@ const SidebarItem: React.FC<{
                   key={idx}
                   onClick={(e) => {
                     e.stopPropagation()
-                    item.onClick()
+                    subitem.onClick()
                     if (onSubItemClick) {
                       onSubItemClick([item.value, subitem.value])
                     }

package/src/styles.css

@@ -897,9 +897,6 @@ video {
 .m-5 {
   margin: 1.25rem;
 }
-.m-\[5px\] {
-  margin: 5px;
-}
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -1353,9 +1350,6 @@ video {
 .w-\[21px\] {
   width: 21px;
 }
-.w-\[25px\] {
-  width: 25px;
-}
 .w-\[300px\] {
   width: 300px;
 }
@@ -1403,9 +1397,6 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
-.min-w-\[220px\] {
-  min-width: 220px;
-}
 .min-w-\[24px\] {
   min-width: 24px;
 }
@@ -1862,10 +1853,6 @@ video {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
 }
-.rounded-t-inner {
-  border-top-left-radius: var(--radius-inner);
-  border-top-right-radius: var(--radius-inner);
-}
 .rounded-t-lg {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
@@ -2212,10 +2199,6 @@ 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-warning {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--warning) / var(--tw-bg-opacity));
@@ -2260,9 +2243,6 @@ video {
 .fill-primary\/20 {
   fill: hsl(var(--primary) / 0.2);
 }
-.fill-white {
-  fill: #fff;
-}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2297,9 +2277,6 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
-.p-\[5px\] {
-  padding: 5px;
-}
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -2344,10 +2321,6 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
-.px-\[5px\] {
-  padding-left: 5px;
-  padding-right: 5px;
-}
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2419,12 +2392,6 @@ video {
 .pl-8 {
   padding-left: 2rem;
 }
-.pl-\[20px\] {
-  padding-left: 20px;
-}
-.pl-\[25px\] {
-  padding-left: 25px;
-}
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -2510,9 +2477,6 @@ video {
 .text-\[12px\] {
   font-size: 12px;
 }
-.text-\[13px\] {
-  font-size: 13px;
-}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -2575,9 +2539,6 @@ video {
 .leading-8 {
   line-height: 2rem;
 }
-.leading-\[25px\] {
-  line-height: 25px;
-}
 .leading-none {
   line-height: 1;
 }
@@ -2670,10 +2631,6 @@ video {
   --tw-text-opacity: 1;
   color: hsl(var(--info-foreground) / 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));
 }
@@ -2731,10 +2688,6 @@ video {
   --tw-text-opacity: 1;
   color: hsl(var(--success-foreground) / var(--tw-text-opacity));
 }
-.text-violet-11 {
-  --tw-text-opacity: 1;
-  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
-}
 .text-warning-foreground {
   --tw-text-opacity: 1;
   color: hsl(var(--warning-foreground) / var(--tw-text-opacity));
@@ -2794,11 +2747,6 @@ video {
   --tw-shadow-colored: 0 2px 10px 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);
@@ -2880,10 +2828,6 @@ video {
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
-.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);
-}
 .filter {
   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);
 }
@@ -2939,15 +2883,9 @@ video {
 .duration-200 {
   transition-duration: 200ms;
 }
-.duration-300 {
-  transition-duration: 300ms;
-}
 .duration-500 {
   transition-duration: 500ms;
 }
-.will-change-\[opacity\2c transform\] {
-  will-change: opacity,transform;
-}
 .will-change-transform {
   will-change: transform;
 }
@@ -2992,9 +2930,6 @@ video {
 .duration-200 {
   animation-duration: 200ms;
 }
-.duration-300 {
-  animation-duration: 300ms;
-}
 .duration-500 {
   animation-duration: 500ms;
 }
@@ -3576,66 +3511,6 @@ body {
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   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));
 }
-@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);
-}
 @keyframes accordion-up {
 
   from {
@@ -3662,14 +3537,6 @@ body {
 .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
   animation: accordion-down 0.2s ease-out;
 }
-.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\=active\]\:bg-primary[data-state=active] {
   background-color: hsl(var(--primary));
 }
@@ -3682,32 +3549,12 @@ body {
 .data-\[state\=open\]\:bg-accent[data-state=open] {
   background-color: hsl(var(--accent));
 }
-.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\=active\]\:text-primary-foreground[data-state=active] {
   color: hsl(var(--primary-foreground));
 }
 .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
   color: hsl(var(--muted-foreground));
 }
-.data-\[state\=open\]\:text-violet-11[data-state=open] {
-  --tw-text-opacity: 1;
-  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
-}
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
@@ -3794,60 +3641,15 @@ body {
 .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
-.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\:-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));

package/archive/HawaSnackbar.tsx

@@ -1,137 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from "react"
-import clsx from "clsx"
-import { HawaButton } from "../src/elements/HawaButton"
-
-type THawaSnackBar = {
-  severity: "info" | "warning" | "error" | "success" | "none"
-  title: string
-  description: string
-  onCloseSnakbar?: () => void
-  duration?: number
-  position?:
-    | "top-left"
-    | "top-center"
-    | "top-right"
-    | "bottom-right"
-    | "bottom-center"
-    | "bottom-left"
-  actions?: [
-    {
-      icon?: any
-      label: string
-      onClick: any
-      variant: "contained" | "outlined"
-    }
-  ]
-}
-
-export const HawaSnackbar: FC<THawaSnackBar> = ({
-  title,
-  description,
-  severity = "info",
-  position = "bottom-left",
-  actions,
-  onCloseSnakbar,
-  // handleClose,
-  duration,
-}) => {
-  let defaultStyle =
-    "fixed flex flex-row items-top p-1 w-full max-w-xs rounded shadow dark:text-gray-400 dark:bg-gray-800"
-  let severities = {
-    info: "text-blue-700 bg-blue-100",
-    warning: "text-yellow-700 bg-yellow-100",
-    error: "text-red-700 bg-red-100",
-    success: "text-green-700 bg-green-100",
-    none: "text-gray-500 bg-white ",
-  }
-  let positions = {
-    "top-left": "top-4",
-    "top-right": "top-4 right-4",
-    "top-center": "top-4 left-1/2 -translate-x-1/2",
-    "bottom-left": "bottom-4",
-    "bottom-right": "bottom-4 right-4",
-    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
-  }
-
-  const [closed, setClosed] = useState(false)
-  const toastRef = useRef(null)
-  useEffect(() => {
-    if (duration) {
-      //To change opacity and hide the component
-      const timeoutHide = setTimeout(() => {
-        setClosed(true)
-      }, duration)
-      //To destroy the component after hiding it
-      const timeoutDestroy = setTimeout(() => {
-        setClosed(true)
-        toastRef.current.removeChild(toastRef.current.children[0])
-      }, duration + 1000)
-
-      return () => {
-        clearTimeout(timeoutHide)
-        clearTimeout(timeoutDestroy)
-      }
-    }
-  }, [duration])
-
-  return (
-    <div ref={toastRef}>
-      <div
-        id="toast-default"
-        role="alert"
-        className={clsx(
-          defaultStyle,
-          severities[severity],
-          positions[position],
-          "p-2 transition-all",
-          closed ? "opacity-0" : "opacity-100"
-        )}
-      >
-        <div className="flex w-full  flex-col gap-2 p-3">
-          <div className="text-sm font-bold">{title}</div>
-          <div className="text-sm font-normal">{description}</div>
-          {actions && (
-            <div className="mt-2 flex flex-row gap-2">
-              {actions.map((act, i) => (
-                <HawaButton
-                  key={i}
-                  variant={act.variant}
-                  onClick={act.onClick()}
-                  margins="none"
-                >
-                  {act.icon && act.icon}
-                  {act.label}
-                </HawaButton>
-              ))}
-            </div>
-          )}
-        </div>
-        <button
-          type="button"
-          className="right-0 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={() => {
-            onCloseSnakbar()
-            setClosed(true)
-          }}
-        >
-          <span className="sr-only">Close</span>
-          <svg
-            aria-label="Close Button"
-            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>
-      </div>
-    </div>
-  )
-}

package/archive/HawaSwitch.tsx

@@ -1,41 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type SwitchTypes = {
-  text?: any
-  size?: "small" | "normal" | "large"
-}
-
-export const HawaSwitch: FC<SwitchTypes> = ({ size = "normal", ...props }) => {
-  let sizeStyles = {
-    small: "",
-    normal:
-      "peer-checked:after:translate-x-full h-6 w-11 after:top-[2px] after:left-[1px] after:h-5 after:w-5 ",
-    large:
-      "peer-checked:after:translate-x-[2.445rem]  h-10 w-20 after:top-[2px] after:left-[2px] after:h-9 after:w-9",
-  }
-  return (
-    <label
-      htmlFor="default-toggle"
-      className="relative inline-flex cursor-pointer items-center"
-    >
-      <input
-        type="checkbox"
-        value=""
-        id="default-toggle"
-        className="peer sr-only"
-      />
-      <div
-        className={clsx(
-          sizeStyles[size],
-          "peer rounded-full bg-gray-200 after:absolute  after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-buttonPrimary-500  peer-checked:after:border-white  dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-buttonPrimary-700"
-        )}
-      ></div>
-      {props.text && (
-        <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-          {props.text}
-        </span>
-      )}
-    </label>
-  )
-}

package/src/blocks/Account/HawaApiBox.tsx

@@ -1,12 +0,0 @@
-import React, { FC } from "react"
-
-type HawaApiBoxTypes = {
-  lang?: any
-  onClick?: any
-  buttonText?: any
-}
-export const HawaApiBox: FC<HawaApiBoxTypes> = (props) => {
-  let isArabic = props.lang === "ar"
-  let logoElement: any = ""
-  return <div>test</div>
-}