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

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

@@ -1,4 +1,5 @@
-import React__default, { useContext, useRef, useMemo, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, useRef, useMemo, useEffect } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
 import { Popover } from '../Popover/index.js';
 import { SelectContext } from './context.js';
@@ -29,36 +30,41 @@ const SelectTrigger = ({
       setTriggerWidth(width);
     }
   }, [triggerRef.current, setTriggerWidth]);
-  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      ref: triggerRef,
-      className: button({ className: rest.className }),
-      disabled,
-      role: "button",
-      ...rest
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "span",
+  return /* @__PURE__ */ jsx(Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxs("div", { className: "w-full gap-mili", children: [
+    /* @__PURE__ */ 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__ */ jsx(
+            "span",
+            {
+              className: clsx({ "mt-mili": hasValue && label }),
+              "data-testid": "select-placeholder",
+              children: _placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(IoChevronDownOutline, {})
+        ]
+      }
     ),
-    /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)
-  ), hasValue && label ? /* @__PURE__ */ React__default.createElement(
-    "label",
-    {
-      htmlFor: "select-trigger",
-      className: clsx(
-        "ml-centi",
-        labelStyle({ intent: "default", placeholder })
-      ),
-      "data-testid": "input-label"
-    },
-    label
-  ) : null));
+    hasValue && label ? /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: "select-trigger",
+        className: clsx(
+          "ml-centi",
+          labelStyle({ intent: "default", placeholder })
+        ),
+        "data-testid": "input-label",
+        children: label
+      }
+    ) : null
+  ] }) });
 };
 
 export { SelectTrigger };

package/dist/esm/components/Skeleton.js

