@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTDatePicker/versions/V0/theme.js

@@ -0,0 +1,225 @@
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+import { withImportant } from '../../../../utils/classesUtils';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    openerIcon: {
+      fill: getIn(theme, ['UTDatePicker', 'openerIcon', 'fill'], Colors.orangeIcon)
+    },
+    disabledOpenerIcon: {
+      fill: getIn(theme, ['UTDatePicker', 'disabledOpenerIcon', 'fill'], Colors.gray)
+    },
+    day: {
+      fontFamily: getIn(theme, ['UTDatePicker', 'day', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily'])),
+      fontSize: getIn(theme, ['UTDatePicker', 'day', 'fontSize'], '14px'),
+      height: getIn(theme, ['UTDatePicker', 'day', 'height'], '34px'),
+      margin: getIn(theme, ['UTDatePicker', 'day', 'margin'], '0 1px'),
+      fontWeight: getIn(theme, ['UTDatePicker', 'day', 'fontWeight'], 500),
+      width: getIn(theme, ['UTDatePicker', 'day', 'width'], '35px'),
+      color: getIn(theme, ['UTDatePicker', 'day', 'color'], Colors.gray4)
+    },
+    otherMonthDay: {
+      visibility: getIn(theme, ['UTDatePicker', 'otherMonthDay', 'visibility'], 'hidden')
+    },
+    selectedDay: {
+      backgroundColor: getIn(theme, ['UTDatePicker', 'selectedDay', 'backgroundColor'], Colors.lightBlue),
+      '&:hover': {
+        backgroundColor: getIn(theme, ['UTDatePicker', 'selectedDay', 'backgroundColor'], Colors.blue)
+      },
+      color: getIn(theme, ['UTDatePicker', 'selectedDay', 'color'], Colors.white),
+      padding: getIn(theme, ['UTDatePicker', 'selectedDay', 'padding'], '1px 1px'),
+      backgroundClip: getIn(theme, ['UTDatePicker', 'selectedDay', 'backgroundClip'], 'contentBox')
+    },
+    upperTitle: {
+      color: getIn(theme, ['UTDatePicker', 'upperTitle', 'color'], Colors.black),
+      fontWeight: getIn(theme, ['UTDatePicker', 'upperTitle', 'fontWeight']),
+      marginBottom: getIn(theme, ['UTDatePicker', 'upperTitle', 'marginBottom'])
+    },
+    errorLabel: {
+      marginTop: 4,
+      textAlign: 'left'
+    }
+  };
+};
+export const materialTheme = theme => {
+  var _theme$UTDatePicker, _theme$UTDatePicker2, _theme$UTDatePicker3, _theme$UTDatePicker4;
+  return createTheme({
+    typography: {
+      fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+    },
+    overrides: {
+      MuiTypography: {
+        body1: {
+          fontFamily: getIn(theme, ['UTDatePicker', 'input', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily']))
+        }
+      },
+      MuiToolbar: {
+        regular: {
+          minHeight: getIn(theme, ['UTDatePicker', 'toolbar', 'minHeight'], '0px !important')
+        }
+      },
+      MuiPickersToolbar: {
+        toolbar: {
+          height: getIn(theme, ['UTDatePicker', 'toolbar', 'height'], 'fit-content'),
+          padding: getIn(theme, ['UTDatePicker', 'toolbar', 'padding'], '8px 12px 8px 12px'),
+          borderRadius: getIn(theme, ['UTDatePicker', 'toolbar', 'borderRadious'], '4px'),
+          margin: getIn(theme, ['UTDatePicker', 'toolbar', 'margin'], '16px 16px 0px 16px'),
+          backgroundColor: getIn(theme, ['UTDatePicker', 'toolbar', 'backgroundColor'], Colors.gray3)
+        }
+      },
+      MuiPickersToolbarButton: {
+        toolbarBtn: {
+          alignSelf: getIn(theme, ['UTDatePicker', 'toolbar', 'alignSelf'], 'center'),
+          '&:not(:first-child)': {
+            display: getIn(theme, ['UTDatePicker', 'toolbar', 'displayDate'], 'none')
+          }
+        }
+      },
+      MuiPickersToolbarText: {
+        toolbarTxt: {
+          fontWeight: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'fontWeight'], '500'),
+          fontSize: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'fontSize'], '16px'),
+          lineHeight: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'lineHeight'], '22px'),
+          color: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], Colors.black)
+        },
+        toolbarBtnSelected: {
+          color: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], Colors.black)
+        }
+      },
+      MuiPickersYear: {
+        yearSelected: {
+          color: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], Colors.black),
+          marginLeft: getIn(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
+        },
+        root: {
+          color: getIn(theme, ['UTDatePicker', 'year', 'color'], Colors.black),
+          marginLeft: getIn(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
+        }
+      },
+      MuiPickersCalendarHeader: {
+        switchHeader: {
+          color: getIn(theme, ['UTDatePicker', 'switchHeader', 'color'], Colors.gray4),
+          textTransform: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker = theme.UTDatePicker) === null || _theme$UTDatePicker === void 0 || (_theme$UTDatePicker = _theme$UTDatePicker.switchHeader) === null || _theme$UTDatePicker === void 0 ? void 0 : _theme$UTDatePicker.textTransform) || 'capitalize'),
+          fontWeight: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker2 = theme.UTDatePicker) === null || _theme$UTDatePicker2 === void 0 || (_theme$UTDatePicker2 = _theme$UTDatePicker2.switchHeader) === null || _theme$UTDatePicker2 === void 0 ? void 0 : _theme$UTDatePicker2.fontWeight) || 500),
+          margin: getIn(theme, ['UTDatePicker', 'switchHeader', 'margin'], '8px 17px'),
+          padding: getIn(theme, ['UTDatePicker', 'switchHeader', 'padding'], '15px 0 0')
+        },
+        dayLabel: {
+          color: getIn(theme, ['UTDatePicker', 'dayLabel', 'color'], Colors.gray4),
+          width: getIn(theme, ['UTDatePicker', 'dayLabel', 'width'], '33px'),
+          fontWeight: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker3 = theme.UTDatePicker) === null || _theme$UTDatePicker3 === void 0 || (_theme$UTDatePicker3 = _theme$UTDatePicker3.dayLabel) === null || _theme$UTDatePicker3 === void 0 ? void 0 : _theme$UTDatePicker3.fontWeight) || 500),
+          fontFamily: getIn(theme, ['UTDatePicker', 'dayLabel', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily']))
+        },
+        daysHeader: {
+          marginTop: getIn(theme, ['UTDatePicker', 'daysHeader', 'marginTop'], '15px')
+        }
+      },
+      MuiOutlinedInput: {
+        root: {
+          fontFamily: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily'])),
+          backgroundColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'backgroundColor'], Colors.white),
+          fontWeight: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontWeight'], 500),
+          fontSize: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontSize'], '14px'),
+          borderRadius: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'borderRadius'], '30px'),
+          height: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'height'], '40px'),
+          width: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'width'], '250px'),
+          color: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'color'], Colors.gray4),
+          paddingLeft: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'paddingLeft'], '6px'),
+          paddingRight: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker4 = theme.UTDatePicker) === null || _theme$UTDatePicker4 === void 0 || (_theme$UTDatePicker4 = _theme$UTDatePicker4.outlinedInput) === null || _theme$UTDatePicker4 === void 0 || (_theme$UTDatePicker4 = _theme$UTDatePicker4.root) === null || _theme$UTDatePicker4 === void 0 ? void 0 : _theme$UTDatePicker4.paddingRight) || '12px'),
+          '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+            borderColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'hover', 'borderColor'], Colors.gray3)
+          },
+          '&$focused $notchedOutline': {
+            borderColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderColor'], Colors.gray3),
+            borderWidth: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderWidth'], 1)
+          }
+        },
+        notchedOutline: {
+          borderColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'borderColor'], Colors.gray3)
+        }
+      },
+      MuiInput: {
+        input: {
+          border: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'border']),
+          borderRadius: getIn(theme, ['UTDatePicker', 'input', 'borderRadius']),
+          fontFamily: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily'])),
+          fontSize: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          color: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'color']),
+          padding: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'padding'])
+        },
+        underline: {
+          '&:hover:not($disabled):not($focused):not($error):before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:hover:not($disabled):before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$disabled:before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$focused:after': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(Colors.primary))
+          },
+          '&:after': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(Colors.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
+          }
+        }
+      },
+      MuiFormLabel: {
+        root: {
+          color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'color']),
+          '&$error': {
+            color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'errorColor'], theme.Palette.error['05'])
+          },
+          '&$focused': {
+            color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedColor'], Colors.primary),
+            '&$error': {
+              color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedErrorColor'], theme.Palette.error['05'])
+            }
+          },
+          fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
+          fontSize: getIn(theme, ['UTDatePicker', 'standardInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          fontWeight: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'fontWeight'])
+        }
+      },
+      MuiPopover: {
+        paper: {
+          borderRadius: getIn(theme, ['UTDatePicker', 'calendarPaper', 'borderRadius'], '10px'),
+          boxShadow: getIn(theme, ['UTDatePicker', 'calendarPaper', 'boxShadow'], 'none'),
+          border: getIn(theme, ['UTDatePicker', 'calendarPaper', 'border'], "1px solid ".concat(Colors.gray3)),
+          color: getIn(theme, ['UTDatePicker', 'calendarPaper', 'color'], Colors.gray3)
+        }
+      },
+      MuiIconButton: {
+        root: {
+          padding: getIn(theme, ['UTDatePicker', 'openerIcon', 'padding'], '5px')
+        }
+      },
+      MuiPickersBasePicker: {
+        pickerView: {
+          minWidth: getIn(theme, ['UTDatePicker', 'pickerView', 'minWidth'], '290px')
+        }
+      },
+      MuiFormHelperText: {
+        root: {
+          fontSize: getIn(theme, ['UTDatePicker', 'helperText', 'fontSize'], 12),
+          color: theme.Palette.error['05']
+        },
+        contained: {
+          marginLeft: 0
+        }
+      }
+    }
+  });
+};

