@tecsinapse/cortex-react 1.13.1 → 1.13.3-beta.0

package/dist/cjs/components/TimePicker/TimeFieldInput.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('../Input/index.js');
+var lia = require('react-icons/lia');
+var timeFieldInput = require('../../styles/time-field-input.js');
+var io = require('react-icons/io');
+var TimeField = require('./TimeField.js');
+
+const { icon } = timeFieldInput.timePickerInputBase();
+const TimeFieldInput = ({
+  variants,
+  label,
+  disabled = false,
+  value,
+  onChange,
+  onToggle,
+  onClean,
+  hourCycle,
+  granularity
+}) => {
+  const showCloseIcon = React.useMemo(() => {
+    const hasTime = value != void 0;
+    return hasTime;
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index.Input.Face,
+    {
+      variants,
+      className: "flex flex-row justify-between",
+      "data-testid": "time-field-input",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cortexCore.labelStyle({}), children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.inputBox("", label), children: /* @__PURE__ */ jsxRuntime.jsx(
+          TimeField.TimeField,
+          {
+            onClickTime: onToggle,
+            disabled,
+            value,
+            onChange,
+            hourCycle,
+            granularity
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(index.Input.Right, { className: "h-full justify-center", children: showCloseIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "flex bg-transparent items-center",
+            onClick: onClean,
+            disabled,
+            "data-testid": "time-picker-input-base-clean-button",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              io.IoMdClose,
+              {
+                className: icon({ disabled }),
+                "data-testid": "time-picker-input-base-clean-icon"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "flex bg-transparent items-center",
+            onClick: onToggle,
+            disabled,
+            "data-testid": "time-picker-input-base-calendar-button",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lia.LiaClock,
+              {
+                className: icon({ disabled }),
+                "data-testid": "time-picker-input-base-calendar-icon"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+exports.TimeFieldInput = TimeFieldInput;

package/dist/cjs/components/TimePicker/TimePickerInput.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('react');
+require('../../provider/MenubarContext.js');
+require('../../provider/SnackbarProvider.js');
+require('../../provider/CalendarProvider.js');
+require('../Popover/Context.js');
+require('react-dropzone');
+require('uuid');
+require('@floating-ui/react');
+require('currency.js');
+var useTimePickerInput = require('../../hooks/useTimePickerInput.js');
+var index = require('../Popover/index.js');
+var Content = require('../Content.js');
+var TimeFieldInput = require('./TimeFieldInput.js');
+var TimePickerSelector = require('./TimePickerSelector.js');
+
+const TimePickerInputWithPopover = (props) => {
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    hourCycle = 24,
+    disabled = false,
+    granularity = "minute",
+    minuteInterval = 1,
+    hourLabel,
+    minuteLabel,
+    dayPeriodLabel
+  } = props;
+  const {
+    handleTogglePopover,
+    handleTimeFieldChange,
+    handleChangeTimeOnSelector,
+    popoverTime
+  } = useTimePickerInput.useTimePickerInput({
+    value,
+    onChange,
+    minuteInterval
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TimeFieldInput.TimeFieldInput,
+      {
+        variants,
+        label,
+        disabled,
+        value,
+        onChange: handleTimeFieldChange,
+        onClean: () => handleTimeFieldChange(null),
+        onToggle: handleTogglePopover,
+        hourCycle,
+        granularity
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.Popover.Content,
+      {
+        className: "bg-white shadow-default border-none p-deca flex flex-col",
+        initialFocus: -1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          TimePickerSelector.TimePickerSelector,
+          {
+            onChangeTime: handleChangeTimeOnSelector,
+            value: popoverTime,
+            hourCycle,
+            minuteInterval,
+            onPressOkButton: handleTogglePopover,
+            hourLabel,
+            minuteLabel,
+            dayPeriodLabel
+          }
+        )
+      }
+    )
+  ] });
+};
+const TimePickerInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Root, { placement: "bottom-start", trigger: "click", children: /* @__PURE__ */ jsxRuntime.jsx(Content.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(TimePickerInputWithPopover, { ...props }) }) });
+
+exports.TimePickerInput = TimePickerInput;

package/dist/cjs/components/TimePicker/TimePickerSelector.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var date = require('@internationalized/date');
+var React = require('react');
+var ScrollableDigitSelector = require('../ScrollableDigitSelector.js');
+var clsx = require('clsx');
+var Button = require('../Button.js');
+var md = require('react-icons/md');
+
+const dayPeriodStyle = "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer";
+const TimePickerSelector = ({
+  value,
+  hourCycle,
+  minuteInterval,
+  onPressOkButton,
+  onChangeTime,
+  hourLabel = "Hour",
+  minuteLabel = "Minute",
+  dayPeriodLabel = "Day Period"
+}) => {
+  const handleHourChange = (hour) => {
+    let newHour = hour;
+    if (hourCycle === 12) {
+      if (isPM && newHour < 12) {
+        newHour += 12;
+      } else if (!isPM && newHour >= 12) {
+        newHour -= 12;
+      }
+    }
+    const newTime = new date.Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const handleMinuteChange = (minute) => {
+    const newTime = new date.Time(value.hour, minute, value.second);
+    onChangeTime(newTime);
+  };
+  const handlePeriodChange = (isPM2) => {
+    if (value === void 0) return;
+    let newHour = value.hour;
+    if (hourCycle === 12) {
+      if (isPM2 && newHour < 12) {
+        newHour += 12;
+      } else if (!isPM2 && newHour >= 12) {
+        newHour -= 12;
+      }
+    }
+    const newTime = new date.Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const isPM = value && value?.hour >= 12;
+  const displayHour = React.useMemo(() => {
+    if (value === void 0) return 0;
+    return hourCycle === 12 ? value.hour === 0 ? 12 : value.hour > 12 ? value.hour - 12 : value.hour : value.hour;
+  }, [value, hourCycle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        className: "p-micro",
+        variants: {
+          size: "circle",
+          variant: "outline"
+        },
+        onClick: onPressOkButton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-x-deca max-h-[300px] overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold text-center", children: hourLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollableDigitSelector.ScrollableDigitSelector,
+          {
+            value: displayHour,
+            onChange: handleHourChange,
+            min: hourCycle === 12 ? 1 : 0,
+            max: hourCycle === 12 ? 12 : 23
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold text-center", children: minuteLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollableDigitSelector.ScrollableDigitSelector,
+          {
+            value: value?.minute ?? 0,
+            onChange: handleMinuteChange,
+            min: 0,
+            max: 59,
+            step: minuteInterval
+          }
+        )
+      ] }),
+      hourCycle === 12 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold text-center", children: dayPeriodLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-micro p-micro overflow-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: () => handlePeriodChange(false),
+              className: "flex justify-center",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: clsx(
+                    dayPeriodStyle,
+                    !isPM && "bg-primary-medium text-white"
+                  ),
+                  children: "AM"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: () => handlePeriodChange(true),
+              className: "flex justify-center",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: clsx(
+                    dayPeriodStyle,
+                    isPM && "bg-primary-medium text-white"
+                  ),
+                  children: "PM"
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+exports.TimePickerSelector = TimePickerSelector;

package/dist/cjs/components/Toggle.js

@@ -1,25 +1,29 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 
 const Toggle = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: "flex flex-row items-center gap-x-centi",
-      "data-testid": "toggle-div"
-    },
-    /* @__PURE__ */ React.createElement("label", { className: cortexCore.styleLabelElement() }, /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "checkbox",
-        className: cortexCore.styleInputElement(),
-        ref,
-        "data-testid": "toggle-input",
-        ...props
-      }
-    ), /* @__PURE__ */ React.createElement("div", { className: cortexCore.toggle() }))
+      "data-testid": "toggle-div",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cortexCore.styleLabelElement(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: cortexCore.styleInputElement(),
+            ref,
+            "data-testid": "toggle-input",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.toggle() })
+      ] })
+    }
   );
 });
 

