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

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../Popover/index.js');
 var Content = require('./Content.js');
@@ -13,26 +14,26 @@ const SelectRoot = ({
   className
 }) => {
   const [triggerWidth, setTriggerWidth] = React.useState(0);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Root,
     {
       fallbackPlacements: ["bottom", "top"],
       placement: "bottom",
-      trigger: "click"
-    },
-    /* @__PURE__ */ React.createElement(
-      context.SelectContext.Provider,
-      {
-        value: {
-          value,
-          keyExtractor,
-          labelExtractor,
-          triggerWidth,
-          setTriggerWidth
+      trigger: "click",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        context.SelectContext.Provider,
+        {
+          value: {
+            value,
+            keyExtractor,
+            labelExtractor,
+            triggerWidth,
+            setTriggerWidth
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Content.Content, { className, children })
         }
-      },
-      /* @__PURE__ */ React.createElement(Content.Content, { className }, children)
-    )
+      )
+    }
   );
 };
 

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Skeleton = require('../Skeleton.js');
 
 const optionSkeletonStyle = "w-full px-deca my-nano h-[30px]";
 const SkeletonOptions = () => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-y-nano" }, Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ React.createElement(Skeleton.Skeleton, { key: value }, /* @__PURE__ */ React.createElement("div", { className: optionSkeletonStyle }))));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-nano", children: Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: optionSkeletonStyle }) }, value)) });
 };
 
 exports.SkeletonOptions = SkeletonOptions;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var io5 = require('react-icons/io5');
 var index = require('../Popover/index.js');
@@ -31,36 +32,41 @@ const SelectTrigger = ({
       setTriggerWidth(width);
     }
   }, [triggerRef.current, setTriggerWidth]);
-  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled }, /* @__PURE__ */ React.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      ref: triggerRef,
-      className: button({ className: rest.className }),
-      disabled,
-      role: "button",
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(
-      "span",
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full gap-mili", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        className: clsx({ "mt-mili": hasValue && label }),
-        "data-testid": "select-placeholder"
-      },
-      _placeholder
+        ref: triggerRef,
+        className: button({ className: rest.className }),
+        disabled,
+        role: "button",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: clsx({ "mt-mili": hasValue && label }),
+              "data-testid": "select-placeholder",
+              children: _placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDownOutline, {})
+        ]
+      }
     ),
-    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  ), hasValue && label ? /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      htmlFor: "select-trigger",
-      className: clsx(
-        "ml-centi",
-        cortexCore.labelStyle({ intent: "default", placeholder })
-      ),
-      "data-testid": "input-label"
-    },
-    label
-  ) : null));
+    hasValue && label ? /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: "select-trigger",
+        className: clsx(
+          "ml-centi",
+          cortexCore.labelStyle({ intent: "default", placeholder })
+        ),
+        "data-testid": "input-label",
+        children: label
+      }
+    ) : null
+  ] }) });
 };
 
 exports.SelectTrigger = SelectTrigger;

package/dist/cjs/components/Skeleton.js

@@ -1,17 +1,17 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var React = require('react');
 
 const Skeleton = ({ className, children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...rest,
       "data-testid": "skeleton",
-      className: clsx("animate-pulse bg-secondary-light", className)
-    },
-    children
+      className: clsx("animate-pulse bg-secondary-light", className),
+      children
+    }
   );
 };
 

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;