@tecsinapse/cortex-react 1.3.0-beta.0 → 1.3.0-beta.10

package/dist/cjs/components/Calendar.js

@@ -4,6 +4,8 @@ var React = require('react');
 var useCalendar = require('../hooks/useCalendar.js');
 require('@internationalized/date');
 require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/CalendarCell.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useCalendarCell = require('../hooks/useCalendarCell.js');
+require('@floating-ui/react');
 var calendarCell = require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');

package/dist/cjs/components/CalendarGrid.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useCalendarGrid = require('../hooks/useCalendarGrid.js');
+require('@floating-ui/react');
 var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
 var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');
 

package/dist/cjs/components/DateField.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var date = require('@internationalized/date');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var DateSegment = require('./DateSegment.js');
+
+const DateField = (props) => {
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useDateFieldState({
+    ...props,
+    createCalendar: date.createCalendar,
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useDateField(
+    { "aria-label": "date-field" },
+    state,
+    ref
+  );
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { key: i, segment, state })));
+};
+
+exports.DateField = DateField;

package/dist/cjs/components/DatePickerInput.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var utils = require('./utils.js');
+var useDatePickerInput = require('../hooks/useDatePickerInput.js');
+require('@floating-ui/react');
+var Calendar = require('./Calendar.js');
+var DateField = require('./DateField.js');
+var DatePickerInputBase = require('./DatePickerInputBase.js');
+
+const DatePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase.DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+      DateField.DateField,
+      {
+        ...fieldProps,
+        onChange: (value2) => {
+          state.setDateValue(value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    Calendar.Calendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateValue(utils.dateToCalendarDate(value2));
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+exports.DatePickerInput = DatePickerInput;

package/dist/cjs/components/DatePickerInputBase.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var lia = require('react-icons/lia');
+var index = require('./Input/index.js');
+
+const DatePickerInputBase = ({
+  children,
+  variants,
+  label,
+  onClickCalendar
+}) => {
+  return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
+    lia.LiaCalendar,
+    {
+      className: "cursor-pointer mt-centi",
+      onClick: onClickCalendar,
+      "data-testid": "date-picker-input-base-calendar"
+    }
+  )));
+};
+
+exports.DatePickerInputBase = DatePickerInputBase;

package/dist/cjs/components/DateRangePickerInput.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var utils = require('./utils.js');
+var useDateRangePickerInput = require('../hooks/useDateRangePickerInput.js');
+require('@floating-ui/react');
+var DateField = require('./DateField.js');
+var DatePickerInputBase = require('./DatePickerInputBase.js');
+var RangeCalendar = require('./RangeCalendar.js');
+
+const DateRangePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput.useDateRangePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase.DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
+      DateField.DateField,
+      {
+        ...startFieldProps,
+        value: utils.dateToCalendarDate(value?.start),
+        onChange: (value2) => {
+          state.setDate("start", value2);
+          state.close();
+        }
+      }
+    ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
+      DateField.DateField,
+      {
+        ...endFieldProps,
+        value: utils.dateToCalendarDate(value?.end),
+        onChange: (value2) => {
+          state.setDate("end", value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    RangeCalendar.RangeCalendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateRange({
+          start: utils.dateToCalendarDate(value2.start),
+          end: utils.dateToCalendarDate(value2.end)
+        });
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+exports.DateRangePickerInput = DateRangePickerInput;

package/dist/cjs/components/DateSegment.js

@@ -6,7 +6,15 @@ var reactAria = require('react-aria');
 const DateSegment = ({ segment, state }) => {
   const ref = React.useRef(null);
   const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ React.createElement("div", { ...segmentProps, ref, className: "text-sub accent-transparent" }, segment.text);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...segmentProps,
+      ref,
+      className: "focus:outline-none focus:bg-secondary-light"
+    },
+    segment.text
+  );
 };
 
 exports.DateSegment = DateSegment;

package/dist/cjs/components/Divider.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+
+const Divider = ({ className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("hr", { ...rest, className: cortexCore.divider({ className }) });
+};
+
+exports.Divider = Divider;

package/dist/cjs/components/Input/Box.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+var React = require('react');
+
+const InputBox = React.forwardRef(
+  ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        id: id ?? name,
+        name,
+        placeholder: placeholder ?? " ",
+        className: clsx(cortexCore.inputBox(placeholder, label, className)),
+        ...rest,
+        ref,
+        "data-testid": "input-box"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder }),
+        "data-testid": "input-label"
+      },
+      label
+    ));
+  }
+);
+
+exports.InputBox = InputBox;

