@tecsinapse/react-web-kit 3.5.0 → 3.5.1-beta.1

package/dist/esm/components/atoms/InputMask/InputMask.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useInputFocus, InputContainer, Hint } from '@tecsinapse/react-core';
 import React__default from 'react';
 import { View } from 'react-native-web';
@@ -28,45 +29,48 @@ const InputMask = React__default.forwardRef(
     placeholder,
     ...rest
   }, ref) => {
-    const _hint = hintComponent || /* @__PURE__ */ React__default.createElement(Hint, { text: hint, variant });
+    const _hint = hintComponent || /* @__PURE__ */ jsx(Hint, { text: hint, variant });
     const { focused, handleBlur, handleFocus } = useInputFocus(
       onFocus,
       onBlur,
       !disabled
     );
     const onlyLabel = label && !placeholder;
-    return /* @__PURE__ */ React__default.createElement(View, { style }, /* @__PURE__ */ React__default.createElement(
-      InputContainer,
-      {
-        label: String(value) ? label : void 0,
-        labelColor,
-        labelColorVariant,
-        labelColorTone,
-        labelTypography,
-        labelStack,
-        labelWeight,
-        leftComponent,
-        rightComponent,
-        borderColor,
-        borderColorGradation,
-        inputContainerStyle,
-        focused,
-        disabled,
-        variant
-      },
-      /* @__PURE__ */ React__default.createElement(
-        StyledWebTextInputMask,
+    return /* @__PURE__ */ jsxs(View, { style, children: [
+      /* @__PURE__ */ jsx(
+        InputContainer,
         {
-          ...rest,
-          placeholder: onlyLabel ? label : placeholder,
-          value,
-          ref,
+          label: String(value) ? label : void 0,
+          labelColor,
+          labelColorVariant,
+          labelColorTone,
+          labelTypography,
+          labelStack,
+          labelWeight,
+          leftComponent,
+          rightComponent,
+          borderColor,
+          borderColorGradation,
+          inputContainerStyle,
+          focused,
           disabled,
-          onFocus: handleFocus,
-          onBlur: handleBlur
+          variant,
+          children: /* @__PURE__ */ jsx(
+            StyledWebTextInputMask,
+            {
+              ...rest,
+              placeholder: onlyLabel ? label : placeholder,
+              value,
+              ref,
+              disabled,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }
+          )
         }
-      )
-    ), hint && _hint);
+      ),
+      hint && _hint
+    ] });
   }
 );
 InputMask.displayName = "InputMask";

package/dist/esm/components/atoms/Modal/Modal.js

@@ -1,4 +1,5 @@
-import React__default, { useRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
 import { Transition } from 'react-transition-group';
 import Overlay from '../Overlay/Overlay.js';
 import { ModalContainer } from './styled.js';
@@ -12,19 +13,22 @@ const Modal = ({
   ...rest
 }) => {
   const transitionRef = useRef(null);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Overlay, { open, onClose, zIndex: "modal" }), /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: 400, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React__default.createElement(
-    ModalContainer,
-    {
-      ref: transitionRef,
-      style: {
-        ...style,
-        ...defaultStyleOverlay,
-        ...transitionStylesOverlay[state]
-      },
-      ...rest
-    },
-    children
-  )));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Overlay, { open, onClose, zIndex: "modal" }),
+    /* @__PURE__ */ jsx(Transition, { in: open, timeout: 400, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsx(
+      ModalContainer,
+      {
+        ref: transitionRef,
+        style: {
+          ...style,
+          ...defaultStyleOverlay,
+          ...transitionStylesOverlay[state]
+        },
+        ...rest,
+        children
+      }
+    ) })
+  ] });
 };
 
 export { Modal as default };

package/dist/esm/components/atoms/Overlay/Overlay.js

@@ -1,4 +1,5 @@
-import React__default, { useRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
 import { Transition } from 'react-transition-group';
 import { defaultStyleOverlay, transitionStylesOverlay } from './animations.js';
 import { StyledOverlay } from './styled.js';
@@ -11,7 +12,7 @@ const Overlay = ({
   children
 }) => {
   const transitionRef = useRef(null);
-  return /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Transition, { in: open, timeout, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsx(
     StyledOverlay,
     {
       style: {
@@ -21,10 +22,10 @@ const Overlay = ({
       onClick: open ? onClose : void 0,
       show: open,
       zIndex,
-      ref: transitionRef
-    },
-    children
-  ));
+      ref: transitionRef,
+      children
+    }
+  ) });
 };
 
 export { Overlay as default };

