@sikka/hawa 0.1.17 → 0.1.20

package/lib/layout/AppLayout.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+type AppLayoutTypes = {
+    /** The pages of the side drawer */
+    drawerItems: Item[];
+    direction?: "rtl" | "ltr";
+    currentPage: string;
+    pageTitle?: string;
+    logoSymbol?: any;
+    logoLink?: string;
+    logoText?: any;
+    children?: any;
+    topBar?: boolean;
+    username?: string;
+    email?: string;
+    drawerSize?: "sm" | "md" | "large";
+    profileMenuItems?: ProfileItem[];
+    onSettingsClick?: () => void;
+    DrawerFooterActions?: any;
+    texts?: {
+        expandSidebar?: string;
+        collapseSidebar?: string;
+    };
+};
+type Item = {
+    value: string;
+    label: string;
+    icon?: any;
+    subitems?: SubItem[];
+    onClick?: () => void;
+};
+type SubItem = {
+    value: string;
+    label: string;
+    icon?: any;
+    onClick?: () => void;
+};
+type ProfileSubItem = {
+    label: string;
+    value: string;
+    highlighted?: boolean;
+};
+type ProfileItem = {
+    label: string;
+    value: string;
+    highlighted?: boolean;
+    subitems?: ProfileSubItem[];
+};
+export declare const AppLayout: React.FunctionComponent<AppLayoutTypes>;
+export {};

package/lib/layout/Sidebar.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+type Item = {
+    value: string;
+    label: string;
+    icon?: any;
+    subitems?: SubItem[];
+    onClick?: () => void;
+};
+type SubItem = {
+    value: string;
+    label: string;
+    icon?: any;
+    onClick?: () => void;
+};
+interface SidebarGroupProps {
+    title?: string;
+    items: Item[];
+    collapsed?: any;
+    selectedItem?: any;
+    isOpen?: boolean;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+}
+interface SidebarRootProps {
+    children: any;
+}
+declare const SidebarRoot: React.FC<SidebarRootProps>;
+declare const SidebarGroup: React.FC<SidebarGroupProps>;
+declare const SidebarItem: React.FC<{
+    item: Item;
+    isSelected: any;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    isOpen?: boolean;
+}>;
+export { SidebarRoot, SidebarGroup, SidebarItem };

package/lib/layout/Sidebar2.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+type Item = {
+    value: string;
+    label: string;
+    icon?: any;
+    subitems?: Item[];
+};
+interface SidebarGroupProps {
+    title: string;
+    items: Item[];
+}
+interface SidebarRootProps {
+    children: any;
+}
+declare const SidebarRoot: React.FC<SidebarRootProps>;
+declare const SidebarGroup: React.FC<SidebarGroupProps>;
+declare const SidebarItem: React.FC<{
+    item: Item;
+}>;
+export { SidebarRoot, SidebarGroup, SidebarItem };

package/lib/layout/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./Box";
 export * from "./HawaBottomAppBar";
 export * from "./HawaSiteLayout";
+export * from "./AppLayout";
 export * from "./HawaAppLayout";
 export * from "./HawaAppLayoutSimplified";
 export * from "./HawaContainer";
@@ -8,3 +9,4 @@ export * from "./HawaGrid";
 export * from "./AppSidebar";
 export * from "./Footer";
 export * from "./Banner";
+export * from "./Sidebar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -105,6 +105,7 @@
     "@storybook/manager-webpack5/webpack": "^5"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",