package/dist/esm/components/UTDatePicker/versions/V0/types.js

@@ -0,0 +1,11 @@
+import { string, shape } from 'prop-types';
+export const classesPropTypes = shape({
+  content: string,
+  container: string,
+  root: string,
+  closeButton: string,
+  mainTitle: string,
+  closeIcon: string,
+  warning: string,
+  dialogActions: string
+});

package/dist/esm/components/UTDatePicker/versions/V0/utils.js

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs';
+export const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
+export const dateMatchesFormat = (date, targetFormat) => dayjs(date, targetFormat).format(targetFormat) === date;
+export const getPastMonthDates = () => {
+  const date = new Date();
+  const currentYear = date.getFullYear();
+  const currentMonth = date.getMonth();
+  return {
+    minDate: new Date(currentYear, currentMonth - 1, 1),
+    maxDate: new Date(currentYear, currentMonth, 0)
+  };
+};
+export const getMaxDate = () => {
+  const currentDate = new Date();
+  return {
+    maxDate: currentDate
+  };
+};
+export const getFinalDate = _ref => {
+  let {
+    date,
+    maxDate,
+    minDate
+  } = _ref;
+  const formattedDate = dayjs(date);
+  if (maxDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isAfter(maxDate)) return dayjs(maxDate);
+  if (minDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isBefore(minDate)) return dayjs(minDate);
+  return formattedDate;
+};