@@ -1,15 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default from 'react';
 
 const Skeleton = ({ className, children, ...rest }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ 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/esm/components/Snackbar/BaseSnackbar.js

@@ -1,10 +1,11 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { snackbar } from '@tecsinapse/cortex-core';
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 const BaseSnackbar = forwardRef(
   (props, ref) => {
     const { children, show, variants } = props;
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, show ? /* @__PURE__ */ React__default.createElement("div", { className: snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+    return /* @__PURE__ */ jsx(Fragment, { children: show ? /* @__PURE__ */ jsx("div", { className: snackbar(variants), ref, "data-testid": "snackbar", children }) : /* @__PURE__ */ jsx(Fragment, {}) });
   }
 );
 

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

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

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StepNodeVariants } from '../../styles/stepNodeVariants.js';
 
 const Node = ({
@@ -22,7 +22,10 @@ const Node = ({
     disabled: rest.disabled,
     interactive
   });
-  return /* @__PURE__ */ React__default.createElement("button", { type: "button", className: container({ className }), ...rest }, children ? /* @__PURE__ */ React__default.createElement("div", { className: content() }, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), segmented ? /* @__PURE__ */ React__default.createElement("div", { className: separator() }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: container({ className }), ...rest, children: [
+    children ? /* @__PURE__ */ jsx("div", { className: content(), children }) : /* @__PURE__ */ jsx(Fragment, {}),
+    segmented ? /* @__PURE__ */ jsx("div", { className: separator() }) : /* @__PURE__ */ jsx(Fragment, {})
+  ] });
 };
 
 export { Node };

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

@@ -1,4 +1,5 @@
-import React__default, { useMemo, useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import React, { useMemo, useState, useCallback } from 'react';
 import { Node } from './Node.js';
 import clsx from 'clsx';
 
@@ -10,8 +11,8 @@ const Root = ({
 }) => {
   const initialSelectedIndex = useMemo(() => {
     let initialIndex = null;
-    React__default.Children.forEach(children, (child, index) => {
-      if (React__default.isValidElement(child) && child.props.selected) {
+    React.Children.forEach(children, (child, index) => {
+      if (React.isValidElement(child) && child.props.selected) {
         initialIndex = index;
       }
     });
@@ -21,7 +22,7 @@ const Root = ({
     initialSelectedIndex
   );
   const childrenCount = useMemo(
-    () => React__default.Children.count(children),
+    () => React.Children.count(children),
     [children]
   );
   const handleNodeClick = useCallback(
@@ -37,8 +38,8 @@ const Root = ({
   );
   const renderNode = useMemo(
     () => (child, index) => {
-      if (React__default.isValidElement(child) && child.type === Node) {
-        return React__default.cloneElement(child, {
+      if (React.isValidElement(child) && child.type === Node) {
+        return React.cloneElement(child, {
           isFirst: index === 0,
           isLast: index === childrenCount - 1,
           selected: selectedNode === index,
@@ -51,15 +52,15 @@ const Root = ({
     },
     [childrenCount, selectedNode, segmented, interactive]
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(
         "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili",
         className
-      )
-    },
-    React__default.Children.map(children, renderNode)
+      ),
+      children: React.Children.map(children, renderNode)
+    }
   );
 };
 

package/dist/esm/components/Table.js

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

package/dist/esm/components/Tag.js

@@ -1,5 +1,6 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { tag } from '@tecsinapse/cortex-core';
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { LiaTimesSolid } from 'react-icons/lia';
 
 const Close = ({
@@ -7,15 +8,15 @@ const Close = ({
   className,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       ...rest,
       type: "button",
       onClick,
-      "data-testid": "tag-close-button"
-    },
-    /* @__PURE__ */ React__default.createElement(LiaTimesSolid, { className })
+      "data-testid": "tag-close-button",
+      children: /* @__PURE__ */ jsx(LiaTimesSolid, { className })
+    }
   );
 };
 const Label = ({
@@ -23,11 +24,11 @@ const Label = ({
   className,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement("p", { className, ...rest }, children);
+  return /* @__PURE__ */ jsx("p", { className, ...rest, children });
 };
 const Face = forwardRef((props, ref) => {
   const { variants, className, intent, children, style, ...rest } = props;
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
@@ -37,25 +38,27 @@ const Face = forwardRef((props, ref) => {
         className
       }),
       style,
-      ref
-    },
-    children
+      ref,
+      children
+    }
   );
 });
 const Root = forwardRef(
   (props, ref) => {
     const { label, variants, intent, className, onDismiss, ...rest } = props;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsxs(
       Face,
       {
         ...rest,
         variants,
         intent,
         className,
-        ref
-      },
-      /* @__PURE__ */ React__default.createElement(Label, null, label),
-      onDismiss ? /* @__PURE__ */ React__default.createElement(Close, { onClick: onDismiss }) : null
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(Label, { children: label }),
+          onDismiss ? /* @__PURE__ */ jsx(Close, { onClick: onDismiss }) : null
+        ]
+      }
     );
   }
 );

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

@@ -1,8 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { inputBox, labelStyle } from '@tecsinapse/cortex-core';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 
-const TextAreaBox = React__default.forwardRef(
+const TextAreaBox = React.forwardRef(
   ({
     id,
     name,
@@ -13,32 +14,35 @@ const TextAreaBox = React__default.forwardRef(
     className,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React__default.createElement(
-      "textarea",
-      {
-        "data-testid": "textarea-box",
-        ref,
-        id: id ?? name,
-        name,
-        placeholder: placeholder ?? " ",
-        className: clsx(
-          inputBox(placeholder, label, className),
-          "resize-none mt-mili"
-        ),
-        rows,
-        ...rest
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      "label",
-      {
-        htmlFor: id ?? name,
-        className: labelStyle({
-          intent: variants?.intent,
-          placeholder
-        })
-      },
-      label
-    ));
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          "data-testid": "textarea-box",
+          ref,
+          id: id ?? name,
+          name,
+          placeholder: placeholder ?? " ",
+          className: clsx(
+            inputBox(placeholder, label, className),
+            "resize-none mt-mili"
+          ),
+          rows,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id ?? name,
+          className: labelStyle({
+            intent: variants?.intent,
+            placeholder
+          }),
+          children: label
+        }
+      )
+    ] });
   }
 );
 

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

@@ -1,23 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
 import { input } from '@tecsinapse/cortex-core';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 import { getValidChildren } from './utils.js';
 
-const TextAreaFace = React__default.forwardRef(
+const TextAreaFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
-      return React__default.cloneElement(el, { ...el.props, variants });
+      return React.cloneElement(el, { ...el.props, variants });
     });
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: clsx(input(variants), className),
         "data-testid": "textarea-face",
         id: "textarea-face",
-        ...rest
-      },
-      clones
+        ...rest,
+        children: clones
+      }
     );
   }
 );

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

@@ -1,8 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 
-const TextAreaLeft = React__default.forwardRef(({ children, className, ...rest }, ref) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+const TextAreaLeft = React.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(className, "mr-2.5"), ...rest, ref, children });
 });
 
 export { TextAreaLeft };

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

@@ -1,8 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default from 'react';
+import React from 'react';
 
-const TextAreaRight = React__default.forwardRef(({ children, className, ...rest }, ref) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+const TextAreaRight = React.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(className, "ml-2.5"), ...rest, ref, children });
 });
 
 export { TextAreaRight };

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

@@ -1,9 +1,10 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { TextAreaBox } from './Box.js';
 import { TextAreaFace } from './Face.js';
 
-const TextAreaRoot = React__default.forwardRef(({ variants, className, ...rest }, ref) => {
-  return /* @__PURE__ */ React__default.createElement(TextAreaFace, { variants, className }, /* @__PURE__ */ React__default.createElement(TextAreaBox, { ref, ...rest }));
+const TextAreaRoot = React.forwardRef(({ variants, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx(TextAreaFace, { variants, className, children: /* @__PURE__ */ jsx(TextAreaBox, { ref, ...rest }) });
 });
 
 export { TextAreaRoot };

package/dist/esm/components/TextArea/utils.js

@@ -1,8 +1,8 @@
-import React__default from 'react';
+import React from 'react';
 
 const getValidChildren = (children) => {
-  return React__default.Children.toArray(children).filter(
-    (el) => React__default.isValidElement(el)
+  return React.Children.toArray(children).filter(
+    (el) => React.isValidElement(el)
   );
 };
 

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

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useCallback, useEffect } from 'react';
+import { useLocale, useTimeField } from 'react-aria';
+import { useTimeFieldState } from 'react-stately';
+import { DateSegment } from '../DatePicker/DateSegment.js';
+
+const formatLiteralSegment = (text) => {
+  return text.includes(",") ? text.replace(/,/g, " ") : text;
+};
+const TimeField = ({ onClickTime, ...props }) => {
+  const { value } = props;
+  const { locale } = useLocale();
+  const state = useTimeFieldState({
+    ...props,
+    locale,
+    shouldForceLeadingZeros: true
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = useTimeField(
+    { "aria-label": "time-field" },
+    state,
+    ref
+  );
+  const handleOnClickSegment = useCallback(
+    (segment) => {
+      if (!segment.isEditable || state.isDisabled) return;
+      if (["hour", "minute", "second", "dayPeriod"].includes(segment.type)) {
+        onClickTime?.();
+      }
+    },
+    [onClickTime, state.isDisabled]
+  );
+  useEffect(() => {
+    if (!value) {
+      state.setValue(null);
+    }
+  }, [value]);
+  return /* @__PURE__ */ 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__ */ jsx("span", { style: { whiteSpace: "pre" }, children: text }, i);
+    }
+    return /* @__PURE__ */ jsx("div", { onClick: () => handleOnClickSegment(segment), children: /* @__PURE__ */ jsx(DateSegment, { segment, state }) }, i);
+  }) });
+};
+
+export { TimeField };