package/dist/cjs/components/Input/Face.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+var React = require('react');
+
+const getValidChildren = (children) => {
+  return React.Children.toArray(children).filter(
+    (el) => React.isValidElement(el)
+  );
+};
+const InputFace = React.forwardRef(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = getValidChildren(children).map((el) => {
+      return React.cloneElement(el, { ...el.props, variants });
+    });
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "input-face",
+        ...rest,
+        className: clsx(cortexCore.input(variants), className),
+        ref
+      },
+      clones
+    );
+  }
+);
+
+exports.InputFace = InputFace;

package/dist/cjs/components/Input/Left.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const InputLeft = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+  }
+);
+
+exports.InputLeft = InputLeft;

package/dist/cjs/components/Input/Right.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const InputRight = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+  }
+);
+
+exports.InputRight = InputRight;

package/dist/cjs/components/Input/Root.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var Box = require('./Box.js');
+var Face = require('./Face.js');
+
+const InputRoot = React.forwardRef(
+  ({ variants, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(Face.InputFace, { variants, className }, /* @__PURE__ */ React.createElement(Box.InputBox, { ...rest, ref }));
+  }
+);
+
+exports.InputRoot = InputRoot;

package/dist/cjs/components/Input/Search.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var io5 = require('react-icons/io5');
+var index = require('./index.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useDebouncedState = require('../../hooks/useDebouncedState.js');
+require('@floating-ui/react');
+
+const InputSearch = React.forwardRef(
+  ({ bounceTimeout = 1e3, variants, className, onChange, ...rest }, ref) => {
+    const [bouncedTextEvent, setBouncedTextEvent] = React.useState();
+    const [searchInputEvent, setSearchInputEvent] = useDebouncedState.useDebouncedState(void 0, setBouncedTextEvent, bounceTimeout);
+    React.useEffect(() => {
+      if (onChange && searchInputEvent) {
+        onChange(searchInputEvent);
+      }
+    }, [bouncedTextEvent]);
+    return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, className }, /* @__PURE__ */ React.createElement(index.Input.Left, null, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(index.Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
+  }
+);
+
+exports.InputSearch = InputSearch;

package/dist/cjs/components/Input/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var Box = require('./Box.js');
+var Face = require('./Face.js');
+var Left = require('./Left.js');
+var Right = require('./Right.js');
+var Root = require('./Root.js');
+var Search = require('./Search.js');
+
+const Input = {
+  Root: Root.InputRoot,
+  Face: Face.InputFace,
+  Box: Box.InputBox,
+  Left: Left.InputLeft,
+  Right: Right.InputRight,
+  Search: Search.InputSearch
+};
+
+exports.Input = Input;

package/dist/cjs/components/Masonry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const Masonry = ({ children, columns }) => {
+  const getColumns = () => {
+    const columnsArray = Array.from(
+      { length: columns },
+      () => []
+    );
+    React.Children.forEach(children, (child, index) => {
+      if (child && React.isValidElement(child)) {
+        columnsArray[index % columns].push(child);
+      }
+    });
+    return columnsArray;
+  };
+  const renderColumn = (column) => {
+    return column.map((item, index) => {
+      return /* @__PURE__ */ React.createElement("div", { className: index > 0 ? "mt-deca" : "mt-0", key: index }, item);
+    });
+  };
+  const renderColumns = () => {
+    return getColumns().map((column, index) => {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            "width-0 flex flex-1 flex-col content-start",
+            index > 0 ? "ml-deca" : "ml-0"
+          ),
+          key: index
+        },
+        renderColumn(column)
+      );
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "masonry",
+      className: "box-border flex w-full flex-row content-stretch justify-center"
+    },
+    renderColumns()
+  );
+};
+
+module.exports = Masonry;

package/dist/cjs/components/Menubar/Categories.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+var Masonry = require('../Masonry.js');
+
+const Categories = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4 }, children);
+};
+
+module.exports = Categories;

package/dist/cjs/components/Menubar/Category.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+
+const Category = ({ title, options, render }) => {
+  const { text, hr, container } = menubar.category();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: text() }, title), /* @__PURE__ */ React.createElement("hr", { className: hr() }), /* @__PURE__ */ React.createElement("div", { className: container() }, options.map((i) => render(i))));
+};
+
+module.exports = Category;

package/dist/cjs/components/Menubar/Dropdown.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var clsx = require('clsx');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const { dropdown } = menubar.menubar();
+const Dropdown = ({ children, ...rest }) => {
+  const [show] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(dropdown(), menubar.animate({ show })),
+      "data-testid": "dropdown-menubar",
+      ...rest
+    },
+    children
+  );
+};
+
+module.exports = Dropdown;