package/dist/esm/components/atoms/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { Wrapper } from './styled.js';
 import { View } from 'react-native-web';
 
@@ -16,7 +16,7 @@ const Skeleton = ({
       "[Skeleton] You should provide children or specify width and height"
     );
   }
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     Wrapper,
     {
       width,
@@ -24,16 +24,16 @@ const Skeleton = ({
       animation,
       active,
       radius,
-      ...rest
-    },
-    /* @__PURE__ */ React__default.createElement(
-      View,
-      {
-        style: { opacity: active ? 0 : 1 },
-        pointerEvents: active ? "none" : "auto"
-      },
-      children
-    )
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: { opacity: active ? 0 : 1 },
+          pointerEvents: active ? "none" : "auto",
+          children
+        }
+      )
+    }
   );
 };
 

package/dist/esm/components/atoms/Switch/Switch.js

@@ -1,4 +1,5 @@
-import React__default, { useRef, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
 import { useTheme, lightenDarkenColor } from '@tecsinapse/react-core';
 import { Transition } from 'react-transition-group';
 import { StyledSwitchContent, StyledSwitch } from './styled.js';
@@ -47,25 +48,25 @@ const Switch = ({
       )
     }
   };
-  return /* @__PURE__ */ React__default.createElement(Transition, { in: active, timeout: 100, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React__default.createElement("div", { onClick: handleChange, ref: transitionRef }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Transition, { in: active, timeout: 100, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsx("div", { onClick: handleChange, ref: transitionRef, children: /* @__PURE__ */ jsx(
     StyledSwitchContent,
     {
       ...rest,
       style: {
         ...defaultStyleBackground,
         ...transitionStylesBackground[state]
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      StyledSwitch,
-      {
-        style: {
-          ...defaultStyleCircle,
-          ...transitionStylesCircle[state]
+      },
+      children: /* @__PURE__ */ jsx(
+        StyledSwitch,
+        {
+          style: {
+            ...defaultStyleCircle,
+            ...transitionStylesCircle[state]
+          }
         }
-      }
-    )
-  )));
+      )
+    }
+  ) }) });
 };
 
 export { Switch as default };

package/dist/esm/components/atoms/Table/Body/TBody.js

@@ -1,10 +1,10 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 
 const TBody = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement("tbody", { ...rest }, children);
+  return /* @__PURE__ */ jsx("tbody", { ...rest, children });
 };
 
 export { TBody as default };

package/dist/esm/components/atoms/Table/Cell/Td.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { TCell } from './styled.js';
 
 const Td = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(TCell, { ...rest }, children);
+  return /* @__PURE__ */ jsx(TCell, { ...rest, children });
 };
 
 export { Td as default };

package/dist/esm/components/atoms/Table/Container/TableContainer.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { TContainer } from './styled.js';
 
 const TableContainer = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(TContainer, { ...rest }, children);
+  return /* @__PURE__ */ jsx(TContainer, { ...rest, children });
 };
 
 export { TableContainer as default };

package/dist/esm/components/atoms/Table/Footer/TFoot.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { TFooter } from './styled.js';
 
 const TFoot = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(TFooter, { ...rest }, children);
+  return /* @__PURE__ */ jsx(TFooter, { ...rest, children });
 };
 
 export { TFoot as default };

package/dist/esm/components/atoms/Table/Header/THead.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { THeadStyled, HeaderBackground } from './styled.js';
 import Tr from '../Row/Tr.js';
 
@@ -6,7 +6,10 @@ const THead = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(THeadStyled, { ...rest }, children, /* @__PURE__ */ React__default.createElement(Tr, null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React__default.createElement(HeaderBackground, null))));
+  return /* @__PURE__ */ jsxs(THeadStyled, { ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx("td", { colSpan: 99, children: /* @__PURE__ */ jsx(HeaderBackground, {}) }) })
+  ] });
 };
 
 export { THead as default };

package/dist/esm/components/atoms/Table/Header/Th.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { ThStyled } from './styled.js';
 
 const Th = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(ThStyled, { ...rest }, children);
+  return /* @__PURE__ */ jsx(ThStyled, { ...rest, children });
 };
 
 export { Th as default };

package/dist/esm/components/atoms/Table/Row/Tr.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { TRow } from './styled.js';
 
 const Tr = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(TRow, { ...rest }, children);
+  return /* @__PURE__ */ jsx(TRow, { ...rest, children });
 };
 
 export { Tr as default };

package/dist/esm/components/atoms/Table/Table.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { TableStyled } from './styled.js';
 
 const Table = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(TableStyled, { ...rest }, children);
