@sikka/hawa 0.1.59 → 0.1.61

package/dist/styles.css

@@ -794,6 +794,9 @@ video {
 .left-7 {
   left: 1.75rem;
 }
+.left-\[50\%\] {
+  left: 50%;
+}
 .right-0 {
   right: 0px;
 }
@@ -842,6 +845,9 @@ video {
 .top-\[22px\] {
   top: 22px;
 }
+.top-\[50\%\] {
+  top: 50%;
+}
 .top-\[76px\] {
   top: 76px;
 }
@@ -1474,10 +1480,18 @@ video {
   --tw-translate-x: 0.125rem;
   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));
 }
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  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));
+}
 .translate-y-0 {
   --tw-translate-y: 0px;
   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));
 }
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  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));
+}
 .-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));
@@ -2002,6 +2016,9 @@ video {
 .bg-background {
   background-color: hsl(var(--background));
 }
+.bg-background\/80 {
+  background-color: hsl(var(--background) / 0.8);
+}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -2732,6 +2749,9 @@ video {
 .opacity-60 {
   opacity: 0.6;
 }
+.opacity-70 {
+  opacity: 0.7;
+}
 .opacity-90 {
   opacity: 0.9;
 }
@@ -2843,6 +2863,11 @@ video {
 .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);
 }
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -3233,6 +3258,9 @@ body {
 .hover\:decoration-2:hover {
   text-decoration-thickness: 2px;
 }
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
 .hover\:opacity-50:hover {
   opacity: 0.5;
 }
@@ -3612,6 +3640,9 @@ body {
 .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));
@@ -3681,12 +3712,24 @@ body {
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
   --tw-enter-translate-y: 0.5rem;
 }
+.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
+  --tw-exit-translate-x: -50%;
+}
 .data-\[state\=closed\]\:slide-out-to-left-full[data-state=closed] {
   --tw-exit-translate-x: -100%;
 }
 .data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
   --tw-exit-translate-x: 100%;
 }
+.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
+  --tw-exit-translate-y: -48%;
+}
+.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
+  --tw-enter-translate-x: -50%;
+}
+.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
+  --tw-enter-translate-y: -48%;
+}
 .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
@@ -4023,6 +4066,10 @@ body {
     flex-direction: column;
   }
 
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
   .sm\:gap-0 {
     gap: 0px;
   }
@@ -4031,6 +4078,16 @@ body {
     gap: 2rem;
   }
 
