@tecsinapse/cortex-react 1.13.1 → 1.13.3

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 };

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

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