+  return /* @__PURE__ */ jsx(TableStyled, { ...rest, children });
 };
 
 export { Table as default };

package/dist/esm/components/atoms/Table/Toolbar/TableToolbar.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { TableToolbarStyled } from './styled.js';
 import { Text } from '@tecsinapse/react-core';
 
@@ -8,7 +8,13 @@ const TableToolbar = ({
   footer,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TableToolbarStyled, { ...rest }, /* @__PURE__ */ React__default.createElement(Text, { typography: "h3", fontWeight: "bold" }, title), rightIcons), footer);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(TableToolbarStyled, { ...rest, children: [
+      /* @__PURE__ */ jsx(Text, { typography: "h3", fontWeight: "bold", children: title }),
+      rightIcons
+    ] }),
+    footer
+  ] });
 };
 
 export { TableToolbar as default };

package/dist/esm/components/atoms/Tag/Tag.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { Tag as Tag$1, Text } from '@tecsinapse/react-core';
 
 const Tag = ({
@@ -14,21 +14,21 @@ const Tag = ({
     fontStack = "default",
     fontWeight = "bold"
   } = textProps || {};
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     Tag$1,
     {
       backgroundColorVariant,
       backgroundColorTone,
-      value: /* @__PURE__ */ React__default.createElement(
+      value: /* @__PURE__ */ jsx(
         Text,
         {
           colorVariant,
           colorTone,
           fontStack,
           fontWeight,
-          typography: rest.variant === "small" ? "sub" : "base"
-        },
-        value
+          typography: rest.variant === "small" ? "sub" : "base",
+          children: value
+        }
       ),
       ...rest
     }

package/dist/esm/components/atoms/Tooltip/Tooltip.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Text } from '@tecsinapse/react-core';
 import { Container, TooltipSpan } from './styled.js';
@@ -8,7 +9,7 @@ const Tooltip = ({
   maxWidht,
   position = "bottom"
 }) => {
-  const spanRef = React__default.useRef();
+  const spanRef = React__default.useRef(null);
   const [computed, setComputed] = React__default.useState(
     void 0
   );
@@ -18,25 +19,30 @@ const Tooltip = ({
       height: spanRef.current?.clientHeight
     });
   }, []);
-  return /* @__PURE__ */ React__default.createElement(Container, { position }, children, /* @__PURE__ */ React__default.createElement(
-    TooltipSpan,
-    {
-      maxWidth: maxWidht,
-      computed,
-      position,
-      ref: (ref) => spanRef.current = ref
-    },
-    /* @__PURE__ */ React__default.createElement(
-      Text,
+  return /* @__PURE__ */ jsxs(Container, { position, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      TooltipSpan,
       {
-        fontWeight: "bold",
-        typography: "base",
-        colorVariant: "secondary",
-        colorTone: "xlight"
-      },
-      title
+        maxWidth: maxWidht,
+        computed,
+        position,
+        ref: (ref) => {
+          spanRef.current = ref;
+        },
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            fontWeight: "bold",
+            typography: "base",
+            colorVariant: "secondary",
+            colorTone: "xlight",
+            children: title
+          }
+        )
+      }
     )
-  ));
+  ] });
 };
 
 export { Tooltip as default };

package/dist/esm/components/molecules/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text, Icon } from '@tecsinapse/react-core';
 import { StyledContainerItem, StyledContainerIcon } from './styled.js';
 
@@ -9,15 +9,18 @@ const BreadcrumbItem = ({
   title
 }) => {
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React__default.createElement(StyledContainerItem, null, /* @__PURE__ */ React__default.createElement(Component, { ...props, style: noTextDecoration }, /* @__PURE__ */ React__default.createElement(Text, { colorVariant: "secondary", colorTone: isLast ? "medium" : "xdark" }, title)), !isLast && /* @__PURE__ */ React__default.createElement(StyledContainerIcon, null, /* @__PURE__ */ React__default.createElement(
-    Icon,
-    {
-      name: "chevron-double-right",
-      type: "material-community",
-      size: "centi",
-      fontColor: "orange"
-    }
-  )));
+  return /* @__PURE__ */ jsxs(StyledContainerItem, { children: [
+    /* @__PURE__ */ jsx(Component, { ...props, style: noTextDecoration, children: /* @__PURE__ */ jsx(Text, { colorVariant: "secondary", colorTone: isLast ? "medium" : "xdark", children: title }) }),
+    !isLast && /* @__PURE__ */ jsx(StyledContainerIcon, { children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: "chevron-double-right",
+        type: "material-community",
+        size: "centi",
+        fontColor: "orange"
+      }
+    ) })
+  ] });
 };
 
 export { BreadcrumbItem as default };

