@tecsinapse/react-web-kit 3.4.21 → 3.5.1-beta.0

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

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Button from '../../atoms/Button/Button.js';
+import 'react';
 import { Icon, Calendar, Text } from '@tecsinapse/react-core';
 import { Root, Header, BackButton, Content } from './styled.js';
 import ScrollableTimePicker from '../ScrollableTimePicker/ScrollableTimePicker.js';
@@ -24,54 +25,61 @@ const DateTimePickerSelector = ({
   minuteLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(Root, { ...rest }, /* @__PURE__ */ React.createElement(Header, null, currentMode === 1 && /* @__PURE__ */ React.createElement(BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React.createElement(
-    Icon,
-    {
-      type: "material-community",
-      name: "chevron-left",
-      size: "mega",
-      colorVariant: "secondary"
-    }
-  )), /* @__PURE__ */ React.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React.createElement(
-    Calendar,
-    {
-      type: "day",
-      value: date,
-      onChange: handleCalendarChange,
-      year: date.getFullYear(),
-      month: date.getMonth()
-    }
-  ) : isMonth ? /* @__PURE__ */ React.createElement(Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
-    Content,
-    {
-      style: { width: "100%", flexDirection: "row", display: "flex" }
-    },
-    /* @__PURE__ */ React.createElement(
-      ScrollableMonthYearPicker,
+  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      currentMode === 1 && /* @__PURE__ */ jsx(BackButton, { onPress: handlePressBack, children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          type: "material-community",
+          name: "chevron-left",
+          size: "mega",
+          colorVariant: "secondary"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TextComponent, { typography: "base", colorVariant: "secondary", children: modalTitle })
+    ] }),
+    isDate ? /* @__PURE__ */ jsx(
+      Calendar,
       {
-        setDate,
-        date,
-        locale,
-        yearLabel,
-        monthLabel
+        type: "day",
+        value: date,
+        onChange: handleCalendarChange,
+        year: date.getFullYear(),
+        month: date.getMonth()
       }
-    )
-  )) : /* @__PURE__ */ React.createElement(Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
-    Content,
-    {
-      style: { width: "100%", flexDirection: "row", display: "flex" }
-    },
-    /* @__PURE__ */ React.createElement(
-      ScrollableTimePicker,
+    ) : isMonth ? /* @__PURE__ */ jsx(Content, { style: { flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+      Content,
       {
-        setDate,
-        date,
-        locale,
-        hourLabel,
-        minuteLabel
+        style: { width: "100%", flexDirection: "row", display: "flex" },
+        children: /* @__PURE__ */ jsx(
+          ScrollableMonthYearPicker,
+          {
+            setDate,
+            date,
+            locale,
+            yearLabel,
+            monthLabel
+          }
+        )
       }
-    )
-  )), /* @__PURE__ */ React.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+    ) }) : /* @__PURE__ */ jsx(Content, { style: { flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+      Content,
+      {
+        style: { width: "100%", flexDirection: "row", display: "flex" },
+        children: /* @__PURE__ */ jsx(
+          ScrollableTimePicker,
+          {
+            setDate,
+            date,
+            locale,
+            hourLabel,
+            minuteLabel
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Button, { color: "primary", onPress: handlePressConfirm, children: /* @__PURE__ */ jsx(TextComponent, { fontWeight: "bold", fontColor: "light", children: confirmButtonText || "OK" }) })
+  ] });
 };
 
 export { DateTimePickerSelector as default };

package/dist/esm/components/molecules/DateTimePickerSelector/components/MemoizedTimeCard.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { TimeCard } from '../styled.js';
 
@@ -7,14 +8,14 @@ const MemoizedTimeCard = React__default.memo(
     isSelected,
     onPress,
     TextComponent
-  }) => /* @__PURE__ */ React__default.createElement(TimeCard, { id: time, key: time, isSelected, onPress }, /* @__PURE__ */ React__default.createElement(
+  }) => /* @__PURE__ */ jsx(TimeCard, { id: time, isSelected, onPress, children: /* @__PURE__ */ jsx(
     TextComponent,
     {
       colorVariant: isSelected ? "primary" : "secondary",
-      colorTone: "xdark"
-    },
-    time
-  ))
+      colorTone: "xdark",
+      children: time
+    }
+  ) }, time)
 );
 
 export { MemoizedTimeCard as default };