package/dist/esm/components/UTDatePicker/versions/V1/README.md

@@ -0,0 +1,89 @@
+# UTDatePicker V1
+
+Selector de fecha con input custom y calendario popup. Implementa los 5 estados visuales del design system mediante dos variantes de apariencia (`select` y `picker`).
+
+---
+
+## Diferencias con V0
+
+| Aspecto | V0 | V1 |
+|---------|----|----|
+| Input | `KeyboardDatePicker` de MUI Pickers | Input custom con estados visuales |
+| Calendario | MUI Pickers (popup nativo) | Grid custom con `dayjs` |
+| Estilos | `materialTheme` overrides | CSS Modules + design tokens |
+| Estado visual | Sin distinción de estados | 5 estados: default, selected, focus, error, readOnly |
+| Prop nueva | — | `readOnly`, `variant` |
+
+---
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `classNames` | `object` | — | Clases CSS para sobreescribir estilos internos |
+| `CustomIcon` | `elementType` | — | Reemplaza el ícono de calendario |
+| `disabled` | `bool` | — | Deshabilita toda interacción |
+| `error` | `string` | `''` | Mensaje de error externo |
+| `helpText` | `string` | — | Texto de ayuda debajo del input |
+| `onChange` | `func` | `() => {}` | Callback al confirmar fecha. Recibe string `'DD/MM/YYYY'` |
+| `placeholder` | `string` | `'DD/MM/AAAA'` | Texto cuando no hay fecha seleccionada |
+| `popoverProps` | `object` | — | Props adicionales para el `Popover` de MUI Core |
+| `range` | `{ minDate: string, maxDate: string }` | — | Limita el rango de fechas seleccionables. Formato `'DD/MM/YYYY'` |
+| `readOnly` | `bool` | `false` | Muestra solo texto sin chrome ni interacción |
+| `required` | `bool` | — | Marca el título como requerido |
+| `size` | `'sm' \| 'md'` | `'sm'` | Tamaño del input |
+| `title` | `string` | — | Etiqueta superior del campo |
+| `value` | `string` | `''` | Fecha seleccionada en formato `'DD/MM/YYYY'` |
+| `variant` | `'select' \| 'picker'` | `'select'` | Apariencia del campo. `select` muestra borde estándar con mensaje de error debajo; `picker` usa fondos de color por estado sin borde ni mensaje |
+
+---
+
+## Estados visuales
+
+### `variant='select'` (default)
+
+| Estado | Condición | Fondo | Borde | Íconos |
+|--------|-----------|-------|-------|--------|
+| **default** | Sin valor, sin foco, sin error | blanco | `1px` gris | calendario (derecha) |
+| **selected** | Tiene fecha seleccionada | blanco | `1px` gris | X/clear (derecha) |
+| **focus** | Calendario abierto | blanco | `2px` azul | X (si hay valor) + calendario (derecha) |
+| **error** | `error` prop o fecha inválida | rojo claro | `1px` rojo | alerta (izquierda) + calendario rojo + mensaje debajo |
+| **readOnly/disabled** | `readOnly` o `disabled` | — | ninguno | sin íconos |
+
+### `variant='picker'`
+
+| Estado | Condición | Fondo | Borde | Íconos |
+|--------|-----------|-------|-------|--------|
+| **default** | Sin valor, sin foco, sin error | transparente | ninguno | calendario (derecha) |
+| **selected** | Tiene fecha seleccionada, sin foco | azul claro | ninguno | X/clear (derecha) |
+| **focus** | Calendario abierto, sin error | blanco | `2px` azul | X (si hay valor) + calendario (derecha) |
+| **error** | `error` prop o fecha inválida | rojo claro | ninguno | alerta (izquierda) + calendario rojo |
+| **readOnly/disabled** | `readOnly` o `disabled` | transparente | ninguno | sin íconos |
+
+Prioridad cuando hay múltiples condiciones activas: `readOnly → disabled → error → focus → selected → default`
+
+---
+
+## Ejemplos de uso
+
+```jsx
+// Básico
+<UTDatePicker version="V1" onChange={setValue} value={value} />
+
+// Variante picker
+<UTDatePicker version="V1" onChange={setValue} value={value} variant="picker" />
+
+// Con rango de fechas
+<UTDatePicker
+  version="V1"
+  onChange={setValue}
+  value={value}
+  range={{ minDate: '01/01/2024', maxDate: '31/12/2024' }}
+/>
+
+// Solo lectura con valor
+<UTDatePicker version="V1" onChange={() => {}} value="15/06/2024" readOnly />
+
+// Con error externo
+<UTDatePicker version="V1" onChange={setValue} value={value} error="La fecha ingresada no es válida." />
+```