package/dist/esm/components/molecules/Breadcrumbs/Breadcrumbs.js

@@ -1,21 +1,21 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { StyledContainerBreadcrumbs } from './styled.js';
 import BreadcrumbItem from './BreadcrumbItem/BreadcrumbItem.js';
 
 const Breadcrumbs = ({ breadcrumbs, ...rest }) => {
-  return /* @__PURE__ */ React__default.createElement(StyledContainerBreadcrumbs, { ...rest }, breadcrumbs.map((item, index) => {
+  return /* @__PURE__ */ jsx(StyledContainerBreadcrumbs, { ...rest, children: breadcrumbs.map((item, index) => {
     const { props, Component = "a", title } = item;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       BreadcrumbItem,
       {
-        key: index,
         Component,
         props,
         isLast: breadcrumbs.length - 1 === index,
         title
-      }
+      },
+      index
     );
-  }));
+  }) });
 };
 
 export { Breadcrumbs as default };

package/dist/esm/components/molecules/DatePicker/DatePicker.js

@@ -1,6 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
 import { useTheme, DatePicker as DatePicker$1, Calendar, Masks, PressableSurface, CalendarIcon } from '@tecsinapse/react-core';
 import { parse, isValid } from 'date-fns';
-import React__default, { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { Dropdown } from '../../atoms/Dropdown/index.js';
 import InputMask from '../../atoms/InputMask/InputMask.js';
 
@@ -49,7 +50,7 @@ const DatePicker = ({
       onChange?.(void 0);
   }, [value]);
   const controlComponent = (onPress, displayValue) => {
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       InputMask,
       {
         onBlur: () => {
@@ -84,21 +85,21 @@ const DatePicker = ({
         placeholder,
         label,
         placeholderTextColor: disabled ? theme.color.secondary.light : void 0,
-        rightComponent: /* @__PURE__ */ React__default.createElement(
+        rightComponent: /* @__PURE__ */ jsx(
           PressableSurface,
           {
             effect: "none",
             style: { padding: 0 },
             onPress,
-            disabled
-          },
-          /* @__PURE__ */ React__default.createElement(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
+            disabled,
+            children: /* @__PURE__ */ jsx(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
+          }
         )
       }
     );
   };
   if (type === "day") {
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       DatePicker$1,
       {
         ...rest,
@@ -113,12 +114,12 @@ const DatePicker = ({
         month: getMonth,
         requestShowCalendar: show,
         requestCloseCalendar: close,
-        renderCalendar: (calendar) => /* @__PURE__ */ React__default.createElement(Dropdown, { visible, setVisible }, calendar),
+        renderCalendar: (calendar) => /* @__PURE__ */ jsx(Dropdown, { visible, setVisible, children: calendar }),
         controlComponent
       }
     );
   } else {
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       DatePicker$1,
       {
         ...rest,
@@ -135,7 +136,7 @@ const DatePicker = ({
         requestCloseCalendar: close,
         placeholder,
         label,
-        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React__default.createElement(
+        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ jsx(
           Dropdown,
           {
             visible,
@@ -143,9 +144,9 @@ const DatePicker = ({
             onClickAway: () => {
               handleBlur?.();
               checksFullRange();
-            }
-          },
-          calendar
+            },
+            children: calendar
+          }
         )
       }
     );

package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js

@@ -1,5 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
 import { DateTimePicker as DateTimePicker$1, ControlledDateTimeSelector } from '@tecsinapse/react-core';
-import React__default, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { Dropdown } from '../../atoms/Dropdown/index.js';
 import DateTimePickerSelector from '../DateTimePickerSelector/DateTimePickerSelector.js';
 
@@ -7,11 +8,11 @@ const DateTimePicker = ({ ...rest }) => {
   const [visible, setVisible] = useState(false);
   const show = useCallback(() => setVisible(true), []);
   const close = useCallback(() => setVisible(false), []);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     DateTimePicker$1,
     {
       ...rest,
-      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React__default.createElement(
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ jsx(
         ControlledDateTimeSelector,
         {
           SelectorComponent: DateTimePickerSelector,
@@ -20,7 +21,7 @@ const DateTimePicker = ({ ...rest }) => {
       ),
       requestShowSelector: show,
       requestCloseSelector: close,
-      renderSelector: (selector) => /* @__PURE__ */ React__default.createElement(Dropdown, { visible, setVisible }, selector)
+      renderSelector: (selector) => /* @__PURE__ */ jsx(Dropdown, { visible, setVisible, children: selector })
     }
   );
 };