@tecsinapse/cortex-react 1.13.1 → 1.13.3

package/dist/cjs/components/Snackbar/BaseSnackbar.js

@@ -1,12 +1,13 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 
 const BaseSnackbar = React.forwardRef(
   (props, ref) => {
     const { children, show, variants } = props;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: cortexCore.snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: show ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.snackbar(variants), ref, "data-testid": "snackbar", children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
   }
 );
 

package/dist/cjs/components/Snackbar/DefaultSnack.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var io = require('react-icons/io');
 var BaseSnackbar = require('./BaseSnackbar.js');
 
@@ -8,20 +8,24 @@ const DefaultSnack = ({
   text,
   onDismiss,
   variants
-}) => /* @__PURE__ */ React.createElement(BaseSnackbar.BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React.createElement(
-  io.IoMdInformationCircleOutline,
-  {
-    className: "w-[20px] h-[20px] shrink-0",
-    "data-testid": "icon-info"
-  }
-), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
-  io.IoMdClose,
-  {
-    "data-testid": "icon-close",
-    onClick: onDismiss,
-    size: 24,
-    className: "cursor-pointer w-[20px] h-[20px] shrink-0"
-  }
-)));
+}) => /* @__PURE__ */ jsxRuntime.jsx(BaseSnackbar.BaseSnackbar, { show: true, variants: { intent: variants?.intent }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center flex-row gap-x-mili", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    io.IoMdInformationCircleOutline,
+    {
+      className: "w-[20px] h-[20px] shrink-0",
+      "data-testid": "icon-info"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { children: text }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    io.IoMdClose,
+    {
+      "data-testid": "icon-close",
+      onClick: onDismiss,
+      size: 24,
+      className: "cursor-pointer w-[20px] h-[20px] shrink-0"
+    }
+  )
+] }) });
 
 exports.DefaultSnack = DefaultSnack;

package/dist/cjs/components/Stepper/Node.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var stepNodeVariants = require('../../styles/stepNodeVariants.js');
 
 const Node = ({
@@ -24,7 +24,10 @@ const Node = ({
     disabled: rest.disabled,
     interactive
   });
-  return /* @__PURE__ */ React.createElement("button", { type: "button", className: container({ className }), ...rest }, children ? /* @__PURE__ */ React.createElement("div", { className: content() }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null), segmented ? /* @__PURE__ */ React.createElement("div", { className: separator() }) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: container({ className }), ...rest, children: [
+    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: content(), children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+    segmented ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: separator() }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+  ] });
 };
 
 exports.Node = Node;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Node = require('./Node.js');
 var clsx = require('clsx');
@@ -53,15 +54,15 @@ const Root = ({
     },
     [childrenCount, selectedNode, segmented, interactive]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: clsx(
         "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili",
         className
-      )
-    },
-    React.Children.map(children, renderNode)
+      ),
+      children: React.Children.map(children, renderNode)
+    }
   );
 };
 

package/dist/cjs/components/Table.js

@@ -1,45 +1,48 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
 const THead = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("thead", { className: cortexCore.tHead({ className }), "data-testid": "thead", ...rest }, children);
+}) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cortexCore.tHead({ className }), "data-testid": "thead", ...rest, children });
 const TRow = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow({ className }), "data-testid": "trow", ...rest }, children);
+}) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cortexCore.tRow({ className }), "data-testid": "trow", ...rest, children });
 const THeadCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
+}) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: cortexCore.tHeadCell({ className }), "data-testid": "thead-cell", ...rest, children });
 const TRowHeader = ({
   children
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
+}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cortexCore.tRow(), "data-testid": "trow-header", children }),
+  /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cortexCore.tRow(), children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 99, children: /* @__PURE__ */ jsxRuntime.jsx("hr", { className: cortexCore.hr() }) }) })
+] });
 const TCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { className: cortexCore.tCell({ className }), "data-testid": "tcell", ...rest }, children);
+}) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: cortexCore.tCell({ className }), "data-testid": "tcell", ...rest, children });
 const TFoot = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tfoot", { className: cortexCore.tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
+}) => /* @__PURE__ */ jsxRuntime.jsx("tfoot", { className: cortexCore.tFoot({ className }), "data-testid": "tfoot", ...rest, children });
 const Table = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("table", { className: cortexCore.tRoot({ className }), "data-testid": "table", ...rest }, children);
+}) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: cortexCore.tRoot({ className }), "data-testid": "table", ...rest, children });
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { "data-testid": "td", ...rest }, children);
+}) => /* @__PURE__ */ jsxRuntime.jsx("td", { "data-testid": "td", ...rest, children });
 
 exports.TCell = TCell;
 exports.TFoot = TFoot;

