@sikka/hawa 0.24.3-next → 0.24.5-next

package/dist/sidebar/index.mjs

@@ -0,0 +1,298 @@
+import {
+  cn
+} from "../chunk-TE3BKEXL.mjs";
+
+// components/layout/sidebar/Sidebar.tsx
+import * as React2 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+
+// components/elements/chip/Chip.tsx
+import React from "react";
+var Chip = React.forwardRef(
+  ({
+    label,
+    size = "normal",
+    icon,
+    color,
+    radius = "inherit",
+    dotType,
+    ...rest
+  }, ref) => {
+    let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
+    let radiusStyles = {
+      inherit: " hawa-rounded",
+      full: "hawa-rounded-full",
+      none: "hawa-rounded-none"
+    };
+    let sizeStyles = {
+      small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
+      normal: "hawa-h-fit hawa-text-xs",
+      large: "hawa-text-base"
+    };
+    let dotStyles = {
+      small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
+      normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
+      large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
+    };
+    let dotTypeStyles = {
+      available: "hawa-bg-green-500",
+      unavailable: "hawa-bg-red-500"
+    };
+    let colorStyles = {
+      green: "hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800",
+      blue: "hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100",
+      red: "hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100",
+      yellow: "hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800",
+      orange: "hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100",
+      purple: "hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100",
+      cyan: "hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800",
+      hyper: "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
+      oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
+    };
+    if (label) {
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          ...rest,
+          ref,
+          className: cn(
+            defaultStyles,
+            sizeStyles[size],
+            radiusStyles[radius],
+            color ? colorStyles[color] : "hawa-border hawa-bg-none"
+          )
+        },
+        dotType && /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: cn(dotStyles[size], dotTypeStyles[dotType])
+          }
+        ),
+        icon && icon,
+        label
+      );
+    } else {
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          ...rest,
+          ref,
+          className: cn(
+            "hawa-h-2 hawa-w-2 hawa-rounded-full",
+            color ? colorStyles[color] : "hawa-border hawa-bg-none"
+          )
+        }
+      );
+    }
+  }
+);
+
+// components/layout/sidebar/Sidebar.tsx
+var Accordion = AccordionPrimitive.Root;
+var triggerStyles = "hawa-flex hawa-flex-1 hawa-items-center hawa-duration-75 hawa-select-none hawa-cursor-pointer  hawa-rounded hawa-justify-between hawa-p-2 hawa-px-3 hawa-font-medium hawa-transition-all  [&[data-state=open]>svg]:hawa--rotate-90";
+var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React2.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React2.createElement(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(triggerStyles, className),
+    ...props
+  },
+  children,
+  showArrow && /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      "aria-label": "Chevron Right Icon",
+      stroke: "currentColor",
+      fill: "currentColor",
+      viewBox: "0 0 16 16",
+      height: "1em",
+      width: "1em",
+      className: "hawa-icon hawa-shrink-0 hawa-rotate-90 hawa-transition-transform hawa-duration-200"
+    },
+    /* @__PURE__ */ React2.createElement("path", { 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" })
+  )
+)));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "hawa-overflow-hidden hawa-text-sm hawa-transition-all data-[state=closed]:hawa-animate-accordion-up data-[state=open]:hawa-animate-accordion-down",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React2.createElement("div", null, children)
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var SidebarGroup = ({
+  title,
+  items,
+  selectedItem,
+  openedItem,
+  setOpenedItem,
+  onItemClick,
+  onSubItemClick,
+  direction,
+  isOpen
+}) => {
+  return /* @__PURE__ */ React2.createElement("div", { className: "hawa-m-2" }, title && /* @__PURE__ */ React2.createElement("h3", { className: "hawa-mb-1 hawa-font-bold" }, title), /* @__PURE__ */ React2.createElement("ul", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React2.createElement(
+    Accordion,
+    {
+      value: openedItem,
+      type: "single",
+      onValueChange: (e) => {
+        setOpenedItem(e);
+      },
+      collapsible: true,
+      className: "hawa-flex hawa-flex-col hawa-gap-1"
+    },
+    items.map((item, idx) => /* @__PURE__ */ React2.createElement(
+      SidebarItem,
+      {
+        isOpen,
+        selectedItem,
+        key: idx,
+        direction,
+        item,
+        onItemClick,
+        onSubItemClick
+      }
+    ))
+  )));
+};
+var SidebarItem = ({
+  item,
+  onItemClick,
+  onSubItemClick,
+  direction,
+  isOpen = true,
+  ...props
+}) => {
+  const getSelectedStyle = (value) => {
+    return props.selectedItem === value ? "hawa-bg-primary/90 hawa-text-primary-foreground  hawa-cursor-default" : "hover:hawa-bg-primary/10";
+  };
+  if (item.subitems) {
+    return /* @__PURE__ */ React2.createElement(
+      AccordionItem,
+      {
+        value: item.value,
+        className: "hawa-overflow-x-clip ",
+        dir: direction
+      },
+      /* @__PURE__ */ React2.createElement(
+        AccordionTrigger,
+        {
+          className: cn(
+            "hawa-w-full hawa-overflow-x-clip",
+            props.selectedItem === item.value ? "hawa-cursor-default hawa-bg-primary  hawa-text-primary-foreground" : "hawa-h-10 hover:hawa-bg-primary/10",
+            item.subitems && item.subitems.some(
+              (subitem) => props.selectedItem === subitem.value
+            ) ? "hawa-bg-primary/80 hawa-text-primary-foreground hover:hawa-bg-primary/80" : ""
+          ),
+          showArrow: isOpen
+        },
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-flex hawa-h-fit hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2"
+            )
+          },
+          item.icon && item.icon,
+          /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              className: cn(
+                "hawa-transition-all ",
+                isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
+              )
+            },
+            item.label
+          )
+        )
+      ),
+      item.subitems && /* @__PURE__ */ React2.createElement(AccordionContent, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-flex hawa-h-full hawa-flex-col hawa-gap-2 hawa-bg-foreground/5 hawa-p-1"
+          )
+        },
+        item.subitems.map((subitem, idx) => /* @__PURE__ */ React2.createElement(
+          "a",
+          {
+            href: subitem.slug,
+            key: idx,
+            onMouseDown: (e) => {
+              if (subitem.onMouseDown) {
+                subitem.onMouseDown(e);
+              }
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              if (subitem.onClick) {
+                subitem.onClick(e);
+              }
+              if (onSubItemClick) {
+                onSubItemClick([item.value, subitem.value]);
+              }
+            },
+            className: cn(
+              "hawa-flex hawa-h-full hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-2 hawa-overflow-x-clip  hawa-whitespace-nowrap hawa-rounded hawa-p-2 hawa-transition-all",
+              // bg-foreground/10
+              getSelectedStyle(subitem.value)
+            )
+          },
+          subitem.icon && subitem.icon,
+          subitem.label
+        ))
+      ))
+    );
+  } else {
+    return /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        href: item.slug,
+        dir: direction,
+        onMouseDown: (e) => {
+          if (item.onMouseDown) {
+            item.onMouseDown(e);
+          }
+        },
+        onClick: (e) => {
+          if (item.onClick) {
+            item.onClick(e);
+          }
+          if (onItemClick) {
+            onItemClick([item.value]);
+          }
+        },
+        className: cn(
+          triggerStyles,
+          getSelectedStyle(item.value),
+          "hawa-overflow-x-clip "
+        )
+      },
+      /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, item.icon && item.icon, /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          className: cn(
+            "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-whitespace-nowrap hawa-transition-all",
+            isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
+          )
+        },
+        item.label,
+        " ",
+        item.badge && /* @__PURE__ */ React2.createElement(Chip, { label: item.badge.label, color: "hyper", size: "small" })
+      ))
+    );
+  }
+};
+export {
+  SidebarGroup,
+  SidebarItem
+};

