@sikka/hawa 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -109,6 +109,7 @@
     "@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-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",

package/src/elements/HawaTabs.tsx

@@ -69,6 +69,7 @@ export const HawaTabs: FC<TabsTypes> = ({
     >
       <ul
         className={clsx(
+          "w-full border-primary",
           marginBetween
             ? orientation === "vertical"
               ? "mb-0"
@@ -78,8 +79,9 @@ export const HawaTabs: FC<TabsTypes> = ({
             ? "ml-" + marginBetween
             : "mr-" + marginBetween,
           tabsStyle[orientation],
-          "border-primary",
-
+          orientation === "horizontal"
+            ? "grid grid-cols-3 gap-1 sm:flex  sm:flex-row sm:gap-0 "
+            : "",
           // orientation === "vertical"
           //   ? direction === "rtl"
           //     ? "rounded-none rounded-r border-l-2"
@@ -92,7 +94,7 @@ export const HawaTabs: FC<TabsTypes> = ({
             ? direction === "rtl"
               ? "rounded-none rounded-r border-l-2"
               : "rounded-none rounded-l border-r-2"
-            : "border-b-2"
+            : "border-b-0 sm:border-b-2"
         )}
       >
         {props.options?.map((opt: any, o) => (
@@ -104,7 +106,7 @@ export const HawaTabs: FC<TabsTypes> = ({
                 props?.onChangeTab(opt)
               }}
               className={clsx(
-                "flex flex-row items-center gap-2",
+                "flex flex-row items-center gap-2 ",
                 opt.value === selectedOption
                   ? // props.options[selectedOption].value === opt.value
                     [
@@ -117,7 +119,7 @@ export const HawaTabs: FC<TabsTypes> = ({
                   ? "rounded"
                   : orientation === "vertical"
                   ? "rounded rounded-bl-none rounded-tl-none"
-                  : "rounded rounded-bl-none rounded-br-none"
+                  : "rounded sm:rounded-b-none"
                 // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >

package/src/elements/Tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "../util"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex select-none items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/elements/index.ts

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

package/src/layout/AppLayout.tsx

@@ -64,23 +64,41 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
   clickedItem,
   ...props
 }) => {
-  const [openSideMenu, setOpenSideMenu] = useState(false)
-  const [openSubItem, setOpenSubitem] = useState("")
+  let closeDrawerWidth = 56
+  let openDrawerWidth = 200
+  let drawerSizeStyle = {
+    opened: {
+      sm: "100",
+      md: openDrawerWidth,
+      lg: "250",
+    },
+    closed: {
+      sm: closeDrawerWidth,
+      md: closeDrawerWidth,
+      lg: closeDrawerWidth,
+    },
+  }
+
+  const ref = useRef(null)
+  const isRTL = direction === "rtl"
+
   const [openedSidebarItem, setOpenedSidebarItem] = useState("")
-  const { isOpen, onClose, onOpen } = useDiscloser(false)
   const [selectedItem, setSelectedItem] = useState(
     currentPage ? currentPage : []
   )
 
-  const [keepOpen, setKeepOpen] = useState(false)
-  const ref = useRef(null)
-  const isRTL = direction === "rtl"
   let size
   if (typeof window !== "undefined") {
     size = useBreakpoint()
   } else {
     size = 1200
   }
+  const [keepOpen, setKeepOpen] = useState(size > 600 ? true : false)
+  const [openSideMenu, setOpenSideMenu] = useState(size > 600 ? true : false)
+
+  let drawerSizeCondition =
+    size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0
+
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
@@ -93,29 +111,13 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
     }
   }, [keepOpen])
 
-  let drawerDefaultStyle =
-    "fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-card transition-all"
-  //The width of the drawer when closed
-  let closeDrawerWidth = 56
-  //The width of the drawer when opened
-  let openDrawerWidth = 200
-  let drawerSizeStyle = {
-    opened: {
-      sm: "100",
-      md: openDrawerWidth,
-      lg: "250",
-    },
-    closed: {
-      sm: "56",
-      md: "56",
-      lg: "56",
-    },
-  }
-
-  let drawerSizeCondition =
-    size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0
   return (
     <div className="fixed left-0">
+      {/*
+       * ----------------------------------------------------------------------------------------------------
+       * Top Bar
+       * ----------------------------------------------------------------------------------------------------
+       */}
       {props.topBar && (
         <div
           className={clsx(
@@ -212,7 +214,18 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
               direction={isRTL ? "rtl" : "ltr"}
               trigger={
                 <div className="relative h-8 w-8  cursor-pointer overflow-clip rounded ring-1 ring-primary/30 dark:bg-gray-600">
-                  <AvatarIcon />
+                  <svg
+                    aria-aria-label="Avatar Icon"
+                    className="absolute -left-1 h-10 w-10 text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
                 </div>
               }
               items={props.profileMenuItems}
@@ -433,17 +446,3 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
     </div>
   )
 }
-
-const AvatarIcon = () => (
-  <svg
-    className="absolute -left-1 h-10 w-10 text-gray-400"
-    fill="currentColor"
-    viewBox="0 0 20 20"
-  >
-    <path
-      fillRule="evenodd"
-      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-      clipRule="evenodd"
-    ></path>
-  </svg>
-)

package/src/layout/Sidebar.tsx

@@ -156,7 +156,7 @@ const SidebarItem: React.FC<{
   const getSelectedStyle = (value: string, index: number) => {
     return isSelected && isSelected[index] === value
       ? "bg-primary text-primary-foreground  cursor-default"
-      : "hover:bg-primary/30"
+      : "hover:bg-primary/10"
   }
   if (item.subitems) {
     return (

package/src/styles.css

@@ -1464,6 +1464,9 @@ video {
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -2990,9 +2993,6 @@ body {
 .hover\:bg-primary\/20:hover {
   background-color: hsl(var(--primary) / 0.2);
 }
-.hover\:bg-primary\/30:hover {
-  background-color: hsl(var(--primary) / 0.3);
-}
 .hover\:bg-primary\/40:hover {
   background-color: hsl(var(--primary) / 0.4);
 }
@@ -3315,6 +3315,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
 }
+.data-\[state\=active\]\:bg-primary[data-state=active] {
+  background-color: hsl(var(--primary));
+}
 .data-\[state\=open\]\:bg-accent[data-state=open] {
   background-color: hsl(var(--accent));
 }
@@ -3334,6 +3337,9 @@ body {
   --tw-text-opacity: 1;
   color: hsl(255 65.0% 99.4% / var(--tw-text-opacity));
 }
+.data-\[state\=active\]\:text-primary-foreground[data-state=active] {
+  color: hsl(var(--primary-foreground));
+}
 .data-\[state\=open\]\:text-violet-11[data-state=open] {
   --tw-text-opacity: 1;
   color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
@@ -3341,6 +3347,11 @@ body {
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
+.data-\[state\=active\]\:shadow-sm[data-state=active] {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .data-\[state\=open\]\:animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;
@@ -3683,15 +3694,36 @@ body {
 }
 @media (min-width: 640px) {
 
+  .sm\:flex {
+    display: flex;
+  }
+
   .sm\:columns-2 {
     -moz-columns: 2;
          columns: 2;
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:gap-0 {
+    gap: 0px;
+  }
+
   .sm\:gap-8 {
     gap: 2rem;
   }
 
+  .sm\:rounded-b-none {
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .sm\:border-b-2 {
+    border-bottom-width: 2px;
+  }
+
   .sm\:p-20 {
     padding: 5rem;
   }