package/dist/cjs/components/Menubar/DropdownRoot.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+var MostUsedList = require('./MostUsedList.js');
+
+const DropdownRoot = ({
+  mostUsed,
+  options,
+  labelMostUsed
+}) => {
+  const hasMostUsed = mostUsed && (mostUsed ?? []).length > 0;
+  return /* @__PURE__ */ React.createElement(index.Menubar.Dropdown, null, hasMostUsed ? /* @__PURE__ */ React.createElement(index.Menubar.MostUsed, { label: labelMostUsed }, /* @__PURE__ */ React.createElement(MostUsedList, { mostUsed })) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement(index.Menubar.Categories, null, options.map((item, index$1) => /* @__PURE__ */ React.createElement(
+    index.Menubar.Category,
+    {
+      key: `${item.title}-${index$1}`,
+      title: item.title,
+      options: item.items,
+      render: (prop) => {
+        const { title, items, ...rest } = prop;
+        return /* @__PURE__ */ React.createElement(
+          index.Menubar.Item,
+          {
+            key: prop.title,
+            ...rest,
+            subItems: items ?? [],
+            renderSubItems: ({ title: title2, ...rest2 }) => {
+              return /* @__PURE__ */ React.createElement(index.Menubar.SubItem, { key: title2, ...rest2 }, title2);
+            }
+          },
+          title
+        );
+      }
+    }
+  ))));
+};
+
+module.exports = DropdownRoot;

package/dist/cjs/components/Menubar/Header.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var menubar = require('../../styles/menubar.js');
+var Button = require('../Button.js');
+var io5 = require('react-icons/io5');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const { root } = menubar.menubar();
+const Header = ({ children, className, ...rest }) => {
+  const [show, setShow] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx.clsx(root(), className),
+      "data-testid": "header-menubar",
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(Button.Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React.createElement(io5.IoMenu, { size: 16 })),
+    children
+  );
+};
+
+module.exports = Header;

package/dist/cjs/components/Menubar/IconControlSubItem.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var io5 = require('react-icons/io5');
+
+const { icon } = menubar.item();
+const IconControlSubItem = ({
+  show,
+  setShow
+}) => {
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setShow(!show);
+  };
+  return /* @__PURE__ */ React.createElement("div", { onClick: handleClick, "data-testid": "icon-sub-item-menubar" }, show ? /* @__PURE__ */ React.createElement(io5.IoCaretUpCircleOutline, { className: icon() }) : /* @__PURE__ */ React.createElement(io5.IoCaretDownCircleOutline, { className: icon() }));
+};
+
+module.exports = IconControlSubItem;

package/dist/cjs/components/Menubar/Item.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var IconControlSubItem = require('./IconControlSubItem.js');
+var menubar = require('../../styles/menubar.js');
+var ItemLink = require('./ItemLink.js');
+
+const { container, text } = menubar.item();
+const Item = ({
+  children,
+  subItems,
+  renderSubItems,
+  className,
+  href,
+  ...rest
+}) => {
+  const [showSubItem, setShowSubItem] = React.useState(false);
+  const hasSubItems = (subItems ?? []).length > 0;
+  return /* @__PURE__ */ React.createElement(ItemLink, { href }, /* @__PURE__ */ React.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React.createElement(React.Fragment, null)), showSubItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+module.exports = Item;

package/dist/cjs/components/Menubar/ItemLink.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+
+const ItemLink = ({ href, children, classNameAnchor }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, href ? /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: classNameAnchor
+    },
+    children
+  ) : children);
+};
+
+module.exports = ItemLink;

package/dist/cjs/components/Menubar/Left.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+
+const { left } = menubar.menubar();
+const Left = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
+};
+
+module.exports = Left;

package/dist/cjs/components/Menubar/MostUsed.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+
+const { container, label: labelClass, containerList } = menubar.mostUsed();
+const MostUsed = ({ label, children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React.createElement("div", { className: containerList() }, children));
+};
+
+module.exports = MostUsed;

package/dist/cjs/components/Menubar/MostUsedItem.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var Card = require('../Card.js');
+var ItemLink = require('./ItemLink.js');
+
+const {
+  title: titleClass,
+  category: categoryClass,
+  container
+} = menubar.mostUsedItem();
+const MostUsedItem = ({
+  title,
+  category,
+  href,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React.createElement(
+    Card.Card,
+    {
+      ...rest,
+      "data-testid": "most-used-item-menubar",
+      className: container()
+    },
+    /* @__PURE__ */ React.createElement("p", { className: titleClass() }, title),
+    /* @__PURE__ */ React.createElement("p", { className: categoryClass() }, category)
+  ));
+};
+
+module.exports = MostUsedItem;