@sikka/hawa 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -107,6 +107,7 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-tooltip": "^1.0.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",

package/src/elements/Button.tsx

@@ -11,6 +11,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        light: "bg-primary/20 text-primary hover:bg-primary/40",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
@@ -27,6 +28,7 @@ const buttonVariants = cva(
         lg: "h-11 rounded-md px-8",
         xl: "h-14 rounded-md px-10",
         icon: "h-10 w-10",
+        smallIcon: "h-7 w-7",
       },
     },
     defaultVariants: {

package/src/elements/DropdownMenu.tsx

@@ -222,16 +222,24 @@ type ExtendedDropdownMenuContentProps = Partial<
   // Add any additional types or overrides here, for example:
   //   side?: "left" | "right" | "top" | "bottom"
 }
+type ExtendedDropdownMenuTriggerProps = Partial<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
+> & {
+  // Add any additional types or overrides here, for example:
+  //   side?: "left" | "right" | "top" | "bottom"
+}
 
 type SubItem = {
   label: string
   value: string
+  action?: () => void
   highlighted?: boolean
 }
 
 type Item = {
   label: string
   value: string
+  action?: () => void
   highlighted?: boolean
   subitems?: SubItem[] // Note the use of the optional modifier
 }
@@ -244,6 +252,7 @@ export const DropdownMenu = ({
   sideOffset,
   side,
   className,
+  triggerClassname,
   align,
   alignOffset,
 }: {
@@ -253,6 +262,7 @@ export const DropdownMenu = ({
   direction?: "rtl" | "ltr"
   onItemSelect?: any
   className?: ExtendedDropdownMenuContentProps["className"]
+  triggerClassname?: ExtendedDropdownMenuTriggerProps["className"]
   sideOffset?: ExtendedDropdownMenuContentProps["sideOffset"]
   side?: ExtendedDropdownMenuContentProps["side"]
   align?: ExtendedDropdownMenuContentProps["align"]
@@ -261,7 +271,7 @@ export const DropdownMenu = ({
 }) => {
   return (
     <DropdownMenuRoot dir={direction}>
-      <DropdownMenuTrigger className="focus:ring-0">
+      <DropdownMenuTrigger className={triggerClassname}>
         {trigger}
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
@@ -282,7 +292,7 @@ export const DropdownMenu = ({
                   <DropdownMenuSubContent>
                     {item.subitems.map((subitem, subIndex) => (
                       <DropdownMenuItem
-                        onSelect={() => onItemSelect(subitem.value)}
+                        onSelect={() => subitem.action()}
                         key={subIndex}
                       >
                         {subitem.label}
@@ -292,10 +302,7 @@ export const DropdownMenu = ({
                 </DropdownMenuPortal>
               </DropdownMenuSub>
             ) : (
-              <DropdownMenuItem
-                key={index}
-                onSelect={() => onItemSelect(item.value)}
-              >
+              <DropdownMenuItem key={index} onSelect={() => item.action()}>
                 {item.label}
               </DropdownMenuItem>
             )

package/src/elements/HawaStats.tsx

@@ -32,7 +32,7 @@ export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
         ) : (
           <div className="text-2xl font-bold">{props.number}</div>
         )}
-        {props.isLoading ? (
+        {props.isLoading && props.helperText ? (
           <Skeleton className="mt-2 h-4 w-1/2" />
         ) : (
           props.helperText && (

package/src/elements/Popover.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../util"
+
+interface PopoverProps {
+  trigger: React.ReactNode
+  children: React.ReactNode
+  className?: string
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+}
+
+const Popover: React.FC<PopoverProps> = ({
+  trigger,
+  children,
+  className,
+  align = "center",
+  sideOffset = 4,
+}) => (
+  <PopoverPrimitive.Root>
+    <PopoverPrimitive.Trigger>{trigger}</PopoverPrimitive.Trigger>
+    <PopoverContent className={className} align={align} sideOffset={sideOffset}>
+      {children}
+    </PopoverContent>
+  </PopoverPrimitive.Root>
+)
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover }

package/src/elements/index.ts

@@ -63,3 +63,4 @@ export * from "./Card"
 export * from "./Skeleton"
 export * from "./InterfaceSettings"
 export * from "./DropdownMenu"
+export * from "./Popover"

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -208,13 +208,14 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
               </div>
             </HawaMenu> */}
             <DropdownMenu
+              triggerClassname="mx-2"
               align="end"
-              alignOffset={10}
+              alignOffset={8}
               side={"bottom"}
-              sideOffset={10}
+              sideOffset={5}
               direction={isRTL ? "rtl" : "ltr"}
               trigger={
-                <div className="relative mx-2 h-8 w-8  cursor-pointer overflow-hidden rounded ring-1 ring-primary dark:bg-gray-600">
+                <div className="relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600">
                   <AvatarIcon />
                 </div>
               }
@@ -333,7 +334,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                           dItem.subItems?.find(
                             (e) => e.slug === props.currentPage
                           )
-                          ? "bg-primary text-white"
+                          ? "bg-primary text-primary-foreground "
                           : "hover:bg-primary/20",
                         "my-1  flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2  pl-3 transition-all ",
                         isRTL ? "flex-row-reverse pr-3" : "",
@@ -341,12 +342,12 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                       )}
                     >
                       <div className="flex flex-row" dir={direction}>
-                        <div className="flex items-center justify-center dark:text-white">
+                        <div className="flex items-center justify-center ">
                           {dItem.icon}
                         </div>
                         <div
                           className={clsx(
-                            "mx-2 whitespace-nowrap text-sm transition-all dark:text-white",
+                            "mx-2 whitespace-nowrap text-sm transition-all",
                             openSideMenu ? "opacity-100" : "opacity-0"
                           )}
                         >
@@ -426,8 +427,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
         {/* Drawer Footer */}
         <div
           className={clsx(
-            "fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-primary-foreground  transition-all",
-
+            "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"
           )}
           style={{
@@ -437,14 +437,16 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 : `${openSideMenu ? openDrawerWidth : 0}px`,
           }}
         >
-          {size > 600 && DrawerFooterActions && openSideMenu ? (
+          {DrawerFooterActions && openSideMenu ? (
             <>{DrawerFooterActions}</>
           ) : null}
 
           {/* Expand Button */}
           {size > 600 && openSideMenu ? (
             <div
-              className={clsx("w-fit transition-all")}
+              className={clsx(
+                "flex w-fit flex-col items-center justify-center  transition-all"
+              )}
               style={
                 isRTL
                   ? {
@@ -463,43 +465,42 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                     }
               }
             >
-              <div
-                dir={direction}
-                className={clsx(
-                  "relative left-0 top-0 transition-all",
-                  openSideMenu ? " opacity-100" : " opacity-0"
-                )}
+              <Tooltip
+                side={"left"}
+                delayDuration={300}
+                content={
+                  keepOpen
+                    ? props.texts?.collapseSidebar || "Collapse Sidebar"
+                    : props.texts?.expandSidebar || "Expand Sidebar"
+                }
               >
-                <Tooltip
-                  side={"left"}
-                  delayDuration={300}
-                  content={
-                    keepOpen
-                      ? props.texts?.collapseSidebar || "Collapse Sidebar"
-                      : props.texts?.expandSidebar || "Expand Sidebar"
-                    //  || "Expand Sidebar"
-                  }
+                <Button
+                  variant="light"
+                  onClick={() => setKeepOpen(!keepOpen)}
+                  size="smallIcon"
                 >
-                  <Button
-                    variant="secondary"
-                    onClick={() => setKeepOpen(!keepOpen)}
-                    size="icon"
+                  <svg
+                    className={clsx(
+                      "h-6 w-6 shrink-0 text-primary   transition-all  disabled:bg-gray-200 ",
+                      keepOpen
+                        ? isRTL
+                          ? "-rotate-90"
+                          : "rotate-90"
+                        : isRTL
+                        ? "rotate-90"
+                        : "-rotate-90"
+                    )}
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
                   >
-                    <ArrowIcon
-                      // color={"black"}
-                      pointing={
-                        keepOpen
-                          ? isRTL
-                            ? "right"
-                            : "left"
-                          : isRTL
-                          ? "left"
-                          : "right"
-                      }
-                    />
-                  </Button>
-                </Tooltip>
-              </div>
+                    <path
+                      fillRule="evenodd"
+                      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"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                </Button>
+              </Tooltip>
             </div>
           ) : null}
         </div>
@@ -567,10 +568,9 @@ const ArrowIcon = ({ pointing }) => {
   return (
     <svg
       className={clsx(
-        "h-6 w-6 shrink-0 transition-all   disabled:bg-gray-200  dark:text-white",
+        "h-6 w-6 shrink-0 text-primary-foreground   transition-all  disabled:bg-gray-200 ",
         directionStyle
       )}
-      // fill={color}
       fill="currentColor"
       viewBox="0 0 20 20"
     >

package/src/styles.css

@@ -1220,6 +1220,9 @@ video {
 .w-7 {
   width: 1.75rem;
 }
+.w-72 {
+  width: 18rem;
+}
 .w-8 {
   width: 2rem;
 }
@@ -2584,12 +2587,12 @@ video {
 .ring-buttonPrimary-500 {
   --tw-ring-color: hsl(var(--button-primary-500));
 }
-.ring-primary {
-  --tw-ring-color: hsl(var(--primary));
-}
 .ring-primary\/20 {
   --tw-ring-color: hsl(var(--primary) / 0.2);
 }
+.ring-primary\/30 {
+  --tw-ring-color: hsl(var(--primary) / 0.3);
+}
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -2957,6 +2960,9 @@ body {
 .hover\:bg-primary\/20:hover {
   background-color: hsl(var(--primary) / 0.2);
 }
+.hover\:bg-primary\/40:hover {
+  background-color: hsl(var(--primary) / 0.4);
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -3060,11 +3066,6 @@ body {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);