@sikka/hawa 0.1.95 → 0.1.97

package/dist/styles.css

@@ -422,7 +422,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0rem;
+    --radius: 1rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -1194,6 +1194,9 @@ video {
 .h-\[400px\] {
   height: 400px;
 }
+.h-\[80px\] {
+  height: 80px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -2489,6 +2492,9 @@ video {
   font-size: 3.75rem;
   line-height: 1;
 }
+.text-\[0\.70rem\] {
+  font-size: 0.70rem;
+}
 .text-\[0\.75rem\] {
   font-size: 0.75rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.95",
+  "version": "0.1.97",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -48,9 +48,9 @@
     "@storybook/addon-actions": "^6.5.8",
     "@storybook/addon-docs": "^6.5.8",
     "@storybook/addon-essentials": "^6.5.8",
+    "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.8",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-info": "^5.3.21",
     "@storybook/addons": "^6.5.8",
     "@storybook/api": "^7.3.2",
     "@storybook/builder-webpack5": "^6.5.13",
@@ -76,6 +76,7 @@
     "react-dom": "^18.2.0",
     "react-phone-input-2": "^2.15.1",
     "react-transition-group": "^4.4.2",
+    "recharts": "^2.8.0",
     "rollup": "^2.38.4",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -92,7 +93,6 @@
     "typescript": "^4.8.4",
     "webpack": "^5.75.0"
   },
-
   "resolutions": {
     "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2",
     "@storybook/react/webpack": "^5",

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -13,6 +13,8 @@ import { Button } from "../../elements/Button"
 
 type NewPasswordTypes = {
   handleNewPassword: () => void
+  direction?: "rtl" | "ltr"
+
   passwordChanged: any
   texts: {
     passwordPlaceholder: string
@@ -45,7 +47,7 @@ export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
   }
 
   return (
-    <Card>
+    <Card dir={props.direction}>
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />
       )}

package/src/elements/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-
+import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../util"
 
 const DropdownMenuRoot = DropdownMenuPrimitive.Root
@@ -241,13 +241,13 @@ export type SubItem = {
   highlighted?: boolean
   disabled?: boolean
 }
-
 export type MenuItemType = {
   icon?: any
-  label: string
-  value: string
+  label?: string
+  value?: string
   end?: any
   presist?: boolean
+  type?: "separator" | "label"
   action?: () => void
   highlighted?: boolean
   subitems?: SubItem[] // Note the use of the optional modifier
@@ -265,8 +265,29 @@ interface DropdownMenuProps {
   align?: ExtendedDropdownMenuContentProps["align"]
   alignOffset?: ExtendedDropdownMenuContentProps["alignOffset"]
   width?: "default" | "sm" | "lg" | "parent"
+  size?: "default" | "sm"
   selectCallback?: any
 }
+
+// const dropDownMenuVariants = cva(
+//   "inline-flex items-center justify-center select-none rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+//   {
+//     variants: {
+//       width: {
+//         default: "bg-primary text-primary-foreground hover:bg-primary/90",
+//       },
+//       size: {
+//         default: "h-10 px-4 py-2",
+//         sm: "h-9 rounded-md px-3",
+//       },
+//     },
+//     defaultVariants: {
+//       width: "default",
+//       size: "default",
+//     },
+//   }
+// )
+
 export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   trigger,
   items,
@@ -279,6 +300,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   align,
   alignOffset,
   selectCallback,
+  size = "default",
   width = "default",
 }) => {
   const widthStyles = {
@@ -287,6 +309,10 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
     lg: "w-[200px]",
     parent: "ddm-w-parent",
   }
+  const sizeStyles = {
+    default: "px-2 py-3 ",
+    sm: "text-xs px-1.5 py-1.5",
+  }
   return (
     <DropdownMenuRoot dir={direction}>
       <DropdownMenuTrigger className={triggerClassname}>
@@ -301,64 +327,81 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
           alignOffset={alignOffset}
         >
           {items.map((item, index) => {
-            return item.subitems ? (
-              <DropdownMenuSub key={index}>
-                <DropdownMenuSubTrigger dir={direction}>
-                  {item.icon && item.icon}
-                  {item.label && item.label}
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    {item.subitems.map((subitem, subIndex) => (
-                      <DropdownMenuItem
-                        disabled={subitem.disabled}
-                        // className="flex flex-row gap-2"
-                        className="px-2 py-3"
-                        onSelect={() => {
-                          subitem.action()
-                          if (selectCallback) {
-                            selectCallback(subitem.value)
-                          }
-                        }}
-                        key={subIndex}
-                      >
-                        {subitem.icon && subitem.icon}
-                        {subitem.label && subitem.label}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-            ) : (
-              <DropdownMenuItem
-                disabled={item.disabled}
-                key={index}
-                onSelect={(e) => {
-                  if (item.presist) {
-                    e.preventDefault()
-                  }
-                  if (item.action) {
-                    item.action()
-                    if (selectCallback) {
-                      selectCallback(item.value)
+            if (item.type === "separator") {
+              return <DropdownMenuSeparator />
+            } else if (item.type === "label") {
+              return <DropdownMenuLabel>{item.label}</DropdownMenuLabel>
+            } else {
+              return item.subitems ? (
+                <DropdownMenuSub key={index}>
+                  <DropdownMenuSubTrigger
+                    className={cn(sizeStyles[size])}
+                    dir={direction}
+                  >
+                    {item.icon && item.icon}
+                    {item.label && item.label}
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      {item.subitems.map((subitem, subIndex) => (
+                        <DropdownMenuItem
+                          className={cn(
+                            sizeStyles[size],
+
+                            !item.icon && !item.label
+                              ? "px-0 py-0 focus:bg-transparent"
+                              : "focus:bg-accent"
+                          )}
+                          disabled={subitem.disabled}
+                          // className="flex flex-row gap-2"
+                          onSelect={() => {
+                            subitem.action()
+                            if (selectCallback) {
+                              selectCallback(subitem.value)
+                            }
+                          }}
+                          key={subIndex}
+                        >
+                          {subitem.icon && subitem.icon}
+                          {subitem.label && subitem.label}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              ) : (
+                <DropdownMenuItem
+                  disabled={item.disabled}
+                  key={index}
+                  onSelect={(e) => {
+                    if (item.presist) {
+                      e.preventDefault()
                     }
-                  } else {
-                    if (selectCallback) {
-                      selectCallback(item.value)
+                    if (item.action) {
+                      item.action()
+                      if (selectCallback) {
+                        selectCallback(item.value)
+                      }
+                    } else {
+                      if (selectCallback) {
+                        selectCallback(item.value)
+                      }
                     }
-                  }
-                }}
-                end={item.end}
-                className={
-                  !item.icon && !item.label
-                    ? "px-0 py-0 focus:bg-transparent "
-                    : "px-2 py-3 focus:bg-accent "
-                }
-              >
-                {item.icon && item.icon}
-                {item.label && item.label}
-              </DropdownMenuItem>
-            )
+                  }}
+                  end={item.end}
+                  className={cn(
+                    sizeStyles[size],
+                    !item.icon && !item.label
+                      ? "px-0 py-0 focus:bg-transparent "
+                      : "focus:bg-accent ",
+                    item.presist && "focus:bg-transparent"
+                  )}
+                >
+                  {item.icon && item.icon}
+                  {item.label && item.label}
+                </DropdownMenuItem>
+              )
+            }
           })}
         </DropdownMenuContent>
       </DropdownMenuPortal>

package/src/elements/HawaRadio.tsx

@@ -55,7 +55,7 @@ export const HawaRadio: FC<RadioTypes> = ({
               : "",
             "select-none whitespace-nowrap rounded  border text-center text-sm font-medium",
             widthStyle[width],
-            orientationStyle[orientation],
+            orientationStyle[orientation]
           )}
         >
           {props.options?.map((opt: any, o) => (
@@ -66,7 +66,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 props.onChangeTab(opt.value)
               }}
               className={cn(
-                "w-full cursor-pointer",
+                "w-full cursor-pointer ",
                 orientation === "horizontal" &&
                   parentDirection === "ltr" &&
                   "rounded-none first:rounded-l last:rounded-r",
@@ -78,6 +78,7 @@ export const HawaRadio: FC<RadioTypes> = ({
 
                 "last flex flex-row items-center justify-center gap-2 ",
                 selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                // "bg-red-500"
               )}
               key={o}
             >

package/src/elements/HawaStats.tsx

@@ -7,6 +7,7 @@ type StatTypes = {
   color?: string
   number?: string
   helperText?: string
+  chart?: any
   icon?: any
   variant?:
     | "default"
@@ -39,6 +40,11 @@ export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
             <p className="text-xs text-muted-foreground">{props.helperText}</p>
           )
         )}
+        {props.isLoading && props.chart ? (
+          <Skeleton className="mt-2 h-4 w-1/2" />
+        ) : (
+          props.chart
+        )}
       </CardContent>
     </Card>
   )

package/src/elements/HawaTable.tsx

@@ -23,6 +23,8 @@ type TableTypes = {
   pagination?: boolean
   columns: ColTypes[]
   actions?: MenuItemType[]
+  actionsWidth?: "default" | "sm" | "lg" | "parent"
+  actionsSize?: "default" | "sm"
   direction?: "rtl" | "ltr"
   rows?: RowTypes[][]
   handleActionClick?: any
@@ -110,7 +112,7 @@ export const HawaTable: FC<TableTypes> = ({
   }, [slice, page])
 
   return (
-    <div className="relative flex flex-col gap-2 ">
+    <div className="relative flex flex-col gap-2  ">
       <div className={`overflow-x-auto rounded  bg-${headerColor}`}>
         {props.headerTools && (
           <div className="flex flex-row items-center justify-between gap-2 border bg-background px-2  py-2">
@@ -265,7 +267,8 @@ export const HawaTable: FC<TableTypes> = ({
                       >
                         <div className="flex items-center justify-center">
                           <DropdownMenu
-                            width="sm"
+                            width={props.actionsWidth}
+                            size={props.actionsSize}
                             direction={direction}
                             side="right"
                             items={props.actions}

package/src/layout/AppLayout.tsx

@@ -24,6 +24,7 @@ type AppLayoutTypes = {
   avatarImage?: any
   drawerSize?: "sm" | "md" | "large"
   profileMenuItems?: MenuItemType[]
+  profileMenuWidth: "default" | "sm" | "lg" | "parent"
   onSettingsClick?: () => void
   DrawerFooterActions?: any
   clickedItem?: any
@@ -203,7 +204,10 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
               alignOffset={8}
               side={"bottom"}
               sideOffset={5}
+              width={props.profileMenuWidth}
               direction={isRTL ? "rtl" : "ltr"}
+              items={props.profileMenuItems}
+              onItemSelect={(e) => console.log("selecting item ", e)}
               trigger={
                 <div className="relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600">
                   {props.avatarImage ? (
@@ -224,8 +228,6 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
                   )}
                 </div>
               }
-              items={props.profileMenuItems}
-              onItemSelect={(e) => console.log("selecting item ", e)}
             />
           </div>
         </div>

package/src/styles.css

@@ -422,7 +422,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0rem;
+    --radius: 1rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -1194,6 +1194,9 @@ video {
 .h-\[400px\] {
   height: 400px;
 }
+.h-\[80px\] {
+  height: 80px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -2489,6 +2492,9 @@ video {
   font-size: 3.75rem;
   line-height: 1;
 }
+.text-\[0\.70rem\] {
+  font-size: 0.70rem;
+}
 .text-\[0\.75rem\] {
   font-size: 0.75rem;
 }

package/src/tailwind.css

@@ -88,7 +88,7 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0rem;
+    --radius: 1rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;