package/dist/esm/components/molecules/DateTimePickerSelector/components/ScrollableDigit.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTheme, RFValue, Text } from '@tecsinapse/react-core';
+import * as React from 'react';
 import { StyledTextLabel, TimeDigitContainer } from '../styled.js';
 import MemoizedTimeCard from './MemoizedTimeCard.js';
 
@@ -23,7 +24,7 @@ const ScrollableDigit = ({
     }
   };
   const timeCardsBuilder = React.useCallback(
-    ({ item }) => /* @__PURE__ */ React.createElement(
+    ({ item }) => /* @__PURE__ */ jsx(
       MemoizedTimeCard,
       {
         time: getDisplayedValue(item),
@@ -36,26 +37,29 @@ const ScrollableDigit = ({
     ),
     [handleTimeChange, TextComponent]
   );
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(StyledTextLabel, null, timeLabel), /* @__PURE__ */ React.createElement(
-    TimeDigitContainer,
-    {
-      showsHorizontalScrollIndicator: true,
-      data,
-      renderItem: timeCardsBuilder,
-      keyExtractor: (item) => item,
-      contentContainerStyle: {
-        alignItems: "center"
-      },
-      numColumns: 1,
-      initialScrollIndex,
-      getItemLayout: (_, index) => ({
-        length: digitCardHeight,
-        offset: digitCardHeight * index,
-        index
-      }),
-      fadingEdgeLength: 200
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(StyledTextLabel, { children: timeLabel }),
+    /* @__PURE__ */ jsx(
+      TimeDigitContainer,
+      {
+        showsHorizontalScrollIndicator: true,
+        data,
+        renderItem: timeCardsBuilder,
+        keyExtractor: (item) => item,
+        contentContainerStyle: {
+          alignItems: "center"
+        },
+        numColumns: 1,
+        initialScrollIndex,
+        getItemLayout: (_, index) => ({
+          length: digitCardHeight,
+          offset: digitCardHeight * index,
+          index
+        }),
+        fadingEdgeLength: 200
+      }
+    )
+  ] });
 };
 
 export { ScrollableDigit as default };

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

@@ -1,4 +1,5 @@
-import React__default, { useRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
 import { StyledContainerDrawer } from './styled.js';
 import { Transition } from 'react-transition-group';
 import Overlay from '../../atoms/Overlay/Overlay.js';
@@ -30,18 +31,21 @@ const Drawer = ({
       };
     }
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }), /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: 300, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React__default.createElement(
-    StyledContainerDrawer,
-    {
-      ref: transitionRef,
-      style: { ...style, ...getStyles(anchorPosition, state) },
-      anchorPosition,
-      onClose,
-      open,
-      ...rest
-    },
-    children
-  )));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }),
+    /* @__PURE__ */ jsx(Transition, { in: open, timeout: 300, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsx(
+      StyledContainerDrawer,
+      {
+        ref: transitionRef,
+        style: { ...style, ...getStyles(anchorPosition, state) },
+        anchorPosition,
+        onClose,
+        open,
+        ...rest,
+        children
+      }
+    ) })
+  ] });
 };
 
 export { Drawer as default };

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

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import GridItem from './Item/Item.js';
 
@@ -11,7 +12,7 @@ const Grid = ({
 }) => {
   if (layout) {
     const flatLayout = layout.flat();
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -20,21 +21,21 @@ const Grid = ({
           flexDirection: "row",
           flexWrap: "wrap"
         },
-        ...rest
-      },
-      React__default.Children.map(children, (child, index) => /* @__PURE__ */ React__default.createElement(
-        GridItem,
-        {
-          key: `child-${index}`,
-          columns,
-          span: flatLayout[index],
-          spacing
-        },
-        child
-      ))
+        ...rest,
+        children: React__default.Children.map(children, (child, index) => /* @__PURE__ */ jsx(
+          GridItem,
+          {
+            columns,
+            span: flatLayout[index],
+            spacing,
+            children: child
+          },
+          `child-${index}`
+        ))
+      }
     );
   }
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -43,16 +44,16 @@ const Grid = ({
         flexDirection: "row",
         flexWrap: "wrap"
       },
-      ...rest
-    },
-    React__default.Children.map(children, (child, index) => {
-      return React__default.cloneElement(child, {
-        ...child?.props,
-        columns,
-        spacing: child?.props.spacing ?? spacing,
-        key: `child-${index}`
-      });
-    })
+      ...rest,
+      children: React__default.Children.map(children, (child, index) => {
+        return React__default.cloneElement(child, {
+          ...child?.props,
+          columns,
+          spacing: child?.props.spacing ?? spacing,
+          key: `child-${index}`
+        });
+      })
+    }
   );
 };
 

