@sikka/hawa 0.1.57 → 0.1.59

package/src/elements/HawaTable.tsx

@@ -66,13 +66,13 @@ const ChevronIcon = () => (
     aria-label="Chevron Right Icon"
     stroke="currentColor"
     fill="currentColor"
-    stroke-width="0"
+    strokeWidth="0"
     viewBox="0 0 16 16"
     height="1em"
     width="1em"
   >
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
     ></path>
   </svg>
@@ -137,7 +137,7 @@ export const HawaTable: FC<TableTypes> = ({
                   aria-label="Search Icon"
                   stroke="currentColor"
                   fill="gray"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 512 512"
                   height="1em"
                   width="1em"
@@ -155,7 +155,7 @@ export const HawaTable: FC<TableTypes> = ({
                   aria-label="Filter Icon"
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 16 16"
                   height="1em"
                   width="1em"
@@ -167,13 +167,13 @@ export const HawaTable: FC<TableTypes> = ({
                   aria-label="Chevron Right Icon"
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 16 16"
                   height="1em"
                   width="1em"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="evenodd"
                     d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
                   ></path>
                 </svg>
@@ -329,6 +329,7 @@ export const HawaTable: FC<TableTypes> = ({
                       >
                         <div className="flex items-center justify-center">
                           <DropdownMenu
+                            width="sm"
                             direction={direction}
                             side="right"
                             items={props.actions}
@@ -338,7 +339,7 @@ export const HawaTable: FC<TableTypes> = ({
                                   aria-label="Vertical Three Dots Menu Icon"
                                   stroke="currentColor"
                                   fill="currentColor"
-                                  stroke-width="0"
+                                  strokeWidth="0"
                                   viewBox="0 0 16 16"
                                   height="1em"
                                   width="1em"
@@ -574,13 +575,13 @@ export const HawaTable: FC<TableTypes> = ({
 //             aria-label="Chevron Right Icon"
 //             stroke="currentColor"
 //             fill="currentColor"
-//             stroke-width="0"
+//             strokeWidth="0"
 //             viewBox="0 0 16 16"
 //             height="1em"
 //             width="1em"
 //           >
 //             <path
-//               fill-rule="evenodd"
+//               fillRule="evenodd"
 //               d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
 //             ></path>
 //           </svg>
@@ -685,13 +686,13 @@ export const HawaTable: FC<TableTypes> = ({
 //             aria-label="Chevron Right Icon"
 //             stroke="currentColor"
 //             fill="currentColor"
-//             stroke-width="0"
+//             strokeWidth="0"
 //             viewBox="0 0 16 16"
 //             height="1em"
 //             width="1em"
 //           >
 //             <path
-//               fill-rule="evenodd"
+//               fillRule="evenodd"
 //               d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
 //             ></path>
 //           </svg>

package/src/elements/InvoiceAccordion.tsx

@@ -69,16 +69,16 @@ export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
             <svg
               stroke="currentColor"
               fill="currentColor"
-              stroke-width="0"
+              strokeWidth="0"
               viewBox="0 0 20 20"
               aria-hidden="true"
               height="2em"
               width="2em"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                clip-rule="evenodd"
+                clipRule="evenodd"
               ></path>
             </svg>
           </div>
@@ -105,7 +105,7 @@ export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
               <svg
                 stroke="currentColor"
                 fill="currentColor"
-                stroke-width="0"
+                strokeWidth="0"
                 viewBox="0 0 16 16"
                 height="1em"
                 width="1em"

package/src/elements/Select.tsx

@@ -25,13 +25,13 @@ const SelectTrigger = React.forwardRef<
         aria-label="Chevron Right Icon"
         stroke="currentColor"
         fill="currentColor"
-        stroke-width="0"
+        strokeWidth="0"
         viewBox="0 0 16 16"
         height="1em"
         width="1em"
       >
         <path
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
         ></path>
       </svg>
@@ -101,7 +101,7 @@ const SelectItem = React.forwardRef<
           aria-label="Check Mark"
           stroke="currentColor"
           fill="currentColor"
-          stroke-width="0"
+          strokeWidth="0"
           viewBox="0 0 512 512"
           height="0.60em"
           width="0.60em"

package/src/elements/Switch.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "../util"
+
+let rootSize = {
+  default: "h-[25px] w-[42px]",
+  sm: "h-[20px] w-[37px]",
+}
+let thumbSize = {
+  default: "h-[21px] w-[21px]",
+  sm: "h-[16px] w-[16px]",
+}
+
+interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+  size?: "default" | "sm" | "lg" // Define the possible sizes here
+  label?: string
+}
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  SwitchProps
+>(({ className, size = "default", label, ...props }, ref) => {
+  const [parentDirection, setParentDirection] = React.useState(null)
+  const parentRef = React.useRef(null)
+
+  React.useEffect(() => {
+    if (parentRef.current && parentRef.current.parentNode) {
+      const dir = window.getComputedStyle(
+        parentRef.current.parentNode
+      ).direction
+      setParentDirection(dir)
+    }
+  })
+
+  return (
+    <div className="flex flex-row items-center" ref={parentRef}>
+      <SwitchPrimitives.Root
+        className={cn(
+          "relative  cursor-pointer rounded-full bg-primary/20 outline-none data-[state=checked]:bg-primary",
+          className,
+          rootSize[size]
+        )}
+        {...props}
+        ref={ref}
+      >
+        <SwitchPrimitives.Thumb
+          className={cn(
+            thumbSize[size],
+            "block   rounded-full bg-white transition-transform  duration-100 will-change-transform data-[state=checked]:bg-primary-foreground  dark:bg-background",
+
+            parentDirection === "rtl"
+              ? "-translate-x-0.5 data-[state=checked]:-translate-x-[19px]"
+              : "translate-x-0.5 data-[state=checked]:translate-x-[19px]"
+          )}
+        />
+      </SwitchPrimitives.Root>
+      {label && (
+        <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {label}
+        </span>
+      )}
+    </div>
+  )
+})
+Switch.displayName = SwitchPrimitives.Root.displayName

package/src/elements/UsageCard.tsx

@@ -18,7 +18,7 @@ export const UsageCard: FC<UsageCardTypes> = (props) => {
               stroke="currentColor"
               aria-label="Exclamation Circle"
               fill="currentColor"
-              stroke-width="0"
+              strokeWidth="0"
               viewBox="0 0 16 16"
               height="1em"
               width="1em"

package/src/elements/UserFeedback.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
+import { Button } from "./Button"
 
 type ComponentTypes = {
   title?: string
@@ -30,7 +31,9 @@ export const UserFeedback: FC<ComponentTypes> = ({
   useEffect(() => {
     //To change opacity and hide the component
     const timeoutHide = setTimeout(() => {
-      setClosingTimer(closingTimer - 1)
+      if (closingTimer >= 0) {
+        setClosingTimer(closingTimer - 1)
+      }
     }, 1000)
 
     return () => {
@@ -110,13 +113,13 @@ export const UserFeedback: FC<ComponentTypes> = ({
           </div>
         )}
         {answered && (
-          <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded bg-black bg-opacity-80 p-4 text-center transition-all">
+          <div className="absolute left-0 top-0 gap-2 flex h-full w-full flex-col items-center justify-center rounded bg-black bg-opacity-80 p-4 text-center transition-all">
             <span className="font-bold text-white">
               Thank you for your answer. This box will disappear in
               {" " + closingTimer} seconds
             </span>
             <div className="flex flex-row gap-2">
-              <HawaButton onClick={() => slowClose()}>Close</HawaButton>
+              <Button onClick={() => slowClose()}>Close</Button>
             </div>
           </div>
         )}

package/src/elements/index.ts

@@ -1,5 +1,3 @@
-export * from "./HawaSnackbar"
-export * from "./HawaSwitch"
 export * from "./HawaCheckbox"
 export * from "./HawaPanelTabs"
 export * from "./HawaChip"
@@ -51,7 +49,6 @@ export * from "./HawaLandingCard"
 //Buttons
 export * from "./HawaButton"
 export * from "./HawaStoreButtons"
-export * from "./HawaLogoButton"
 
 // v0.1
 export * from "./Button"
@@ -69,3 +66,4 @@ export * from "./Textarea"
 export * from "./Separator"
 export * from "./Toast"
 export * from "./Toaster"
+export * from "./Switch"

package/src/layout/AppLayout.tsx

@@ -6,6 +6,7 @@ import { Button, DropdownMenu, Tooltip } from "../elements"
 import { SidebarGroup } from "./Sidebar"
 
 type AppLayoutTypes = {
+  design?: "default" | "bubbles" | "floating"
   /** The pages of the side drawer */
   drawerItems: Item[]
   // The direction of the layout
@@ -62,6 +63,7 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
   DrawerFooterActions,
   currentPage,
   clickedItem,
+  design = "default",
   ...props
 }) => {
   let closeDrawerWidth = 56
@@ -167,16 +169,16 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
                 <svg
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth={0}
                   viewBox="0 0 20 20"
                   aria-hidden="true"
                   height="1.6em"
                   width="1.6em"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
                     d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                    clip-rule="evenodd"
                   ></path>
                 </svg>
               </div>
@@ -241,8 +243,14 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
        */}
       <div
         className={clsx(
-          "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip  transition-all",
-          isRTL ? "right-0" : "left-0"
+          "fixed  z-40 flex  flex-col justify-between overflow-x-clip   transition-all",
+          design === "floating"
+            ? isRTL
+              ? "right-5 top-5"
+              : "bottom-5 left-5 top-5"
+            : isRTL
+            ? "right-0 top-0 h-full"
+            : "left-0 top-0 h-full"
         )}
         style={{
           width:
@@ -258,8 +266,13 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
           setOpenSideMenu(true)
         }}
         onMouseLeave={() => {
-          keepOpen ? setOpenSideMenu(true) : setOpenSideMenu(false)
-          setOpenedSidebarItem("")
+          if (keepOpen) {
+            setOpenSideMenu(true)
+          } else {
+            setOpenedSidebarItem("")
+            setOpenSideMenu(false)
+          }
+          // keepOpen ? setOpenSideMenu(true) : setOpenSideMenu(false)
         }}
         ref={ref}
       >
@@ -271,7 +284,8 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
         <div
           dir={direction}
           className={clsx(
-            "fixed z-50  mb-2 flex h-14 w-full flex-row items-center justify-center  bg-primary-foreground  transition-all"
+            "fixed z-50  mb-2 flex h-14 w-full flex-row items-center justify-center transition-all",
+            "bg-primary-foreground"
           )}
           style={{
             width:
@@ -288,15 +302,8 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
           <img
             className={clsx(
               "h-9  opacity-0 transition-all",
-              // isRTL ? "right-2.5" : "left-2.5",
               !openSideMenu ? "invisible opacity-0" : "visible opacity-100"
-              // size > 600 ? "" : "right-4"
             )}
-            // className={clsx(
-            //   "fixed top-2.5 h-9 transition-all",
-            //   isRTL ? "right-2.5" : "left-2.5",
-            //   !openSideMenu ? "invisible opacity-0" : "visible opacity-100"
-            // )}
             src={props.logoLink}
           />
           {/*
@@ -307,8 +314,17 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
           {size > 600 ? (
             <img
               className={clsx(
-                "fixed top-2.5 h-9  transition-all",
-                isRTL ? "right-2.5" : "left-2.5",
+                "fixed  h-9  transition-all",
+                // isRTL ? "right-2.5" : "left-2.5",
+
+                design === "floating"
+                  ? isRTL
+                    ? "right-7.5 top-7"
+                    : "left-7.5 top-7"
+                  : isRTL
+                  ? "right-2.5 top-2.5"
+                  : "left-2.5 top-2.5",
+
                 openSideMenu ? "invisible opacity-0" : "visible opacity-100"
               )}
               src={props.logoSymbol}
@@ -322,11 +338,15 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
          */}
         <div
           className={clsx(
-            "fixed bottom-14 top-14 bg-primary-foreground p-2 py-2 transition-all",
+            "fixed bottom-14 bg-primary-foreground p-2 py-2 transition-all",
+            design === "floating" ? "top-[76px]" : "top-14",
             openSideMenu ? "overflow-auto" : "overflow-hidden"
           )}
           style={{
-            height: "calc(100% - 112px)",
+            height:
+              design === "floating"
+                ? "calc(100% - 152px)"
+                : "calc(100% - 112px)",
             width:
               size > 600
                 ? `${openSideMenu ? openDrawerWidth : 56}px`
@@ -363,8 +383,9 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
          */}
         <div
           className={clsx(
-            "fixed bottom-0  flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-primary-foreground  transition-all",
-            direction === "rtl" ? "flex-row-reverse" : "flex-row"
+            "fixed  flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-primary-foreground  transition-all",
+            direction === "rtl" ? "flex-row-reverse" : "flex-row",
+            design === "floating" ? "bottom-5" : "bottom-0"
           )}
           style={{
             width:
@@ -426,7 +447,21 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
       <div
         className="fixed overflow-y-auto transition-all"
         style={
-          isRTL
+          design === "floating"
+            ? isRTL
+              ? {
+                  height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
+                  width: `calc(100% - ${drawerSizeCondition + 20}px)`,
+                  left: "0px",
+                  top: props.topBar ? "56px" : "0px",
+                }
+              : {
+                  height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
+                  width: `calc(100% - ${drawerSizeCondition + 20}px)`,
+                  left: `${drawerSizeCondition + 20}px`,
+                  top: props.topBar ? "56px" : "0px",
+                }
+            : isRTL
             ? {
                 height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
                 width: `calc(100% - ${drawerSizeCondition}px)`,

package/src/layout/HawaAppLayout.tsx

@@ -137,16 +137,16 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                 <svg
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 20 20"
                   aria-hidden="true"
                   height="1.6em"
                   width="1.6em"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="evenodd"
                     d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                    clip-rule="evenodd"
+                    clipRule="evenodd"
                   ></path>
                 </svg>{" "}
               </div>
@@ -430,10 +430,10 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                     aria-label="Settings Icon"
                     stroke="currentColor"
                     fill="none"
-                    stroke-width="2"
+                    strokeWidth="2"
                     viewBox="0 0 24 24"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
                     height="1em"
                     width="1em"
                   >

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -151,16 +151,16 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 <svg
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 20 20"
                   aria-hidden="true"
                   height="1.6em"
                   width="1.6em"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="evenodd"
                     d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                    clip-rule="evenodd"
+                    clipRule="evenodd"
                   ></path>
                 </svg>
               </div>
@@ -576,10 +576,10 @@ const SettingsIcon = () => (
   <svg
     stroke="currentColor"
     fill="none"
-    stroke-width="2"
+    strokeWidth="2"
     viewBox="0 0 24 24"
-    stroke-linecap="round"
-    stroke-linejoin="round"
+    strokeLinecap="round"
+    strokeLinejoin="round"
     height="1em"
     width="1em"
   >

package/src/layout/HawaSiteLayout.tsx

@@ -120,16 +120,16 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
               <svg
                 stroke="currentColor"
                 fill="currentColor"
-                stroke-width="0"
+                strokeWidth="0"
                 viewBox="0 0 20 20"
                 aria-hidden="true"
                 height="1.6em"
                 width="1.6em"
               >
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 ></path>
               </svg>{" "}
             </div>

package/src/layout/Sidebar.tsx

@@ -36,14 +36,12 @@ const AccordionTrigger = React.forwardRef<
           aria-label="Chevron Right Icon"
           stroke="currentColor"
           fill="currentColor"
-          stroke-width="1"
           viewBox="0 0 16 16"
           height="1em"
           width="1em"
           className="h-4 w-4 shrink-0 rotate-90 transition-transform duration-200"
         >
           <path
-            fill-rule="evenodd"
             d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
           ></path>
         </svg>