@sikka/hawa 0.0.170 → 0.0.172

package/src/elements/HawaTabs.tsx

@@ -20,24 +20,24 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     vertical:
       "inline-block py-2 px-4 text-white bg-buttonPrimary-default active",
     horizontal:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded-lg rounded-br-none rounded-bl-none active",
+      "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded rounded-br-none rounded-bl-none active",
   }
   let inactiveTabStyle = {
     vertical:
       "inline-block py-2 px-4 rounded-none rounded-br-none rounded-tl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
     horizontal:
-      "inline-block py-2 px-4 rounded-lg rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+      "inline-block py-2 px-4 rounded rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
   }
   console.log("selected i : ", selectedOption)
   console.log("selected object : ", props.options[selectedOption])
   let orientationStyle = {
     vertical: {
       container: "flex flex-row",
-      tabs: "flex flex-col w-fit flex-wrap rounded-lg   border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
     horizontal: {
       container: "",
-      tabs: "flex w-fit flex-wrap rounded-lg rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
   }
   let containerStyle = {
@@ -46,9 +46,9 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   }
   let tabsStyle = {
     vertical:
-      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded-lg border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
-      "flex w-fit flex-wrap rounded-lg rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div

package/src/elements/HawaTextField.tsx

@@ -53,7 +53,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
         <textarea
           id="message"
           rows={4}
-          className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          className="block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
           onChange={props.onChange}
           type={props.type}
           aria-label={props.label}
@@ -69,7 +69,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           </div>
           <input
             {...props}
-            className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pl-10 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+            className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 pl-10 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
           />
         </div>
       ) : (
@@ -81,7 +81,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
             placeholder={props.placeholder}
             defaultValue={props.defaultValue}
             value={props.value}
-            className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+            className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
           />
         </div>
       )}

package/src/elements/HawaTimeline.tsx

@@ -17,12 +17,12 @@ export const HawaTimeline: React.FunctionComponent<THawaTimeline> = ({
   }
   let lineStyles = {
     vertical: {
-      default: "w-1 h-32 rounded-lg bg-buttonPrimary-default ml-6 my-2",
-      selected: "w-1  h-32 rounded-lg bg-buttonPrimary-default ml-6 my-2",
+      default: "w-1 h-32 rounded bg-buttonPrimary-default ml-6 my-2",
+      selected: "w-1  h-32 rounded bg-buttonPrimary-default ml-6 my-2",
     },
     horizontal: {
-      default: "h-0.5 w-full rounded-lg bg-buttonPrimary-default",
-      selected: "h-0.5 w-full rounded-lg bg-buttonPrimary-default",
+      default: "h-0.5 w-full rounded bg-buttonPrimary-default",
+      selected: "h-0.5 w-full rounded bg-buttonPrimary-default",
     },
   }
   return (
@@ -71,7 +71,7 @@ const TimelineStep = (props) => (
   >
     <div
       className={clsx(
-        "m-2 mr-4 flex h-10 w-10 items-center justify-center rounded-xl ring-2 ring-primary-200 ring-offset-2",
+        "m-2 mr-4 flex h-10 w-10 items-center justify-center rounded ring-2 ring-primary-200 ring-offset-2",
         props.current ? "bg-buttonPrimary-default text-white" : "bg-primary-200"
       )}
     >

package/src/elements/HawaTooltip.tsx

@@ -29,12 +29,8 @@ export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
     setTooltipHeight(tooltipRef.current?.getBoundingClientRect().height)
     setTooltipWidth(tooltipRef.current?.getBoundingClientRect().width)
     if (attachedElement) {
-      attachedElement?.addEventListener("mouseenter", () =>
-        setHovered(!hovered)
-      )
-      attachedElement?.addEventListener("mouseleave", () =>
-        setHovered(!hovered)
-      )
+      attachedElement?.addEventListener("mouseenter", () => setHovered(true))
+      attachedElement?.addEventListener("mouseleave", () => setHovered(false))
       // console.log("dcnode", attachedElement?.getBoundingClientRect())
       let pos = attachedElement?.getBoundingClientRect()
       setRefHeight(pos.height)
@@ -52,8 +48,8 @@ export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
 
   let tooltipStyles = {
     default:
-      "absolute opacity-0 z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900  text-center text-sm font-medium text-white opacity-100 shadow-sm transition-all duration-300 dark:bg-gray-700",
-    hovered: `absolute  opacity-100  z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900 text-center text-sm font-medium text-white opacity-100 shadow-sm transition-all duration-300 dark:bg-gray-700`,
+      "absolute opacity-0 z-10 inline-block w-fit max-w-xs rounded bg-gray-900  text-center text-sm font-medium text-white opacity-100 shadow-sm transition-all duration-300 dark:bg-gray-700",
+    hovered: `absolute opacity-100  z-10 inline-block w-fit max-w-xs rounded bg-gray-900 text-center text-sm font-medium text-white opacity-100 shadow-sm transition-all duration-300 dark:bg-gray-700`,
   }
 
   let sizeStyles = {

package/src/layout/HawaAppLayout.tsx

@@ -32,6 +32,8 @@ type MenuItems = {
   ) => void
   isButton?: boolean
 }
+
+// TODO: fix the drawer top when no topbar
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   direction = "rtl",
   ...props
@@ -69,7 +71,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   //less than 600
   //as nothing and expands as button is clicked
   let ltrDrawerStyle = [
-    " fixed top-3 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
+    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
@@ -122,7 +124,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
             <div className="flex items-center justify-center">
               <div
                 onClick={() => setOpenSideMenu(true)}
-                className=" mr-2 cursor-pointer rounded-lg p-2  transition-all hover:bg-gray-100"
+                className=" mr-2 cursor-pointer rounded p-2  transition-all hover:bg-gray-100"
               >
                 <HiMenu size={25} />
               </div>
@@ -170,7 +172,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
       >
         <div
           className={clsx(
-            // "overflow-hidden",
+            props.topBar ? "" : "mt-2",
             openSideMenu ? "overflow-auto" : "overflow-hidden"
           )}
         >
@@ -182,7 +184,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           >
             <img
               className={clsx(
-                "fixed top-2 h-9 transition-all",
+                "fixed top-2.5 h-9 transition-all",
                 direction === "rtl" ? "right-2.5" : "left-2.5",
                 !openSideMenu ? "invisible opacity-0" : "visible opacity-100"
               )}
@@ -220,17 +222,15 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                             : null
                         }
                         onClick={() => {
-                          // if()
-                          const { offsetTop } = drawerItemRef.current
-                          ref.current.scrollTop = offsetTop - 100
-
+                          ref.current.scrollTop =
+                            drawerItemRef.current?.offsetTop - 100
                           dItem.action()
                         }}
                         className={clsx(
                           props.currentPage === dItem.slug
                             ? "bg-buttonPrimary-default text-white"
                             : "hover:bg-buttonPrimary-lighter",
-                          "m-2 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all ",
+                          "m-2 flex cursor-pointer flex-row items-center overflow-x-clip rounded p-2  pl-3 transition-all ",
                           direction === "rtl" ? "flex-row-reverse pr-3" : ""
                         )}
                       >
@@ -286,7 +286,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
               className={clsx(
                 keepOpen ? "rotate-180" : "",
                 direction === "rtl" ? "rotate-180" : "",
-                "w-fit cursor-pointer rounded-lg bg-gray-300 p-1 transition-all"
+                "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all"
               )}
             >
               <FaChevronRight />
@@ -298,7 +298,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
               className={clsx(
                 openSideMenu ? "visible" : "invisible",
                 direction === "rtl" ? "rotate-180" : "",
-                "w-fit cursor-pointer rounded-lg bg-gray-300 p-1 transition-all"
+                "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all"
               )}
             >
               <FaChevronLeft />

package/src/layout/HawaBottomAppBar.tsx

@@ -21,12 +21,12 @@ export const HawaBottomAppBar: React.FunctionComponent<BottomAppBarTypes> = (
         //   alignContent: "center",
         //   padding: 10,
         // }}
-        className="flex w-full flex-row items-center justify-evenly rounded-lg bg-gray-200"
+        className="flex w-full flex-row items-center justify-evenly rounded bg-gray-200"
         //   variant="outlined"
       >
         {props.appBarContent.map((singleContent: any) => (
           <div
-            className="m-1 flex h-full w-full flex-col items-center justify-center rounded-lg p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-darker hover:text-white"
+            className="m-1 flex h-full w-full flex-col items-center justify-center rounded p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-darker hover:text-white"
             onClick={singleContent.action}
           >
             <div

package/src/layout/HawaContainer.tsx

@@ -13,7 +13,7 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
   centered = false,
   ...props
 }) => {
-  let defaultStyle = "flex w-full flex-col rounded-xl p-4"
+  let defaultStyle = "flex w-full flex-col rounded p-4"
   let maxWidthStyles: any = {
     full: "md:max-w-xl",
     small: "md:max-w-sm w-1/3 min-w-min",

package/src/layout/HawaSiteLayout.tsx

@@ -9,7 +9,7 @@ const MenuButton = ({ handleClick }) => {
       aria-controls="drawer-navigation"
       type="button"
       onClick={handleClick()}
-      className="inline-flex items-center rounded-lg p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+      className="inline-flex items-center rounded p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
     >
       {/* <span className="sr-only">Open main menu</span> */}
       <svg
@@ -111,7 +111,7 @@ const CloseButton = () => {
       type="button"
       data-drawer-dismiss="drawer-navigation"
       aria-controls="drawer-navigation"
-      className="absolute top-2.5 right-2.5 inline-flex items-center rounded-lg bg-transparent 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 top-2.5 right-2.5 inline-flex items-center rounded bg-transparent 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"
     >
       <svg
         aria-hidden="true"
@@ -173,7 +173,7 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
                 setOpenSideMenu(true)
                 console.log("opening side menu")
               }}
-              className="inline-flex items-center rounded-lg p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+              className="inline-flex items-center rounded p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
             >
               <svg
                 aria-hidden="true"
@@ -217,7 +217,7 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
           onClick={() => setOpenSideMenu(false)}
           data-drawer-dismiss="drawer-navigation"
           aria-controls="drawer-navigation"
-          className="absolute top-2.5 right-2.5 inline-flex items-center rounded-lg bg-transparent 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 top-2.5 right-2.5 inline-flex items-center rounded bg-transparent 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"
         >
           <svg
             aria-hidden="true"
@@ -275,7 +275,7 @@ const AppLayoutNav = (props) => (
           aria-controls="drawer-navigation"
           type="button"
           onClick={() => props.handleClick()}
-          className="inline-flex items-center rounded-lg p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          className="inline-flex items-center rounded p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         >
           <svg
             aria-hidden="true"

package/src/styles.css

@@ -383,6 +383,8 @@ video {
 
     --button-secondary: #ffc011;
     --button-secondary-darker: #b48d24;
+
+    --border-radius: 8px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
@@ -620,9 +622,6 @@ video {
 .left-8 {
   left: 2rem;
 }
-.top-3 {
-  top: 0.75rem;
-}
 .left-14 {
   left: 3.5rem;
 }
@@ -641,6 +640,9 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
+.top-2\.5 {
+  top: 0.625rem;
+}
 .right-2\.5 {
   right: 0.625rem;
 }
@@ -650,9 +652,6 @@ video {
 .left-2 {
   left: 0.5rem;
 }
-.top-2\.5 {
-  top: 0.625rem;
-}
 .bottom-2 {
   bottom: 0.5rem;
 }
@@ -1215,15 +1214,12 @@ video {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.rounded {
+  border-radius: var(--border-radius);
+}
 .rounded-lg {
   border-radius: 0.5rem;
 }
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-.rounded {
-  border-radius: 0.25rem;
-}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1254,8 +1250,8 @@ video {
   border-bottom-left-radius: 0.5rem;
 }
 .rounded-t {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
 }
 .rounded-l-none {
   border-top-left-radius: 0px;

package/src/tailwind.css

@@ -12,6 +12,8 @@
 
     --button-secondary: #ffc011;
     --button-secondary-darker: #b48d24;
+
+    --border-radius: 8px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {

package/tailwind.config.js

@@ -74,6 +74,9 @@ module.exports = {
         expandDown: "expandDown 500ms ease-in-out",
         expandUp: "expandUp 100ms ease-in-out"
       },
+      borderRadius: {
+        DEFAULT: "var(--border-radius)"
+      },
       colors: {
         // #f6f5fe
         // #edebfd lighter