package/dist/simpleTable/index.d.mts

@@ -1,6 +1,7 @@
-import * as react from 'react';
+import * as React from 'react';
 import { RowData, ColumnDef } from '@tanstack/react-table';
-import { D as DirectionType } from '../commonTypes-_11epZYh.mjs';
+
+type DirectionType = "rtl" | "ltr";
 
 type DataProps = {};
 type SimpleTableProps = {
@@ -25,6 +26,6 @@ declare module "@tanstack/table-core" {
         padding?: "condensed" | "default" | "noPadding";
     }
 }
-declare const SimpleTable: react.FC<SimpleTableProps>;
+declare const SimpleTable: React.FC<SimpleTableProps>;
 
 export { SimpleTable };

package/dist/simpleTable/index.d.ts

@@ -1,6 +1,7 @@
-import * as react from 'react';
+import * as React from 'react';
 import { RowData, ColumnDef } from '@tanstack/react-table';
-import { D as DirectionType } from '../commonTypes-_11epZYh.js';
+
+type DirectionType = "rtl" | "ltr";
 
 type DataProps = {};
 type SimpleTableProps = {
@@ -25,6 +26,6 @@ declare module "@tanstack/table-core" {
         padding?: "condensed" | "default" | "noPadding";
     }
 }
-declare const SimpleTable: react.FC<SimpleTableProps>;
+declare const SimpleTable: React.FC<SimpleTableProps>;
 
 export { SimpleTable };

package/dist/simpleTable/index.mjs

@@ -1,45 +1,21 @@
+import {
+  Skeleton
+} from "../chunk-ND4BWUKH.mjs";
 import {
   cn
 } from "../chunk-TE3BKEXL.mjs";
 
 // components/elements/simpleTable/SimpleTable.tsx
-import * as React3 from "react";
+import * as React2 from "react";
 import {
   flexRender,
   getCoreRowModel,
   useReactTable
 } from "@tanstack/react-table";
 