package/dist/esm/components/molecules/Grid/Item/Item.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { useTheme, getGridItemColumSpan, getGridItemPadding } from '@tecsinapse/react-core';
 import { useBreakpoints } from '../../../../hooks/useBreakpoints.js';
@@ -53,7 +54,7 @@ const GridItem = ({
     ...children?.props,
     style: wrapper ? children?.props.style : { ..._style, ...children?.props.style }
   });
-  return wrapper ? /* @__PURE__ */ React__default.createElement("div", { ...rest, style: _style }, clone) : clone;
+  return wrapper ? /* @__PURE__ */ jsx("div", { ...rest, style: _style, children: clone }) : clone;
 };
 
 export { GridItem as default };

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

@@ -1,5 +1,5 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { IconComponent } from '@tecsinapse/react-core';
-import React__default from 'react';
 import useIconTextButton from './hooks/useIconTextButton.js';
 import { StyledIconTextButton } from './styled.js';
 import TextComponent from './TextComponent.js';
@@ -14,7 +14,7 @@ const IconTextButton = ({
   ...rest
 }) => {
   const { handleHover, handlePressed, defaultFontColor } = useIconTextButton(variant);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     StyledIconTextButton,
     {
       boxed: !label,
@@ -24,35 +24,37 @@ const IconTextButton = ({
       onMouseOver: () => handleHover(false),
       onPressIn: () => handlePressed(true),
       onPressOut: () => handlePressed(false),
-      ...rest
-    },
-    iconPosition === "left" ? /* @__PURE__ */ React__default.createElement(
-      IconComponent,
-      {
-        iconProps,
-        size,
-        defaultFontColor
-      }
-    ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null),
-    /* @__PURE__ */ React__default.createElement(
-      TextComponent,
-      {
-        label,
-        defaultFontColor,
-        hasIcon: !!iconProps,
-        iconPosition,
-        textProps,
-        size
-      }
-    ),
-    iconPosition === "right" ? /* @__PURE__ */ React__default.createElement(
-      IconComponent,
-      {
-        iconProps,
-        size,
-        defaultFontColor
-      }
-    ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)
+      ...rest,
+      children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx(
+          IconComponent,
+          {
+            iconProps,
+            size,
+            defaultFontColor
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, {}),
+        /* @__PURE__ */ jsx(
+          TextComponent,
+          {
+            label,
+            defaultFontColor,
+            hasIcon: !!iconProps,
+            iconPosition,
+            textProps,
+            size
+          }
+        ),
+        iconPosition === "right" ? /* @__PURE__ */ jsx(
+          IconComponent,
+          {
+            iconProps,
+            size,
+            defaultFontColor
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, {})
+      ]
+    }
   );
 };
 

package/dist/esm/components/molecules/IconTextButton/TextComponent.js

@@ -1,3 +1,4 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { Text } from '@tecsinapse/react-core';
 import React__default from 'react';
 
@@ -7,16 +8,16 @@ const TextComponent = ({
   defaultFontColor,
   label
 }) => {
-  return label ? /* @__PURE__ */ React__default.createElement(
+  return label ? /* @__PURE__ */ jsx(
     Text,
     {
       typography: textProps?.typography ?? size === "small" ? "sub" : "base",
       fontWeight: textProps?.fontWeight ?? "bold",
       fontColor: textProps?.fontColor ?? defaultFontColor,
-      ...textProps
-    },
-    label
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+      ...textProps,
+      children: label
+    }
+  ) : /* @__PURE__ */ jsx(Fragment, {});
 };
 var TextComponent$1 = React__default.memo(TextComponent);
 

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

@@ -1,3 +1,4 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { InputPasswordIcon } from '@tecsinapse/react-core';
 import React__default, { useState } from 'react';
 import Input from '../../atoms/Input/Input.js';
@@ -5,20 +6,23 @@ import Input from '../../atoms/Input/Input.js';
 const InputPassword = React__default.forwardRef(
   ({ rightComponent, ...rest }, ref) => {
     const [revealed, setRevealed] = useState(false);
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       Input,
       {
         ...rest,
         ref,
         secureTextEntry: !revealed,
-        rightComponent: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-          InputPasswordIcon,
-          {
-            onChangeState: setRevealed,
-            revealed,
-            effect: "none"
-          }
-        ), rightComponent)
+        rightComponent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            InputPasswordIcon,
+            {
+              onChangeState: setRevealed,
+              revealed,
+              effect: "none"
+            }
+          ),
+          rightComponent
+        ] })
       }
     );
   }

