@tecsinapse/react-core 3.0.0 → 3.3.0

package/dist/cjs/components/atoms/GroupButton/styled.js

@@ -99,7 +99,7 @@ const StyledOption = styled.View`
 `;
 const StyledDivider = styled.View`
   width: ${({ theme }) => theme.borderWidth.pico};
-  background-color: ${({ theme }) => theme.color.secondary.light}; ;
+  background-color: ${({ theme }) => theme.color.secondary.light};
 `;
 const StyledPressable = styled(StyledPressableBase)(
   (props) => styled.css`

package/dist/cjs/components/atoms/Tag/styled.js

@@ -13,8 +13,8 @@ const backgroundColorTag = ({
   backgroundColorTone,
   backgroundColorVariant
 }) => styled.css`
-    background-color: ${theme?.color[backgroundColorTone][backgroundColorVariant]};
-  `;
+  background-color: ${theme?.color[backgroundColorTone][backgroundColorVariant]};
+`;
 const defaultVariant = ({ theme, variant }) => variant === "default" && styled.css`
     border-radius: ${theme.borderRadius.mili};
     padding: ${theme.spacing.micro} ${theme.spacing.centi};

package/dist/cjs/components/molecules/Calendar/Calendar.js

@@ -8,6 +8,7 @@ var Text = require('../../atoms/Text/Text.js');
 var styled = require('./styled.js');
 var Weekdays = require('./components/Weekdays.js');
 var MonthWeek = require('./components/MonthWeek.js');
+var SelectYear = require('./components/SelectYear.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -46,6 +47,7 @@ function Calendar({
   type,
   onChange,
   locale,
+  selectYearProps,
   ...rest
 }) {
   const _referenceDate = React__namespace.useMemo(
@@ -53,6 +55,8 @@ function Calendar({
     [_year, _month]
   );
   const [referenceDate, setReferenceDate] = React__namespace.useState(_referenceDate);
+  const [showSelectYear, setShowSelectYear] = React__namespace.useState(false);
+  const calendarHeightRef = React.useRef(0);
   const startingWeekDay = React__namespace.useMemo(
     () => dayOfWeekFromWeekStart(
       referenceDate.getDay(),
@@ -71,12 +75,15 @@ function Calendar({
     [TextComponent]
   );
   const calendar = React__namespace.useMemo(
-    () => [...Array(weeksInMonth).keys()].map(
-      (week) => [...Array(7).keys()].map(
-        (weekDayIndex) => dateFns.add(referenceDate, {
-          days: 6 * week + week + weekDayIndex - startingWeekDay
-        })
-      )
+    () => [...Array(6).keys()].map(
+      (week) => [...Array(7).keys()].map((weekDayIndex) => {
+        let addDays = 6 * week + week + weekDayIndex - startingWeekDay;
+        if (weeksInMonth == 5 && startingWeekDay == 0)
+          addDays -= 7;
+        return dateFns.add(referenceDate, {
+          days: addDays
+        });
+      })
     ),
     [weeksInMonth, startingWeekDay, referenceDate]
   );
@@ -86,16 +93,37 @@ function Calendar({
   const handlePressPrev = React__namespace.useCallback(() => {
     setReferenceDate(dateFns.add(referenceDate, { months: -1 }));
   }, [referenceDate, setReferenceDate]);
-  return /* @__PURE__ */ React__namespace.createElement(reactNative.View, { ...rest }, /* @__PURE__ */ React__namespace.createElement(styled.TitleContainer, null, /* @__PURE__ */ React__namespace.createElement(styled.Control, { onPress: handlePressPrev, align: "start", isLeft: true }, /* @__PURE__ */ React__namespace.createElement(
-    Icon,
+  const handlePressSelectYear = React__namespace.useCallback(() => {
+    setShowSelectYear((prevState) => !prevState);
+  }, [setShowSelectYear]);
+  const handleSelectYear = React__namespace.useCallback(
+    (year) => {
+      const referenceDateYear = referenceDate.getFullYear();
+      const addYears = year - referenceDateYear;
+      setReferenceDate(dateFns.add(referenceDate, { years: addYears }));
+      setShowSelectYear(false);
+    },
+    [referenceDate]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(reactNative.View, { ...rest }, /* @__PURE__ */ React__namespace.createElement(styled.TitleContainer, null, /* @__PURE__ */ React__namespace.createElement(
+    styled.Control,
     {
-      name: "chevron-left",
-      type: "material-community",
-      size: "kilo",
-      colorVariant: "secondary",
-      colorTone: "medium"
-    }
-  )), /* @__PURE__ */ React__namespace.createElement(
+      onPress: handlePressPrev,
+      align: "start",
+      disabled: showSelectYear,
+      isLeft: true
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      Icon,
+      {
+        name: "chevron-left",
+        type: "material-community",
+        size: "kilo",
+        colorVariant: "secondary",
+        colorTone: "medium"
+      }
+    )
+  ), /* @__PURE__ */ React__namespace.createElement(reactNative.TouchableOpacity, { onPress: handlePressSelectYear }, /* @__PURE__ */ React__namespace.createElement(
     Capitalized,
     {
       colorVariant: "secondary",
@@ -103,34 +131,58 @@ function Calendar({
       fontWeight: "bold"
     },
     dateFns.format(referenceDate, "MMMM yyyy", { locale })
-  ), /* @__PURE__ */ React__namespace.createElement(styled.Control, { onPress: handlePressNext, align: "end", isRright: true }, /* @__PURE__ */ React__namespace.createElement(
-    Icon,
-    {
-      name: "chevron-right",
-      type: "material-community",
-      size: "kilo",
-      colorVariant: "secondary",
-      colorTone: "medium"
-    }
-  ))), /* @__PURE__ */ React__namespace.createElement(styled.Content, null, /* @__PURE__ */ React__namespace.createElement(
-    Weekdays,
+  )), /* @__PURE__ */ React__namespace.createElement(
+    styled.Control,
     {
-      locale,
-      calendar,
-      Capitalized
-    }
-  ), calendar.map((week, index) => /* @__PURE__ */ React__namespace.createElement(
-    MonthWeek,
+      onPress: handlePressNext,
+      align: "end",
+      disabled: showSelectYear,
+      isRight: true
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      Icon,
+      {
+        name: "chevron-right",
+        type: "material-community",
+        size: "kilo",
+        colorVariant: "secondary",
+        colorTone: "medium"
+      }
+    )
+  )), showSelectYear ? /* @__PURE__ */ React__namespace.createElement(styled.Content, { height: calendarHeightRef.current }, /* @__PURE__ */ React__namespace.createElement(
+    SelectYear,
     {
-      week,
-      type,
-      value,
-      key: `week-${index}`,
-      onChange,
+      currentYear: referenceDate.getFullYear(),
+      onSelectYear: handleSelectYear,
       TextComponent,
-      referenceDate
+      ...selectYearProps
     }
-  ))));
+  )) : /* @__PURE__ */ React__namespace.createElement(
+    styled.Content,
+    {
+      onLayout: (e) => calendarHeightRef.current = e.nativeEvent.layout.height
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      Weekdays,
+      {
+        locale,
+        calendar,
+        Capitalized
+      }
+    ),
+    calendar.map((week, index) => /* @__PURE__ */ React__namespace.createElement(
+      MonthWeek,
+      {
+        week,
+        type,
+        value,
+        key: `week-${index}`,
+        onChange,
+        TextComponent,
+        referenceDate
+      }
+    ))
+  ));
 }
 
 module.exports = Calendar;

package/dist/cjs/components/molecules/Calendar/components/MemoizedYearCard.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../styled.js');
+
+const MemoizedYearCard = React.memo(
+  ({
+    year,
+    isSelected,
+    onPress,
+    TextComponent
+  }) => /* @__PURE__ */ React.createElement(
+    styled.YearCard,
+    {
+      id: String(year),
+      key: year,
+      isSelected,
+      onPress
+    },
+    /* @__PURE__ */ React.createElement(
+      TextComponent,
+      {
+        colorVariant: isSelected ? "primary" : "secondary",
+        colorTone: "xdark",
+        typography: "sub"
+      },
+      year
+    )
+  )
+);
+
+module.exports = MemoizedYearCard;

package/dist/cjs/components/molecules/Calendar/components/SelectYear.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var Text = require('../../../atoms/Text/Text.js');
+require('../../../atoms/Input/styled.js');
+require('currency.js');
+require('../../../atoms/Input/InputElement/InputElement.js');
+require('../../../atoms/Input/InputMaskElement/InputMaskElement.js');
+require('../../../atoms/Input/PressableInputContainer/styled.js');
+var ResponsiveFontSize = require('../../../../utils/ResponsiveFontSize.js');
+var useTheme = require('../../../../hooks/useTheme.js');
+var MemoizedYearCard = require('./MemoizedYearCard.js');
+
+const SelectYear = ({
+  currentYear,
+  onSelectYear,
+  TextComponent = Text,
+  yearsToShow = 100,
+  firstYear = 1950,
+  numColumns = 4
+}) => {
+  const theme = useTheme.useTheme();
+  const years = React.useMemo(
+    () => Array.from({ length: yearsToShow }, (_, i) => i + firstYear),
+    [yearsToShow, firstYear]
+  );
+  const initialIndex = React.useMemo(() => {
+    const index = currentYear % firstYear / numColumns - 2;
+    return index < 0 ? 0 : index;
+  }, [currentYear, firstYear, numColumns]);
+  const yearCardHeight = ResponsiveFontSize.RFValue(Number(theme.typography.base.fontSize.slice(0, -2))) + 2 * ResponsiveFontSize.RFValue(Number(theme.spacing.deca.slice(0, -2)));
+  const yearCardsBuilder = React.useCallback(
+    (item) => /* @__PURE__ */ React.createElement(
+      MemoizedYearCard,
+      {
+        year: item.item,
+        isSelected: currentYear === item.item,
+        onPress: () => onSelectYear(item.item),
+        TextComponent
+      }
+    ),
+    [currentYear, onSelectYear]
+  );
+  return /* @__PURE__ */ React.createElement(
+    reactNative.FlatList,
+    {
+      data: years,
+      renderItem: yearCardsBuilder,
+      keyExtractor: (item) => String(item),
+      contentContainerStyle: {
+        alignItems: "center"
+      },
+      numColumns,
+      initialScrollIndex: initialIndex,
+      getItemLayout: (_, index) => ({
+        length: yearCardHeight,
+        offset: yearCardHeight * index,
+        index
+      }),
+      fadingEdgeLength: 200
+    }
+  );
+};
+var SelectYear$1 = React.memo(SelectYear);
+
+module.exports = SelectYear$1;

package/dist/cjs/components/molecules/Calendar/styled.js

@@ -27,6 +27,7 @@ const getCapitalizedTextComponent = (component) => {
 const Content = styled.View`
   padding: ${({ theme }) => theme.spacing.deca};
   background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  height: ${({ height }) => height ? `${height}px` : "auto"};
 `;
 const Week = styled.View`
   flex-direction: row;
@@ -40,42 +41,49 @@ const Selected = styled.View`
   width: 100%;
   height: 100%;
 `;
-const Cell = styled(PressableSurface)(
-  ({
-    theme,
-    selected,
-    highlighted,
-    isLineEnd,
-    isLineStart,
-    isRangeStart,
-    isRangeEnd
-  }) => {
-    const borderRadiusSize = theme.borderRadius.mili;
-    const { rightBorderRadius, leftBorderRadius } = {
-      rightBorderRadius: selected && !isRangeStart || isLineEnd ? borderRadiusSize : 0,
-      leftBorderRadius: selected && !isRangeEnd || isLineStart ? borderRadiusSize : 0
-    };
-    const borderEffect = highlighted ? 0 : borderRadiusSize;
-    const backgroundColor = highlighted ? theme.color.primary.light : "transparent";
-    return styled.css`
-      ${isWeb ? styled.css`
-            width: 32px;
-            height: 32px;
-          ` : styled.css`
-            aspect-ratio: 1;
-            flex: 1;
-          `}
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: ${borderEffect};
-      border-top-left-radius: ${leftBorderRadius};
-      border-bottom-left-radius: ${leftBorderRadius};
-      border-top-right-radius: ${rightBorderRadius};
-      border-bottom-right-radius: ${rightBorderRadius};
-      background-color: ${backgroundColor};
-    `;
-  }
+const Cell = styled(PressableSurface)(({
+  theme,
+  selected,
+  highlighted,
+  isLineEnd,
+  isLineStart,
+  isRangeStart,
+  isRangeEnd
+}) => {
+  const borderRadiusSize = theme.borderRadius.mili;
+  const { rightBorderRadius, leftBorderRadius } = {
+    rightBorderRadius: selected && !isRangeStart || isLineEnd ? borderRadiusSize : 0,
+    leftBorderRadius: selected && !isRangeEnd || isLineStart ? borderRadiusSize : 0
+  };
+  const borderEffect = highlighted ? 0 : borderRadiusSize;
+  const backgroundColor = highlighted ? theme.color.primary.light : "transparent";
+  return styled.css`
+    ${isWeb ? styled.css`
+          width: 32px;
+          height: 32px;
+        ` : styled.css`
+          aspect-ratio: 1;
+          flex: 1;
+        `}
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: ${borderEffect};
+    border-top-left-radius: ${leftBorderRadius};
+    border-bottom-left-radius: ${leftBorderRadius};
+    border-top-right-radius: ${rightBorderRadius};
+    border-bottom-right-radius: ${rightBorderRadius};
+    background-color: ${backgroundColor};
+  `;
+});
+const YearCard = styled(PressableSurface)(
+  (props) => styled.css`
+    background-color: ${props.isSelected ? props.theme?.color.primary.light : void 0};
+    padding: ${props.theme?.spacing.centi};
+    border-radius: ${props.theme?.borderRadius.mili};
+    margin: ${props.theme?.spacing.mili};
+    padding: ${props.theme?.spacing.mili} ${props.theme?.spacing.deca};
+  `
 );
 
 exports.Cell = Cell;
@@ -84,4 +92,5 @@ exports.Control = Control;
 exports.Selected = Selected;
 exports.TitleContainer = TitleContainer;
 exports.Week = Week;
+exports.YearCard = YearCard;
 exports.getCapitalizedTextComponent = getCapitalizedTextComponent;

package/dist/cjs/components/molecules/ControlledDateTimeSelector/ControlledDateTimeSelector.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ControlledDateTimeSelector = ({
+  SelectorComponent,
+  ...rest
+}) => {
+  const {
+    value,
+    mode,
+    dateModalTitle,
+    dateConfirmButtonText,
+    timeModalTitle,
+    timeConfirmButtonText,
+    onChange
+  } = rest;
+  const [date, setDate] = React__namespace.useState(value || /* @__PURE__ */ new Date());
+  const [currentMode, setCurrentMode] = React__namespace.useState(0);
+  const isDate = mode === "date" || mode === "datetime" && currentMode === 0;
+  const isMonth = mode === "month";
+  const modalTitle = isDate || isMonth ? dateModalTitle : timeModalTitle;
+  const confirmButtonText = isDate || isMonth ? dateConfirmButtonText : timeConfirmButtonText;
+  const handleCalendarChange = (value2) => {
+    if (value2 !== void 0) {
+      const referenceDate = value2;
+      referenceDate.setHours(date.getHours(), date.getMinutes());
+      setDate(referenceDate);
+    }
+  };
+  const handlePressConfirm = () => {
+    if (mode === "datetime" && currentMode === 0) {
+      setCurrentMode(1);
+    } else {
+      onChange?.(date);
+    }
+  };
+  const handlePressBack = () => {
+    setCurrentMode(0);
+  };
+  return /* @__PURE__ */ React__namespace.createElement(
+    SelectorComponent,
+    {
+      ...rest,
+      handlePressBack,
+      handlePressConfirm,
+      handleCalendarChange,
+      confirmButtonText,
+      isDate,
+      isMonth,
+      date,
+      setDate,
+      currentMode,
+      modalTitle
+    }
+  );
+};
+
+module.exports = ControlledDateTimeSelector;

package/dist/cjs/index.js

@@ -56,6 +56,7 @@ var lightenDarkenColor = require('./utils/lightenDarkenColor.js');
 var masks = require('./utils/masks.js');
 var ResponsiveFontSize = require('./utils/ResponsiveFontSize.js');
 var variantComplement = require('./utils/variantComplement.js');
+var ControlledDateTimeSelector = require('./components/molecules/ControlledDateTimeSelector/ControlledDateTimeSelector.js');
 
 
 
@@ -141,3 +142,4 @@ exports.borderColorVC = variantComplement.borderColorVC;
 exports.colorGradationVC = variantComplement.colorGradationVC;
 exports.colorVC = variantComplement.colorVC;
 exports.fontColorVC = variantComplement.fontColorVC;
+exports.ControlledDateTimeSelector = ControlledDateTimeSelector;

package/dist/cjs/utils/masks.js

@@ -6,6 +6,7 @@ const Masks = {
   CPF: ["999.999.999-99"],
   CNPJ: ["99.999.999/9999-99"],
   DATE: ["99/99/9999"],
+  HOUR: ["99:99"],
   MONTH_YEAR: ["99/9999"],
   CEP: ["99999-999"],
   PHONE: ["(99) 9999-9999"],

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

@@ -97,7 +97,7 @@ const StyledOption = styled.View`
 `;
 const StyledDivider = styled.View`
   width: ${({ theme }) => theme.borderWidth.pico};
-  background-color: ${({ theme }) => theme.color.secondary.light}; ;
+  background-color: ${({ theme }) => theme.color.secondary.light};
 `;
 const StyledPressable = styled(StyledPressableBase)(
   (props) => css`

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

@@ -11,8 +11,8 @@ const backgroundColorTag = ({
   backgroundColorTone,
   backgroundColorVariant
 }) => css`
-    background-color: ${theme?.color[backgroundColorTone][backgroundColorVariant]};
-  `;
+  background-color: ${theme?.color[backgroundColorTone][backgroundColorVariant]};
+`;
 const defaultVariant = ({ theme, variant }) => variant === "default" && css`
     border-radius: ${theme.borderRadius.mili};
     padding: ${theme.spacing.micro} ${theme.spacing.centi};

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

@@ -1,11 +1,13 @@
 import { set, getWeeksInMonth, add, format } from 'date-fns';
 import * as React from 'react';
-import { View } from 'react-native';
+import { useRef } from 'react';
+import { View, TouchableOpacity } from 'react-native';
 import Icon from '../../atoms/Icon/Icon.js';
 import Text from '../../atoms/Text/Text.js';
 import { getCapitalizedTextComponent, TitleContainer, Control, Content } from './styled.js';
 import Weekdays from './components/Weekdays.js';
 import MonthWeek from './components/MonthWeek.js';
+import SelectYear from './components/SelectYear.js';
 
 const now = set(/* @__PURE__ */ new Date(), {
   date: 1,
@@ -25,6 +27,7 @@ function Calendar({
   type,
   onChange,
   locale,
+  selectYearProps,
   ...rest
 }) {
   const _referenceDate = React.useMemo(
@@ -32,6 +35,8 @@ function Calendar({
     [_year, _month]
   );
   const [referenceDate, setReferenceDate] = React.useState(_referenceDate);
+  const [showSelectYear, setShowSelectYear] = React.useState(false);
+  const calendarHeightRef = useRef(0);
   const startingWeekDay = React.useMemo(
     () => dayOfWeekFromWeekStart(
       referenceDate.getDay(),
@@ -50,12 +55,15 @@ function Calendar({
     [TextComponent]
   );
   const calendar = React.useMemo(
-    () => [...Array(weeksInMonth).keys()].map(
-      (week) => [...Array(7).keys()].map(
-        (weekDayIndex) => add(referenceDate, {
-          days: 6 * week + week + weekDayIndex - startingWeekDay
-        })
-      )
+    () => [...Array(6).keys()].map(
+      (week) => [...Array(7).keys()].map((weekDayIndex) => {
+        let addDays = 6 * week + week + weekDayIndex - startingWeekDay;
+        if (weeksInMonth == 5 && startingWeekDay == 0)
+          addDays -= 7;
+        return add(referenceDate, {
+          days: addDays
+        });
+      })
     ),
     [weeksInMonth, startingWeekDay, referenceDate]
   );
@@ -65,16 +73,37 @@ function Calendar({
   const handlePressPrev = React.useCallback(() => {
     setReferenceDate(add(referenceDate, { months: -1 }));
   }, [referenceDate, setReferenceDate]);
-  return /* @__PURE__ */ React.createElement(View, { ...rest }, /* @__PURE__ */ React.createElement(TitleContainer, null, /* @__PURE__ */ React.createElement(Control, { onPress: handlePressPrev, align: "start", isLeft: true }, /* @__PURE__ */ React.createElement(
-    Icon,
+  const handlePressSelectYear = React.useCallback(() => {
+    setShowSelectYear((prevState) => !prevState);
+  }, [setShowSelectYear]);
+  const handleSelectYear = React.useCallback(
+    (year) => {
+      const referenceDateYear = referenceDate.getFullYear();
+      const addYears = year - referenceDateYear;
+      setReferenceDate(add(referenceDate, { years: addYears }));
+      setShowSelectYear(false);
+    },
+    [referenceDate]
+  );
+  return /* @__PURE__ */ React.createElement(View, { ...rest }, /* @__PURE__ */ React.createElement(TitleContainer, null, /* @__PURE__ */ React.createElement(
+    Control,
     {
-      name: "chevron-left",
-      type: "material-community",
-      size: "kilo",
-      colorVariant: "secondary",
-      colorTone: "medium"
-    }
-  )), /* @__PURE__ */ React.createElement(
+      onPress: handlePressPrev,
+      align: "start",
+      disabled: showSelectYear,
+      isLeft: true
+    },
+    /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: "chevron-left",
+        type: "material-community",
+        size: "kilo",
+        colorVariant: "secondary",
+        colorTone: "medium"
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(TouchableOpacity, { onPress: handlePressSelectYear }, /* @__PURE__ */ React.createElement(
     Capitalized,
     {
       colorVariant: "secondary",
@@ -82,34 +111,58 @@ function Calendar({
       fontWeight: "bold"
     },
     format(referenceDate, "MMMM yyyy", { locale })
-  ), /* @__PURE__ */ React.createElement(Control, { onPress: handlePressNext, align: "end", isRright: true }, /* @__PURE__ */ React.createElement(
-    Icon,
-    {
-      name: "chevron-right",
-      type: "material-community",
-      size: "kilo",
-      colorVariant: "secondary",
-      colorTone: "medium"
-    }
-  ))), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
-    Weekdays,
+  )), /* @__PURE__ */ React.createElement(
+    Control,
     {
-      locale,
-      calendar,
-      Capitalized
-    }
-  ), calendar.map((week, index) => /* @__PURE__ */ React.createElement(
-    MonthWeek,
+      onPress: handlePressNext,
+      align: "end",
+      disabled: showSelectYear,
+      isRight: true
+    },
+    /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: "chevron-right",
+        type: "material-community",
+        size: "kilo",
+        colorVariant: "secondary",
+        colorTone: "medium"
+      }
+    )
+  )), showSelectYear ? /* @__PURE__ */ React.createElement(Content, { height: calendarHeightRef.current }, /* @__PURE__ */ React.createElement(
+    SelectYear,
     {
-      week,
-      type,
-      value,
-      key: `week-${index}`,
-      onChange,
+      currentYear: referenceDate.getFullYear(),
+      onSelectYear: handleSelectYear,
       TextComponent,
-      referenceDate
+      ...selectYearProps
     }
-  ))));
+  )) : /* @__PURE__ */ React.createElement(
+    Content,
+    {
+      onLayout: (e) => calendarHeightRef.current = e.nativeEvent.layout.height
+    },
+    /* @__PURE__ */ React.createElement(
+      Weekdays,
+      {
+        locale,
+        calendar,
+        Capitalized
+      }
+    ),
+    calendar.map((week, index) => /* @__PURE__ */ React.createElement(
+      MonthWeek,
+      {
+        week,
+        type,
+        value,
+        key: `week-${index}`,
+        onChange,
+        TextComponent,
+        referenceDate
+      }
+    ))
+  ));
 }
 
 export { Calendar as default };

package/dist/esm/components/molecules/Calendar/components/MemoizedYearCard.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { YearCard } from '../styled.js';
+
+const MemoizedYearCard = React__default.memo(
+  ({
+    year,
+    isSelected,
+    onPress,
+    TextComponent
+  }) => /* @__PURE__ */ React__default.createElement(
+    YearCard,
+    {
+      id: String(year),
+      key: year,
+      isSelected,
+      onPress
+    },
+    /* @__PURE__ */ React__default.createElement(
+      TextComponent,
+      {
+        colorVariant: isSelected ? "primary" : "secondary",
+        colorTone: "xdark",
+        typography: "sub"
+      },
+      year
+    )
+  )
+);
+
+export { MemoizedYearCard as default };

package/dist/esm/components/molecules/Calendar/components/SelectYear.js

@@ -0,0 +1,65 @@
+import React__default from 'react';
+import { FlatList } from 'react-native';
+import Text from '../../../atoms/Text/Text.js';
+import '../../../atoms/Input/styled.js';
+import 'currency.js';
+import '../../../atoms/Input/InputElement/InputElement.js';
+import '../../../atoms/Input/InputMaskElement/InputMaskElement.js';
+import '../../../atoms/Input/PressableInputContainer/styled.js';
+import { RFValue } from '../../../../utils/ResponsiveFontSize.js';
+import { useTheme } from '../../../../hooks/useTheme.js';
+import MemoizedYearCard from './MemoizedYearCard.js';
+
+const SelectYear = ({
+  currentYear,
+  onSelectYear,
+  TextComponent = Text,
+  yearsToShow = 100,
+  firstYear = 1950,
+  numColumns = 4
+}) => {
+  const theme = useTheme();
+  const years = React__default.useMemo(
+    () => Array.from({ length: yearsToShow }, (_, i) => i + firstYear),
+    [yearsToShow, firstYear]
+  );
+  const initialIndex = React__default.useMemo(() => {
+    const index = currentYear % firstYear / numColumns - 2;
+    return index < 0 ? 0 : index;
+  }, [currentYear, firstYear, numColumns]);
+  const yearCardHeight = RFValue(Number(theme.typography.base.fontSize.slice(0, -2))) + 2 * RFValue(Number(theme.spacing.deca.slice(0, -2)));
+  const yearCardsBuilder = React__default.useCallback(
+    (item) => /* @__PURE__ */ React__default.createElement(
+      MemoizedYearCard,
+      {
+        year: item.item,
+        isSelected: currentYear === item.item,
+        onPress: () => onSelectYear(item.item),
+        TextComponent
+      }
+    ),
+    [currentYear, onSelectYear]
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    FlatList,
+    {
+      data: years,
+      renderItem: yearCardsBuilder,
+      keyExtractor: (item) => String(item),
+      contentContainerStyle: {
+        alignItems: "center"
+      },
+      numColumns,
+      initialScrollIndex: initialIndex,
+      getItemLayout: (_, index) => ({
+        length: yearCardHeight,
+        offset: yearCardHeight * index,
+        index
+      }),
+      fadingEdgeLength: 200
+    }
+  );
+};
+var SelectYear$1 = React__default.memo(SelectYear);
+
+export { SelectYear$1 as default };

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

@@ -25,6 +25,7 @@ const getCapitalizedTextComponent = (component) => {
 const Content = styled.View`
   padding: ${({ theme }) => theme.spacing.deca};
   background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  height: ${({ height }) => height ? `${height}px` : "auto"};
 `;
 const Week = styled.View`
   flex-direction: row;
@@ -38,42 +39,49 @@ const Selected = styled.View`
   width: 100%;
   height: 100%;
 `;
-const Cell = styled(PressableSurface)(
-  ({
-    theme,
-    selected,
-    highlighted,
-    isLineEnd,
-    isLineStart,
-    isRangeStart,
-    isRangeEnd
-  }) => {
-    const borderRadiusSize = theme.borderRadius.mili;
-    const { rightBorderRadius, leftBorderRadius } = {
-      rightBorderRadius: selected && !isRangeStart || isLineEnd ? borderRadiusSize : 0,
-      leftBorderRadius: selected && !isRangeEnd || isLineStart ? borderRadiusSize : 0
-    };
-    const borderEffect = highlighted ? 0 : borderRadiusSize;
-    const backgroundColor = highlighted ? theme.color.primary.light : "transparent";
-    return css`
-      ${isWeb ? css`
-            width: 32px;
-            height: 32px;
-          ` : css`
-            aspect-ratio: 1;
-            flex: 1;
-          `}
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: ${borderEffect};
-      border-top-left-radius: ${leftBorderRadius};
-      border-bottom-left-radius: ${leftBorderRadius};
-      border-top-right-radius: ${rightBorderRadius};
-      border-bottom-right-radius: ${rightBorderRadius};
-      background-color: ${backgroundColor};
-    `;
-  }
+const Cell = styled(PressableSurface)(({
+  theme,
+  selected,
+  highlighted,
+  isLineEnd,
+  isLineStart,
+  isRangeStart,
+  isRangeEnd
+}) => {
+  const borderRadiusSize = theme.borderRadius.mili;
+  const { rightBorderRadius, leftBorderRadius } = {
+    rightBorderRadius: selected && !isRangeStart || isLineEnd ? borderRadiusSize : 0,
+    leftBorderRadius: selected && !isRangeEnd || isLineStart ? borderRadiusSize : 0
+  };
+  const borderEffect = highlighted ? 0 : borderRadiusSize;
+  const backgroundColor = highlighted ? theme.color.primary.light : "transparent";
+  return css`
+    ${isWeb ? css`
+          width: 32px;
+          height: 32px;
+        ` : css`
+          aspect-ratio: 1;
+          flex: 1;
+        `}
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: ${borderEffect};
+    border-top-left-radius: ${leftBorderRadius};
+    border-bottom-left-radius: ${leftBorderRadius};
+    border-top-right-radius: ${rightBorderRadius};
+    border-bottom-right-radius: ${rightBorderRadius};
+    background-color: ${backgroundColor};
+  `;
+});
+const YearCard = styled(PressableSurface)(
+  (props) => css`
+    background-color: ${props.isSelected ? props.theme?.color.primary.light : void 0};
+    padding: ${props.theme?.spacing.centi};
+    border-radius: ${props.theme?.borderRadius.mili};
+    margin: ${props.theme?.spacing.mili};
+    padding: ${props.theme?.spacing.mili} ${props.theme?.spacing.deca};
+  `
 );
 
-export { Cell, Content, Control, Selected, TitleContainer, Week, getCapitalizedTextComponent };
+export { Cell, Content, Control, Selected, TitleContainer, Week, YearCard, getCapitalizedTextComponent };

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+const ControlledDateTimeSelector = ({
+  SelectorComponent,
+  ...rest
+}) => {
+  const {
+    value,
+    mode,
+    dateModalTitle,
+    dateConfirmButtonText,
+    timeModalTitle,
+    timeConfirmButtonText,
+    onChange
+  } = rest;
+  const [date, setDate] = React.useState(value || /* @__PURE__ */ new Date());
+  const [currentMode, setCurrentMode] = React.useState(0);
+  const isDate = mode === "date" || mode === "datetime" && currentMode === 0;
+  const isMonth = mode === "month";
+  const modalTitle = isDate || isMonth ? dateModalTitle : timeModalTitle;
+  const confirmButtonText = isDate || isMonth ? dateConfirmButtonText : timeConfirmButtonText;
+  const handleCalendarChange = (value2) => {
+    if (value2 !== void 0) {
+      const referenceDate = value2;
+      referenceDate.setHours(date.getHours(), date.getMinutes());
+      setDate(referenceDate);
+    }
+  };
+  const handlePressConfirm = () => {
+    if (mode === "datetime" && currentMode === 0) {
+      setCurrentMode(1);
+    } else {
+      onChange?.(date);
+    }
+  };
+  const handlePressBack = () => {
+    setCurrentMode(0);
+  };
+  return /* @__PURE__ */ React.createElement(
+    SelectorComponent,
+    {
+      ...rest,
+      handlePressBack,
+      handlePressConfirm,
+      handleCalendarChange,
+      confirmButtonText,
+      isDate,
+      isMonth,
+      date,
+      setDate,
+      currentMode,
+      modalTitle
+    }
+  );
+};
+
+export { ControlledDateTimeSelector as default };

package/dist/esm/index.js

@@ -54,3 +54,4 @@ export { lightenDarkenColor } from './utils/lightenDarkenColor.js';
 export { Masks } from './utils/masks.js';
 export { RFPercentage, RFValue, RFValueStr } from './utils/ResponsiveFontSize.js';
 export { borderColorGradationVC, borderColorVC, colorGradationVC, colorVC, fontColorVC } from './utils/variantComplement.js';
+export { default as ControlledDateTimeSelector } from './components/molecules/ControlledDateTimeSelector/ControlledDateTimeSelector.js';

package/dist/esm/utils/masks.js

@@ -4,6 +4,7 @@ const Masks = {
   CPF: ["999.999.999-99"],
   CNPJ: ["99.999.999/9999-99"],
   DATE: ["99/99/9999"],
+  HOUR: ["99:99"],
   MONTH_YEAR: ["99/9999"],
   CEP: ["99999-999"],
   PHONE: ["(99) 9999-9999"],

package/dist/types/components/molecules/Calendar/Calendar.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ViewProps } from 'react-native';
 import { TextProps } from '../../atoms/Text';
+import { SelectYearProps } from './components';
 export type SelectionType = 'range' | 'day';
 export type DateRange = {
     lowest: Date;
@@ -15,6 +16,7 @@ export interface CalendarProps<T extends SelectionType> extends ViewProps {
     type?: T;
     value?: Value<T>;
     locale?: Locale;
+    selectYearProps?: Omit<SelectYearProps, 'TextComponent' | 'currentYear' | 'onSelectYear'>;
 }
-declare function Calendar<T extends SelectionType>({ TextComponent, year: _year, month: _month, value, type, onChange, locale, ...rest }: CalendarProps<T>): JSX.Element;
+declare function Calendar<T extends SelectionType>({ TextComponent, year: _year, month: _month, value, type, onChange, locale, selectYearProps, ...rest }: CalendarProps<T>): JSX.Element;
 export default Calendar;

package/dist/types/components/molecules/Calendar/components/MemoizedYearCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TextProps } from '../../../atoms/Text';
+interface MemoizedYearCardProps {
+    year: number;
+    isSelected: boolean;
+    onPress: () => void;
+    TextComponent: React.FC<TextProps>;
+}
+declare const MemoizedYearCard: React.MemoExoticComponent<({ year, isSelected, onPress, TextComponent, }: MemoizedYearCardProps) => JSX.Element>;
+export default MemoizedYearCard;

package/dist/types/components/molecules/Calendar/components/SelectYear.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TextProps } from '../../../atoms/Text';
+export interface SelectYearProps {
+    currentYear: number;
+    onSelectYear: (year: number) => void;
+    TextComponent?: React.FC<TextProps>;
+    yearsToShow?: number;
+    firstYear?: number;
+    numColumns?: number;
+}
+declare const _default: React.MemoExoticComponent<({ currentYear, onSelectYear, TextComponent, yearsToShow, firstYear, numColumns, }: SelectYearProps) => JSX.Element>;
+export default _default;

package/dist/types/components/molecules/Calendar/components/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Weekdays } from './Weekdays';
 export { default as MonthWeek } from './MonthWeek';
+export { default as SelectYear } from './SelectYear';
+export type { SelectYearProps } from './SelectYear';

package/dist/types/components/molecules/Calendar/styled.d.ts

@@ -3,7 +3,7 @@ import { PressableProps, ViewProps } from 'react-native';
 import { TextProps } from '../../atoms/Text';
 interface ButtonBorders {
     isLeft?: boolean;
-    isRright?: boolean;
+    isRight?: boolean;
 }
 export declare const TitleContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -24,7 +24,9 @@ export declare const getCapitalizedTextComponent: (component: FC<TextProps>) =>
 export declare const Content: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
+} & Partial<import("../../../types/defaults").ThemeProviderProps> & {
+    height?: number | undefined;
+}, {}, {
     ref?: import("react").Ref<import("react-native").View> | undefined;
 }>;
 export declare const Week: import("@emotion/native").StyledComponent<ViewProps & {
@@ -52,4 +54,10 @@ export declare const Cell: import("@emotion/native").StyledComponent<import("../
     isRangeStart: boolean;
     isRangeEnd: boolean;
 }, {}, {}>;
+export declare const YearCard: import("@emotion/native").StyledComponent<import("../../atoms/PressableSurface").PressableSurfaceProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps> & ButtonBorders & {
+    isSelected?: boolean | undefined;
+}, {}, {}>;
 export {};

package/dist/types/components/molecules/ControlledDateTimeSelector/ControlledDateTimeSelector.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DateTimeSelectorProps } from '../DateTimeSelector';
+import { Dispatch, SetStateAction } from 'react';
+export interface ControlledDateTimeSelectorProps extends DateTimeSelectorProps {
+    SelectorComponent: React.FC<ControlledSelectorComponentProps>;
+}
+export interface ControlledSelectorComponentProps {
+    date: Date;
+    setDate: Dispatch<SetStateAction<Date>>;
+    currentMode: number;
+    isDate: boolean;
+    isMonth: boolean;
+    handlePressConfirm: () => void;
+    handlePressBack: () => void;
+    handleCalendarChange: (value?: Date) => void;
+    modalTitle?: string;
+    confirmButtonText?: string;
+}
+declare const ControlledDateTimeSelector: React.FC<ControlledDateTimeSelectorProps>;
+export default ControlledDateTimeSelector;

package/dist/types/components/molecules/ControlledDateTimeSelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ControlledDateTimeSelector } from './ControlledDateTimeSelector';
+export type { ControlledDateTimeSelectorProps, ControlledSelectorComponentProps, } from './ControlledDateTimeSelector';

package/dist/types/index.d.ts

@@ -62,3 +62,5 @@ export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';
 export * from './types/defaults';
 export * from './utils';
+export { ControlledDateTimeSelector } from './components/molecules/ControlledDateTimeSelector';
+export type { ControlledDateTimeSelectorProps, ControlledSelectorComponentProps, } from './components/molecules/ControlledDateTimeSelector';

package/dist/types/utils/masks.d.ts

@@ -2,6 +2,7 @@ export declare const Masks: {
     CPF: string[];
     CNPJ: string[];
     DATE: string[];
+    HOUR: string[];
     MONTH_YEAR: string[];
     CEP: string[];
     PHONE: string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "3.0.0",
+  "version": "3.3.0",
   "license": "MIT",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -10,7 +10,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "rollup --watch",
+    "dev": "yarn build:es --watch",
     "build:es": "rollup --config",
     "build:declaration": "tsc --project tsconfig.build.json",
     "build:declaration:watch": "tsc --project tsconfig.build.json --watch",
@@ -37,5 +37,5 @@
     "react-native": "^0.71.0",
     "react-native-vector-icons": "^9.2.0"
   },
-  "gitHead": "59db148f23b2b94e8db779e035b43e58a0104fed"
+  "gitHead": "755aef933fa22dcbe93c6a93689620d920670928"
 }