package/dist/esm/components/UTDatePicker/versions/V1/components/Calendar/index.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import { func, object } from 'prop-types';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import UTButton from '../../../../../UTButton';
+import UTLabel from '../../../../../UTLabel';
+import Day from '../Day';
+import { WEEKDAYS_LABELS, MONTH_YEAR_FORMAT, OUTPUT_LABEL_MASK } from '../../constants';
+import styles from '../../styles.module.scss';
+import { getWeeks } from '../../utils';
+const {
+  UTDatePickerV1TestID
+} = TEST_IDS;
+const Calendar = _ref => {
+  let {
+    maxDate,
+    minDate,
+    onDaySelect,
+    pickedDate
+  } = _ref;
+  const [currentMonth, setCurrentMonth] = useState(pickedDate || dayjs());
+  useEffect(() => {
+    if (pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setCurrentMonth(pickedDate);
+  }, [pickedDate]);
+  const weeks = getWeeks(currentMonth);
+  const handlePrevMonth = () => setCurrentMonth(prev => prev.subtract(1, 'month'));
+  const handleNextMonth = () => setCurrentMonth(prev => prev.add(1, 'month'));
+  const isDisabled = date => {
+    if (minDate && date.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK), 'day')) return true;
+    if (maxDate && date.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK), 'day')) return true;
+    return false;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarContainer,
+    "data-testid": UTDatePickerV1TestID.calendar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.nav
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarPrevBtn,
+    Icon: "IconChevronLeft",
+    onClick: handlePrevMonth,
+    size: "small",
+    variant: "text"
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    align: "center",
+    className: styles.navLabel,
+    dataTestId: UTDatePickerV1TestID.calendarMonthYear,
+    variant: "body",
+    weight: "medium"
+  }, currentMonth.locale('es').format(MONTH_YEAR_FORMAT)), /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarNextBtn,
+    Icon: "IconChevronRight",
+    onClick: handleNextMonth,
+    size: "small",
+    variant: "text"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.month
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.week
+  }, WEEKDAYS_LABELS.map(label => /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.dayCell, " ").concat(styles.dayHeader),
+    key: label,
+    variant: "body",
+    weight: "medium"
+  }, label))), weeks.map(week => /*#__PURE__*/React.createElement("div", {
+    className: styles.week,
+    key: week[0].format('YYYY-MM-DD')
+  }, week.map(date => {
+    const dayInCurrentMonth = date.month() === currentMonth.month();
+    return /*#__PURE__*/React.createElement(Day, {
+      date: date,
+      dayInCurrentMonth: dayInCurrentMonth,
+      isDisabled: isDisabled(date),
+      key: date.format('YYYY-MM-DD'),
+      onClick: onDaySelect,
+      pickedDate: pickedDate
+    });
+  })))));
+};
+Calendar.propTypes = {
+  maxDate: object,
+  minDate: object,
+  onDaySelect: func,
+  pickedDate: object
+};
+export default Calendar;

