@tecsinapse/react-web-kit 2.3.1 → 3.3.0

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 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.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Wrapper,
     {
       width,
@@ -26,7 +26,7 @@ const Skeleton = ({
       radius,
       ...rest
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       View,
       {
         style: { opacity: active ? 0 : 1 },
@@ -38,4 +38,3 @@ const Skeleton = ({
 };
 
 export { Skeleton as default };
-//# sourceMappingURL=Skeleton.js.map

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

@@ -59,4 +59,3 @@ const Wrapper = styled("div")`
 `;
 
 export { Wrapper };
-//# sourceMappingURL=styled.js.map

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

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from 'react';
+import React__default, { useRef, useCallback } from 'react';
 import { useTheme, lightenDarkenColor } from '@tecsinapse/react-core';
 import { Transition } from 'react-transition-group';
 import { StyledSwitchContent, StyledSwitch } from './styled.js';
@@ -56,7 +56,7 @@ const Switch = ({
     exiting: { transform: "translateX(150%)" },
     exited: { transform: "translateX(0%)" }
   };
-  return /* @__PURE__ */ React.createElement(Transition, { in: active, timeout: 100, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement("div", { onClick: handleChange, ref: transitionRef }, /* @__PURE__ */ React.createElement(
+  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(
     StyledSwitchContent,
     {
       ...rest,
@@ -65,7 +65,7 @@ const Switch = ({
         ...transitionStylesBackground[state]
       }
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       StyledSwitch,
       {
         style: {
@@ -78,4 +78,3 @@ const Switch = ({
 };
 
 export { Switch as default };
-//# sourceMappingURL=Switch.js.map

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

@@ -20,4 +20,3 @@ const StyledSwitch = styled.div`
 `;
 
 export { StyledSwitch, StyledSwitchContent };
-//# sourceMappingURL=styled.js.map

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

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

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

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

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

@@ -11,4 +11,3 @@ const TCell = styled("td")`
 `;
 
 export { TCell };
-//# sourceMappingURL=styled.js.map

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

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

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

@@ -10,4 +10,3 @@ const TContainer = styled("div")`
 `;
 
 export { TContainer };
-//# sourceMappingURL=styled.js.map

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

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

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

@@ -8,4 +8,3 @@ const TFooter = styled("tfoot")`
 `;
 
 export { TFooter };
-//# sourceMappingURL=styled.js.map

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { THeadStyled, HeaderBackground } from './styled.js';
 import Tr from '../Row/Tr.js';
 
@@ -6,8 +6,7 @@ const THead = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(THeadStyled, { ...rest }, children, /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement(HeaderBackground, null))));
+  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))));
 };
 
 export { THead as default };
-//# sourceMappingURL=THead.js.map

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

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

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

@@ -27,4 +27,3 @@ const HeaderBackground = styled("hr")`
 `;
 
 export { HeaderBackground, THeadStyled, ThStyled };
-//# sourceMappingURL=styled.js.map

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

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

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

@@ -8,4 +8,3 @@ const TRow = styled("tr")`
 `;
 
 export { TRow };
-//# sourceMappingURL=styled.js.map

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { TableToolbarStyled } from './styled.js';
 import { Text } from '@tecsinapse/react-core';
 
@@ -8,8 +8,7 @@ const TableToolbar = ({
   footer,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableToolbarStyled, { ...rest }, /* @__PURE__ */ React.createElement(Text, { typography: "h3", fontWeight: "bold" }, title), rightIcons), footer);
+  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);
 };
 
 export { TableToolbar as default };
-//# sourceMappingURL=TableToolbar.js.map

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

@@ -8,4 +8,3 @@ const TableToolbarStyled = styled("div")`
 `;
 
 export { TableToolbarStyled };
-//# sourceMappingURL=styled.js.map

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

@@ -7,4 +7,3 @@ const TableStyled = styled("table")`
 `;
 
 export { TableStyled };
-//# sourceMappingURL=styled.js.map

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Tag as Tag$1, Text } from '@tecsinapse/react-core';
 
 const Tag = ({
@@ -14,12 +14,12 @@ const Tag = ({
     fontStack = "default",
     fontWeight = "bold"
   } = textProps || {};
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Tag$1,
     {
       backgroundColorVariant,
       backgroundColorTone,
-      value: /* @__PURE__ */ React.createElement(
+      value: /* @__PURE__ */ React__default.createElement(
         Text,
         {
           colorVariant,
@@ -36,4 +36,3 @@ const Tag = ({
 };
 
 export { Tag as default };
-//# sourceMappingURL=Tag.js.map

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Text } from '@tecsinapse/react-core';
 import { Container, TooltipSpan } from './styled.js';
 
@@ -8,17 +8,17 @@ const Tooltip = ({
   maxWidht,
   position = "bottom"
 }) => {
-  const spanRef = React.useRef();
-  const [computed, setComputed] = React.useState(
+  const spanRef = React__default.useRef();
+  const [computed, setComputed] = React__default.useState(
     void 0
   );
-  React.useLayoutEffect(() => {
+  React__default.useLayoutEffect(() => {
     setComputed({
       width: spanRef.current?.clientWidth,
       height: spanRef.current?.clientHeight
     });
   }, []);
-  return /* @__PURE__ */ React.createElement(Container, { position }, children, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Container, { position }, children, /* @__PURE__ */ React__default.createElement(
     TooltipSpan,
     {
       maxWidth: maxWidht,
@@ -26,7 +26,7 @@ const Tooltip = ({
       position,
       ref: (ref) => spanRef.current = ref
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Text,
       {
         fontWeight: "bold",
@@ -40,4 +40,3 @@ const Tooltip = ({
 };
 
 export { Tooltip as default };
-//# sourceMappingURL=Tooltip.js.map

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

@@ -69,7 +69,10 @@ const TooltipSpan = styled("span")(
       border-radius: ${theme.borderRadius.mili};
       opacity: 0;
       visibility: hidden;
-      transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
+      transition:
+        opacity 0.3s,
+        visibility 0.3s,
+        transform 0.3s;
       background-color: ${theme.color.secondary.xdark};
       z-index: ${theme.zIndex.absolute};
 
@@ -112,4 +115,3 @@ const Container = styled("div")`
 `;
 
 export { Container, TooltipSpan };
-//# sourceMappingURL=styled.js.map

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Text, Icon } from '@tecsinapse/react-core';
 import { StyledContainerItem, StyledContainerIcon } from './styled.js';
 
@@ -9,7 +9,7 @@ const BreadcrumbItem = ({
   title
 }) => {
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React.createElement(StyledContainerItem, null, /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration }, /* @__PURE__ */ React.createElement(Text, { colorVariant: "secondary", colorTone: isLast ? "medium" : "xdark" }, title)), !isLast && /* @__PURE__ */ React.createElement(StyledContainerIcon, null, /* @__PURE__ */ React.createElement(
+  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",
@@ -21,4 +21,3 @@ const BreadcrumbItem = ({
 };
 
 export { BreadcrumbItem as default };
-//# sourceMappingURL=BreadcrumbItem.js.map

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

@@ -16,4 +16,3 @@ const StyledContainerIcon = styled("div")`
 `;
 
 export { StyledContainerIcon, StyledContainerItem };
-//# sourceMappingURL=styled.js.map

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React__default from 'react';
 import { StyledContainerBreadcrumbs } from './styled.js';
 import BreadcrumbItem from './BreadcrumbItem/BreadcrumbItem.js';
 
 const Breadcrumbs = ({ breadcrumbs, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(StyledContainerBreadcrumbs, { ...rest }, breadcrumbs.map((item, index) => {
+  return /* @__PURE__ */ React__default.createElement(StyledContainerBreadcrumbs, { ...rest }, breadcrumbs.map((item, index) => {
     const { props, Component = "a", title } = item;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       BreadcrumbItem,
       {
         key: index,
@@ -19,4 +19,3 @@ const Breadcrumbs = ({ breadcrumbs, ...rest }) => {
 };
 
 export { Breadcrumbs as default };
-//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -13,4 +13,3 @@ const StyledContainerBreadcrumbs = styled("div")`
 `;
 
 export { StyledContainerBreadcrumbs };
-//# sourceMappingURL=styled.js.map

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

@@ -1,5 +1,5 @@
 import { useTheme, DatePicker as DatePicker$1, Calendar, Masks, PressableSurface, CalendarIcon } from '@tecsinapse/react-core';
-import React, { useState, useCallback, useMemo } from 'react';
+import React__default, { useState, useCallback, useMemo } from 'react';
 import { Dropdown } from '../../atoms/Dropdown/index.js';
 import InputMask from '../../atoms/InputMask/InputMask.js';
 import { parse, isValid } from 'date-fns';
@@ -49,7 +49,7 @@ const DatePicker = ({
       onChange?.(void 0);
   }, [value]);
   const controlComponent = (onPress, displayValue) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       InputMask,
       {
         onBlur: () => {
@@ -88,7 +88,7 @@ const DatePicker = ({
         placeholder,
         label,
         placeholderTextColor: disabled ? theme.color.secondary.light : void 0,
-        rightComponent: /* @__PURE__ */ React.createElement(
+        rightComponent: /* @__PURE__ */ React__default.createElement(
           PressableSurface,
           {
             effect: "none",
@@ -96,13 +96,13 @@ const DatePicker = ({
             onPress,
             disabled
           },
-          /* @__PURE__ */ React.createElement(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
+          /* @__PURE__ */ React__default.createElement(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
         )
       }
     );
   };
   if (type === "day") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       DatePicker$1,
       {
         ...rest,
@@ -117,12 +117,12 @@ const DatePicker = ({
         month: getMonth,
         requestShowCalendar: show,
         requestCloseCalendar: close,
-        renderCalendar: (calendar) => /* @__PURE__ */ React.createElement(Dropdown, { visible, setVisible }, calendar),
+        renderCalendar: (calendar) => /* @__PURE__ */ React__default.createElement(Dropdown, { visible, setVisible }, calendar),
         controlComponent
       }
     );
   } else {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       DatePicker$1,
       {
         ...rest,
@@ -139,7 +139,7 @@ const DatePicker = ({
         requestCloseCalendar: close,
         placeholder,
         label,
-        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
+        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React__default.createElement(
           Dropdown,
           {
             visible,
@@ -157,4 +157,3 @@ const DatePicker = ({
 };
 
 export { DatePicker };
-//# sourceMappingURL=DatePicker.js.map

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

@@ -1,21 +1,28 @@
-import { DateTimePicker as DateTimePicker$1 } from '@tecsinapse/react-core';
-import React, { useState, useCallback } from 'react';
+import { DateTimePicker as DateTimePicker$1, ControlledDateTimeSelector } from '@tecsinapse/react-core';
+import React__default, { useState, useCallback } from 'react';
 import { Dropdown } from '../../atoms/Dropdown/index.js';
+import DateTimePickerSelector from '../DateTimePickerSelector/DateTimePickerSelector.js';
 
 const DateTimePicker = ({ ...rest }) => {
   const [visible, setVisible] = useState(false);
   const show = useCallback(() => setVisible(true), []);
   const close = useCallback(() => setVisible(false), []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     DateTimePicker$1,
     {
       ...rest,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React__default.createElement(
+        ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       requestShowSelector: show,
       requestCloseSelector: close,
-      renderSelector: (selector) => /* @__PURE__ */ React.createElement(Dropdown, { visible, setVisible }, selector)
+      renderSelector: (selector) => /* @__PURE__ */ React__default.createElement(Dropdown, { visible, setVisible }, selector)
     }
   );
 };
 
 export { DateTimePicker };
-//# sourceMappingURL=DateTimePicker.js.map

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import Button from '../../atoms/Button/Button.js';
+import { Icon, Calendar, Text } from '@tecsinapse/react-core';
+import { Root, Header, BackButton, Content } from './styled.js';
+import ScrollableTimePicker from '../ScrollableTimePicker/ScrollableTimePicker.js';
+import ScrollableMonthYearPicker from '../ScrollableMonthYearPicker/ScrollableMonthYearPicker.js';
+
+const DateTimePickerSelector = ({
+  TextComponent = Text,
+  currentMode,
+  handlePressBack,
+  modalTitle,
+  isDate,
+  date,
+  handleCalendarChange,
+  isMonth,
+  setDate,
+  handlePressConfirm,
+  confirmButtonText,
+  locale,
+  yearLabel,
+  monthLabel,
+  hourLabel,
+  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,
+      {
+        setDate,
+        date,
+        locale,
+        yearLabel,
+        monthLabel
+      }
+    )
+  )) : /* @__PURE__ */ React.createElement(Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
+    Content,
+    {
+      style: { width: "100%", flexDirection: "row", display: "flex" }
+    },
+    /* @__PURE__ */ React.createElement(
+      ScrollableTimePicker,
+      {
+        setDate,
+        date,
+        locale,
+        hourLabel,
+        minuteLabel
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+};
+
+export { DateTimePickerSelector as default };

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

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