package/dist/cjs/components/Tooltip.js

@@ -1,11 +1,15 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@floating-ui/react');
 var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var react = require('../utils/react.js');
+require('../provider/MenubarContext.js');
+require('../provider/SnackbarProvider.js');
+require('../provider/CalendarProvider.js');
 require('./Popover/Context.js');
 require('react-dropzone');
 require('uuid');
@@ -36,25 +40,30 @@ const Tooltip = React.forwardRef(
       floatingStyles,
       getFloatingProps
     } = useFloatingElement.useFloatingElement({ placement, arrowRef, trigger, delay });
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, react.cloneWithProps(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,
-          ...style,
-          ...floatingStyles
-        },
-        ...getFloatingProps()
-      },
-      text,
-      /* @__PURE__ */ React.createElement(react$1.FloatingArrow, { ref: arrowRef, context, fill: "black" })
-    ) : null);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      react.cloneWithProps(children, triggerProps),
+      isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "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,
+            ...style,
+            ...floatingStyles
+          },
+          ...getFloatingProps(),
+          children: [
+            text,
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingArrow, { ref: arrowRef, context, fill: "black" })
+          ]
+        }
+      ) : null
+    ] });
   }
 );
 

package/dist/cjs/components/Uploader/Dropzone.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var hi2 = require('react-icons/hi2');
 var cortexCore = require('@tecsinapse/cortex-core');
 var clsx = require('clsx');
