@sikka/hawa 0.0.262 → 0.0.263

package/package.json

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

package/src/elements/HawaCodeBlock.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx"
 type CodeBlockTypes = {
   color?: "dark" | "light"
   language?: string
+  width?: "full" | "md" | "sm"
   tabs?: TabsTypes[]
   code?: string
 }
@@ -12,11 +13,27 @@ type TabsTypes = {
   code: string
 }
 
-export const HawaCodeBlock: FC<CodeBlockTypes> = ({ tabs, language, code }) => {
+export const HawaCodeBlock: FC<CodeBlockTypes> = ({
+  tabs,
+  language,
+  code,
+  width = "full",
+}) => {
   const [selectedTab, setSelectedTab] = useState(0)
-
+  let widthStyles = {
+    full: "w-full",
+    md: "w-full max-w-md",
+    sm: "w-full max-w-sm",
+    xs: "w-full max-w-xs",
+  }
   return (
-    <div className="w-full max-w-md flex-col items-center space-x-4 rounded bg-gray-800 text-left text-sm text-white sm:text-base">
+    <div
+      className={clsx(
+        widthStyles[width],
+        "w-full flex-col items-center space-x-4 rounded bg-gray-800 text-left text-sm text-white sm:text-base"
+      )}
+    >
+      {" "}
       {tabs && (
         <div className="flex flex-row gap-2 rounded-t bg-gray-700  p-2 pb-0">
           {tabs.map((tab, i) => (

package/src/elements/HawaMenu.tsx

@@ -195,13 +195,13 @@ export const HawaMenu: FC<TMenuTypes> = ({
                       }
                     }}
                     className={clsx(
+                      "transition-all",
                       item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 px-4 py-2 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
-                        : " flex  flex-row items-center rounded  rtl:flex-row-reverse ",
-                      sizeStyles[size],
-                      item.disabled
+                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
+                        : item.disabled
                         ? "text-gray-300"
-                        : " cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+                        : " flex cursor-pointer flex-row items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
+                      sizeStyles[size]
                     )}
                   >
                     {item.icon && (

package/src/elements/HawaSpinner.tsx

@@ -15,12 +15,28 @@ export const HawaSpinner: FC<SpinnerTypes> = ({ size = "sm", ...props }) => {
   }
   return (
     <div className="flex flex-row gap-x-3">
-      <div
+      {/* <div
         className={clsx(
           sizeStyles[size],
           "animate-spin rounded-full border-4 border-gray-400 border-t-white text-white"
         )}
-      ></div>
+      ></div> */}
+
+      <div aria-label="Loading..." role="status">
+        <svg
+          className={clsx(sizeStyles[size], "animate-spin")}
+          viewBox="3 3 18 18"
+        >
+          <path
+            className="fill-gray-200"
+            d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
+          ></path>
+          <path
+            className="fill-buttonPrimary-500"
+            d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
+          ></path>
+        </svg>
+      </div>
     </div>
   )
 }

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import { HiMenu } from "react-icons/hi"
 import { FaChevronRight } from "react-icons/fa"
-import { FiSettings } from "react-icons/fi"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
 import { HawaButton, HawaMenu } from "../elements"
@@ -83,7 +82,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
   let drawerSizeCondition =
     size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0
   return (
-    <div className="fixed left-0 bg-red-500">
+    <div className="fixed left-0">
       {props.topBar && (
         <div
           className={clsx(
@@ -126,7 +125,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
             // Mobile Drawer Menu Button
             <div
               dir={direction}
-              className="flex items-center justify-center gap-0.5 "
+              className="flex items-center justify-center gap-0.5"
             >
               <div
                 onClick={() => setOpenSideMenu(true)}
@@ -189,9 +188,9 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         className={clsx(
           "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip  transition-all",
           // drawerDefaultStyle,
-          "bg-green-400"
+          // "bg-green-400",
           // drawerSizeStyle[drawerSize],
-          // isRTL ? "right-0" : "left-0"
+          isRTL ? "right-0" : "left-0"
         )}
         style={{
           width:
@@ -215,30 +214,21 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         <div
           dir={direction}
           className={clsx(
-            "fixed z-50  flex h-14 w-full flex-row items-center bg-blue-400 transition-all",
-            "mb-2"
-            // openSideMenu ? "w-[56px]" : "w-[160px]"
-            // size > 600 || openSideMenu
-            //   ? "bg-layoutPrimary-500"
-            //   : "w-0 bg-transparent"
+            "fixed z-50  mb-2 flex h-14 w-full flex-row items-center justify-center  bg-layoutPrimary-500 transition-all"
+            // "bg-blue-400",
           )}
           style={{
             width:
               size > 600
-                ? `${
-                    // drawerSizeStyle[openSideMenu ? "opened" : "closed"][
-                    //   drawerSize
-                    // ] - 16
-                    openSideMenu ? 160 : 56
-                  }px`
-                : "full",
+                ? `${openSideMenu ? 160 : 56}px`
+                : `${openSideMenu ? 160 : 0}px`,
           }}
         >
           {/* Full Logo */}
           <img
             className={clsx(
-              "fixed top-2.5 h-9  opacity-0 transition-all",
-              isRTL ? "right-2.5" : "left-2.5",
+              "h-9  opacity-0 transition-all",
+              // isRTL ? "right-2.5" : "left-2.5",
               !openSideMenu ? "invisible opacity-0" : "visible opacity-100"
               // size > 600 ? "" : "right-4"
             )}
@@ -265,30 +255,26 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         {/* Drawer Content Container */}
         <div
           className={clsx(
-            // "no-scrollbar",
-            "fixed bottom-14 top-14 bg-yellow-400 py-2 transition-all",
-            // props.topBar ? "" : "mt-2",
+            // "no-scrollbar", TODO: make this optional to hide scrollbar or not
+            "fixed bottom-14 top-14 bg-layoutPrimary-500 py-2 transition-all",
+            // bg-yellow-400
             openSideMenu ? "overflow-auto" : "overflow-hidden"
           )}
           style={{
             height: "calc(100% - 112px)",
             width:
               size > 600
-                ? `${
-                    // drawerSizeStyle[openSideMenu ? "opened" : "closed"][
-                    //   drawerSize
-                    // ] - 16
-                    openSideMenu ? 160 : 56
-                  }px`
-                : "full",
+                ? `${openSideMenu ? 160 : 56}px`
+                : `${openSideMenu ? 160 : 0}px`,
           }}
         >
           {/* Drawer Items */}
-          {/* <div className="mb-10 mt-14"> */}
           {props.drawerItems?.map((dSection, dIndex) => (
             <div
               key={dIndex}
-              className={clsx("flex flex-col items-stretch justify-center")}
+              className={clsx(
+                "flex select-none flex-col items-stretch justify-center transition-all"
+              )}
             >
               {dSection?.map((dItem, i) => {
                 return (
@@ -337,7 +323,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                               : "rotate-90"
                           )}
                         >
-                          <FaChevronRight fontSize={11} />
+                          {/* <FaChevronRight fontSize={11} /> */}
                         </div>
                       )}
                     </div>
@@ -395,14 +381,12 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         </div>
         {/* Drawer Footer */}
         <div
-          className="fixed bottom-0 flex h-14 w-full items-center justify-center bg-stone-600 transition-all"
+          className="fixed bottom-0 flex h-14 w-full items-center justify-center bg-layoutPrimary-500 transition-all"
           style={{
-            width: `${
-              openSideMenu ? 160 : 56
-
-              // drawerSizeStyle[openSideMenu ? "opened" : "closed"][drawerSize] -
-              // 16
-            }px`,
+            width:
+              size > 600
+                ? `${openSideMenu ? 160 : 56}px`
+                : `${openSideMenu ? 160 : 0}px`,
           }}
         >
           {onSettingsClick && (
@@ -410,7 +394,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
               className=" cursor-pointer rounded p-2 transition-all hover:bg-layoutPrimary-700"
               onClick={() => onSettingsClick()}
             >
-              <FiSettings />
+              <SettingsIcon />
             </div>
           )}
           {/* Expand Button */}
@@ -449,7 +433,17 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                     "w-fit cursor-pointer rounded bg-gray-300 p-2 transition-all hover:bg-gray-400"
                   }
                 >
-                  <ArrowIcon pointing={keepOpen ? "left" : "right"} />
+                  <ArrowIcon
+                    pointing={
+                      keepOpen
+                        ? isRTL
+                          ? "right"
+                          : "left"
+                        : isRTL
+                        ? "left"
+                        : "right"
+                    }
+                  />
                 </div>
               </div>
             </div>
@@ -460,7 +454,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
     
       {/* Children Container */}
       <div
-        className="fixed overflow-y-auto bg-yellow-500 p-2"
+        className="fixed overflow-y-auto p-2"
         style={
           isRTL
             ? {
@@ -514,3 +508,20 @@ const ArrowIcon = ({ pointing }) => (
     ></path>
   </svg>
 )
+
+const SettingsIcon = () => (
+  <svg
+    stroke="currentColor"
+    fill="none"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="12" cy="12" r="3"></circle>
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+  </svg>
+)

package/src/styles.css

@@ -1054,18 +1054,12 @@ video {
 .w-\[12px\] {
   width: 12px;
 }
-.w-\[160px\] {
-  width: 160px;
-}
 .w-\[32px\] {
   width: 32px;
 }
 .w-\[400px\] {
   width: 400px;
 }
-.w-\[56px\] {
-  width: 56px;
-}
 .w-\[calc\(1\%\)\] {
   width: calc(1%);
 }
@@ -1690,10 +1684,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
-.bg-stone-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
-}
 .bg-transparent {
   background-color: transparent;
 }
@@ -1713,10 +1703,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1726,6 +1712,12 @@ video {
 .bg-none {
   background-image: none;
 }
+.fill-buttonPrimary-500 {
+  fill: var(--button-primary-500);
+}
+.fill-gray-200 {
+  fill: #e5e7eb;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;