package/dist/esm/components/UTDatePicker/versions/V1/components/Day/index.js

@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import dayjs from 'dayjs';
+import { bool, func, object } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import { isSelected } from '../../utils';
+import { DAY_NUMBER_FORMAT } from '../../constants';
+import styles from '../../styles.module.scss';
+const Day = _ref => {
+  let {
+    date,
+    dayInCurrentMonth,
+    isDisabled,
+    onClick,
+    pickedDate
+  } = _ref;
+  const selected = isSelected(date, pickedDate);
+  const rootClass = [styles.dayCell, selected && styles.daySelected, !dayInCurrentMonth && styles.otherMonthDay].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: rootClass
+    },
+    colorTheme: selected ? 'negative' : undefined,
+    disabled: isDisabled && dayInCurrentMonth,
+    onClick: () => {
+      if (!isDisabled) onClick(date);
+    },
+    size: "medium",
+    variant: "text"
+  }, dayjs(date).format(DAY_NUMBER_FORMAT));
+};
+Day.propTypes = {
+  date: object,
+  dayInCurrentMonth: bool,
+  isDisabled: bool,
+  onClick: func,
+  pickedDate: object
+};
+export default /*#__PURE__*/memo(Day);

package/dist/esm/components/UTDatePicker/versions/V1/constants.js

@@ -0,0 +1,10 @@
+export const OUTPUT_LABEL_MASK = 'DD/MM/YYYY';
+export const WEEKDAYS_LABELS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+export const MONTH_YEAR_FORMAT = 'MMMM YYYY';
+export const DAY_NUMBER_FORMAT = 'DD';
+export const DEFAULT_PLACEHOLDER = 'DD/MM/AAAA';
+export const TYPING_ERROR_MESSAGE = 'Fecha inválida';
+export const DEFAULT_PROPS = {
+  variant: 'select',
+  size: 'sm'
+};