@@ -13,7 +13,7 @@ const Dropzone = ({
   buttonText = "Select File"
 }) => {
   const { getRootProps, getInputProps, isDragActive, isFileLimitReached } = dropzoneProps;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...getRootProps(),
@@ -22,10 +22,19 @@ const Dropzone = ({
         {
           "border-success-medium bg-gray-100": isDragActive
         }
-      )
-    },
-    /* @__PURE__ */ React.createElement("input", { ...getInputProps() }),
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center text-center items-center gap-deca" }, /* @__PURE__ */ React.createElement(hi2.HiOutlineCloudArrowUp, { className: "text-primary-medium", size: 35 }), /* @__PURE__ */ React.createElement("div", { className: "gap-mili" }, /* @__PURE__ */ React.createElement("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone" }, selectFileText), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-secondary-medium" }, dropText)), isFileLimitReached ? /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { text: "Voc\xEA s\xF3 pode selecionar um \xFAnico arquivo." }, /* @__PURE__ */ React.createElement("button", { disabled: true, className: clsx(cortexCore.button(), "cursor-not-allowed") }, buttonText)) : /* @__PURE__ */ React.createElement("button", { className: cortexCore.button() }, buttonText))
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center text-center items-center gap-deca", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(hi2.HiOutlineCloudArrowUp, { className: "text-primary-medium", size: 35 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-mili", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone", children: selectFileText }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-medium", children: dropText })
+          ] }),
+          isFileLimitReached ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { text: "Voc\xEA s\xF3 pode selecionar um \xFAnico arquivo.", children: /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: true, className: clsx(cortexCore.button(), "cursor-not-allowed"), children: buttonText }) }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: cortexCore.button(), children: buttonText })
+        ] })
+      ]
+    }
   );
 };
 

package/dist/cjs/components/Uploader/Files.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Upload = require('./Upload.js');
 
 const Files = ({
@@ -8,7 +8,13 @@ const Files = ({
   onDelete,
   uploadProgressText = "Upload(s) in progress"
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-mili items-center mb-deca" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white" }, `${files.length}`), /* @__PURE__ */ React.createElement("h2", { className: "text-md font-semibold", "data-testid": "upload-progress" }, uploadProgressText)), files.map((file, index) => /* @__PURE__ */ React.createElement(Upload.File, { key: file.uid, file, index, onDelete })));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white", children: `${files.length}` }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })
+    ] }),
+    files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Upload.File, { file, index, onDelete }, file.uid))
+  ] });
 };
 
 exports.Files = Files;

package/dist/cjs/components/Uploader/Modal.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var md = require('react-icons/md');
 var cortexCore = require('@tecsinapse/cortex-core');
 var Modal$1 = require('../Modal.js');
@@ -13,23 +13,29 @@ const Modal = ({
   title = "File Upload"
 }) => {
   return reactDom.createPortal(
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       Modal$1.Modal,
       {
         open,
         onClose,
-        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto"
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-between mb-deca" }, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("h2", { className: "text-deca font-semibold" }, title), /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: cortexCore.button({ size: "square" }),
-          onClick: onClose,
-          "data-testid": "close-button"
-        },
-        /* @__PURE__ */ React.createElement(md.MdClose, { size: 20 })
-      )),
-      children
+        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-deca font-semibold", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: cortexCore.button({ size: "square" }),
+                onClick: onClose,
+                "data-testid": "close-button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, { size: 20 })
+              }
+            )
+          ] }),
+          children
+        ]
+      }
     ),
     document.body
   );

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Modal = require('./Modal.js');
 var Dropzone = require('./Dropzone.js');
 var Files = require('./Files.js');
@@ -17,22 +17,25 @@ const Root = ({
   uploadProgressText,
   titleModal
 }) => {
-  return /* @__PURE__ */ React.createElement(Modal.Modal, { onClose, open, title: titleModal }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row" }, /* @__PURE__ */ React.createElement(
-    Dropzone.Dropzone,
-    {
-      dropzoneProps,
-      selectFileText,
-      dropText,
-      buttonText
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Files.Files,
-    {
-      files,
-      onDelete,
-      uploadProgressText
-    }
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal.Modal, { onClose, open, title: titleModal, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Dropzone.Dropzone,
+      {
+        dropzoneProps,
+        selectFileText,
+        dropText,
+        buttonText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Files.Files,
+      {
+        files,
+        onDelete,
+        uploadProgressText
+      }
+    )
+  ] }) });
 };
 
 exports.Root = Root;