@sikka/hawa 0.24.3-next → 0.24.5-next

package/dist/sidebar/index.d.mts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { D as DirectionType } from '../commonTypes-ko_NGEoT.mjs';
+
+type ChipColors = "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
+
+type AppSidebarItemProps = {
+    value: string;
+    slug?: string;
+    label: string;
+    badge?: {
+        label: string;
+        color: ChipColors;
+    };
+    icon?: any;
+    subitems?: SubItem[];
+    onClick?: (e: React.MouseEvent) => void;
+    onMouseDown?: (e: React.MouseEvent) => void;
+};
+type SubItem = {
+    value: string;
+    label: string;
+    slug?: string;
+    icon?: any;
+    onMouseDown?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
+};
+interface SidebarGroupProps {
+    title?: string;
+    items: AppSidebarItemProps[];
+    openedItem?: any;
+    setOpenedItem?: any;
+    selectedItem?: any;
+    isOpen?: boolean;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    direction?: DirectionType;
+}
+declare const SidebarGroup: React.FC<SidebarGroupProps>;
+declare const SidebarItem: React.FC<{
+    item: AppSidebarItemProps;
+    selectedItem?: any;
+    direction?: DirectionType;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    isOpen?: boolean;
+}>;
+
+export { type AppSidebarItemProps, SidebarGroup, SidebarItem };

package/dist/sidebar/index.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { D as DirectionType } from '../commonTypes-ko_NGEoT.js';
+
+type ChipColors = "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
+
+type AppSidebarItemProps = {
+    value: string;
+    slug?: string;
+    label: string;
+    badge?: {
+        label: string;
+        color: ChipColors;
+    };
+    icon?: any;
+    subitems?: SubItem[];
+    onClick?: (e: React.MouseEvent) => void;
+    onMouseDown?: (e: React.MouseEvent) => void;
+};
+type SubItem = {
+    value: string;
+    label: string;
+    slug?: string;
+    icon?: any;
+    onMouseDown?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
+};
+interface SidebarGroupProps {
+    title?: string;
+    items: AppSidebarItemProps[];
+    openedItem?: any;
+    setOpenedItem?: any;
+    selectedItem?: any;
+    isOpen?: boolean;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    direction?: DirectionType;
+}
+declare const SidebarGroup: React.FC<SidebarGroupProps>;
+declare const SidebarItem: React.FC<{
+    item: AppSidebarItemProps;
+    selectedItem?: any;
+    direction?: DirectionType;
+    onItemClick?: (value: string[]) => void;
+    onSubItemClick?: (values: string[]) => void;
+    isOpen?: boolean;
+}>;
+
+export { type AppSidebarItemProps, SidebarGroup, SidebarItem };

package/dist/sidebar/index.js

@@ -0,0 +1,341 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/layout/sidebar/index.ts
+var sidebar_exports = {};
+__export(sidebar_exports, {
+  SidebarGroup: () => SidebarGroup,
+  SidebarItem: () => SidebarItem
+});
+module.exports = __toCommonJS(sidebar_exports);
+
+// components/layout/sidebar/Sidebar.tsx
+var React2 = __toESM(require("react"));
+var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
+
+// components/elements/chip/Chip.tsx
+var import_react = __toESM(require("react"));
+
+// components/util.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// components/elements/chip/Chip.tsx
+var Chip = import_react.default.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__ */ import_react.default.createElement(
+        "span",
+        {
+          ...rest,
+          ref,
+          className: cn(
+            defaultStyles,
+            sizeStyles[size],
+            radiusStyles[radius],
+            color ? colorStyles[color] : "hawa-border hawa-bg-none"
+          )
+        },
+        dotType && /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: cn(dotStyles[size], dotTypeStyles[dotType])
+          }
+        ),
+        icon && icon,
+        label
+      );
+    } else {
+      return /* @__PURE__ */ import_react.default.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" })
+      ))
+    );
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarGroup,
+  SidebarItem
+});