package/dist/cjs/components/Tag.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var lia = require('react-icons/lia');
@@ -9,15 +10,15 @@ const Close = ({
   className,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       ...rest,
       type: "button",
       onClick,
-      "data-testid": "tag-close-button"
-    },
-    /* @__PURE__ */ React.createElement(lia.LiaTimesSolid, { className })
+      "data-testid": "tag-close-button",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lia.LiaTimesSolid, { className })
+    }
   );
 };
 const Label = ({
@@ -25,11 +26,11 @@ const Label = ({
   className,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement("p", { className, ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className, ...rest, children });
 };
 const Face = React.forwardRef((props, ref) => {
   const { variants, className, intent, children, style, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...rest,
@@ -39,25 +40,27 @@ const Face = React.forwardRef((props, ref) => {
         className
       }),
       style,
-      ref
-    },
-    children
+      ref,
+      children
+    }
   );
 });
 const Root = React.forwardRef(
   (props, ref) => {
     const { label, variants, intent, className, onDismiss, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       Face,
       {
         ...rest,
         variants,
         intent,
         className,
-        ref
-      },
-      /* @__PURE__ */ React.createElement(Label, null, label),
-      onDismiss ? /* @__PURE__ */ React.createElement(Close, { onClick: onDismiss }) : null
+        ref,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
+          onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(Close, { onClick: onDismiss }) : null
+        ]
+      }
     );
   }
 );

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var clsx = require('clsx');
 var React = require('react');
@@ -15,32 +16,35 @@ const TextAreaBox = React.forwardRef(
     className,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
-      "textarea",
-      {
-        "data-testid": "textarea-box",
-        ref,
-        id: id ?? name,
-        name,
-        placeholder: placeholder ?? " ",
-        className: clsx(
-          cortexCore.inputBox(placeholder, label, className),
-          "resize-none mt-mili"
-        ),
-        rows,
-        ...rest
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "label",
-      {
-        htmlFor: id ?? name,
-        className: cortexCore.labelStyle({
-          intent: variants?.intent,
-          placeholder
-        })
-      },
-      label
-    ));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          "data-testid": "textarea-box",
+          ref,
+          id: id ?? name,
+          name,
+          placeholder: placeholder ?? " ",
+          className: clsx(
+            cortexCore.inputBox(placeholder, label, className),
+            "resize-none mt-mili"
+          ),
+          rows,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: id ?? name,
+          className: cortexCore.labelStyle({
+            intent: variants?.intent,
+            placeholder
+          }),
+          children: label
+        }
+      )
+    ] });
   }
 );
 

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var clsx = require('clsx');
 var React = require('react');
@@ -10,16 +11,16 @@ const TextAreaFace = React.forwardRef(
     const clones = utils.getValidChildren(children).map((el) => {
       return React.cloneElement(el, { ...el.props, variants });
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: clsx(cortexCore.input(variants), className),
         "data-testid": "textarea-face",
         id: "textarea-face",
-        ...rest
-      },
-      clones
+        ...rest,
+        children: clones
+      }
     );
   }
 );

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

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

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

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

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

@@ -1,11 +1,12 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Box = require('./Box.js');
 var Face = require('./Face.js');
 
 const TextAreaRoot = React.forwardRef(({ variants, className, ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(Face.TextAreaFace, { variants, className }, /* @__PURE__ */ React.createElement(Box.TextAreaBox, { ref, ...rest }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Face.TextAreaFace, { variants, className, children: /* @__PURE__ */ jsxRuntime.jsx(Box.TextAreaBox, { ref, ...rest }) });
 });
 
 exports.TextAreaRoot = TextAreaRoot;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var DateSegment = require('../DatePicker/DateSegment.js');
+
+const formatLiteralSegment = (text) => {
+  return text.includes(",") ? text.replace(/,/g, " ") : text;
+};
+const TimeField = ({ onClickTime, ...props }) => {
+  const { value } = props;
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useTimeFieldState({
+    ...props,
+    locale,
+    shouldForceLeadingZeros: true
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useTimeField(
+    { "aria-label": "time-field" },
+    state,
+    ref
+  );
+  const handleOnClickSegment = React.useCallback(
+    (segment) => {
+      if (!segment.isEditable || state.isDisabled) return;
+      if (["hour", "minute", "second", "dayPeriod"].includes(segment.type)) {
+        onClickTime?.();
+      }
+    },
+    [onClickTime, state.isDisabled]
+  );
+  React.useEffect(() => {
+    if (!value) {
+      state.setValue(null);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...fieldProps, ref, className: "flex flex-row", children: state.segments.map((segment, i) => {
+    if (segment.type === "literal") {
+      const text = formatLiteralSegment(segment.text);
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { whiteSpace: "pre" }, children: text }, i);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => handleOnClickSegment(segment), children: /* @__PURE__ */ jsxRuntime.jsx(DateSegment.DateSegment, { segment, state }) }, i);
+  }) });
+};
+
+exports.TimeField = TimeField;

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,82 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('react');
+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;