-// components/elements/skeleton/Skeleton.tsx
-import React from "react";
-function Skeleton({
-  className,
-  content,
-  animation = "pulse",
-  ...props
-}) {
-  const animationStyles = {
-    none: "hawa-rounded hawa-bg-muted",
-    pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
-    shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
-  };
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        animationStyles[animation],
-        content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
-        className
-      ),
-      ...props
-    },
-    content && content
-  );
-}
-
 // components/elements/table/Table.tsx
-import * as React2 from "react";
-var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { className: "hawa-relative hawa-w-full  hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React2.createElement(
+import * as React from "react";
+var Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("div", { className: "hawa-relative hawa-w-full  hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React.createElement(
   "table",
   {
     ref,
@@ -48,7 +24,7 @@ var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 )));
 Table.displayName = "Table";
-var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "thead",
   {
     ref,
@@ -57,8 +33,8 @@ var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableHead = React2.forwardRef(
-  ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+var TableHead = React.forwardRef(
+  ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React.createElement(
     "th",
     {
       ref,
@@ -77,9 +53,9 @@ var TableHead = React2.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableBody = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "tfoot",
   {
     ref,
@@ -91,7 +67,7 @@ var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "tr",
   {
     ref,
@@ -105,14 +81,14 @@ var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableCell = React2.forwardRef(
+var TableCell = React.forwardRef(
   ({ className, enablePadding = true, padding = "default", ...props }, ref) => {
     let paddingStyles = {
       condensed: "hawa-p-0 hawa-px-4",
       default: "hawa-p-4",
       noPadding: "hawa-p-0"
     };
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React.createElement(
       "td",
       {
         ref,
@@ -134,7 +110,7 @@ var TableCell = React2.forwardRef(
   }
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "caption",
   {
     ref,
@@ -160,7 +136,7 @@ var SimpleTable = ({
     columns,
     getCoreRowModel: getCoreRowModel()
   });
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "div",
     {
       className: cn(
@@ -168,8 +144,8 @@ var SimpleTable = ({
         classNames
       )
     },
-    props.isLoading ? /* @__PURE__ */ React3.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React3.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React3.createElement(Table, null, table.getAllColumns().length > 0 && /* @__PURE__ */ React3.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React3.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ React3.createElement(
+    props.isLoading ? /* @__PURE__ */ React2.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React2.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React2.createElement(Table, null, table.getAllColumns().length > 0 && /* @__PURE__ */ React2.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React2.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ React2.createElement(
         TableHead,
         {
           condensed: props.condensed,
@@ -181,7 +157,7 @@ var SimpleTable = ({
           header.getContext()
         )
       );
-    })))), /* @__PURE__ */ React3.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React3.createElement(
+    })))), /* @__PURE__ */ React2.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React2.createElement(
       TableRow,
       {
         key: row.id,
@@ -189,7 +165,7 @@ var SimpleTable = ({
       },
       row.getVisibleCells().map((cell) => {
         var _a2;
-        return /* @__PURE__ */ React3.createElement(
+        return /* @__PURE__ */ React2.createElement(
           TableCell,
           {
             dir: props.direction,
@@ -202,7 +178,7 @@ var SimpleTable = ({
           )
         );
       })
-    )) : /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(
+    )) : /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(
       TableCell,
       {
         colSpan: columns.length,

package/dist/skeleton/index.d.mts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
-interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
     className?: string;
     animation?: "none" | "pulse" | "shimmer";
     content?: any;
 }
-declare function Skeleton({ className, content, animation, ...props }: SkeletonProps): React.JSX.Element;
+declare function Skeleton({ className, content, animation, ...props }: SkeletonProps): React__default.JSX.Element;
 
 export { Skeleton };

package/dist/skeleton/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
-interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
     className?: string;
     animation?: "none" | "pulse" | "shimmer";
     content?: any;
 }
-declare function Skeleton({ className, content, animation, ...props }: SkeletonProps): React.JSX.Element;
+declare function Skeleton({ className, content, animation, ...props }: SkeletonProps): React__default.JSX.Element;
 
 export { Skeleton };

package/dist/skeleton/index.mjs

@@ -1,33 +1,7 @@
 import {
-  cn
-} from "../chunk-TE3BKEXL.mjs";
-
-// components/elements/skeleton/Skeleton.tsx
-import React from "react";
-function Skeleton({
-  className,
-  content,
-  animation = "pulse",
-  ...props
-}) {
-  const animationStyles = {
-    none: "hawa-rounded hawa-bg-muted",
-    pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
-    shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
-  };
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        animationStyles[animation],
-        content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
-        className
-      ),
-      ...props
-    },
-    content && content
-  );
-}
+  Skeleton
+} from "../chunk-ND4BWUKH.mjs";
+import "../chunk-TE3BKEXL.mjs";
 export {
   Skeleton
 };