@rolster/react-components 19.0.0 → 19.0.2

package/dist/cjs/assets/{index-QCv-Uo8R.css → index-DEldF_Je.css}

@@ -98,6 +98,8 @@
 
 .rls-badge {
   --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-font-color: var(--rls-app-color-050);
+  --pvt-background: var(--rls-app-color-700);
   --pvt-contrast-font-color: var(--rls-app-color-600);
   --pvt-contrast-background: var(--rls-app-color-200);
   position: relative;
@@ -124,10 +126,10 @@
   background: var(--pvt-contrast-background);
 }
 .rls-badge[rls-theme] {
+  --pvt-font-color: var(--rls-theme-color-050);
+  --pvt-background: var(--rls-theme-color-500);
   --pvt-contrast-font-color: var(--rls-theme-color-700);
   --pvt-contrast-background: var(--rls-theme-color-100);
-  color: var(--rls-theme-color-050);
-  background: var(--rls-theme-color-500);
 }
 .rls-badge > span {
   font-size: inherit;
@@ -2619,13 +2621,203 @@
     bottom 120ms 0ms var(--rls-deceleration-curve);
 } /*# sourceMappingURL=Modal.css.map */
 
-.rls-picker-date {
+.rls-picker-clock {
   position: relative;
   display: flex;
-  flex-direction: column;
   width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-clock-padding, 0rem);
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-clock-radius, 0rem);
+  background: var(--rlc-picker-clock-background, transparent);
+}
+.rls-picker-clock__header {
+  display: flex;
+  column-gap: var(--rls-sizing-x8);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+  justify-content: center;
+}
+.rls-picker-clock__title {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x2);
+  align-items: center;
+}
+.rls-picker-clock__title__value {
+  width: 16rem;
+  text-align: center;
+  font-size: var(--rls-heading4-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  color: var(--rls-app-color-600);
+}
+.rls-picker-clock__title__value--active {
+  color: var(--rls-theme-color-500);
+}
+.rls-picker-clock__title__value:hover {
+  color: var(--rls-app-color-900);
+}
+.rls-picker-clock__title__separator {
+  font-size: var(--rls-title-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-picker-clock__zone {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-picker-clock__zone__value {
+  width: 18rem;
+  text-align: center;
+  padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x2);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  background: var(--rls-app-color-200);
+}
+.rls-picker-clock__zone__value--active {
+  background: var(--rls-theme-gradient-500);
+  color: var(--rls-theme-color-050);
+}
+.rls-picker-clock__body {
+  display: flex;
+  justify-content: center;
+}
+.rls-picker-clock__plate {
+  width: 120rem;
+  height: 120rem;
+  border-radius: 50%;
+  border: var(--rls-app-border-2-200);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rls-picker-clock__canvas {
+  position: absolute;
+}
+.rls-picker-clock__canvas__line {
+  stroke: var(--rls-theme-color-500);
+  stroke-width: var(--rls-sizing-x1);
+}
+.rls-picker-clock__canvas__center {
+  fill: var(--rls-theme-color-500);
+}
+.rls-picker-clock__canvas__indicator {
+  fill: var(--rls-theme-color-300);
+}
+.rls-picker-clock__canvas__point {
+  fill: var(--rls-theme-color-050);
+}
+.rls-picker-clock__tick {
+  position: absolute;
+  width: var(--rls-sizing-x14);
+  height: var(--rls-sizing-x14);
+  line-height: var(--rls-sizing-x14);
+  text-align: center;
+  cursor: pointer;
+  font-size: var(--rls-paragraph-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-picker-clock__footer {
+  --rlc-button-width: 100%;
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+    var(--rls-sizing-x8);
   overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-picker-clock__footer--today {
+  display: flex;
+  width: var(--rls-sizing-x16);
+  align-items: center;
+  justify-content: center;
+} /*# sourceMappingURL=PickerClock.css.map */
+
+.rls-field-clock {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-field-clock-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-action-dimension: var(
+    --rlc-field-box-action-dimension,
+    var(--rls-sizing-x12)
+  );
+  --pvt-action-background: var(
+    --rlc-field-box-action-background,
+    var(--rls-app-color-200)
+  );
+  --pvt-control-width: calc(100% - var(--pvt-action-dimension));
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-field-clock .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
+.rls-field-clock .rls-field-box__body {
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-field-clock__control {
+  position: relative;
+  width: var(--pvt-control-width);
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-field-clock__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-field-clock__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-field-clock__action {
+  --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
+  width: var(--pvt-action-dimension);
+  height: var(--pvt-action-dimension);
+  color: var(--rls-app-color-600);
+  padding: 0rem;
+  outline: none;
+  border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
+  background: var(--pvt-action-background);
+}
+.rls-field-clock__action:disabled {
+  opacity: 0.5;
+  background: rgba(0, 0, 0, 0);
+}
+.rls-field-clock__action .rls-icon {
+  margin: 1rem;
+}
+.rls-field-clock-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-clock-radius: var(--rls-sizing-x4);
+  --rlc-picker-clock-background: var(--rls-app-color-050);
+} /*# sourceMappingURL=FieldClock.css.map */
+
+.rls-picker-date {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
   row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  user-select: none;
   border-radius: var(--rlc-picker-date-radius, 0rem);
   background: var(--rlc-picker-date-background, transparent);
 }
@@ -2686,9 +2878,9 @@
 
 .rls-field-date {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-  --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
+  --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
   --pvt-letter-spacing: var(
-    --rlc-datefield-letter-spacing,
+    --rlc-field-date-letter-spacing,
     var(--rls-input-letter-spacing)
   );
   --pvt-action-dimension: var(
@@ -2821,9 +3013,12 @@
 
 .rls-field-date-range {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-  --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
+  --pvt-font-size: var(
+    --rlc-field-date-range-font-size,
+    var(--rls-input-font-size)
+  );
   --pvt-letter-spacing: var(
-    --rlc-datefield-letter-spacing,
+    --rlc-field-date-range-letter-spacing,
     var(--rls-input-letter-spacing)
   );
   --pvt-action-dimension: var(

package/dist/cjs/index.js

@@ -2060,10 +2060,6 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-const DATE_FORMAT = '{dd}/{mx}/{yy}';
-const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
-
 function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     const classNameModal = require$$0.useMemo(() => {
         return renderClassStatus('rls-modal', { visible }, className);
@@ -2074,6 +2070,251 @@ function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
+function formatTime(value) {
+    return String(value).padStart(2, '0');
+}
+const CLOCK_VALUES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const RADIUS = 48;
+const DIAL_RADIUS = 60;
+const TICK_RADIUS = 7;
+function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
+    const styleTick = require$$0.useMemo(() => {
+        const radian = (value / 6) * Math.PI;
+        const x = Math.sin(radian) * RADIUS;
+        const y = Math.cos(radian) * RADIUS;
+        return {
+            left: `${DIAL_RADIUS + x - TICK_RADIUS - 1}rem`,
+            top: `${DIAL_RADIUS - y - TICK_RADIUS - 1}rem`
+        };
+    }, []);
+    const label = require$$0.useMemo(() => {
+        if (selectionIsHours) {
+            return formatTime(value);
+        }
+        if (value === 12) {
+            return formatTime(0);
+        }
+        return formatTime(value * 5);
+    }, [selectionIsHours]);
+    const onClick = require$$0.useCallback((event) => {
+        event.preventDefault();
+        onValue(value);
+    }, [onValue]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
+}
+function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
+    const timeInitial = require$$0.useMemo(() => {
+        return formControl?.value ?? time ?? dates.Time.now();
+    }, [formControl?.value, time]);
+    const plateElement = require$$0.useRef(null);
+    const lineElement = require$$0.useRef(null);
+    const centerElement = require$$0.useRef(null);
+    const indicatorElement = require$$0.useRef(null);
+    const pointElement = require$$0.useRef(null);
+    const [labels, setLabels] = require$$0.useState({
+        timeActionCancel: reactI18n('dateActionCancel'),
+        timeActionSelect: reactI18n('dateActionSelect')
+    });
+    const [zoneIsPM, setZoneIsPM] = require$$0.useState(timeInitial.hour >= 12);
+    const [hour, setHour] = require$$0.useState(zoneIsPM ? timeInitial.hour - 12 : timeInitial.hour);
+    const [minute, setMinute] = require$$0.useState(timeInitial.minute);
+    const [selectionIsHours, setSelectionIsHours] = require$$0.useState(true);
+    const selectionIsActive = require$$0.useRef(false);
+    const radianUnit = require$$0.useMemo(() => {
+        return Math.PI / (selectionIsHours ? 6 : 30);
+    }, [selectionIsHours]);
+    const hourFormat = require$$0.useMemo(() => {
+        return formatTime(hour === 0 ? 12 : hour);
+    }, [hour]);
+    const minuteFormat = require$$0.useMemo(() => {
+        return formatTime(minute);
+    }, [minute]);
+    const classNameHour = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameMinute = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: !selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameAM = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: !zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const classNamePM = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const refreshClockHour = require$$0.useEffectEvent(() => {
+        refreshClock(hour > 12 ? hour - 12 : hour);
+    });
+    const refreshClockMinute = require$$0.useEffectEvent(() => {
+        refreshClock(minute);
+    });
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                timeActionCancel: reactI18n('dateActionCancel'),
+                timeActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
+    require$$0.useEffect(() => {
+        selectionIsHours ? refreshClockHour() : refreshClockMinute();
+    }, [selectionIsHours]);
+    const refreshComponent = require$$0.useCallback((clientX, clientY) => {
+        const rectangle = plateElement.current.getBoundingClientRect();
+        const centerX = rectangle.left + rectangle.width / 2;
+        const centerY = rectangle.top + rectangle.height / 2;
+        const positionX = clientX - centerX;
+        const positionY = clientY - centerY;
+        const angle = Math.atan2(-positionX, positionY) + Math.PI;
+        const value = Math.round(angle / radianUnit);
+        refreshClock(value);
+        selectionIsHours ? setHour(value === 0 ? 12 : value) : setMinute(value);
+    }, [selectionIsHours, radianUnit]);
+    const refreshClock = require$$0.useCallback((value) => {
+        const angle = value * radianUnit;
+        const x2 = Math.sin(angle) * (RADIUS - TICK_RADIUS);
+        const y2 = -Math.cos(angle) * (RADIUS - TICK_RADIUS);
+        const cx = Math.sin(angle) * RADIUS;
+        const cy = -Math.cos(angle) * RADIUS;
+        lineElement.current.setAttribute('x2', `${x2 - 1}rem`);
+        lineElement.current.setAttribute('y2', `${y2 - 1}rem`);
+        indicatorElement.current.setAttribute('cx', `${cx - 1}rem`);
+        indicatorElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.setAttribute('cx', `${cx - 1}rem`);
+        pointElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.style.visibility =
+            selectionIsHours || value % 5 === 0 ? 'hidden' : 'visible';
+    }, [selectionIsHours, radianUnit]);
+    const onClickHour = require$$0.useCallback(() => {
+        setSelectionIsHours(true);
+    }, []);
+    const onClickMinute = require$$0.useCallback(() => {
+        setSelectionIsHours(false);
+    }, []);
+    const onClickAM = require$$0.useCallback(() => {
+        setZoneIsPM(false);
+    }, []);
+    const onClickPM = require$$0.useCallback(() => {
+        setZoneIsPM(true);
+    }, []);
+    const onActiveSelection = require$$0.useCallback(() => {
+        selectionIsActive.current = true;
+    }, []);
+    const onMouseSelection = require$$0.useCallback((event) => {
+        if (selectionIsActive.current) {
+            event.preventDefault();
+            refreshComponent(event.clientX, event.clientY);
+        }
+    }, [refreshComponent]);
+    const onTouchSelection = require$$0.useCallback((event) => {
+        const touch = event.touches.item(0);
+        if (selectionIsActive.current && touch) {
+            refreshComponent(touch.clientX, touch.clientY);
+        }
+    }, [refreshComponent]);
+    const onInactiveSelection = require$$0.useCallback(() => {
+        selectionIsActive.current = false;
+    }, []);
+    const onClickValue = require$$0.useCallback((value) => {
+        if (selectionIsHours) {
+            setHour(value);
+            refreshClock(value);
+        }
+        else {
+            const minute = value === 12 ? 0 : value * 5;
+            setMinute(minute);
+            refreshClock(minute);
+        }
+    }, [selectionIsHours]);
+    const onCancel = require$$0.useCallback(() => {
+        onListener?.({ event: components.PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onCurrentTime = require$$0.useCallback(() => {
+        const currentTime = dates.Time.now();
+        formControl?.setValue(currentTime);
+        setHour(currentTime.hour);
+        setMinute(currentTime.minute);
+        onListener?.({
+            event: components.PickerListenerEvent.Select,
+            value: currentTime
+        });
+    }, [formControl, onListener]);
+    const onSelect = require$$0.useCallback(() => {
+        const hourValue = zoneIsPM
+            ? hour !== 12
+                ? hour + 12
+                : 12
+            : hour === 12
+                ? 0
+                : hour;
+        const timeValue = new dates.Time(hourValue, minute);
+        formControl?.setValue(timeValue);
+        onListener?.({
+            event: components.PickerListenerEvent.Select,
+            value: timeValue
+        });
+    }, [formControl, hour, minute, zoneIsPM, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onMouseDown: onActiveSelection, onMouseMove: onMouseSelection, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onActiveSelection, onTouchMove: onTouchSelection, onTouchEnd: onInactiveSelection, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
+                                        transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
+                                    }, children: [jsxRuntimeExports.jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), jsxRuntimeExports.jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), jsxRuntimeExports.jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), jsxRuntimeExports.jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
+                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
+                            }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
+}
+
+function RlsFieldClock({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
+    const _disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabled;
+    }, [formControl?.disabled, disabled]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled: _disabled,
+            readonly: readOnly
+        });
+    }, [_disabled, readOnly]);
+    const { icon, valueInput } = require$$0.useMemo(() => {
+        return {
+            icon: value ? 'trash-2' : 'timer',
+            valueInput: value?.normalizeMeridiemFormat || ''
+        };
+    }, [value]);
+    const onClickInput = require$$0.useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = require$$0.useCallback(() => {
+        if (value) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [value, formControl, valueInitial, onChange]);
+    const onListener = require$$0.useCallback(({ event, value }) => {
+        event !== components.PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: _disabled, onListener: onListener }) })] }));
+}
+
+const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
+
 function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const today = require$$0.useRef(new Date()); // Initial current date in component
     const _date = require$$0.useMemo(() => {
@@ -2126,33 +2367,31 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
     }, []);
     const onCancel = require$$0.useCallback(() => {
-        onListener && onListener({ event: components.PickerListenerEvent.Cancel });
+        onListener?.({ event: components.PickerListenerEvent.Cancel });
     }, [onListener]);
     const onToday = require$$0.useCallback(() => {
         yearControl.setValue(today.current.getFullYear());
         dayControl.setValue(today.current.getDate());
         monthControl.setValue(today.current.getMonth());
         formControl?.setValue(today.current);
-        onListener &&
-            onListener({
-                event: components.PickerListenerEvent.Now,
-                value: today.current
-            });
-    }, [today.current, formControl, onListener]);
+        onListener?.({
+            event: components.PickerListenerEvent.Now,
+            value: today.current
+        });
+    }, [formControl, onListener]);
     const onSelect = require$$0.useCallback(() => {
         formControl?.setValue(value);
-        onListener &&
-            onListener({
-                event: components.PickerListenerEvent.Select,
-                value
-            });
+        onListener?.({
+            event: components.PickerListenerEvent.Select,
+            value
+        });
     }, [formControl, value, onListener]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
-function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
+function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const today = require$$0.useRef(new Date()); // Initial current date in component
-    const [value, setValue] = require$$0.useState(formControl?.value ?? _value);
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
     const _disabled = require$$0.useMemo(() => {
         return formControl?.disabled || disabled;
@@ -2187,14 +2426,14 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
     }, [onValue]);
     const onClickAction = require$$0.useCallback(() => {
         if (value) {
-            formControl?.setValue(_value);
+            formControl?.setValue(valueInitial);
             formControl?.touch();
-            onChange(_value);
+            onChange(valueInitial);
         }
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, _value, onChange]);
+    }, [value, formControl, valueInitial, onChange]);
     const onListener = require$$0.useCallback(({ event, value }) => {
         event !== components.PickerListenerEvent.Cancel && onChange(value);
         formControl?.touch();
@@ -2209,8 +2448,8 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
-function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const _date = require$$0.useMemo(() => dates.normalizeMinTime(_picker ?? new Date()), [_picker]);
+function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const _date = require$$0.useMemo(() => dates.normalizeMinTime(datePicker ?? new Date()), [datePicker]);
     const _range = require$$0.useMemo(() => formControl?.value ?? dates.DateRange.now(), [formControl?.value]);
     const yearControl = reactForms.useReactControl(_date.getFullYear());
     const monthControl = reactForms.useReactControl(_date.getMonth());
@@ -3045,6 +3284,7 @@ exports.RlsDatatableTitle = RlsDatatableTitle;
 exports.RlsDatatableTotals = RlsDatatableTotals;
 exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
 exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
+exports.RlsFieldClock = RlsFieldClock;
 exports.RlsFieldDate = RlsFieldDate;
 exports.RlsFieldDateRange = RlsFieldDateRange;
 exports.RlsFieldDecimal = RlsFieldDecimal;
@@ -3079,6 +3319,7 @@ exports.RlsModal = RlsModal;
 exports.RlsModalSheet = RlsModalSheet;
 exports.RlsNavbar = RlsNavbar;
 exports.RlsPagination = RlsPagination;
+exports.RlsPickerClock = RlsPickerClock;
 exports.RlsPickerDate = RlsPickerDate;
 exports.RlsPickerDateRange = RlsPickerDateRange;
 exports.RlsPickerDay = RlsPickerDay;