@woobee/ui 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React16, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback, useMemo } from 'react';
+import React18, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 
@@ -466,7 +466,7 @@ function CSSTransitionComponent({
         removeClasses(nodeRef.current, [...leaveToClasses, ...leaveClasses]);
         onExited(nodeRef.current);
       },
-      children: React16.cloneElement(children, {
+      children: React18.cloneElement(children, {
         ref: (node) => {
           nodeRef.current = node;
           const childRef = children.ref;
@@ -1052,6 +1052,268 @@ function InlinePrompt({
     )
   ] }) });
 }
+function DefaultLink({ href, className, children }) {
+  return /* @__PURE__ */ jsx("a", { href, className, children });
+}
+function Breadcrumb({
+  links,
+  onBack,
+  linkComponent: LinkComponent = DefaultLink
+}) {
+  function clickBack(e) {
+    e.preventDefault();
+    if (onBack) {
+      onBack();
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "pb-5 px-4 sm:px-6 lg:px-8", children: [
+    onBack && /* @__PURE__ */ jsx("nav", { className: "sm:hidden", children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        onClick: clickBack,
+        className: "flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          "Back"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("nav", { className: "hidden sm:flex items-center text-sm leading-5 font-medium", children: links && links.length > 0 && links.map((link, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
+      /* @__PURE__ */ jsx(LinkComponent, { href: link.href, className: "text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out", children: link.name }),
+      index !== links.length - 1 && /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+          clipRule: "evenodd"
+        }
+      ) })
+    ] }, `breadcrumb-link-${index}-${link.name}`)) })
+  ] }) });
+}
+function DefaultLink2({ href, className, children, onClick }) {
+  return /* @__PURE__ */ jsx("a", { href, className, onClick, children });
+}
+function TabItemComponent({
+  allowRedirect,
+  item,
+  label,
+  isActive,
+  onSelect,
+  linkComponent: LinkComponent = DefaultLink2
+}) {
+  function handleTabSelect() {
+    onSelect(item);
+  }
+  if (!!allowRedirect && !!item.link) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href: item.link,
+        className: classNames({
+          "whitespace-no-wrap -mb-px cursor-pointer border-b-2 py-2 px-3 text-center text-sm font-medium leading-5 tracking-tight focus:outline-none sm:px-5 sm:text-base sm:tracking-normal": true,
+          "border-primary-500 text-primary-500 focus:border-primary-500 focus:text-primary-500": isActive,
+          "text-cool-gray-500 hover:text-cool-gray-700 focus:text-cool-gray-700 border-transparent hover:border-transparent focus:border-transparent": !isActive
+        }),
+        onClick: handleTabSelect,
+        children: item[label]
+      }
+    );
+  }
+  return null;
+}
+function Tab({
+  items,
+  label,
+  value,
+  defaultValue,
+  allowRedirect,
+  onChange,
+  rightContent,
+  linkComponent
+}) {
+  const [selected, setSelected] = useState(defaultValue);
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+  function handleSelect(item) {
+    if (typeof onChange === "function") {
+      onChange(item);
+    }
+    setSelected(item && item.id || null);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex w-full  items-stretch pb-1 sm:pb-2", children: [
+    /* @__PURE__ */ jsx("nav", { className: "border-cool-gray-200 -mb-px flex w-full items-end border-b", children: items.map((item) => /* @__PURE__ */ jsx(
+      TabItemComponent,
+      {
+        item,
+        label,
+        isActive: selected === item.id,
+        allowRedirect,
+        onSelect: handleSelect,
+        linkComponent
+      },
+      item.id
+    )) }),
+    rightContent && /* @__PURE__ */ jsx("nav", { className: "border-cool-gray-200 -mb-px flex flex flex-shrink-0 items-center border-b px-4", children: rightContent })
+  ] });
+}
+function DefaultLink3({ href, children }) {
+  return /* @__PURE__ */ jsx("a", { href, children });
+}
+function ButtonItem({
+  className,
+  active,
+  direction,
+  iconPosition,
+  button,
+  onChange,
+  onChangeGroup,
+  currentPath,
+  navLinks,
+  linkComponent: LinkComponent = DefaultLink3
+}) {
+  let currentButton = { ...button };
+  if (active && navLinks && currentPath) {
+    const navItem = navLinks.find((navLink) => navLink.url === currentPath);
+    if (navItem) {
+      currentButton.label = navItem.label;
+      currentButton.image = /* @__PURE__ */ jsx("div", { className: "w-5 h-5", children: navItem.icon });
+      currentButton.icon = void 0;
+    }
+  }
+  const buttonContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames({
+        "p-3 rounded-xl mx-auto text-charcoal-700/70 dark:text-charcoal-50/50 flex justify-center cursor-pointer": true,
+        "w-full": direction === "vertical",
+        "w-full overflow-hidden": direction === "horizontal",
+        "!text-charcoal-700 dark:!text-primary-500 bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
+        ...classNameObject(className)
+      }),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames({
+            "flex items-center justify-center": true,
+            "flex-col md:flex-row md:space-x-1.5": !!currentButton.image,
+            "gap-2": !currentButton.image && !!currentButton.icon,
+            "flex-row-reverse": !currentButton.image && iconPosition === "back",
+            "flex-row": !currentButton.image && iconPosition !== "back"
+          }),
+          children: [
+            currentButton.image && /* @__PURE__ */ jsxs("div", { className: "relative mb-0.5 md:mb-0", children: [
+              typeof currentButton.image === "string" && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: currentButton.image,
+                  alt: currentButton.label,
+                  className: "w-6 h-6 object-cover rounded-full pointer-events-none"
+                }
+              ),
+              typeof currentButton.image === "object" && currentButton.image
+            ] }),
+            !currentButton.image && currentButton.icon && /* @__PURE__ */ jsx("span", { className: "text-sm", children: currentButton.icon }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames({
+                  "text-xs font-thin tracking-tight": true,
+                  "!font-normal": active
+                }),
+                children: /* @__PURE__ */ jsx("div", { className: "line-clamp-1", children: currentButton.label })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  if (currentButton.subgroups) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => onChangeGroup(button),
+        children: buttonContent
+      }
+    );
+  }
+  if (currentButton.url) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href: currentButton.url, children: buttonContent });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: () => onChange && onChange(button.id),
+      children: buttonContent
+    }
+  );
+}
+function ButtonGroup({
+  buttons = [],
+  direction = "horizontal",
+  iconPosition = "front",
+  activeId,
+  onChange,
+  className,
+  itemClassName,
+  currentPath,
+  navLinks,
+  linkComponent,
+  subgroupModal
+}) {
+  const [selectedGroup, setSelectedGroup] = useState(null);
+  function handleCloseModal() {
+    setSelectedGroup(null);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames({
+        "gap-2 scrollbar-hide": true,
+        "w-full": direction === "vertical",
+        "grid grid-cols-5 w-full items-center": direction === "horizontal",
+        ...classNameObject(className)
+      }),
+      children: [
+        buttons.map((button) => {
+          const isActive = activeId === button.id;
+          return /* @__PURE__ */ jsx(
+            ButtonItem,
+            {
+              className: itemClassName,
+              button,
+              direction,
+              iconPosition,
+              onChange,
+              onChangeGroup: (group) => setSelectedGroup(group),
+              active: isActive,
+              currentPath,
+              navLinks,
+              linkComponent
+            },
+            button.id
+          );
+        }),
+        subgroupModal && subgroupModal({
+          open: !!selectedGroup,
+          label: selectedGroup?.label,
+          items: selectedGroup?.subgroups,
+          onClose: handleCloseModal,
+          onChange
+        })
+      ]
+    }
+  );
+}
 function H1({ className, children }) {
   return /* @__PURE__ */ jsx(
     "h1",
@@ -2516,9 +2778,9 @@ function Dragger({
     }
     dispatch({ dragging: false });
   }
-  const derivedItems = !!items && React16.cloneElement(children, {
+  const derivedItems = !!items && React18.cloneElement(children, {
     children: items.map((grandChild, index) => {
-      return React16.cloneElement(grandChild, {
+      return React18.cloneElement(grandChild, {
         id: (records[index] || {}).id,
         draggable: true,
         className: classNames({
@@ -2535,9 +2797,9 @@ function Dragger({
       });
     })
   });
-  const derivedDisplayItems = !!displayItems && React16.cloneElement(children, {
+  const derivedDisplayItems = !!displayItems && React18.cloneElement(children, {
     children: displayItems.map((grandChild, index) => {
-      return React16.cloneElement(grandChild, {
+      return React18.cloneElement(grandChild, {
         draggable: true,
         className: classNames({
           ...classNameObject(grandChild.props.className),
@@ -3136,7 +3398,7 @@ function DataTableRow({ index, selected, label, description, additionalDescripti
               "!text-left": dataItem.align === "left",
               "align-middle": vertical === "middle"
             }),
-            children: typeof dataItem.data[index] === "string" || React16.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
+            children: typeof dataItem.data[index] === "string" || React18.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
           },
           `${dataIndex}-${index}`
         ))
@@ -3273,7 +3535,7 @@ function DataTable({
                 backgroundColor: `${colors[dataIndex]}`,
                 color: bestTextColorForBg(colors[dataIndex])
               } : void 0,
-              children: typeof total[dataIndex] === "string" || React16.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
+              children: typeof total[dataIndex] === "string" || React18.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
             },
             `${dataIndex}-total`
           ))
@@ -3685,6 +3947,6 @@ function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
   );
 }
 
-export { B, Button, CheckboxList, ConfirmationBox, Coverflow, DataGrid, Dragger, Drawer, ExcelTable, H1, H2, H3, H4, InlinePrompt, Input_default as Input, Label, Loading, Modal, ModalContext, ModalProvider, NoData, Popover, PopoverContext, PopoverProvider, Select_default as Select, SelectInput_default as SelectInput, SortIcon, Table, Tabs, Tag, TagGroup, TagInput, Tbody, Td, Textarea_default as Textarea, Th, Thead, ThemeContext, ThemeProvider, ThemeToggle, Toggle_default as Toggle, Tr, Transition, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };
+export { B, Breadcrumb, Button, ButtonGroup, CheckboxList, ConfirmationBox, Coverflow, DataGrid, Dragger, Drawer, ExcelTable, H1, H2, H3, H4, InlinePrompt, Input_default as Input, Label, Loading, Modal, ModalContext, ModalProvider, NoData, Popover, PopoverContext, PopoverProvider, Select_default as Select, SelectInput_default as SelectInput, SortIcon, Tab, Table, Tabs, Tag, TagGroup, TagInput, Tbody, Td, Textarea_default as Textarea, Th, Thead, ThemeContext, ThemeProvider, ThemeToggle, Toggle_default as Toggle, Tr, Transition, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map