+  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:rounded-lg {
+    border-radius: var(--radius);
+  }
+
   .sm\:rounded-b-none {
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
@@ -4044,6 +4101,10 @@ body {
     padding: 5rem;
   }
 
+  .sm\:text-left {
+    text-align: left;
+  }
+
   .sm\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "license": "MIT",
   "author": {
     "name": "Sikka Software",
     "email": "contact@sikka.io",
     "url": "http://sikka.io"
   },
-  "license": "MIT",
   "keywords": [
     "ui",
     "kit",
@@ -110,6 +110,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-direction": "^1.0.1",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",

package/src/elements/Button.tsx

@@ -1,4 +1,4 @@
-"use client"
+// "use client"
 
 import * as React from "react"
 // import { Slot } from "@radix-ui/react-slot"

package/src/elements/Dialog.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+// import { X } from "lucide-react"
+import { cn } from "../util"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = ({
+  className,
+  ...props
+}: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal className={cn(className)} {...props} />
+)
+DialogPortal.displayName = DialogPrimitive.Portal.displayName
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        {/* <X className="h-4 w-4" /> */}
+
+        <svg
+          aria-label="Close Icon"
+          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>
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/elements/DropdownMenu.tsx

@@ -232,7 +232,7 @@ type ExtendedDropdownMenuTriggerProps = Partial<
   //   side?: "left" | "right" | "top" | "bottom"
 }
 
-type SubItem = {
+export type SubItem = {
   label: string
   value: string
   icon?: any
@@ -240,7 +240,7 @@ type SubItem = {
   highlighted?: boolean
 }
 
-type Item = {
+export type MenuItemType = {
   icon?: any
   label: string
   value: string
@@ -250,8 +250,20 @@ type Item = {
   highlighted?: boolean
   subitems?: SubItem[] // Note the use of the optional modifier
 }
-
-export const DropdownMenu = ({
+interface DropdownMenuProps {
+  trigger?: any
+  items?: MenuItemType[]
+  direction?: "rtl" | "ltr"
+  onItemSelect?: any
+  className?: ExtendedDropdownMenuContentProps["className"]
+  triggerClassname?: ExtendedDropdownMenuTriggerProps["className"]
+  sideOffset?: ExtendedDropdownMenuContentProps["sideOffset"]
+  side?: ExtendedDropdownMenuContentProps["side"]
+  align?: ExtendedDropdownMenuContentProps["align"]
+  alignOffset?: ExtendedDropdownMenuContentProps["alignOffset"]
+  width?: "default" | "sm" | "lg" | "parent"
+}
+export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   trigger,
   items,
   direction,
@@ -263,18 +275,6 @@ export const DropdownMenu = ({
   align,
   alignOffset,
   width = "default",
-}: {
-  trigger?: any
-  items?: Item[]
-  direction?: "rtl" | "ltr"
-  onItemSelect?: any
-  className?: ExtendedDropdownMenuContentProps["className"]
-  triggerClassname?: ExtendedDropdownMenuTriggerProps["className"]
-  sideOffset?: ExtendedDropdownMenuContentProps["sideOffset"]
-  side?: ExtendedDropdownMenuContentProps["side"]
-  align?: ExtendedDropdownMenuContentProps["align"]
-  alignOffset?: ExtendedDropdownMenuContentProps["alignOffset"]
-  width?: "default" | "sm" | "lg" | "parent"
 }) => {
   const widthStyles = {
     default: "min-w-[8rem]",

package/src/elements/HawaAlert.tsx

@@ -5,7 +5,7 @@ import { Button } from "./Button"
 // TODO: make handleClose to detect when the alert is closed from outside this component
 
 type AlertTypes = {
-  severity: "info" | "warning" | "error" | "success"
+  severity?: "info" | "warning" | "error" | "success"
   /** The title of the alert placed above the text of the alert. Can be used alone */
   title?: any
   /** The text of the alert placed below the title of the alert. Can be used alone */
@@ -35,12 +35,15 @@ type AlertTypes = {
   ]
   persistant?: boolean
   icon?: any
+  className?: any
 }
 export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   variant = "normal",
   direction = "ltr",
+  severity = "info",
   duration,
   icon,
+  className,
   ...props
 }) => {
   const alertRef = useRef(null)
@@ -127,8 +130,9 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
       <div
         className={clsx(
           "relative mb-4 flex flex-col rounded p-4 text-sm transition-all",
-          styleVariant[variant][props.severity],
-          closed ? "opacity-0" : "opacity-100"
+          styleVariant[variant][severity],
+          closed ? "opacity-0" : "opacity-100",
+          className
         )}
         role="alert"
         dir={direction}
@@ -148,7 +152,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
             >
               {props.title}
             </span>
-            <span>{" " + props.text}</span>
+            <span>{props.text}</span>
             {props.actions && (
               <div className="mt-2 flex flex-row gap-2">
                 {props.actions.map((act, index) => (
@@ -169,7 +173,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
             type="button"
             className={clsx(
               "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900",
-              closeButtonStyle[props.severity],
+              closeButtonStyle[severity],
               direction === "rtl" ? "left-2" : "right-2"
             )}
             data-dismiss-target="#alert-default"

package/src/elements/HawaItemCard.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
-import { HawaMenu } from "./HawaMenu"
-import { HawaButton } from "./HawaButton"
+import { Button } from "./Button"
+import { DropdownMenu, MenuItemType } from "./DropdownMenu"
 
 interface ItemCardTypes {
-  headerActions?: THeaderActions[][]
+  headerActions?: MenuItemType[]
+  // headerActions?: THeaderActions[]
   header?: any
   content?: any
   /** a URL for the image of the card */
@@ -29,6 +30,7 @@ interface ItemCardTypes {
 
 type THeaderActions = {
   icon?: JSX.Element
+  value?: string
   label: string
   action?: (e: any) => void
   isButton?: boolean
@@ -97,13 +99,15 @@ export const HawaItemCard: FC<ItemCardTypes> = ({
           />
           {clickableImage && (
             <div className="absolute left-0 top-0 flex h-full w-full items-center  justify-center opacity-0 transition-all group-hover:opacity-100 ">
-              <HawaButton
-                startIcon={clickableImageActionIcon}
-                variant="outlined"
+              <Button
+                // startIcon={clickableImageActionIcon}
+                variant="secondary"
                 onClick={clickableImageAction}
+                className="flex flex-row gap-2"
               >
+                {clickableImageActionIcon}
                 {clickableImageActionText}
-              </HawaButton>
+              </Button>
             </div>
           )}
         </div>
@@ -111,22 +115,25 @@ export const HawaItemCard: FC<ItemCardTypes> = ({
       <div className="relative w-full p-6">
         {headerActions && (
           <div className="max-h- bg-red absolute right-0 top-0 flex justify-end pr-3 pt-3">
-            <HawaMenu position="top-right" menuItems={headerActions}>
-              <div
-                className={clsx(headerActionsButtonStyle)}
-                onClick={handleOpenActionHeader}
-              >
-                <span className="sr-only">Open dropdown</span>
-                <svg
-                  className="h-6 w-6"
-                  aria-hidden="true"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
+            <DropdownMenu
+              items={headerActions}
+              trigger={
+                <div
+                  className={clsx(headerActionsButtonStyle)}
+                  onClick={handleOpenActionHeader}
                 >
-                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
-                </svg>
-              </div>
-            </HawaMenu>
+                  <span className="sr-only">Open dropdown</span>
+                  <svg
+                    className="h-6 w-6"
+                    aria-hidden="true"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
+                  </svg>
+                </div>
+              }
+            />
           </div>
         )}
 

package/src/elements/HawaTable.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
-import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
-import { HawaTextField } from "./HawaTextField"
-import { HawaButton } from "./HawaButton"
 import { cn } from "../util"
 import { Button } from "./Button"
-import { DropdownMenu } from "./DropdownMenu"
+import { HawaTextField } from "./HawaTextField"
+import { DropdownMenu, MenuItemType } from "./DropdownMenu"
 
 // TODO: translate header tools and make it more customizable
 // TODO: pass the onSearch handler to the parent
@@ -24,7 +22,7 @@ type ColTypes = {
 type TableTypes = {
   pagination?: boolean
   columns: ColTypes[]
-  actions?: Item[]
+  actions?: MenuItemType[]
   direction?: "rtl" | "ltr"
   rows?: RowTypes[][]
   handleActionClick?: any
@@ -46,21 +44,6 @@ type TableTypes = {
   headerTools?: boolean
   borders?: "all" | "cols" | "rows" | "outer" | "inner"
 }
-type ActionItems = {
-  icon?: JSX.Element
-  label: string
-  action?: (e: any) => void
-  isButton?: boolean
-  element?: any
-}
-
-type Item = {
-  label: string
-  value: string
-  action?: () => void
-  highlighted?: boolean
-}
-
 const ChevronIcon = () => (
   <svg
     aria-label="Chevron Right Icon"

package/src/elements/index.ts

@@ -67,3 +67,4 @@ export * from "./Separator"
 export * from "./Toast"
 export * from "./Toaster"
 export * from "./Switch"
+export * from "./Dialog"

package/src/layout/AppLayout.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { Button, DropdownMenu, Tooltip } from "../elements"
+import { Button, DropdownMenu, MenuItemType, Tooltip } from "../elements"
 import { SidebarGroup } from "./Sidebar"
 
 type AppLayoutTypes = {
@@ -22,7 +22,7 @@ type AppLayoutTypes = {
   username?: string
   email?: string
   drawerSize?: "sm" | "md" | "large"
-  profileMenuItems?: ProfileItem[]
+  profileMenuItems?: MenuItemType[]
   onSettingsClick?: () => void
   DrawerFooterActions?: any
   clickedItem?: any
@@ -44,17 +44,6 @@ type SubItem = {
   icon?: any
   onClick?: () => void
 }
-type ProfileSubItem = {
-  label: string
-  value: string
-  highlighted?: boolean
-}
-type ProfileItem = {
-  label: string
-  value: string
-  highlighted?: boolean
-  subitems?: ProfileSubItem[] // Note the use of the optional modifier
-}
 
 export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
   direction = "ltr",

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { Button, DropdownMenu, Tooltip } from "../elements"
+import { Button, DropdownMenu, MenuItemType, Tooltip } from "../elements"
 
 type HawaAppLayoutTypes = {
   /** The pages of the side drawer */
@@ -26,7 +26,7 @@ type HawaAppLayoutTypes = {
   username?: string
   email?: string
   drawerSize?: "sm" | "md" | "large"
-  profileMenuItems?: Item[]
+  profileMenuItems?: MenuItemType[]
   onSettingsClick?: () => void
   DrawerFooterActions?: any
   texts?: {
@@ -34,17 +34,6 @@ type HawaAppLayoutTypes = {
     collapseSidebar?: string
   }
 }
-type SubItem = {
-  label: string
-  value: string
-  highlighted?: boolean
-}
-type Item = {
-  label: string
-  value: string
-  highlighted?: boolean
-  subitems?: SubItem[] // Note the use of the optional modifier
-}
 
 export const HawaAppLayoutSimplified: React.FunctionComponent<
   HawaAppLayoutTypes