@sikka/hawa 0.0.266 → 0.0.268

package/lib/layout/Banner.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+type BannerTypes = {
+    showBanner?: boolean;
+    direction?: "rtl" | "ltr";
+    logoURL?: string;
+    title?: string;
+    text?: string;
+    actionText?: string;
+    onActionClick?: () => void;
+    position?: "top" | "bottom";
+    design: "default" | "floating";
+};
+export declare const HawaBanner: FC<BannerTypes>;
+export {};

package/lib/layout/index.d.ts

@@ -6,3 +6,4 @@ export * from "./HawaAppLayoutSimplified";
 export * from "./HawaContainer";
 export * from "./AppSidebar";
 export * from "./Footer";
+export * from "./Banner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.266",
+  "version": "0.0.268",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Misc/EmptyState.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
-import { FaCheck } from "react-icons/fa"
 
 type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"
@@ -21,7 +20,17 @@ export const EmptyState: FC<TEmptyState> = ({
     <HawaContainer variant={variant} centered={true} maxWidth="small">
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
         <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
-          <FaCheck size={20} color="white" />
+          <svg
+            stroke="currentColor"
+            fill="white"
+            stroke-width="0"
+            viewBox="0 0 512 512"
+            height="0.35em"
+            width="0.35em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+          </svg>
         </div>
         <div className="m-2 text-xl font-bold">
           {texts?.youreCaughtUp ?? "You're all caught up"}

package/src/blocks/Misc/NoPermission.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from "react"
 import { HawaContainer } from "../../layout"
-import { FaLock } from "react-icons/fa"
 
 type TNoPermission = {
   variant?: "outlined" | "contained" | "neobrutalism"
@@ -18,7 +17,17 @@ export const NoPermission: FC<TNoPermission> = ({
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
         <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
-          <FaLock size={20} color="white" />
+          <svg
+            stroke="currentColor"
+            fill="white"
+            stroke-width="0"
+            viewBox="0 0 448 512"
+            height="0.35em"
+            width="0.35em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+          </svg>
         </div>
         <div className="m-2 text-xl font-bold">
           {texts?.title ?? "You don't have permission"}

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,4 @@
 import React, { useState, FC } from "react"
-import { BsExclamationCircleFill } from "react-icons/bs"
 import { HawaTabs, HawaTooltip } from "../../elements"
 
 const CheckMark = () => (
@@ -131,7 +130,17 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                       position="top-right"
                       content={feature.description}
                     >
-                      <BsExclamationCircleFill />
+                      <svg
+                        stroke="currentColor"
+                        fill="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 16 16"
+                        height="1em"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <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>
                   )}
                 </div>

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react"
-import { FaClone } from "react-icons/fa"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -24,7 +23,17 @@ export const ReferralAccount: FC<ReferralAccount> = ({
             onClick={() => navigator.clipboard.writeText(referralCode)}
           >
             <span className="bg-red flex items-center justify-center">
-              <FaClone />
+              <svg
+                stroke="currentColor"
+                fill="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <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>
         </div>
@@ -38,7 +47,17 @@ export const ReferralAccount: FC<ReferralAccount> = ({
             onClick={() => navigator.clipboard.writeText(referralLink)}
           >
             <span className="bg-red flex items-center justify-center">
-              <FaClone />
+              <svg
+                stroke="currentColor"
+                fill="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <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>
         </div>

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react"
-import { FaTimes } from "react-icons/fa"
 import {
   HawaAlert,
   HawaButton,
@@ -109,8 +108,21 @@ const SettlementAccountCard = (props) => (
       )}
       {/* {props.default && <HawaChip size="normal" label="Default" />} */}
       {!props.default && <HawaButton size="small">Make Default</HawaButton>}
-      <HawaButton tooltip="Delete">
-        <FaTimes />
+      <HawaButton tooltip="Delete" size="small">
+        {/* <FaTimes /> */}
+        <svg
+          aria-hidden="true"
+          className="h-5 w-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <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>
       </HawaButton>
     </div>
   </div>

package/src/elements/DragDropImages.tsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
-import { TbDragDrop } from "react-icons/tb"
 import clsx from "clsx"
+
 //TODO: This element needs more improvements and testing
+
 type DragDropImagesTypes = {
   /**  The text label above the component. Consistant with the other form input fields   */
   label?: string
@@ -26,6 +27,8 @@ type DragDropImagesTypes = {
     maxFileSize: any
     tooManyFiles: any
     fileTooLarge: any
+    acceptedFileTypes: any
+    invalidFileType: any
   }
 }
 
@@ -46,7 +49,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
 }) => {
   const [cmp, setCmp] = useState(0)
   const [max, setMax] = useState<any>(0)
-  //const [thumbs, setThumbs] = useState("");
+
   const {
     getRootProps,
     getInputProps,
@@ -84,6 +87,12 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     acceptedFiles.splice(0, acceptedFiles.length)
     setFiles([])
   }
+
+  const clearAllFiles = () => {
+    acceptedFiles.length = 0
+    setFiles([])
+  }
+
   useEffect(() => {
     if (maxSize > 0) {
       const k = 1024
@@ -96,16 +105,44 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     }
   }, [maxSize])
   const errs = fileRejections.map((rej, i) => {
-    return (
-      <HawaAlert
-        text={rej.file.name}
-        title={rej.errors[0].code}
-        severity="error"
-      />
-    )
+    switch (rej.errors[0].code) {
+      case "file-too-large":
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={texts.fileTooLarge}
+            severity="error"
+          />
+        )
+      case "too-many-files":
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={texts.tooManyFiles}
+            severity="error"
+          />
+        )
+      case "file-invalid-type":
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={texts.invalidFileType}
+            severity="error"
+          />
+        )
+
+      default:
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={rej.errors[0].code}
+            severity="error"
+          />
+        )
+    }
   })
   const thumbs = files?.map((file: any, index: any) => (
-    <div className="relative m-3 rounded  ">
+    <div className="relative rounded">
       <button
         onClick={(e) => {
           e.stopPropagation()
@@ -114,7 +151,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           onDeleteFile(file)
         }}
         type="button"
-        className="absolute left-0 ml-auto inline-flex items-center rounded rounded-bl-none rounded-tr-none bg-gray-900 p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+        className="absolute left-0 ml-auto inline-flex items-center rounded-inner rounded-bl-none rounded-tr-none bg-gray-900 p-1.5 text-sm text-gray-400 transition-all hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
         data-modal-toggle="defaultModal"
       >
         <svg
@@ -160,63 +197,56 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
         </div>
       )}
       <div
-        {...getRootProps({})}
         className={clsx(
           "flex flex-col justify-center rounded border border-dashed border-black  transition-all hover:bg-gray-100 ",
           isDragActive ? "bg-layoutPrimary-500" : "bg-white"
         )}
       >
-        <input {...getInputProps()} />
-        <div className="flex flex-col items-center justify-center gap-2 pt-4 text-center">
-          <TbDragDrop size={22} />
-          {<texts.clickHereToUpload />}
-        </div>
-        <div className="py-4 text-center text-xs">
-          {texts.maxFileSize} {max}
-        </div>
-        <div className="flex justify-center ">
-          {acceptedFiles.length > 0 && (
-            <HawaButton
-              onClick={(e) => {
-                e.stopPropagation()
-                onClearFiles(acceptedFiles)
-              }}
+        <div {...getRootProps({})}>
+          <p {...getInputProps()} />
+          <div className="flex flex-col items-center justify-center gap-2 pt-4 text-center">
+            <svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              height="1.5em"
+              width="1.5em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              Clear All
-            </HawaButton>
-          )}
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
+              <path d="M13 13l9 3l-4 2l-2 4l-3 -9"></path>
+              <path d="M3 3l0 .01"></path>
+              <path d="M7 3l0 .01"></path>
+              <path d="M11 3l0 .01"></path>
+              <path d="M15 3l0 .01"></path>
+              <path d="M3 7l0 .01"></path>
+              <path d="M3 11l0 .01"></path>
+              <path d="M3 15l0 .01"></path>
+            </svg>
+            {<texts.clickHereToUpload />}
+          </div>
+          <div className="pt-2 text-center text-xs">
+            {texts.acceptedFileTypes} {accept.split(",")}
+          </div>
+          <div className="pb-2 pt-1 text-center text-xs">
+            {texts.maxFileSize} {max}
+          </div>
         </div>
-        {thumbs && showPreview ? (
-          <aside
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              flexWrap: "wrap",
-              // marginTop: 10,
-            }}
-            className="rounded-lg border-red-500"
-          >
+        {acceptedFiles.length > 0 && (
+          <div className="flex justify-center rounded-lg  p-2 ">
+            <HawaButton onClick={clearAllFiles}>Clear All</HawaButton>
+          </div>
+        )}
+        {acceptedFiles.length > 0 && thumbs && showPreview ? (
+          <aside className="flex flex-row flex-wrap justify-center  gap-2 rounded-lg  p-2">
             {thumbs}
           </aside>
         ) : null}
-        <div className="px-4">
-          {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-            <HawaAlert
-              title={texts.errorUploading}
-              text={texts.tooManyFiles}
-              severity="error"
-            />
-          ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-            <HawaAlert
-              title={texts.errorUploading}
-              text={texts.fileTooLarge}
-              severity="error"
-            />
-          ) : (
-            errs
-          )}
-        </div>
-        {}
+        <div className="px-4">{fileRejections[0]?.errors[0]?.code && errs}</div>
       </div>
     </div>
   )

package/src/elements/HawaAlert.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState, useEffect } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
-import { FiAlertCircle } from "react-icons/fi"
 
 type AlertTypes = {
   severity: "info" | "warning" | "error" | "success"

package/src/elements/HawaButton.tsx

@@ -222,8 +222,17 @@ export const HawaButton: FC<ButtonProps> = ({
         </button>
       )}
       {badge && (
-        <div className="absolute -right-3 -top-3 inline-flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-red-500 text-xs font-bold text-white dark:border-gray-900">
-          {badge}
+        <div
+          className={clsx(
+            typeof badge === "boolean"
+              ? "h-5 w-5"
+              : typeof badge === "string"
+              ? "h-5 w-7"
+              : "h-6 w-6",
+            "absolute -right-2 select-none -top-2 inline-flex  items-center justify-center rounded-full border-2 border-white bg-red-500 text-[9px] font-bold text-white dark:border-gray-900"
+          )}
+        >
+          {typeof badge === "number" && badge > 100 ? "+99" : badge}
         </div>
       )}
     </div>

package/src/elements/HawaRadio.tsx

@@ -2,49 +2,174 @@ import React, { useState, FC } from "react"
 import clsx from "clsx"
 
 type RadioTypes = {
+  orientation?: "vertical" | "horizontal"
+  design?: "default" | "tabs" | "cards" | "bordered"
   options?: [
     {
       value: any
       label: any
+      disabled?: any
+      sublabel?: any
+      beforeIcon?: any
+      afterIcon?: any
     }
   ]
   onChangeTab?: any
   defaultValue?: any
 }
-export const HawaRadio: FC<RadioTypes> = (props) => {
+export const HawaRadio: FC<RadioTypes> = ({
+  design = "default",
+  orientation = "horizontal",
+  ...props
+}) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
     "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-500 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 = {
+    horizontal: "flex flex-row",
+    vertical: "flex flex-col",
+  }
+  switch (design) {
+    case "tabs":
+      return (
+        <div>
+          <ul
+            className={clsx(
+              props.options?.length > 2
+                ? "flex-wrap xs:max-w-full xs:flex-nowrap"
+                : "",
+              " max-w-fit  whitespace-nowrap rounded bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+              orientationStyle[orientation]
+            )}
+          >
+            {props.options?.map((opt: any, o) => (
+              <li className="w-full" key={o}>
+                <button
+                  aria-current="page"
+                  onClick={() => {
+                    setSelectedOption(opt.value)
+                    props.onChangeTab(opt.value)
+                  }}
+                  className={
+                    selectedOption === opt.value
+                      ? activeTabStyle
+                      : inactiveTabStyle
+                  }
+                >
+                  {opt.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )
+    case "bordered":
+      return (
+        <div className={clsx(orientationStyle[orientation], "gap-4")}>
+          {props.options.map((opt, i) => (
+            <div className="rounded border border-gray-200  ">
+              <div
+                className="radio-item radio-item-bordered flex items-center   transition-all"
+                key={i + 1}
+              >
+                <input
+                  disabled={opt.disabled}
+                  id={opt.value.toString()}
+                  type="radio"
+                  value={opt.value}
+                  name="bordered-radio"
+                  // className="h-4 w-4 border-gray-300 "
+                />
+                <label
+                  htmlFor={opt.value.toString()}
+                  className={clsx(
+                    "ml-2 w-full  p-4 pl-3  text-sm font-medium",
+                    opt.disabled ? "opacity-50" : "cursor-pointer text-gray-900"
+                  )}
+                >
+                  {opt.label}
+                </label>
+              </div>
+            </div>
+          ))}
+        </div>
+      )
+    case "cards":
+      return (
+        <ul className={clsx(orientationStyle[orientation], "gap-4")}>
+          {props.options?.map((opt: any, o) => (
+            <li>
+              <input
+                type="radio"
+                id={opt.value.toString()}
+                name="cards-radio"
+                value={opt.value.toString()}
+                className="peer hidden"
+                required
+              />
+              <label
+                htmlFor={opt.value.toString()}
+                className="inline-flex h-full w-full cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-100 hover:text-gray-600 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"
+              >
+                <div className="block  h-full w-full">
+                  <div className="w-full text-lg font-semibold">
+                    {opt.label}
+                  </div>
+                  <div className="w-full">{opt.sublabel}</div>
+                </div>
+                {/* <svg
+                  className="ml-3 h-5 w-5 "
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 14 10"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M1 5h12m0 0L9 1m4 4L9 9"
+                  />
+                </svg> */}
+              </label>
+            </li>
+          ))}
+        </ul>
+      )
 
-  return (
-    <div>
-      <ul
-        className={clsx(
-          props.options?.length > 2
-            ? "flex-wrap xs:max-w-full xs:flex-nowrap"
-            : "",
-          "flex max-w-fit flex-row whitespace-nowrap rounded bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
-        )}
-      >
-        {props.options?.map((opt: any, o) => (
-          <li className="w-full" key={o}>
-            <button
-              aria-current="page"
-              onClick={() => {
-                setSelectedOption(opt.value)
-                props.onChangeTab(opt.value)
-              }}
-              className={
-                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-              }
+    default:
+      return (
+        <div className={orientationStyle[orientation]}>
+          {props.options.map((opt, i) => (
+            <div
+              className="radio-item radio-item-default mb-4 flex items-center transition-all"
+              key={i + 1}
             >
-              {opt.label}
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
+              <input
+                disabled={opt.disabled}
+                id={opt.value.toString()}
+                type="radio"
+                value={opt.value}
+                name="default-radio"
+                // className="h-4 w-4 border-gray-300 "
+              />
+              <label
+                htmlFor={opt.value.toString()}
+                className={clsx(
+                  "ml-2 text-sm font-medium ",
+                  opt.disabled
+                    ? "text-gray-400"
+                    : "cursor-pointer text-gray-900"
+                )}
+              >
+                {opt.label}
+              </label>
+            </div>
+          ))}
+        </div>
+      )
+  }
 }