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

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+require('clsx');
+require('@internationalized/date');
+require('../Badge.js');
+require('../BaseSnackbar.js');
+require('react-icons/md');
+require('../Card.js');
+require('../Button.js');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('../CalendarCell.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/fa');
+require('react-icons/lia');
+require('../Input/Box.js');
+require('../Input/Face.js');
+require('../Input/Left.js');
+require('../Input/Right.js');
+require('../Input/Root.js');
+require('../Input/Search.js');
+require('react-icons/io');
+require('../GroupButton.js');
+require('../Hint.js');
+var index = require('./index.js');
+require('../Modal.js');
+require('../Popover/Context.js');
+require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+require('../../styles/progressBar.js');
+require('../Select/GroupedOptions.js');
+require('../Select/context.js');
+require('../Select/Trigger.js');
+require('../Tag.js');
+require('../TextArea.js');
+require('../Toggle.js');
+require('../Tooltip.js');
+
+const MostUsedList = ({ mostUsed }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (mostUsed ?? []).map((item, index$1) => {
+    const { title, category, ...rest } = item;
+    if (index$1 > 3)
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${title}-${category}` });
+    return /* @__PURE__ */ React.createElement(
+      index.Menubar.MostUsedItem,
+      {
+        key: `${title}-${category}`,
+        title,
+        category,
+        ...rest
+      }
+    );
+  }));
+};
+
+module.exports = MostUsedList;

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

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

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const Root = ({ children, ...rest }) => {
+  return /* @__PURE__ */ React.createElement(MenubarProvider.MenubarProvider, null, /* @__PURE__ */ React.createElement("div", { ...rest }, children));
+};
+
+module.exports = Root;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var index = require('../Input/index.js');
+var clsx = require('clsx');
+var menubar = require('../../styles/menubar.js');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const Search = (props) => {
+  const [show] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    index.Input.Search,
+    {
+      ...props,
+      className: clsx("mr-tera flex-1", menubar.animate({ show }))
+    }
+  );
+};
+
+module.exports = Search;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var ItemLink = require('./ItemLink.js');
+
+const { container } = menubar.subItem();
+const SubItem = ({ children, href, className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement(ItemLink, { href }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      "data-testid": "sub-item-menubar",
+      className: container({ className })
+    },
+    children
+  ));
+};
+
+module.exports = SubItem;

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

@@ -0,0 +1,33 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Left = require('./Left.js');
+var Search = require('./Search.js');
+var Right = require('./Right.js');
+var Dropdown = require('./Dropdown.js');
+var MostUsed = require('./MostUsed.js');
+var MostUsedItem = require('./MostUsedItem.js');
+var Header = require('./Header.js');
+var Category = require('./Category.js');
+var Item = require('./Item.js');
+var Categories = require('./Categories.js');
+var SubItem = require('./SubItem.js');
+var DropdownRoot = require('./DropdownRoot.js');
+
+const Menubar = {
+  Root,
+  Header,
+  HeaderLeft: Left,
+  Search,
+  HeaderRight: Right,
+  Dropdown,
+  MostUsed,
+  MostUsedItem,
+  Category,
+  Categories,
+  Item,
+  SubItem,
+  DropdownRoot
+};
+
+exports.Menubar = Menubar;

package/dist/cjs/components/Popover/Content.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var Context = require('./Context.js');
+
+const PopoverContent = ({
+  children,
+  className
+}) => {
+  const { isOpen, x, y, strategy, floatingStyles, refs } = Context.usePopoverContext();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: clsx(
+        "border border-gray-200 bg-black  p-4 rounded-md shadow-lg z-50",
+        className
+      ),
+      style: {
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        ...floatingStyles
+      }
+    },
+    children
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+exports.PopoverContent = PopoverContent;

package/dist/cjs/components/Popover/Context.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+const Context = React.createContext(void 0);
+const usePopoverContext = () => {
+  const context = React.useContext(Context);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+
+exports.Context = Context;
+exports.usePopoverContext = usePopoverContext;

package/dist/cjs/components/Popover/Provider.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
+var Context = require('./Context.js');
+
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
+};
+
+exports.PopoverProvider = PopoverProvider;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+
+const PopoverRoot = ({
+  children,
+  placement,
+  trigger
+}) => {
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, { placement, trigger }, children);
+};
+
+exports.PopoverRoot = PopoverRoot;

package/dist/cjs/components/Popover/Trigger.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var Context = require('./Context.js');
+
+const PopoverTrigger = ({ children }) => {
+  const { triggerProps } = Context.usePopoverContext();
+  return React.cloneElement(children, triggerProps);
+};
+
+exports.PopoverTrigger = PopoverTrigger;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+var Content = require('./Content.js');
+var Provider = require('./Provider.js');
+
+const Popover = {
+  Root: Root.PopoverRoot,
+  Trigger: Trigger.PopoverTrigger,
+  Content: Content.PopoverContent,
+  Provider: Provider.PopoverProvider
+};
+
+exports.Popover = Popover;

package/dist/cjs/components/RangeCalendar.js

@@ -1,44 +1,37 @@
 'use strict';
 
-var date = require('@internationalized/date');
 var React = require('react');
-var reactAria = require('react-aria');
-var reactStately = require('react-stately');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useRangeCalendar = require('../hooks/useRangeCalendar.js');
+require('@floating-ui/react');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 
 const RangeCalendar = ({ value, onChange }) => {
-  const { locale } = reactAria.useLocale();
-  const state = reactStately.useRangeCalendarState({
-    locale,
-    createCalendar: date.createCalendar,
-    defaultValue: {
-      start: new date.CalendarDate(
-        value.start.getFullYear(),
-        value.start.getMonth(),
-        value.start.getDate()
-      ),
-      end: new date.CalendarDate(
-        value.end.getFullYear(),
-        value.end.getMonth(),
-        value.end.getDate()
-      )
-    },
-    onChange: (value2) => onChange({
-      start: value2.start.toDate(date.getLocalTimeZone()),
-      end: value2.end.toDate(date.getLocalTimeZone())
-    })
+  const { calendarProps, state, title, ref } = useRangeCalendar.useRangeCalendar({
+    value,
+    onChange
   });
-  const ref = React.useRef(null);
-  const { calendarProps, title } = reactAria.useRangeCalendar({}, state, ref);
-  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
-    CalendarHeader.CalendarHeader,
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      onClickPrevButton: () => state.focusPreviousPage(),
-      onClickNextButton: () => state.focusNextPage(),
-      title
-    }
-  ), /* @__PURE__ */ React.createElement(CalendarGrid.CalendarGrid, { state }));
+      ...calendarProps,
+      className: "calendar",
+      ref,
+      "data-testid": "calendar-range-div"
+    },
+    /* @__PURE__ */ React.createElement(
+      CalendarHeader.CalendarHeader,
+      {
+        onClickPrevButton: () => state.focusPreviousPage(),
+        onClickNextButton: () => state.focusNextPage(),
+        title
+      }
+    ),
+    /* @__PURE__ */ React.createElement(CalendarGrid.CalendarGrid, { state })
+  );
 };
 
 exports.RangeCalendar = RangeCalendar;

package/dist/cjs/components/Select/Content.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+require('@floating-ui/react');
+var Context = require('../Popover/Context.js');
+var context = require('./context.js');
+
+const Content = ({
+  children,
+  keyExtractor,
+  labelExtractor,
+  value
+}) => {
+  const { setIsOpen } = Context.usePopoverContext();
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
+};
+
+module.exports = Content;

package/dist/cjs/components/Select/GroupedOptions.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+var Context = require('../Popover/Context.js');
+
+const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setIsOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: containerGrouped() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )))));
+};
+
+exports.SelectGroupedOptions = SelectGroupedOptions;

package/dist/cjs/components/Select/Option.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectOption = ({
+  onSelectOption,
+  option
+}) => {
+  const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => onSelectOption(option),
+      className: cortexCore.option({
+        selected: value && keyExtractor(value) === keyExtractor(option)
+      }),
+      role: "option"
+    },
+    labelExtractor(option)
+  );
+};
+
+exports.SelectOption = SelectOption;

package/dist/cjs/components/Select/Options.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var context = require('./context.js');
+var index = require('./index.js');
+var Context = require('../Popover/Context.js');
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setIsOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )));
+};
+
+exports.SelectOptions = SelectOptions;

package/dist/cjs/components/Select/Popover.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+var index = require('../Popover/index.js');
+
+const SelectPopover = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
+};
+
+exports.SelectPopover = SelectPopover;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var Content = require('./Content.js');
+var index = require('../Popover/index.js');
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, null, /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(
+    Content,
+    {
+      keyExtractor,
+      labelExtractor,
+      value
+    },
+    children
+  )));
+};
+
+exports.SelectRoot = SelectRoot;

package/dist/cjs/components/Select/Trigger.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var io5 = require('react-icons/io5');
+var context = require('./context.js');
+var index = require('../Popover/index.js');
+
+const { button } = cortexCore.selectVariants();
+const SelectTrigger = ({ label, disabled }) => {
+  const { value, labelExtractor } = React.useContext(context.SelectContext);
+  const placeholder = React.useMemo(
+    () => value ? labelExtractor(value) : label,
+    [label, value]
+  );
+  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button({ disabled }),
+      disabled,
+      role: "button"
+    },
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
+    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
+  ));
+};
+
+exports.SelectTrigger = SelectTrigger;

package/dist/cjs/components/Select/context.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+
+const SelectContext = React.createContext({
+  keyExtractor: () => "",
+  labelExtractor: () => ""
+});
+
+exports.SelectContext = SelectContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var GroupedOptions = require('./GroupedOptions.js');
+var Option = require('./Option.js');
+var Options = require('./Options.js');
+var Popover = require('./Popover.js');
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+
+const Select = {
+  Root: Root.SelectRoot,
+  Trigger: Trigger.SelectTrigger,
+  Popover: Popover.SelectPopover,
+  Options: Options.SelectOptions,
+  GroupedOptions: GroupedOptions.SelectGroupedOptions,
+  Option: Option.SelectOption
+};
+
+exports.Select = Select;

package/dist/cjs/components/Table.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const THead = ({
   children,
@@ -39,7 +39,7 @@ const Table = ({
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
+}) => /* @__PURE__ */ React.createElement("td", { "data-testid": "td", ...rest }, children);
 
 exports.TCell = TCell;
 exports.TFoot = TFoot;

package/dist/cjs/components/TimeFieldInput.js

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var Input = require('./Input.js');
+var index = require('./Input/index.js');
 var cortexCore = require('@tecsinapse/cortex-core');
 var TimeField = require('./TimeField.js');
 
 const TimeFieldInput = (props) => {
   const { onChange, value, label, variants } = props;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Input.Input.Face,
+    index.Input.Face,
     {
       variants,
       className: "flex flex-row",

package/dist/cjs/components/Tooltip.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@floating-ui/react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useFloatingLogic = require('../hooks/useFloatingLogic.js');
+
+const Tooltip = React.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      text,
+      trigger = "hover",
+      placement = "top",
+      width,
+      height
+    } = props;
+    const arrowRef = React.useRef(null);
+    const {
+      isOpen,
+      triggerProps,
+      x,
+      y,
+      strategy,
+      refs,
+      context,
+      floatingStyles
+    } = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: ref || refs.setFloating,
+        className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
+        style: {
+          position: strategy,
+          top: y ?? 0,
+          left: x ?? 0,
+          width,
+          height,
+          ...floatingStyles
+        }
+      },
+      text,
+      /* @__PURE__ */ React.createElement(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+exports.Tooltip = Tooltip;
+exports.default = Tooltip;