@sikka/hawa/dist/appLayout/index.mjs.map

Modern UI Kit made with Tailwind

{"version":3,"sources":["../../layout/appLayout/AppLayout.tsx","../../hooks/useClickOutside.ts","../../util/index.ts","../../elements/button/Button.tsx","../../elements/helperText/HelperText.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/loading/Loading.tsx","../../elements/dropdownMenu/DropdownMenu.tsx","../../icons/Emojis.tsx","../../icons/InputIcons.tsx","../../icons/CommonIcons.tsx","../../layout/sidebar/Sidebar.tsx","../../elements/chip/Chip.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport { useClickOutside } from \"@hooks/useClickOutside\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { cn } from \"@util/index\";\n\nimport { Button } from \"@elements/button\";\nimport { DropdownMenu, MenuItemType } from \"@elements/dropdownMenu\";\nimport { Tooltip } from \"@elements/tooltip\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { MenuIcon } from \"../../icons\";\nimport { AppSidebarItemProps, SidebarGroup } from \"../sidebar/Sidebar\";\n\ntype AppLayoutTypes = {\n  /** a custom header to replace the logoLink & logoSymbol */\n  header?: React.ReactNode;\n  design?: \"default\";\n  bordered?: boolean;\n  /** The pages of the side drawer */\n  drawerItems: AppSidebarItemProps[];\n  /** The direction of the layout */\n  direction?: DirectionType;\n  /** The title of the current selected page, make sure it's the same as the drawerItem slug */\n  currentPage: string;\n  /** Specifies the title of the page. */\n  pageTitle?: string;\n  /** Specifies the symbol for the logo. */\n  logoSymbol?: any;\n  /** Specifies the link for the logo. */\n  logoLink?: string;\n  /** Specifies the text for the logo. */\n  logoText?: any;\n  /** Specifies the content to be displayed in the layout. */\n  children?: any;\n  /** Specifies whether to display the top bar. */\n  topBar?: boolean;\n  /** Specifies the username to be displayed. */\n  username?: string;\n  /** Specifies the user email to be displayed. */\n  email?: string;\n  /** Specifies the image for the avatar. */\n  avatarImage?: any;\n  /**\n   * Specifies the size of the drawer.\n   * - 'sm': Small.\n   * - 'md': Medium.\n   * - 'large': Large.\n   */\n  drawerSize?: \"sm\" | \"md\" | \"large\";\n  /** Specifies the menu items for the profile menu. */\n  profileMenuItems?: MenuItemType[];\n  onAvatarClick?: () => void;\n  /**\n   * Specifies the width of the profile menu.\n   * - 'default': Default width.\n   * - 'sm': Small width.\n   * - 'lg': Large width.\n   * - 'parent': Inherits width from parent element.\n   */\n  profileMenuWidth?: \"default\" | \"sm\" | \"lg\" | \"parent\";\n  /** Specifies additional actions for the drawer footer. */\n  DrawerFooterActions?: any;\n\n  /** Specifies the item that was clicked. */\n  clickedItem?: any;\n\n  /** Event handler for logo button click. */\n  onLogoClick?: () => void;\n\n  /** Event handler for drawer expanded. */\n  onDrawerExpanded?: (isExpanded: boolean) => void;\n\n  /** Text labels for various UI elements. */\n  texts?: {\n    /** Label for expand sidebar button. */\n    expandSidebar?: string;\n    /** Label for collapse sidebar button. */\n    collapseSidebar?: string;\n  };\n  classNames?: {\n    fullLogoImg?: string;\n    symbolLogoImg?: string;\n    logoContainer?: string;\n  };\n  DrawerLinkComponent?: any;\n  MenuLinkComponent?: any;\n};\n\nconst LOCAL_STORAGE_KEY = \"@sikka/hawa/keep-drawer-open\";\n\nexport const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({\n  profileMenuWidth = \"default\",\n  DrawerFooterActions,\n  classNames,\n  bordered = true,\n  design = \"default\",\n  direction = \"ltr\",\n  drawerSize = \"md\",\n  currentPage,\n  clickedItem,\n  DrawerLinkComponent,\n  MenuLinkComponent,\n  onDrawerExpanded,\n  onAvatarClick,\n  ...props\n}) => {\n  useEffect(() => {\n    let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY);\n    if (isDrawerOpen === null) {\n      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));\n    }\n  }, []);\n\n  let closeDrawerWidth = 56;\n  let openDrawerWidth = 200;\n  let drawerSizeStyle: any = {\n    opened: { sm: \"100\", md: openDrawerWidth, lg: \"250\" },\n    closed: {\n      sm: closeDrawerWidth,\n      md: closeDrawerWidth,\n      lg: closeDrawerWidth,\n    },\n  };\n\n  const isRTL = direction === \"rtl\";\n  const [openedSidebarItem, setOpenedSidebarItem] = useState(\"\");\n\n  const [size, setSize] = useState(\n    (typeof window !== \"undefined\" && window.innerWidth) || 1200,\n  );\n  const [openSideMenu, setOpenSideMenu] = useState(() => {\n    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);\n    return savedState ? JSON.parse(savedState) : false;\n  });\n  const [container, setContainer] = React.useState<any>(null);\n\n  const [keepDrawerOpen, setKeepDrawerOpen] = useState(() => {\n    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);\n    return savedState ? JSON.parse(savedState) : false;\n  });\n\n  const handleClickOutside = () => {\n    if (typeof window !== \"undefined\") {\n      //   console.log(\"Clicked outside, closing drawer\");\n      //   if (keepDrawerOpen) return;\n      if (window.innerWidth < 600) {\n        setKeepDrawerOpen(false);\n        setOpenSideMenu(false);\n        onDrawerExpanded && onDrawerExpanded(false);\n      }\n    }\n  };\n\n  const ref = useClickOutside(handleClickOutside);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const resize = () => {\n        setSize(window.innerWidth);\n        if (window.innerWidth > 600) {\n          setKeepDrawerOpen(false);\n        } else {\n          localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));\n        }\n        onDrawerExpanded && onDrawerExpanded(keepDrawerOpen);\n      };\n      resize();\n      window.addEventListener(\"resize\", resize);\n      return () => {\n        window.removeEventListener(\"resize\", resize);\n      };\n    }\n  }, []);\n\n  useEffect(() => {\n    setKeepDrawerOpen(() => {\n      const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);\n      return savedState ? JSON.parse(savedState) : true;\n    });\n  }, [setKeepDrawerOpen]);\n\n  useEffect(() => {\n    if (size > 600) {\n      setOpenSideMenu(keepDrawerOpen);\n      onDrawerExpanded && onDrawerExpanded(keepDrawerOpen);\n    } else {\n      setKeepDrawerOpen(false);\n      setOpenSideMenu(false);\n      onDrawerExpanded && onDrawerExpanded(false);\n    }\n  }, [size, keepDrawerOpen]);\n\n  const drawerSizeCondition =\n    size > 600\n      ? drawerSizeStyle[keepDrawerOpen ? \"opened\" : \"closed\"][drawerSize]\n      : 0;\n\n  return (\n    <div className=\"hawa-fixed hawa-start-0\">\n      {/*\n       * ----------------------------------------------------------------------------------------------------\n       * Top Bar\n       * ----------------------------------------------------------------------------------------------------\n       */}\n      {props.topBar && (\n        <div\n          dir={direction}\n          className={cn(\n            \"hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-10 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2\",\n            bordered && \"hawa-border-b-[1px]\",\n          )}\n        >\n          {/* Nav Side Of Navbar */}\n          {size > 600 ? (\n            <div\n              className={cn(\n                \"dark:hawa-text-white\",\n                size > 600 ? \"hawa-ms-14\" : \"hawa-ms-2\",\n              )}\n              style={{\n                marginInlineStart: `${\n                  drawerSizeStyle[keepDrawerOpen ? \"opened\" : \"closed\"][\n                    drawerSize\n                  ] + 10\n                }px`,\n              }}\n            >\n              {props.pageTitle}\n            </div>\n          ) : (\n            // Mobile Drawer Menu Button\n            <div\n              dir={direction}\n              className=\"hawa-flex hawa-items-center hawa-justify-center hawa-gap-0.5\"\n            >\n              <div\n                onClick={() => setOpenSideMenu(true)}\n                className=\"hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-transition-all\"\n              >\n                <MenuIcon />\n              </div>\n\n              {/* Mobile Page Title */}\n              {props.pageTitle ? (\n                <div className=\"hawa-text-sm\">{props.pageTitle}</div>\n              ) : (\n                <div></div>\n              )}\n            </div>\n          )}\n\n          <div className={cn(\"hawa-flex hawa-gap-2 dark:hawa-text-white\")}>\n            {/* User Info */}\n            {size > 600 ? (\n              <div className={\"hawa-text-end hawa-text-xs\"}>\n                <div className=\"hawa-font-bold\">{props.username}</div>{\" \"}\n                <div>{props.email}</div>\n              </div>\n            ) : null}\n            {/* Profile Icon & Menu */}\n            <DropdownMenu\n              LinkComponent={MenuLinkComponent}\n              triggerClassname=\"hawa-mx-2\"\n              align=\"end\"\n              side={\"bottom\"}\n              sideOffset={10}\n              width={profileMenuWidth}\n              direction={direction}\n              items={props.profileMenuItems || []}\n              onItemSelect={(e: any) => console.log(\"selecting item \", e)}\n              trigger={\n                <div\n                  onClick={onAvatarClick}\n                  className=\"hawa-relative hawa-h-8 hawa-w-8 hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600\"\n                >\n                  {props.avatarImage ? (\n                    <img src={props.avatarImage} alt=\"User Avatar\" />\n                  ) : (\n                    <svg\n                      aria-label=\"Avatar Icon\"\n                      className=\"hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400\"\n                      fill=\"currentColor\"\n                      viewBox=\"0 0 20 20\"\n                    >\n                      <path\n                        fillRule=\"evenodd\"\n                        d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\n                        clipRule=\"evenodd\"\n                      ></path>\n                    </svg>\n                  )}\n                </div>\n              }\n            />\n          </div>\n        </div>\n      )}\n      {/*\n       * ----------------------------------------------------------------------------------------------------\n       * Drawer Container\n       * ----------------------------------------------------------------------------------------------------\n       */}\n\n      <div ref={setContainer}>\n        <div\n          className={cn(\n            \"hawa-fixed hawa-z-40 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground\",\n            isRTL ? \"hawa-right-0\" : \"hawa-left-0\",\n            bordered\n              ? size > 600\n                ? direction === \"rtl\"\n                  ? \"hawa-border-s-[1px]\"\n                  : \"hawa-border-e-[1px]\"\n                : \"\"\n              : \"\",\n          )}\n          style={{\n            width:\n              size > 600\n                ? openSideMenu\n                  ? `${drawerSizeStyle[\"opened\"][drawerSize]}px`\n                  : `${drawerSizeStyle[\"closed\"][drawerSize]}px`\n                : openSideMenu\n                  ? `${drawerSizeStyle[\"opened\"][drawerSize]}px`\n                  : \"0px\",\n          }}\n          onMouseEnter={() => {\n            setOpenSideMenu(true);\n            onDrawerExpanded && onDrawerExpanded(true);\n          }}\n          onMouseLeave={() => {\n            if (size > 600) {\n              if (keepDrawerOpen) {\n                setOpenSideMenu(true);\n                onDrawerExpanded && onDrawerExpanded(true);\n              } else {\n                setOpenedSidebarItem(\"\");\n                setOpenSideMenu(false);\n                onDrawerExpanded && onDrawerExpanded(false);\n              }\n            } else {\n              setOpenSideMenu(false);\n              onDrawerExpanded && onDrawerExpanded(false);\n            }\n          }}\n          ref={ref}\n        >\n          {/*\n           * ----------------------------------------------------------------------------------------------------\n           * Drawer Header\n           * ----------------------------------------------------------------------------------------------------\n           */}\n          <div\n            onClick={props.onLogoClick}\n            dir={direction}\n            className={cn(\n              \"hawa-fixed hawa-z-50 hawa-mb-2 hawa-flex hawa-h-14 hawa-w-full hawa-flex-row hawa-items-center hawa-justify-center hawa-transition-all\",\n              props.onLogoClick && \"hawa-cursor-pointer\",\n              classNames?.logoContainer,\n            )}\n            style={{\n              width:\n                size > 600\n                  ? `${openSideMenu ? openDrawerWidth : 56}px`\n                  : `${openSideMenu ? openDrawerWidth : 0}px`,\n            }}\n          >\n            {/*\n             * ----------------------------------------------------------------------------------------------------\n             * Full Logo\n             * ----------------------------------------------------------------------------------------------------\n             */}\n            {openSideMenu && props.header && props.header}\n            {!props.header && (\n              <img\n                src={props.logoLink}\n                className={cn(\n                  \"hawa-h-9 hawa-opacity-0 hawa-transition-all\",\n                  !openSideMenu\n                    ? \"hawa-invisible hawa-opacity-0\"\n                    : \"hawa-visible hawa-opacity-100\",\n                  classNames?.fullLogoImg,\n                )}\n              />\n            )}\n            {/*\n             * ----------------------------------------------------------------------------------------------------\n             * Logo Symbol\n             * ----------------------------------------------------------------------------------------------------\n             */}\n            {size > 600 ? (\n              <img\n                src={props.logoSymbol}\n                className={cn(\n                  \"hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5\",\n                  openSideMenu\n                    ? \"hawa-invisible hawa-opacity-0\"\n                    : \"hawa-visible hawa-opacity-100\",\n                  classNames?.symbolLogoImg,\n                )}\n              />\n            ) : null}\n          </div>\n          {/*\n           * ----------------------------------------------------------------------------------------------------\n           * Drawer Content Container\n           * ----------------------------------------------------------------------------------------------------\n           */}\n          <div\n            className={cn(\n              \"hawa-fixed hawa-bottom-14 hawa-top-14 hawa-p-0 hawa-py-2 hawa-transition-all\",\n              openSideMenu ? \"hawa-overflow-auto\" : \"hawa-overflow-hidden\",\n            )}\n            style={{\n              width:\n                size > 600\n                  ? `${openSideMenu ? openDrawerWidth : drawerSizeCondition}px`\n                  : `${openSideMenu ? openDrawerWidth : 0}px`,\n            }}\n          >\n            {/*\n             * ----------------------------------------------------------------------------------------------------\n             * Drawer Items\n             * ----------------------------------------------------------------------------------------------------\n             */}\n            <SidebarGroup\n              direction={direction}\n              selectedItem={currentPage}\n              openedItem={openedSidebarItem}\n              setOpenedItem={(e: any) => setOpenedSidebarItem(e)}\n              isOpen={keepDrawerOpen || openSideMenu}\n              items={props.drawerItems}\n              LinkComponent={DrawerLinkComponent}\n              onItemClick={(values) => clickedItem && clickedItem(values)}\n              onSubItemClick={(values) => clickedItem && clickedItem(values)}\n            />\n          </div>\n          {/*\n           * ----------------------------------------------------------------------------------------------------\n           * Drawer Footer\n           * ----------------------------------------------------------------------------------------------------\n           */}\n          <div\n            className={cn(\n              \"hawa-fixed hawa-bottom-0 hawa-flex hawa-h-14 hawa-items-center hawa-justify-center hawa-gap-2 hawa-overflow-clip hawa-transition-all\",\n              direction === \"rtl\" ? \"hawa-flex-row-reverse\" : \"hawa-flex-row\",\n            )}\n            style={{\n              width:\n                size > 600\n                  ? `${openSideMenu ? openDrawerWidth : 56}px`\n                  : `${openSideMenu ? openDrawerWidth : 0}px`,\n            }}\n          >\n            {DrawerFooterActions && openSideMenu ? (\n              <>{DrawerFooterActions}</>\n            ) : null}\n\n            {/* Expand Button */}\n            {size > 600 && openSideMenu ? (\n              <Tooltip\n                side={\"left\"}\n                delayDuration={500}\n                triggerProps={{ asChild: true }}\n                content={\n                  keepDrawerOpen\n                    ? props.texts?.collapseSidebar || \"Collapse Sidebar\"\n                    : props.texts?.expandSidebar || \"Expand Sidebar\"\n                }\n              >\n                <Button\n                  variant=\"outline\"\n                  size=\"smallIcon\"\n                  onClick={() => {\n                    const newKeepOpenState = !keepDrawerOpen;\n                    localStorage.setItem(\n                      LOCAL_STORAGE_KEY,\n                      JSON.stringify(newKeepOpenState),\n                    );\n\n                    setKeepDrawerOpen(newKeepOpenState);\n                  }}\n                >\n                  <svg\n                    className={cn(\n                      \"hawa-h-6 hawa-w-6 hawa-shrink-0 hawa-text-primary hawa-transition-all disabled:hawa-bg-gray-200\",\n                      keepDrawerOpen\n                        ? isRTL\n                          ? \"hawa--rotate-90\"\n                          : \"hawa-rotate-90\"\n                        : isRTL\n                          ? \"hawa-rotate-90\"\n                          : \"hawa--rotate-90\",\n                    )}\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 20 20\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                      clipRule=\"evenodd\"\n                    ></path>\n                  </svg>\n                </Button>\n              </Tooltip>\n            ) : null}\n          </div>\n        </div>\n      </div>\n      {/*\n       * ----------------------------------------------------------------------------------------------------\n       * Children Container\n       * ----------------------------------------------------------------------------------------------------\n       */}\n\n      <Dialog.Root\n        open={size < 600 && openSideMenu}\n        onOpenChange={setOpenSideMenu}\n      >\n        <Dialog.Portal container={container}>\n          <Dialog.Overlay className=\"hawa-fixed hawa-inset-0 hawa-bg-foreground/20 hawa-backdrop-blur-[2px] data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10 data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0\" />\n        </Dialog.Portal>\n      </Dialog.Root>\n\n      <div\n        className=\"hawa-fixed hawa-overflow-y-auto hawa-transition-all hawa-z-0\"\n        style={\n          isRTL\n            ? {\n                left: \"0px\",\n                top: props.topBar ? \"56px\" : \"0px\",\n                width: `calc(100% - ${drawerSizeCondition}px)`,\n                height: `calc(100% - ${props.topBar ? \"56\" : \"0\"}px)`,\n              }\n            : {\n                left: `${drawerSizeCondition}px`,\n                top: props.topBar ? \"56px\" : \"0px\",\n                width: `calc(100% - ${drawerSizeCondition}px)`,\n                height: `calc(100% - ${props.topBar ? \"56\" : \"0\"}px)`,\n              }\n        }\n      >\n        {props.children}\n      </div>\n    </div>\n  );\n};\n","import { useEffect, useRef } from \"react\";\n\nconst DEFAULT_EVENTS = [\"mousedown\", \"touchstart\"];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  handler: () => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[],\n) {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    const listener = (event: any) => {\n      const { target } = event ?? {};\n      if (Array.isArray(nodes)) {\n        const shouldIgnore =\n          target?.hasAttribute(\"data-ignore-outside-clicks\") ||\n          (!document.body.contains(target) && target.tagName !== \"HTML\");\n        const shouldTrigger = nodes.every(\n          (node) => !!node && !event.composedPath().includes(node),\n        );\n        shouldTrigger && !shouldIgnore && handler();\n      } else if (ref.current && !ref.current.contains(target)) {\n        handler();\n      }\n    };\n\n    (events || DEFAULT_EVENTS).forEach((fn) =>\n      document.addEventListener(fn, listener),\n    );\n\n    return () => {\n      (events || DEFAULT_EVENTS).forEach((fn) =>\n        document.removeEventListener(fn, listener),\n      );\n    };\n  }, [ref, handler, nodes]);\n\n  return ref;\n}\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { HelperText } from \"../helperText\";\nimport { Label, LabelProps } from \"../label\";\nimport { Loading } from \"../loading/Loading\";\n\nconst buttonVariants = cva(\n  \"hawa-inline-flex hawa-items-center hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90\",\n        light: \"hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40\",\n        destructive:\n          \"hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90\",\n        outline:\n          \"hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n        secondary:\n          \"hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80\",\n        ghost: \"hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n        link: \"hawa-text-primary hawa-underline-offset-4 hover:hawa-underline\",\n        combobox: \"hawa-bg-background hawa-border\",\n        neoBrutalism: \"neo-brutalism\",\n        // \"hawa-cursor-pointer hawa-transition-all hawa-uppercase hawa-font-mono  dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active\",\n      },\n      size: {\n        default: \"hawa-h-10 hawa-px-4 hawa-py-2\",\n        heightless: \"hawa-px-4 hawa-py-4\",\n        xs: \"hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 \",\n        sm: \"hawa-h-9  hawa-text-[11px] hawa-rounded-md hawa-px-3\",\n        lg: \"hawa-h-11 hawa-rounded-md hawa-px-8\",\n        xl: \"hawa-h-14 hawa-rounded-md hawa-px-10\",\n        icon: \"hawa-h-10 hawa-w-10\",\n        smallIcon: \"hawa-h-7 hawa-w-7\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"default\" },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  centered?: boolean;\n  isLoading?: boolean;\n  label?: string;\n  labelProps?: LabelProps;\n  /** The small red text under the input field to show validation.   */\n  helperText?: any;\n  showHelperText?: boolean;\n  /**\n   * If true, the button will include a label and helper text. This is useful for forms where the button is part of the form.\n   */\n  asInput?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      label,\n      variant,\n      size,\n      asChild = false,\n      centered = true,\n      isLoading,\n      children,\n      labelProps,\n      showHelperText = false,\n      asInput = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = \"button\";\n\n    // Determine the color for the Loading component based on the variant\n    const loadingColor =\n      variant === \"outline\" || variant === \"ghost\" || variant === \"neoBrutalism\"\n        ? \"hawa-bg-primary\"\n        : \"hawa-bg-primary-foreground\";\n\n    if (asInput) {\n      return (\n        <div className=\"hawa-flex hawa-flex-col hawa-gap-2\">\n          {label && <Label {...labelProps}>{label}</Label>}\n          <Comp\n            className={cn(\n              buttonVariants({ variant, size, className }),\n              centered && \"hawa-justify-center\",\n            )}\n            ref={ref}\n            {...props}\n          >\n            {isLoading ? (\n              <Loading\n                design={\n                  size === \"icon\" || size === \"smallIcon\"\n                    ? \"spinner\"\n                    : \"dots-pulse\"\n                }\n                themeMode={variant === \"outline\" ? \"light\" : \"dark\"}\n                color={loadingColor}\n                size={size === \"sm\" || size === \"xs\" ? \"xs\" : \"button\"}\n              />\n            ) : (\n              children\n            )}\n          </Comp>\n          {showHelperText && <HelperText helperText={props.helperText} />}\n        </div>\n      );\n    } else {\n      return (\n        <Comp\n          className={cn(\n            buttonVariants({ variant, size, className }),\n            centered && \"hawa-justify-center\",\n          )}\n          ref={ref}\n          {...props}\n        >\n          {isLoading ? (\n            <Loading\n              design={\n                size === \"icon\" || size === \"smallIcon\"\n                  ? \"spinner\"\n                  : \"dots-pulse\"\n              }\n              themeMode={variant === \"outline\" ? \"light\" : \"dark\"}\n              color={loadingColor}\n              size={size === \"sm\" || size === \"xs\" ? \"xs\" : \"button\"}\n            />\n          ) : (\n            children\n          )}\n        </Comp>\n      );\n    }\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport const HelperText = ({ helperText }: { helperText?: any }) => (\n  <p\n    className={cn(\n      \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n      helperText ? \"hawa-h-4 hawa-opacity-100\" : \"hawa-h-0 hawa-opacity-0\",\n    )}\n  >\n    {helperText}\n  </p>\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n  hint?: React.ReactNode;\n  hintSide?: PositionType;\n  htmlFor?: string;\n  required?: boolean;\n};\n\nconst Label = React.forwardRef<\n  HTMLLabelElement,\n  React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n  <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n    <label\n      ref={ref}\n      className={cn(\n        \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n    </label>\n    {hint && (\n      <Tooltip\n        content={hint}\n        side={hintSide}\n        triggerProps={{\n          tabIndex: -1,\n          onClick: (event) => event.preventDefault(),\n        }}\n      >\n        <div>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n            <path d=\"M12 17h.01\" />\n          </svg>\n        </div>\n      </Tooltip>\n    )}\n  </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n    size?: \"default\" | \"small\" | \"large\";\n  }\n>(({ className, sideOffset = 4, size = \"default\", ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n      {\n        \"hawa-text-xs\": size === \"small\",\n        \"hawa-text-xl\": size === \"large\",\n      },\n      className,\n    )}\n    {...props}\n  />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n  /** Controls the open state of the tooltip. */\n  open?: any;\n  /** Specifies the side where the tooltip will appear. */\n  side?: PositionType;\n  /** Content to be displayed within the tooltip. */\n  content?: any;\n  /** Elements to which the tooltip is anchored. */\n  children?: any;\n  /** Sets the default open state of the tooltip. */\n  defaultOpen?: any;\n  /** Event handler for open state changes. */\n  onOpenChange?: any;\n  /** Duration of the delay before the tooltip appears. */\n  delayDuration?: any;\n  /** Size of the tooltip. */\n  size?: \"default\" | \"small\" | \"large\";\n  /** Disables the tooltip. */\n  disabled?: boolean;\n  triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n  contentProps?: TooltipPrimitive.TooltipContentProps;\n  providerProps?: TooltipPrimitive.TooltipProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n  side,\n  size,\n  open,\n  content,\n  children,\n  disabled,\n  defaultOpen,\n  onOpenChange,\n  triggerProps,\n  contentProps,\n  providerProps,\n  delayDuration = 300,\n  ...props\n}) => {\n  return (\n    <TooltipPrimitive.TooltipProvider\n      delayDuration={delayDuration}\n      {...providerProps}\n    >\n      <TooltipPrimitive.Root\n        open={!disabled && open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        {...props}\n      >\n        <TooltipPrimitive.Trigger {...triggerProps}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipContent\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\n          style={{\n            ...contentProps?.style,\n            maxWidth: \"var(--radix-tooltip-content-available-width)\",\n            maxHeight: \"var(--radix-tooltip-content-available-height)\",\n          }}\n        >\n          {content}\n        </TooltipContent>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.TooltipProvider>\n  );\n};\n\nexport { Tooltip };\n","import React, { FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype LoadingTypes = {\n  /** Specifies the size of the loading component.*/\n  size?: \"button\" | \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  /** Determines the design of the loading animation.*/\n  design?:\n    | \"spinner\"\n    | \"dots-bounce\"\n    | \"dots-pulse\"\n    | \"pulse\"\n    | \"spinner-dots\"\n    | \"squircle\"\n    | \"square\"\n    | \"progress\"\n    | \"orbit\";\n  /** Specifies the color of the loading component. By default it will inherit the value of --primary global CSS variable*/\n  color?: string;\n  classNames?: {\n    container?: string;\n    track?: string;\n    car?: string;\n  };\n  themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n  design = \"spinner\",\n  size = \"normal\",\n  themeMode = \"light\",\n  classNames,\n  color,\n  ...props\n}) => {\n  let sizeStyles = {\n    button: \"hawa-h-4 hawa-w-4\",\n    xs: \"hawa-h-1 hawa-w-1\",\n    sm: \"hawa-h-6 hawa-w-6\",\n    normal: \"hawa-h-8 hawa-w-8\",\n    lg: \"hawa-h-14 hawa-w-14\",\n    xl: \"hawa-h-24 hawa-w-24\",\n  };\n  let progressSizes = {\n    button: \"hawa-h-1\",\n    xs: \"hawa-h-1 hawa-w-1\",\n    sm: \"hawa-h-6 hawa-w-6\",\n    normal: \"\",\n    lg: \"hawa-h-6\",\n    xl: \"hawa-h-10 hawa-w-64\",\n  };\n\n  let animationStyles: any = {\n    pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n    bounce: \"hawa-animate-bounce\",\n  };\n  switch (design.split(\"-\")[0]) {\n    case \"dots\":\n      return (\n        <div\n          className={cn(\n            \"hawa-flex hawa-flex-row hawa-gap-2\",\n            classNames?.container,\n          )}\n        >\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\",\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\",\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\",\n            )}\n          ></div>\n        </div>\n      );\n    case \"square\":\n      return (\n        <svg\n          className={cn(\n            \"squircle-container\",\n            sizeStyles[size],\n            classNames?.container,\n          )}\n          viewBox=\"0 0 35 35\"\n          height=\"35\"\n          width=\"35\"\n        >\n          <rect\n            className=\"squircle-track\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n          />\n          <rect\n            className=\"square-car\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n            pathLength=\"100\"\n          />\n        </svg>\n      );\n    case \"squircle\":\n      return (\n        <svg\n          x=\"0px\"\n          y=\"0px\"\n          viewBox=\"0 0 37 37\"\n          height=\"37\"\n          width=\"37\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          className={cn(\n            \"squircle-container\",\n            sizeStyles[size],\n            classNames?.container,\n          )}\n        >\n          <path\n            className={cn(\"squircle-track\", classNames?.track)}\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n          <path\n            className={cn(\"squircle-car\", classNames?.car)}\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n        </svg>\n      );\n    case \"progress\":\n      return (\n        <div\n          className={cn(\n            \"progress-loading after:hawa-rounded hawa-rounded\",\n            progressSizes[size],\n            classNames?.container,\n          )}\n        ></div>\n      );\n    case \"orbit\":\n      return (\n        <div className={cn(\"orbit-container\", classNames?.container)}></div>\n      );\n\n    default:\n      return (\n        <svg\n          viewBox=\"0 0 40 40\"\n          height=\"40\"\n          width=\"40\"\n          className={cn(\n            \"circle-container\",\n            sizeStyles[size],\n            classNames?.container,\n          )}\n        >\n          <circle\n            className={cn(\n              \"circle-track\",\n              {\n                \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n                \"hawa-stroke-primary\": themeMode === \"light\",\n              },\n              classNames?.track,\n            )}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            pathLength=\"100\"\n          />\n          <circle\n            className={cn(\n              \"circle-car\",\n              {\n                \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n                \"hawa-stroke-primary\": themeMode === \"light\",\n              },\n              classNames?.car,\n            )}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            fill=\"none\"\n            pathLength=\"100\"\n            strokeWidth=\"5px\"\n          />\n        </svg>\n      );\n  }\n};\n","import * as React from \"react\";\n\nimport { Portal } from \"@headlessui/react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cn } from \"@util/index\";\n\nimport { DirectionType, RadioOptionType } from \"../../types/commonTypes\";\n\nconst DropdownMenuRoot = DropdownMenuPrimitive.Root;\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none focus:hawa-bg-accent data-[state=open]:hawa-bg-accent\",\n      inset && \"hawa-pl-8\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2\">\n      {children}\n    </div>{\" \"}\n    <svg\n      aria-label=\"Chevron Right Icon\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      viewBox=\"0 0 16 16\"\n      height=\"1em\"\n      width=\"1em\"\n      className={cn(props.dir === \"rtl\" ? \"hawa-rotate-180\" : \"\")}\n    >\n      <path\n        fillRule=\"evenodd\"\n        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\"\n      ></path>\n    </svg>\n  </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"hawa-z-50 hawa-min-w-[8rem] hawa-gap-1 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n      className,\n    )}\n    {...props}\n  />\n));\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    />\n  </Portal>\n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n    end?: any;\n    shortcut?: React.ReactNode;\n    badged?: boolean;\n    slug?: string;\n    LinkComponent?: any;\n  }\n>(({ className, inset, badged, slug, LinkComponent = \"a\", ...props }, ref) => {\n  return (\n    <LinkComponent href={slug}>\n      <DropdownMenuPrimitive.Item\n        disabled={props.disabled}\n        ref={ref}\n        className={cn(\n          \"hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50\",\n          inset && \"hawa-pl-8\",\n          props.end &&\n            Array.isArray(props.children) &&\n            props.children[1] &&\n            \"hawa-gap-6\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2\">\n          {props.children}\n        </div>\n\n        {props.end && props.end}\n        {!props.end && props.shortcut && (\n          <DropdownMenuShortcut>{props.shortcut}</DropdownMenuShortcut>\n        )}\n        {!props.end && badged && (\n          <div className=\"hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500\" />\n        )}\n      </DropdownMenuPrimitive.Item>\n    </LinkComponent>\n  );\n});\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n