package/src/blocks/AuthForms/SignInBlock.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Icons } from "../../elements/Icons"
 import { Button } from "../../elements/Button"
 import {

package/src/blocks/AuthForms/SignInForm.tsx

@@ -20,7 +20,7 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
   } = useForm()
 
   return (
-    <div>
+    <div className="flex flex-col gap-4">
       <Card dir={props.direction}>
         <CardContent headless>
           <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>

package/src/elements/Button.tsx

@@ -28,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

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 

package/src/elements/HawaRadio.tsx

@@ -11,12 +11,13 @@ type RadioTypes = {
     sublabel?: any
     icon?: any
   }[]
-
+  width?: "default" | "full"
   onChangeTab?: any
   defaultValue?: any
 }
 export const HawaRadio: FC<RadioTypes> = ({
   design = "default",
+  width = "default",
   orientation = "horizontal",
   ...props
 }) => {
@@ -29,6 +30,10 @@ export const HawaRadio: FC<RadioTypes> = ({
     horizontal: "flex flex-row",
     vertical: "flex flex-col",
   }
+  let widthStyle = {
+    default: "max-w-fit",
+    full: "w-full",
+  }
   switch (design) {
     case "tabs":
       return (
@@ -37,7 +42,8 @@ export const HawaRadio: FC<RadioTypes> = ({
             props.options?.length > 2
               ? "flex-wrap xs:max-w-full xs:flex-nowrap"
               : "",
-            " max-w-fit  whitespace-nowrap rounded border  text-center text-sm font-medium select-none",
+            "select-none whitespace-nowrap rounded  border text-center text-sm font-medium",
+            widthStyle[width],
             orientationStyle[orientation]
           )}
         >

package/src/elements/InterfaceSettings.tsx

@@ -1,18 +1,30 @@
 import React, { FC, useState } from "react"
 import { HawaRadio } from "./HawaRadio"
+import { cn } from "../util"
 
 type TypographyTypes = {
   handleLanguage: (e) => void
   currentLanguage: any
   handleColorMode: (e) => void
   currentColorMode: any
+  orientation?: "vertical" | "horizontal"
+  width?: "default" | "full"
 }
-export const InterfaceSettings: FC<TypographyTypes> = (props) => {
+export const InterfaceSettings: FC<TypographyTypes> = ({
+  orientation = "horizontal",
+  width = "default",
+  ...props
+}) => {
   const [color, setColor] = useState(props.currentColorMode)
   const [language, setLanguage] = useState(props.currentLanguage)
+  let orientationStyle = {
+    horizontal: "flex flex-row justify-between",
+    vertical: "flex flex-col items-center gap-2",
+  }
   return (
-    <div className="mt-6 flex flex-row justify-between">
+    <div className={cn(orientationStyle[orientation])}>
       <HawaRadio
+        width={width}
         defaultValue={language}
         onChangeTab={(e) => {
           props.handleLanguage(e)
@@ -25,6 +37,7 @@ export const InterfaceSettings: FC<TypographyTypes> = (props) => {
         ]}
       />
       <HawaRadio
+        width={width}
         defaultValue={color}
         onChangeTab={(e) => {
           props.handleColorMode(e)

package/src/elements/Label.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/elements/Popover.tsx

@@ -1,16 +1,35 @@
-"use client"
-
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
 import { cn } from "../util"
 
+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 rounded 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 dark:shadow-dark" ,
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
 interface PopoverProps {
   trigger: React.ReactNode
   children: React.ReactNode
   className?: string
   align?: "start" | "center" | "end"
   sideOffset?: number
+  side?: "top" | "right" | "bottom" | "left"
 }
 
 const Popover: React.FC<PopoverProps> = ({
@@ -18,33 +37,20 @@ const Popover: React.FC<PopoverProps> = ({
   children,
   className,
   align = "center",
+  side,
   sideOffset = 4,
 }) => (
   <PopoverPrimitive.Root>
     <PopoverPrimitive.Trigger>{trigger}</PopoverPrimitive.Trigger>
-    <PopoverContent className={className} align={align} sideOffset={sideOffset}>
+    <PopoverContent
+      side={side}
+      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/Select.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 // import { ChevronDown } from "lucide-react"

package/src/elements/Tooltip.tsx

@@ -1,111 +1,6 @@
-// "use client"
-
-// import * as React from "react"
-// import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "../util"
-
-// const TooltipProvider = TooltipPrimitive.Provider
-
-// const TooltipRoot = TooltipPrimitive.Root
-
-// const TooltipTrigger = TooltipPrimitive.Trigger
-
-// const TooltipContent = React.forwardRef<
-//   React.ElementRef<typeof TooltipPrimitive.Content>,
-//   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
-// >(({ className, sideOffset = 4, ...props }, ref) => (
-//   <TooltipPrimitive.Content
-//     ref={ref}
-//     sideOffset={sideOffset}
-//     className={cn(
-//       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
-//   />
-// ))
-// TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-// interface TooltipProps {
-//   // TooltipProvider props
-//   delayDurationProvider?: number
-//   skipDelayDuration?: number
-//   disableHoverableContentProvider?: boolean
-
-//   // TooltipRoot props
-//   defaultOpen?: boolean
-//   open?: boolean
-//   onOpenChange?: (open: boolean) => void
-//   delayDurationRoot?: number
-//   disableHoverableContentRoot?: boolean
-
-//   // TooltipContent props
-//   content: React.ReactNode
-//   asChild?: boolean
-//   ariaLabel?: string
-//   onEscapeKeyDown?: () => void
-//   onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void
-//   forceMount?: boolean
-//   side?: "top" | "right" | "bottom" | "left"
-//   sideOffset?: number
-//   align?: "start" | "center" | "end"
-//   alignOffset?: number
-//   avoidCollisions?: boolean
-//   collisionBoundary?: Element | Element[];
-//   collisionPadding?: number
-//   arrowPadding?: number
-//   sticky?: "partial" | "always";
-//   hideWhenDetached?: boolean
-
-//   children: React.ReactNode
-// }
-
-// const Tooltip: React.FC<TooltipProps> = (props) => {
-//   const { content, children, ...rest } = props
-//   return (
-//     <TooltipProvider
-//       delayDuration={props.delayDurationProvider}
-//       skipDelayDuration={props.skipDelayDuration}
-//       disableHoverableContent={props.disableHoverableContentProvider}
-//     >
-//       <TooltipRoot
-//         defaultOpen={props.defaultOpen}
-//         open={props.open}
-//         onOpenChange={props.onOpenChange}
-//         delayDuration={props.delayDurationRoot}
-//         disableHoverableContent={props.disableHoverableContentRoot}
-//       >
-//         <TooltipTrigger asChild>{children}</TooltipTrigger>
-//         <TooltipContent
-//           asChild={props.asChild}
-//           aria-label={props.ariaLabel}
-//           onEscapeKeyDown={props.onEscapeKeyDown}
-//           onPointerDownOutside={props.onPointerDownOutside}
-//         //   forceMount={props.forceMount}
-//           side={props.side}
-
-//           sideOffset={props.sideOffset}
-//           align={props.align}
-//           alignOffset={props.alignOffset}
-//           avoidCollisions={props.avoidCollisions}
-//           collisionBoundary={props.collisionBoundary}
-//           collisionPadding={props.collisionPadding}
-//           arrowPadding={props.arrowPadding}
-//           sticky={props.sticky}
-//           hideWhenDetached={props.hideWhenDetached}
-//           {...rest}
-//         >
-//           {content}
-//         </TooltipContent>
-//       </TooltipRoot>
-//     </TooltipProvider>
-//   )
-// }
-
-// your-tooltip.jsx
 import React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "../util"
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,