package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Pressable } from 'react-native-web';
 import { StyledLabel } from './styled.js';
@@ -12,16 +13,16 @@ const LabelComponent = ({
 }) => {
   const defaultFontColor = active && !switchDisabled ? "dark" : "medium";
   const defaultFontWeight = active && !switchDisabled ? "bold" : "regular";
-  return /* @__PURE__ */ React__default.createElement(Pressable, { ...rest }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Pressable, { ...rest, children: /* @__PURE__ */ jsx(
     StyledLabel,
     {
       labelPosition,
       fontColor: labelProps?.fontColor ?? defaultFontColor,
       fontWeight: labelProps?.fontWeight ?? defaultFontWeight,
-      ...labelProps
-    },
-    label
-  ));
+      ...labelProps,
+      children: label
+    }
+  ) });
 };
 var LabelComponent$1 = React__default.memo(LabelComponent);
 

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import LabelComponent from './LabelComponent.js';
 import { StyledDiv } from './styled.js';
 import Switch from '../../atoms/Switch/Switch.js';
@@ -13,37 +13,41 @@ const LabeledSwitch = ({
   rightLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(StyledDiv, null, leftLabel ? /* @__PURE__ */ React__default.createElement(
-    LabelComponent,
-    {
-      active,
-      label: leftLabel,
-      labelPosition: "left",
-      labelProps,
-      disabled: !pressableLabel || disabled,
-      switchDisabled: disabled,
-      onPress: () => onChange(!active)
-    }
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), /* @__PURE__ */ React__default.createElement(
-    Switch,
-    {
-      active,
-      disabled,
-      onChange,
-      ...rest
-    }
-  ), rightLabel ? /* @__PURE__ */ React__default.createElement(
-    LabelComponent,
-    {
-      active,
-      label: rightLabel,
-      labelPosition: "right",
-      labelProps,
-      disabled: !pressableLabel || disabled,
-      switchDisabled: disabled,
-      onPress: () => onChange(!active)
-    }
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  return /* @__PURE__ */ jsxs(StyledDiv, { children: [
+    leftLabel ? /* @__PURE__ */ jsx(
+      LabelComponent,
+      {
+        active,
+        label: leftLabel,
+        labelPosition: "left",
+        labelProps,
+        disabled: !pressableLabel || disabled,
+        switchDisabled: disabled,
+        onPress: () => onChange(!active)
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, {}),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        active,
+        disabled,
+        onChange,
+        ...rest
+      }
+    ),
+    rightLabel ? /* @__PURE__ */ jsx(
+      LabelComponent,
+      {
+        active,
+        label: rightLabel,
+        labelPosition: "right",
+        labelProps,
+        disabled: !pressableLabel || disabled,
+        switchDisabled: disabled,
+        onPress: () => onChange(!active)
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, {})
+  ] });
 };
 
 export { LabeledSwitch as default };

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

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { StyledMasonry, StyledColumnItem, StyledRowItem } from './styled.js';
 
@@ -20,12 +21,12 @@ const Masonry = ({
     return columnsArray;
   };
   const renderColumn = (column) => {
-    return column.map((item, index) => /* @__PURE__ */ React__default.createElement(StyledRowItem, { key: index, index, spacingTop }, item));
+    return column.map((item, index) => /* @__PURE__ */ jsx(StyledRowItem, { index, spacingTop, children: item }, index));
   };
   const renderColumns = () => {
-    return getColumns().map((column, index) => /* @__PURE__ */ React__default.createElement(StyledColumnItem, { key: index, index, spacingLeft }, renderColumn(column)));
+    return getColumns().map((column, index) => /* @__PURE__ */ jsx(StyledColumnItem, { index, spacingLeft, children: renderColumn(column) }, index));
   };
-  return /* @__PURE__ */ React__default.createElement(StyledMasonry, null, renderColumns());
+  return /* @__PURE__ */ jsx(StyledMasonry, { children: renderColumns() });
 };
 
 export { Masonry as default };