@widergy/energy-ui 3.155.0 → 3.156.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.156.0](https://github.com/widergy/energy-ui/compare/v3.155.0...v3.156.0) (2026-05-14)
+
+
+### Features
+
+* [AXCH-1404] Add UTDatePicker V1 ([#792](https://github.com/widergy/energy-ui/issues/792)) ([6727f5f](https://github.com/widergy/energy-ui/commit/6727f5fb3ff3df14e08548621efd2c6670cc91ac))
+
 # [3.155.0](https://github.com/widergy/energy-ui/compare/v3.154.0...v3.155.0) (2026-05-13)
 
 
@@ -7,10 +14,9 @@
 
 # [3.154.0](https://github.com/widergy/energy-ui/compare/v3.153.0...v3.154.0) (2026-05-13)
 
+### Novedades y Mejoras
 
-### Features
-
-* add test id support ([#794](https://github.com/widergy/energy-ui/issues/794)) ([9c70e57](https://github.com/widergy/energy-ui/commit/9c70e5700274b390077c416eeeb65123cb102980))
+* Se agregó soporte para identificar elementos de la barra superior y el menú lateral en pruebas automatizadas, mejorando la cobertura y confiabilidad del testing de la interfaz. [#794](https://github.com/widergy/Energy-UI/pull/794) [AUTO-235](https://widergy.atlassian.net/browse/AUTO-235)
 
 # [3.153.0](https://github.com/widergy/energy-ui/compare/v3.152.0...v3.153.0) (2026-05-13)
 
@@ -28,10 +34,9 @@
 
 # [3.151.0](https://github.com/widergy/energy-ui/compare/v3.150.0...v3.151.0) (2026-05-11)
 
+### Novedades y Mejoras
 
-### Features
-
-* [AXCH-1429] dot menu changes ([#786](https://github.com/widergy/energy-ui/issues/786)) ([da08cef](https://github.com/widergy/energy-ui/commit/da08cefc7b5f19bf69e7cb40aed0431f76322b8e)) [AXCH-1429](https://widergy.atlassian.net/browse/AXCH-1429)
+* El menú de opciones contextual ahora admite íconos y colores personalizados por cada opción, incluyendo soporte para resaltar acciones destructivas. También es posible configurar el ícono del botón que abre el menú, su tamaño, y ajustar el estilo de las opciones y el contenedor del menú. [#786](https://github.com/widergy/Energy-UI/pull/786) [AXCH-1429](https://widergy.atlassian.net/browse/AXCH-1429)
 
 # [3.150.0](https://github.com/widergy/energy-ui/compare/v3.149.0...v3.150.0) (2026-05-08)
 

package/dist/components/UTDatePicker/index.js

@@ -4,210 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _pickers = require("@material-ui/pickers");
-var _dayjs = _interopRequireDefault(require("@date-io/dayjs"));
-var _dayjs2 = _interopRequireDefault(require("dayjs"));
-var _es = _interopRequireDefault(require("dayjs/locale/es"));
-var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
-var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
-var _form = require("@widergy/web-utils/lib/form");
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _buttonTypes = require("../../types/buttonTypes");
-var _formTypes = require("../../types/formTypes");
-var _classesUtils = require("../../utils/classesUtils");
-var _UTValidation = _interopRequireDefault(require("../UTValidation"));
-var _utils = require("../UTValidation/utils");
-var _Day = _interopRequireDefault(require("./components/Day"));
-var _theme = require("./theme");
-var _types = require("./types");
-var _constants = require("./constants");
-var _utils2 = require("./utils");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var CalendarIcon = function CalendarIcon(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M8 15c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H6c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M6 6h1v1c0 .55.45 1 1 1s1-.45 1-1V6h6v1c0 .55.45 1 1 1s1-.45 1-1V6h1c.551 0 1 .449 1 1v4H5V7c0-.551.449-1 1-1m12-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1v1H9V3c0-.55-.45-1-1-1s-1 .45-1 1v1H6C4.346 4 3 5.346 3 7v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V7c0-1.654-1.346-3-3-3",
-    id: "a"
-  })), /*#__PURE__*/_react.default.createElement("use", {
-    fillRule: "nonzero",
-    xlinkHref: "#a",
-    transform: "translate(-3 -2)",
-    fill: "current"
-  }));
+const VERSIONS = {
+  V0: _V.default,
+  V1: _V2.default
 };
-CalendarIcon.defaultProps = {
-  width: "18",
-  height: "20",
-  viewBox: "0 0 18 20",
-  xmlns: "http://www.w3.org/2000/svg",
-  xmlnsXlink: "http://www.w3.org/1999/xlink"
-};
-_dayjs2.default.extend(_customParseFormat.default);
-_dayjs2.default.extend(_isBetween.default);
-class CustomUtils extends _dayjs.default {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "getCalendarHeaderText", date => date.format('MMMM'));
-  }
-}
 const UTDatePicker = _ref => {
-  var _field$configuration, _field$configuration2, _field$configuration3;
   let {
-    actions,
-    classes: themeClasses,
-    classNames,
-    CustomIcon,
-    dayFormat,
-    disableToolbar = true,
-    disabled,
-    field,
-    helpText,
-    iconAnchor,
-    input,
-    inputProps,
-    inputVariant = _constants.INPUT_VARIANT,
-    invalidDateMessage,
-    maxDateMessage,
-    minDateMessage,
-    meta = {},
-    pickerProps,
-    placeholder,
-    popoverProps,
-    range,
-    titleVariant,
-    variant,
-    withUpperTitle
+    version = 'V0',
+    ...props
   } = _ref;
-  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
-  const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || _constants.OUTPUT_LABEL_MASK;
-  const onlyPastMonth = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
-  const avoidFutureDates = (field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
-  const {
-    maxDate,
-    minDate
-  } = onlyPastMonth ? (0, _utils2.getPastMonthDates)() : avoidFutureDates ? (0, _utils2.getMaxDate)() : range || pickerProps || {};
-  const [pickedDate, setPickedDate] = (0, _react.useState)(null);
-  const [internalError, setInternalError] = (0, _react.useState)(null);
-  const handleChange = date => {
-    const finalDate = (0, _utils2.getFinalDate)({
-      date,
-      maxDate,
-      minDate
-    });
-    setPickedDate(finalDate);
-    const newValue = (0, _dayjs2.default)(finalDate, _constants.OUTPUT_LABEL_MASK, true);
-    if (newValue.isValid()) input.onChange(newValue.format(configMask));else input.onChange('');
-  };
-  (0, _react.useEffect)(() => {
-    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils2.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
-  }, [input.value]);
-  const renderDay = (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
-    classes: classes,
-    dayFormat: dayFormat,
-    date: date,
-    pickedDate: pickedDate,
-    dayInCurrentMonth: dayInCurrentMonth
-  });
-  const handleError = error => setInternalError(error);
-  const handleRemoveError = () => setInternalError(null);
-  const OpenerIcon = CustomIcon || CalendarIcon;
-  const operenerIconReference = (0, _react.useRef)();
-  const errorMessage = (0, _form.shouldShowErrors)(meta) && (internalError || meta.error) || '';
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
-    actions: actions,
-    className: classes.upperTitle,
-    readOnly: field.read_only,
-    required: field.required,
-    size: titleVariant,
-    withMarkdown: true
-  }, field.title), /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
-    utils: disableToolbar ? _dayjs.default : CustomUtils,
-    locale: _es.default
-  }, /*#__PURE__*/_react.default.createElement(_pickers.KeyboardDatePicker, _extends({
-    disabled: disabled,
-    value: pickedDate,
-    label: inputVariant === 'standard' && (field === null || field === void 0 ? void 0 : field.title),
-    error: (0, _form.shouldShowErrors)(meta),
-    helperText: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      colorTheme: "gray",
-      variant: "small",
-      withMarkdown: true
-    }, helpText), !(0, _isEmpty.default)(errorMessage) && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
-      validationData: (0, _utils.formatErrorToValidation)(errorMessage)
-    })),
-    onError: handleError,
-    onAccept: handleRemoveError,
-    disableToolbar: disableToolbar,
-    keyboardIcon: /*#__PURE__*/_react.default.createElement("div", {
-      ref: operenerIconReference
-    }, /*#__PURE__*/_react.default.createElement(OpenerIcon, {
-      className: disabled ? classes.disabledOpenerIcon : classes.openerIcon
-    })),
-    variant: variant || _constants.VARIANT,
-    InputProps: {
-      classes: {
-        root: classes.input,
-        notchedOutline: classes.notchedOutline
-      },
-      placeholder: inputVariant === 'outlined' && (placeholder || (field === null || field === void 0 ? void 0 : field.placeholder)) || undefined,
-      ...inputProps
-    },
-    invalidDateMessage: invalidDateMessage || _constants.WRONG_DATE_FORMAT,
-    inputVariant: inputVariant,
-    format: _constants.OUTPUT_LABEL_MASK,
-    maxDateMessage: maxDateMessage || _constants.MAX_DATE_MSG,
-    minDateMessage: minDateMessage || _constants.MIN_DATE_MSG,
-    InputAdornmentProps: {
-      position: _constants.BUTTON_POSITION
-    },
-    onChange: handleChange,
-    renderDay: renderDay,
-    PopoverProps: {
-      ...(iconAnchor ? (0, _constants.iconAnchorProps)(operenerIconReference) : {}),
-      ...popoverProps
-    }
-  }, pickerProps, {
-    minDate: minDate,
-    maxDate: maxDate
-  }))));
+  const Component = VERSIONS[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTDatePicker.propTypes = {
-  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
-  classNames: _types.classesPropTypes,
-  classes: _types.classesPropTypes,
-  CustomIcon: _propTypes.node,
-  dayFormat: _propTypes.string,
-  disableToolbar: _propTypes.bool,
-  disabled: _propTypes.bool,
-  field: _formTypes.fieldType,
-  helpText: _propTypes.string,
-  iconAnchor: _propTypes.bool,
-  input: _formTypes.inputPropTypes.isRequired,
-  inputFormat: _propTypes.string,
-  inputProps: _propTypes.object,
-  inputVariant: _propTypes.string,
-  invalidDateMessage: _propTypes.string,
-  maxDateMessage: _propTypes.string,
-  meta: _formTypes.metaPropTypes,
-  minDateMessage: _propTypes.string,
-  pickerProps: _propTypes.object,
-  placeholder: _propTypes.string,
-  popoverProps: _propTypes.object,
-  range: (0, _propTypes.shape)({
-    maxDate: _propTypes.string,
-    minDate: _propTypes.string
-  }),
-  titleVariant: _propTypes.string,
-  variant: _propTypes.string,
-  withUpperTitle: _propTypes.bool
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.materialTheme)(UTDatePicker);
+var _default = exports.default = UTDatePicker;

package/dist/components/UTDatePicker/versions/V0/assets/calendar.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4" id="calendario"></path>
+    </defs>
+    <g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
+        <g id="Group" transform="translate(-3.000000, -2.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#calendario"></use>
+            </mask>
+            <use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
+        </g>
+    </g>
+</svg>

package/dist/components/UTDatePicker/{components → versions/V0/components}/Day/index.js

@@ -22,7 +22,7 @@ const Day = _ref => {
   } = _ref;
   const todaySelected = (0, _utils.isSelected)(date, pickedDate);
   return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    className: "\n      ".concat(classes.day, " \n      ").concat(!dayInCurrentMonth && classes.otherMonthDay, " \n      ").concat(todaySelected && classes.selectedDay, "\n      ")
+    className: "\n      ".concat(classes.day, "\n      ").concat(!dayInCurrentMonth && classes.otherMonthDay, "\n      ").concat(todaySelected && classes.selectedDay, "\n      ")
   }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _dayjs.default)(date).format(dayFormat || _constants.DAY_NUMBER_FORMAT), " "));
 };
 Day.propTypes = {

package/dist/components/UTDatePicker/versions/V0/index.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _pickers = require("@material-ui/pickers");
+var _dayjs = _interopRequireDefault(require("@date-io/dayjs"));
+var _dayjs2 = _interopRequireDefault(require("dayjs"));
+var _es = _interopRequireDefault(require("dayjs/locale/es"));
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
+var _form = require("@widergy/web-utils/lib/form");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _buttonTypes = require("../../../../types/buttonTypes");
+var _formTypes = require("../../../../types/formTypes");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
+var _utils = require("../../../UTValidation/utils");
+var _Day = _interopRequireDefault(require("./components/Day"));
+var _theme = require("./theme");
+var _types = require("./types");
+var _constants = require("./constants");
+var _utils2 = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var CalendarIcon = function CalendarIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8 15c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H6c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M6 6h1v1c0 .55.45 1 1 1s1-.45 1-1V6h6v1c0 .55.45 1 1 1s1-.45 1-1V6h1c.551 0 1 .449 1 1v4H5V7c0-.551.449-1 1-1m12-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1v1H9V3c0-.55-.45-1-1-1s-1 .45-1 1v1H6C4.346 4 3 5.346 3 7v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V7c0-1.654-1.346-3-3-3",
+    id: "a"
+  })), /*#__PURE__*/_react.default.createElement("use", {
+    fillRule: "nonzero",
+    xlinkHref: "#a",
+    transform: "translate(-3 -2)",
+    fill: "current"
+  }));
+};
+CalendarIcon.defaultProps = {
+  width: "18",
+  height: "20",
+  viewBox: "0 0 18 20",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+};
+_dayjs2.default.extend(_customParseFormat.default);
+_dayjs2.default.extend(_isBetween.default);
+class CustomUtils extends _dayjs.default {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "getCalendarHeaderText", date => date.format('MMMM'));
+  }
+}
+const UTDatePickerV0 = _ref => {
+  var _field$configuration, _field$configuration2, _field$configuration3;
+  let {
+    actions,
+    classes: themeClasses,
+    classNames,
+    CustomIcon,
+    dayFormat,
+    disableToolbar = true,
+    disabled,
+    field,
+    helpText,
+    iconAnchor,
+    input,
+    inputProps,
+    inputVariant = _constants.INPUT_VARIANT,
+    invalidDateMessage,
+    maxDateMessage,
+    minDateMessage,
+    meta = {},
+    pickerProps,
+    placeholder,
+    popoverProps,
+    range,
+    titleVariant,
+    variant,
+    withUpperTitle
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || _constants.OUTPUT_LABEL_MASK;
+  const onlyPastMonth = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
+  const avoidFutureDates = (field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
+  const {
+    maxDate,
+    minDate
+  } = onlyPastMonth ? (0, _utils2.getPastMonthDates)() : avoidFutureDates ? (0, _utils2.getMaxDate)() : range || pickerProps || {};
+  const [pickedDate, setPickedDate] = (0, _react.useState)(null);
+  const [internalError, setInternalError] = (0, _react.useState)(null);
+  const handleChange = date => {
+    const finalDate = (0, _utils2.getFinalDate)({
+      date,
+      maxDate,
+      minDate
+    });
+    setPickedDate(finalDate);
+    const newValue = (0, _dayjs2.default)(finalDate, _constants.OUTPUT_LABEL_MASK, true);
+    if (newValue.isValid()) input.onChange(newValue.format(configMask));else input.onChange('');
+  };
+  (0, _react.useEffect)(() => {
+    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils2.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
+  }, [input.value]);
+  const renderDay = (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
+    classes: classes,
+    dayFormat: dayFormat,
+    date: date,
+    pickedDate: pickedDate,
+    dayInCurrentMonth: dayInCurrentMonth
+  });
+  const handleError = error => setInternalError(error);
+  const handleRemoveError = () => setInternalError(null);
+  const OpenerIcon = CustomIcon || CalendarIcon;
+  const operenerIconReference = (0, _react.useRef)();
+  const errorMessage = (0, _form.shouldShowErrors)(meta) && (internalError || meta.error) || '';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
+    className: classes.upperTitle,
+    readOnly: field.read_only,
+    required: field.required,
+    size: titleVariant,
+    withMarkdown: true
+  }, field.title), /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
+    utils: disableToolbar ? _dayjs.default : CustomUtils,
+    locale: _es.default
+  }, /*#__PURE__*/_react.default.createElement(_pickers.KeyboardDatePicker, _extends({
+    disabled: disabled,
+    value: pickedDate,
+    label: inputVariant === 'standard' && (field === null || field === void 0 ? void 0 : field.title),
+    error: (0, _form.shouldShowErrors)(meta),
+    helperText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: "gray",
+      variant: "small",
+      withMarkdown: true
+    }, helpText), !(0, _isEmpty.default)(errorMessage) && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+      validationData: (0, _utils.formatErrorToValidation)(errorMessage)
+    })),
+    onError: handleError,
+    onAccept: handleRemoveError,
+    disableToolbar: disableToolbar,
+    keyboardIcon: /*#__PURE__*/_react.default.createElement("div", {
+      ref: operenerIconReference
+    }, /*#__PURE__*/_react.default.createElement(OpenerIcon, {
+      className: disabled ? classes.disabledOpenerIcon : classes.openerIcon
+    })),
+    variant: variant || _constants.VARIANT,
+    InputProps: {
+      classes: {
+        root: classes.input,
+        notchedOutline: classes.notchedOutline
+      },
+      placeholder: inputVariant === 'outlined' && (placeholder || (field === null || field === void 0 ? void 0 : field.placeholder)) || undefined,
+      ...inputProps
+    },
+    invalidDateMessage: invalidDateMessage || _constants.WRONG_DATE_FORMAT,
+    inputVariant: inputVariant,
+    format: _constants.OUTPUT_LABEL_MASK,
+    maxDateMessage: maxDateMessage || _constants.MAX_DATE_MSG,
+    minDateMessage: minDateMessage || _constants.MIN_DATE_MSG,
+    InputAdornmentProps: {
+      position: _constants.BUTTON_POSITION
+    },
+    onChange: handleChange,
+    renderDay: renderDay,
+    PopoverProps: {
+      ...(iconAnchor ? (0, _constants.iconAnchorProps)(operenerIconReference) : {}),
+      ...popoverProps
+    }
+  }, pickerProps, {
+    minDate: minDate,
+    maxDate: maxDate
+  }))));
+};
+UTDatePickerV0.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  classNames: _types.classesPropTypes,
+  classes: _types.classesPropTypes,
+  CustomIcon: _propTypes.node,
+  dayFormat: _propTypes.string,
+  disableToolbar: _propTypes.bool,
+  disabled: _propTypes.bool,
+  field: _formTypes.fieldType,
+  helpText: _propTypes.string,
+  iconAnchor: _propTypes.bool,
+  input: _formTypes.inputPropTypes.isRequired,
+  inputFormat: _propTypes.string,
+  inputProps: _propTypes.object,
+  inputVariant: _propTypes.string,
+  invalidDateMessage: _propTypes.string,
+  maxDateMessage: _propTypes.string,
+  meta: _formTypes.metaPropTypes,
+  minDateMessage: _propTypes.string,
+  pickerProps: _propTypes.object,
+  placeholder: _propTypes.string,
+  popoverProps: _propTypes.object,
+  range: (0, _propTypes.shape)({
+    maxDate: _propTypes.string,
+    minDate: _propTypes.string
+  }),
+  titleVariant: _propTypes.string,
+  variant: _propTypes.string,
+  withUpperTitle: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.materialTheme)(UTDatePickerV0);

package/dist/components/UTDatePicker/{theme.js → versions/V0/theme.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = exports.materialTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
-var _classesUtils = require("../../utils/classesUtils");
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
+var _classesUtils = require("../../../../utils/classesUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
   let {

package/dist/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." />
+```