@onesy/ui-react 1.0.150 → 1.0.152

package/Calendar/Calendar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { OnesyDate } from '@onesy/date';
-import { ICalenarDays, TCalendarMonthCalendar, TCalendarMonthValue } from '../CalendarMonth/CalendarMonth';
+import { ICalendarMonth, TCalendarMonthCalendar, TCalendarMonthValue } from '../CalendarMonth/CalendarMonth';
 import { ISurface } from '../Surface/Surface';
 import { IElementReference, IPropsAny } from '../types';
 export type TGetOnesyDates = (value: TCalendarMonthValue, calendar: TCalendarMonthCalendar, props: IPropsAny) => Array<{
@@ -35,8 +35,7 @@ export type ICalendar = Omit<ISurface, 'version' | 'onChange'> & {
     IconPrevious?: IElementReference;
     IconNext?: IElementReference;
     IconDropDown?: IElementReference;
-    CalendarMonthProps?: any;
-    CalendarDayProps?: ICalenarDays;
+    CalendarMonthProps?: ICalendarMonth;
     OptionButtonProps?: any;
     PaginationItemsProps?: any;
 };

package/CalendarMonth/CalendarMonth.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { OnesyDate } from '@onesy/date';
 import { ILine } from '../Line/Line';
-import { IPropsAny } from '../types';
+import { IColor, IPropsAny } from '../types';
 import { ICalendarViewsView } from '../CalendarViews/CalendarViews';
 export type TCalendarMonthValue = OnesyDate | [OnesyDate, OnesyDate];
 export type TCalendarMonthCalendar = OnesyDate;
@@ -17,13 +17,15 @@ export type ICalendarMonthValuesValue = {
     move: 'previous' | 'next';
 };
 export type TCalendarMonthValues = [ICalendarMonthValuesValue, ICalendarMonthValuesValue];
-export type ICalenarDays = Omit<ILine, 'onChange'> & {
+export type ICalendarMonth = Omit<ILine, 'onChange'> & {
     value?: TCalendarMonthValue;
     valueDefault?: TCalendarMonthValue;
     onChange?: (value: TCalendarMonthValue) => any;
     calendar?: TCalendarMonthCalendar;
     calendarDefault?: TCalendarMonthCalendar;
     onChangeCalendar?: (value: TCalendarMonthCalendar) => any;
+    colorSelected?: IColor;
+    selected?: Array<[OnesyDate, OnesyDate?]>;
     onTimeClick?: (date: OnesyDate, view: ICalendarViewsView, event: MouseEvent) => any;
     now?: boolean;
     outside?: boolean;
@@ -44,5 +46,28 @@ export type ICalenarDays = Omit<ILine, 'onChange'> & {
     TransitionProps?: IPropsAny;
     TransitionsProps?: IPropsAny;
 };
-declare const CalendarMonth: React.FC<ICalenarDays>;
+export interface IDay {
+    value: number;
+    in: boolean;
+    dayWeek: number;
+    weekend: boolean;
+    today: boolean;
+    is: {
+        start: boolean;
+        between: boolean;
+        end: boolean;
+        same: boolean;
+        selected: boolean;
+        outside: boolean;
+        fromSelected: boolean;
+        monthStart: boolean;
+        monthEnd: boolean;
+        selectedIndex: number;
+        selectedSame: boolean;
+    };
+    start: boolean;
+    end: boolean;
+    onesyDate: OnesyDate;
+}
+declare const CalendarMonth: React.FC<ICalendarMonth>;
 export default CalendarMonth;

package/CalendarMonth/CalendarMonth.js

@@ -19,12 +19,14 @@ var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
 var _Transitions = _interopRequireDefault(require("../Transitions"));
 var _Transition = _interopRequireDefault(require("../Transition"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
+const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "colorSelected", "selected", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
   root: {
-    // for transition
+    position: 'relative'
+  },
+  root_transition: {
     overflow: 'hidden',
     position: 'relative'
   },
@@ -82,6 +84,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
     visibility: 'hidden',
     opacity: '0'
   },
+  daySelected: {
+    '&.onesy-Button-disabled': {
+      opacity: 1
+    }
+  },
   dayStart: {
     borderRadius: `${theme.methods.shape.radius.value(40, 'px')} 0 0 ${theme.methods.shape.radius.value(40, 'px')}`
   },
@@ -91,18 +98,24 @@ const useStyle = (0, _styleReact.style)(theme => ({
   dayStartEnd: {
     borderRadius: theme.methods.shape.radius.value(40, 'px')
   },
-  dayStartSelected: {
-    '&::before': {
+  dayStartSelection: {
+    '&::after': {
       content: '""',
       position: 'absolute',
       left: '50%',
       top: '0',
       height: '100%',
       width: '50%',
-      background: 'currentColor'
+      zIndex: 0
+    },
+    '&.onesy-enabled::after': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 85 : 25})`
+    },
+    '&.onesy-disabled::after': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 90 : 20})`
     }
   },
-  dayEndSelected: {
+  dayEndSelection: {
     '&::before': {
       content: '""',
       position: 'absolute',
@@ -111,7 +124,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
       top: '0',
       height: '100%',
       width: '50%',
-      background: 'currentColor'
+      zIndex: 0
+    },
+    '&.onesy-enabled::before': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 85 : 25})`
+    },
+    '&.onesy-disabled::before': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 90 : 20})`
     }
   },
   weeks: {
@@ -172,6 +191,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
     }
   },
   dayValue: {
+    zIndex: 1,
     '&:hover': {
       boxShadow: 'inset 0px 0px 0px 1px currentColor'
     }
@@ -225,6 +245,8 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       calendar: calendar_,
       calendarDefault,
       onChangeCalendar,
+      colorSelected = 'secondary',
+      selected,
       onTimeClick,
       range,
       offset = 0,
@@ -361,13 +383,105 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const previousMonthEnd = (0, _date.endOf)(previousMonth, 'month');
   const nextMonth = (0, _date.add)(1, 'month', month);
   const monthSame = ((_refs$previous$curren = refs.previous.current) === null || _refs$previous$curren === void 0 ? void 0 : _refs$previous$curren.year) === (calendar === null || calendar === void 0 ? void 0 : calendar.year) && ((_refs$previous$curren2 = refs.previous.current) === null || _refs$previous$curren2 === void 0 ? void 0 : _refs$previous$curren2.month) === (calendar === null || calendar === void 0 ? void 0 : calendar.month);
-  const isBetween = day => {
-    var _value$, _value$2;
-    return day.milliseconds >= ((_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.milliseconds) && day.milliseconds <= ((_value$2 = value[1]) === null || _value$2 === void 0 ? void 0 : _value$2.milliseconds) + 4000;
-  };
-  const isSelected = day => value.some(item => item.year === day.year && item.month === day.month && item.day === day.day);
-  const selectedIndex = day => value.findIndex(item => item.year === day.year && item.month === day.month && item.day === day.day);
-  const selectedSame = day => value.filter(item => item.year === day.year && item.month === day.month && item.day === day.day).length === 2;
+  const getRanges = _react.default.useCallback(ranges => {
+    // Convert all ranges to start/end timestamps
+    const rangeTimestamps = ranges.map(itemRange => ({
+      start: itemRange[0].milliseconds,
+      end: (itemRange[1] || itemRange[0]).milliseconds
+    }));
+
+    // Sort by start time
+    rangeTimestamps.sort((a, b) => a.start - b.start);
+
+    // Merge overlapping ranges
+    const mergedRanges = [];
+    let currentRange = rangeTimestamps[0];
+    for (let i = 1; i < rangeTimestamps.length; i++) {
+      if (rangeTimestamps[i].start <= currentRange.end) {
+        // Ranges overlap, merge them
+        currentRange.end = Math.max(currentRange.end, rangeTimestamps[i].end);
+      } else {
+        // No overlap, push current range and start new one
+        mergedRanges.push(currentRange);
+        currentRange = rangeTimestamps[i];
+      }
+    }
+    mergedRanges.push(currentRange);
+    return mergedRanges.filter(Boolean);
+  }, []);
+  const rangesValue = _react.default.useMemo(() => {
+    const ranges = [value].map(item => {
+      return item.map((itemRange, index) => !index ? (0, _date.startOf)(itemRange, 'day') : (0, _date.endOf)(itemRange, 'day'));
+    });
+    return getRanges(ranges);
+  }, [value]);
+  const rangesSelected = _react.default.useMemo(() => {
+    const ranges = [...(selected || [])].map(item => {
+      return item.map((itemRange, index) => !index ? (0, _date.startOf)(itemRange, 'day') : (0, _date.endOf)(itemRange, 'day'));
+    });
+    return getRanges(ranges);
+  }, [selected]);
+  const getDetails = _react.default.useCallback(day => {
+    const dayFormat = (0, _date.format)(day, 'DD-MM-YYYY');
+    const dayMonthStart = (0, _date.format)((0, _date.startOf)(day, 'month'), 'DD-MM-YYYY');
+    const dayMonthEnd = (0, _date.format)((0, _date.endOf)(day, 'month'), 'DD-MM-YYYY');
+    const result = {
+      start: false,
+      between: false,
+      end: false,
+      same: false,
+      selected: false,
+      outside: false,
+      fromSelected: false,
+      monthStart: dayMonthStart === dayFormat,
+      monthEnd: dayMonthEnd === dayFormat,
+      selectedIndex: value.findIndex(item => item.year === day.year && item.month === day.month && item.day === day.day),
+      selectedSame: value.filter(item => item.year === day.year && item.month === day.month && item.day === day.day).length === 2
+    };
+
+    // selected
+    for (const itemRange of rangesSelected) {
+      const rangeStartDay = (0, _date.format)(new _date.OnesyDate(itemRange.start), 'DD-MM-YYYY');
+      const rangeEndDay = (0, _date.format)(new _date.OnesyDate(itemRange.end), 'DD-MM-YYYY');
+
+      // start
+      if (dayFormat === rangeStartDay) result.selected = result.start = true;
+
+      // end
+      if (dayFormat === rangeEndDay) result.selected = result.end = true;
+
+      // between
+      if (day.milliseconds >= itemRange.start && day.milliseconds <= itemRange.end) result.selected = result.between = true;
+
+      // same
+      result.same = result.start && result.end;
+      if (result.selected) {
+        result.fromSelected = true;
+        return result;
+      }
+    }
+
+    // value
+    for (const itemRange of rangesValue) {
+      const rangeStartDay = (0, _date.format)(new _date.OnesyDate(itemRange.start), 'DD-MM-YYYY');
+      const rangeEndDay = (0, _date.format)(new _date.OnesyDate(itemRange.end), 'DD-MM-YYYY');
+
+      // start
+      if (dayFormat === rangeStartDay) result.selected = result.start = true;
+
+      // end
+      if (dayFormat === rangeEndDay) result.selected = result.end = true;
+
+      // between
+      if (day.milliseconds >= itemRange.start && day.milliseconds <= itemRange.end) result.selected = result.between = true;
+
+      // same
+      result.same = result.start && result.end;
+      if (result.selected) return result;
+    }
+    result.outside = true;
+    return result;
+  }, [value, selected, rangesSelected, rangesValue]);
   let isMonthFrom = false;
   let isMonthTo = false;
 
@@ -375,18 +489,15 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   for (let i = 0; i < month.daysInMonth; i++) {
     let day = (0, _date.set)(i + 1, 'day', month);
     day = (0, _date.set)(14, 'hour', day);
-    const selectedIndex_ = selectedIndex(day);
-    if (selectedIndex_ === 0) isMonthFrom = true;else if (selectedIndex_ === 1) isMonthTo = true;
+    const details = getDetails(day);
+    if (details.selectedIndex === 0) isMonthFrom = true;else if (details.selectedIndex === 1) isMonthTo = true;
     days.push({
       value: i + 1,
       in: true,
       dayWeek: day.dayWeek,
       weekend: [0, 6].includes(day.dayWeek),
       today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
-      between: isBetween(day),
-      selected: isSelected(day),
-      selectedIndex: selectedIndex_,
-      selectedSame: selectedSame(day),
+      is: _objectSpread({}, details),
       onesyDate: day
     });
   }
@@ -399,16 +510,14 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     if (weekStartDay === 'Sunday') toAdd++;
     for (let i = 0; i < toAdd; i++) {
       const day = (0, _date.set)(previousMonthEnd.day - i, 'day', previousMonth);
+      const details = getDetails(day);
       days.unshift({
         value: day.day,
         in: false,
         dayWeek: day.dayWeek,
         weekend: [0, 6].includes(day.dayWeek),
         today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
-        between: isBetween(day),
-        selected: isSelected(day),
-        selectedIndex: selectedIndex(day),
-        selectedSame: selectedSame(day),
+        is: _objectSpread({}, details),
         start: true,
         onesyDate: day
       });
@@ -422,21 +531,25 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     if (days.length + toAdd - 1 < 42) toAdd += 41 - (days.length + toAdd - 1);
     for (let i = 0; i < toAdd; i++) {
       const day = (0, _date.set)(i + 1, 'day', nextMonth);
+      const details = getDetails(day);
       days.push({
         value: i + 1,
         in: false,
         dayWeek: day.dayWeek,
         weekend: [0, 6].includes(day.dayWeek),
         today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
-        between: isBetween(day),
-        selected: isSelected(day),
-        selectedIndex: selectedIndex(day),
-        selectedSame: selectedSame(day),
+        is: _objectSpread({}, details),
         end: true,
         onesyDate: day
       });
     }
   }
+  const colorTheme = _react.default.useMemo(() => {
+    return theme.palette.color[color] || theme.methods.color(color);
+  }, [color, theme]);
+  const colorSelectedTheme = _react.default.useMemo(() => {
+    return theme.palette.color[colorSelected] || theme.methods.color(colorSelected);
+  }, [colorSelected, theme]);
 
   // noTransition
   refs.noTransition.current = monthSame;
@@ -451,7 +564,10 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   }
   const weeks = (0, _utils.arrayToParts)(days, 7);
   const getCalendar = status => {
-    return /*#__PURE__*/_react.default.createElement(Surface, null, ({
+    return /*#__PURE__*/_react.default.createElement(Surface, {
+      color: color,
+      tonal: tonal
+    }, ({
       palette
     }) => /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
@@ -476,6 +592,7 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         // not prior to 1970, we may potentially update this in the future
         day.onesyDate.year < 1970
       };
+      const isEdge = day.is.same || (day.is.monthStart || day.is.monthEnd) && day.is.selected;
       return /*#__PURE__*/_react.default.createElement(Line, {
         key: index_,
         direction: "row",
@@ -485,12 +602,18 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
           const timeDate = (0, _date.startOf)(day.onesyDate, 'hour');
           onTimeClick === null || onTimeClick === void 0 || onTimeClick(timeDate, 'month', event);
         },
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day', `onesy-CalendarMonth-day-${day.in ? 'in' : 'out'}`], classes.day, classes[`day_size_${size}`], classes[`day_${day.in ? 'in' : 'out'}`], !day.in && !outside && classes.day_out_no, !day.selectedSame && range && [(day.dayWeek === 1 || day.selected && day.selectedIndex === 0 || day.start && !outside) && classes.dayStart, (day.dayWeek === 0 || day.selected && day.selectedIndex === 1 || day.end && !outside) && classes.dayEnd, (day.dayWeek === 1 || day.selected && day.selectedIndex === 0 || day.start && !outside) && (day.dayWeek === 0 || day.selected && day.selectedIndex === 1 || day.end && !outside) && classes.dayStartEnd, day.selected && day.selectedIndex === 0 && !day.selectedSame && classes.dayStartSelected, day.selected && day.selectedIndex === 1 && !day.selectedSame && classes.dayEndSelected]]),
-        style: _objectSpread(_objectSpread({}, range && !day.selected && !day.selectedSame && day.between ? {
-          background: theme.methods.palette.color.value(undefined, 60, true, palette)
-        } : undefined), range && day.selected && !day.selectedSame ? {
-          color: theme.methods.palette.color.value(undefined, 60, true, palette)
-        } : undefined)
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day', `onesy-CalendarMonth-day-${day.in ? 'in' : 'out'}`], classes.day, classes[`day_size_${size}`], classes[`day_${day.in ? 'in' : 'out'}`], !day.in && !outside && classes.day_out_no, !propsDay.disabled ? 'onesy-enabled' : 'onesy-disabled',
+        // same day
+        // (day.is.same || ((day.is.monthStart || day.is.monthEnd) && day.is.selected)) && classes.dayStartEnd,
+        // start
+        day.is.start && !isEdge && classes.dayStart,
+        // end
+        day.is.end && !isEdge && classes.dayEnd,
+        // between
+        day.is.between && !day.is.same && [!day.is.end && day.dayWeek !== 0 && !day.is.monthEnd && classes.dayStartSelection, !day.is.start && day.dayWeek !== 1 && !day.is.monthStart && classes.dayEndSelection]]),
+        style: {
+          '--onesy-color': day.is.fromSelected ? colorSelectedTheme.main : colorTheme.main
+        }
       }, (0, _utils.is)('function', renderDay) ? renderDay(day.onesyDate, propsDay, day, outside) : /*#__PURE__*/_react.default.createElement(PaginationItem, (0, _extends2.default)({
         tonal: tonal,
         color: "inherit",
@@ -500,19 +623,22 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         },
         TypeProps: {
           version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-          priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
+          priority: !day.is.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
         },
         "aria-label": (0, _date.format)(day.onesyDate, 'DD-MM-YYYY', {
           l
         })
       }, PaginationItemProps, {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-value', day.in && 'onesy-CalendarMonth-day-in', day.dayWeek && 'onesy-CalendarMonth-day-day-week', day.weekend && 'onesy-CalendarMonth-day-weekend', day.today && 'onesy-CalendarMonth-day-today', day.between && 'onesy-CalendarMonth-day-between', day.selected && 'onesy-CalendarMonth-day-selected', day.start && 'onesy-CalendarMonth-day-start', day.end && 'onesy-CalendarMonth-day-end'], PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.className, classes.dayValue]),
-        style: _objectSpread(_objectSpread(_objectSpread({}, day.today ? {
-          boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
-        } : undefined), day.selected ? {
-          color: theme.methods.palette.color.value(undefined, 90, true, palette),
-          backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
-        } : undefined), PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.style)
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-value', day.in && 'onesy-CalendarMonth-day-in', day.dayWeek && 'onesy-CalendarMonth-day-day-week', day.weekend && 'onesy-CalendarMonth-day-weekend', day.today && 'onesy-CalendarMonth-day-today', day.is.between && 'onesy-CalendarMonth-day-between', day.is.selected && 'onesy-CalendarMonth-day-selected', day.is.start && 'onesy-CalendarMonth-day-start', day.is.end && 'onesy-CalendarMonth-day-end'], PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.className, classes.dayValue, day.is.selected && classes.daySelected, classes[`day_size_${size}`]]),
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, day.today ? {
+          boxShadow: `inset 0px 0px 0px 1px ${colorTheme[40]}`
+        } : undefined), day.is.selected && day.is.between && {
+          color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 10 : 98})`,
+          backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 90 : 85 : propsDay.disabled ? 20 : 25})`
+        }), day.is.selected && (day.is.start || day.is.end) && {
+          color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 98 : 10})`,
+          backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 40 : 50 : propsDay.disabled ? 60 : 70})`
+        }), PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.style)
       }, propsDay), day.value));
     })))));
   };
@@ -520,7 +646,7 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     ref: ref,
     gap: 0,
     direction: "column",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, noTransition ? classes.root : classes.root_transition, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
   }, isMonthFrom && {
     'data-month-from': true
   }, isMonthTo && {

package/Transition/Transition.js

@@ -195,9 +195,6 @@ const Transition = props_ => {
   const add = async status_ => {
     if (!add_ || refs.status.current !== status_) return;
     updateStatus('add');
-
-    // Reflow
-    (0, _utils2.reflow)(refs.root.current);
     await delay('add');
 
     // Prevent update batches
@@ -212,9 +209,6 @@ const Transition = props_ => {
     var _refs$status$current;
     if (!enter_ || status_ !== 'appended' && (refs.status.current !== status_ || !refs.inProp.current)) return;
     updateStatus('enter');
-
-    // Reflow
-    (0, _utils2.reflow)(refs.root.current);
     await delay('enter');
 
     // Prevent update batches
@@ -227,9 +221,6 @@ const Transition = props_ => {
     var _refs$status$current2;
     if (!exit_ || refs.status.current !== status_ || refs.inProp.current) return;
     updateStatus('exit');
-
-    // Reflow
-    (0, _utils2.reflow)(refs.root.current);
     await delay('exit');
 
     // Prevent update batches
@@ -309,6 +300,9 @@ const Transition = props_ => {
       className_ = className_.replace(/ +/g, ' ').trim();
       if ((_refs$root$current$cl2 = refs.root.current.className) !== null && _refs$root$current$cl2 !== void 0 && _refs$root$current$cl2.baseVal) refs.root.current.className.baseVal = className_;else refs.root.current.className = className_;
     }
+
+    // reflow
+    (0, _utils2.reflow)(refs.root.current);
   };
   if (status === 'removed') return null;
   const value_ = {

package/Transitions/Transitions.js

@@ -43,9 +43,6 @@ const Transitions = props_ => {
   };
   refs.element.current = element;
   refs.status.current = status;
-
-  // No transition controll
-  // bug solve in nextjs
   _react.default.useEffect(() => {
     if (id !== undefined) {
       if (id !== refs.id.current) {

package/esm/CalendarMonth/CalendarMonth.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
+const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "colorSelected", "selected", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -17,7 +17,9 @@ import TransitionElement from '../Transition';
 import { staticClassName } from '../utils';
 const useStyle = style(theme => ({
   root: {
-    // for transition
+    position: 'relative'
+  },
+  root_transition: {
     overflow: 'hidden',
     position: 'relative'
   },
@@ -75,6 +77,11 @@ const useStyle = style(theme => ({
     visibility: 'hidden',
     opacity: '0'
   },
+  daySelected: {
+    '&.onesy-Button-disabled': {
+      opacity: 1
+    }
+  },
   dayStart: {
     borderRadius: `${theme.methods.shape.radius.value(40, 'px')} 0 0 ${theme.methods.shape.radius.value(40, 'px')}`
   },
@@ -84,18 +91,24 @@ const useStyle = style(theme => ({
   dayStartEnd: {
     borderRadius: theme.methods.shape.radius.value(40, 'px')
   },
-  dayStartSelected: {
-    '&::before': {
+  dayStartSelection: {
+    '&::after': {
       content: '""',
       position: 'absolute',
       left: '50%',
       top: '0',
       height: '100%',
       width: '50%',
-      background: 'currentColor'
+      zIndex: 0
+    },
+    '&.onesy-enabled::after': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 85 : 25})`
+    },
+    '&.onesy-disabled::after': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 90 : 20})`
     }
   },
-  dayEndSelected: {
+  dayEndSelection: {
     '&::before': {
       content: '""',
       position: 'absolute',
@@ -104,7 +117,13 @@ const useStyle = style(theme => ({
       top: '0',
       height: '100%',
       width: '50%',
-      background: 'currentColor'
+      zIndex: 0
+    },
+    '&.onesy-enabled::before': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 85 : 25})`
+    },
+    '&.onesy-disabled::before': {
+      backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 90 : 20})`
     }
   },
   weeks: {
@@ -165,6 +184,7 @@ const useStyle = style(theme => ({
     }
   },
   dayValue: {
+    zIndex: 1,
     '&:hover': {
       boxShadow: 'inset 0px 0px 0px 1px currentColor'
     }
@@ -196,6 +216,8 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
       calendar: calendar_,
       calendarDefault,
       onChangeCalendar,
+      colorSelected = 'secondary',
+      selected,
       onTimeClick,
       range,
       offset = 0,
@@ -332,10 +354,105 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const previousMonthEnd = endOf(previousMonth, 'month');
   const nextMonth = add(1, 'month', month);
   const monthSame = refs.previous.current?.year === calendar?.year && refs.previous.current?.month === calendar?.month;
-  const isBetween = day => day.milliseconds >= value[0]?.milliseconds && day.milliseconds <= value[1]?.milliseconds + 4000;
-  const isSelected = day => value.some(item => item.year === day.year && item.month === day.month && item.day === day.day);
-  const selectedIndex = day => value.findIndex(item => item.year === day.year && item.month === day.month && item.day === day.day);
-  const selectedSame = day => value.filter(item => item.year === day.year && item.month === day.month && item.day === day.day).length === 2;
+  const getRanges = React.useCallback(ranges => {
+    // Convert all ranges to start/end timestamps
+    const rangeTimestamps = ranges.map(itemRange => ({
+      start: itemRange[0].milliseconds,
+      end: (itemRange[1] || itemRange[0]).milliseconds
+    }));
+
+    // Sort by start time
+    rangeTimestamps.sort((a, b) => a.start - b.start);
+
+    // Merge overlapping ranges
+    const mergedRanges = [];
+    let currentRange = rangeTimestamps[0];
+    for (let i = 1; i < rangeTimestamps.length; i++) {
+      if (rangeTimestamps[i].start <= currentRange.end) {
+        // Ranges overlap, merge them
+        currentRange.end = Math.max(currentRange.end, rangeTimestamps[i].end);
+      } else {
+        // No overlap, push current range and start new one
+        mergedRanges.push(currentRange);
+        currentRange = rangeTimestamps[i];
+      }
+    }
+    mergedRanges.push(currentRange);
+    return mergedRanges.filter(Boolean);
+  }, []);
+  const rangesValue = React.useMemo(() => {
+    const ranges = [value].map(item => {
+      return item.map((itemRange, index) => !index ? startOf(itemRange, 'day') : endOf(itemRange, 'day'));
+    });
+    return getRanges(ranges);
+  }, [value]);
+  const rangesSelected = React.useMemo(() => {
+    const ranges = [...(selected || [])].map(item => {
+      return item.map((itemRange, index) => !index ? startOf(itemRange, 'day') : endOf(itemRange, 'day'));
+    });
+    return getRanges(ranges);
+  }, [selected]);
+  const getDetails = React.useCallback(day => {
+    const dayFormat = format(day, 'DD-MM-YYYY');
+    const dayMonthStart = format(startOf(day, 'month'), 'DD-MM-YYYY');
+    const dayMonthEnd = format(endOf(day, 'month'), 'DD-MM-YYYY');
+    const result = {
+      start: false,
+      between: false,
+      end: false,
+      same: false,
+      selected: false,
+      outside: false,
+      fromSelected: false,
+      monthStart: dayMonthStart === dayFormat,
+      monthEnd: dayMonthEnd === dayFormat,
+      selectedIndex: value.findIndex(item => item.year === day.year && item.month === day.month && item.day === day.day),
+      selectedSame: value.filter(item => item.year === day.year && item.month === day.month && item.day === day.day).length === 2
+    };
+
+    // selected
+    for (const itemRange of rangesSelected) {
+      const rangeStartDay = format(new OnesyDate(itemRange.start), 'DD-MM-YYYY');
+      const rangeEndDay = format(new OnesyDate(itemRange.end), 'DD-MM-YYYY');
+
+      // start
+      if (dayFormat === rangeStartDay) result.selected = result.start = true;
+
+      // end
+      if (dayFormat === rangeEndDay) result.selected = result.end = true;
+
+      // between
+      if (day.milliseconds >= itemRange.start && day.milliseconds <= itemRange.end) result.selected = result.between = true;
+
+      // same
+      result.same = result.start && result.end;
+      if (result.selected) {
+        result.fromSelected = true;
+        return result;
+      }
+    }
+
+    // value
+    for (const itemRange of rangesValue) {
+      const rangeStartDay = format(new OnesyDate(itemRange.start), 'DD-MM-YYYY');
+      const rangeEndDay = format(new OnesyDate(itemRange.end), 'DD-MM-YYYY');
+
+      // start
+      if (dayFormat === rangeStartDay) result.selected = result.start = true;
+
+      // end
+      if (dayFormat === rangeEndDay) result.selected = result.end = true;
+
+      // between
+      if (day.milliseconds >= itemRange.start && day.milliseconds <= itemRange.end) result.selected = result.between = true;
+
+      // same
+      result.same = result.start && result.end;
+      if (result.selected) return result;
+    }
+    result.outside = true;
+    return result;
+  }, [value, selected, rangesSelected, rangesValue]);
   let isMonthFrom = false;
   let isMonthTo = false;
 
@@ -343,18 +460,15 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
   for (let i = 0; i < month.daysInMonth; i++) {
     let day = set(i + 1, 'day', month);
     day = set(14, 'hour', day);
-    const selectedIndex_ = selectedIndex(day);
-    if (selectedIndex_ === 0) isMonthFrom = true;else if (selectedIndex_ === 1) isMonthTo = true;
+    const details = getDetails(day);
+    if (details.selectedIndex === 0) isMonthFrom = true;else if (details.selectedIndex === 1) isMonthTo = true;
     days.push({
       value: i + 1,
       in: true,
       dayWeek: day.dayWeek,
       weekend: [0, 6].includes(day.dayWeek),
       today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
-      between: isBetween(day),
-      selected: isSelected(day),
-      selectedIndex: selectedIndex_,
-      selectedSame: selectedSame(day),
+      is: _objectSpread({}, details),
       onesyDate: day
     });
   }
@@ -367,16 +481,14 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
     if (weekStartDay === 'Sunday') toAdd++;
     for (let i = 0; i < toAdd; i++) {
       const day = set(previousMonthEnd.day - i, 'day', previousMonth);
+      const details = getDetails(day);
       days.unshift({
         value: day.day,
         in: false,
         dayWeek: day.dayWeek,
         weekend: [0, 6].includes(day.dayWeek),
         today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
-        between: isBetween(day),
-        selected: isSelected(day),
-        selectedIndex: selectedIndex(day),
-        selectedSame: selectedSame(day),
+        is: _objectSpread({}, details),
         start: true,
         onesyDate: day
       });
@@ -390,21 +502,25 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
     if (days.length + toAdd - 1 < 42) toAdd += 41 - (days.length + toAdd - 1);
     for (let i = 0; i < toAdd; i++) {
       const day = set(i + 1, 'day', nextMonth);
+      const details = getDetails(day);
       days.push({
         value: i + 1,
         in: false,
         dayWeek: day.dayWeek,
         weekend: [0, 6].includes(day.dayWeek),
         today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
-        between: isBetween(day),
-        selected: isSelected(day),
-        selectedIndex: selectedIndex(day),
-        selectedSame: selectedSame(day),
+        is: _objectSpread({}, details),
         end: true,
         onesyDate: day
       });
     }
   }
+  const colorTheme = React.useMemo(() => {
+    return theme.palette.color[color] || theme.methods.color(color);
+  }, [color, theme]);
+  const colorSelectedTheme = React.useMemo(() => {
+    return theme.palette.color[colorSelected] || theme.methods.color(colorSelected);
+  }, [colorSelected, theme]);
 
   // noTransition
   refs.noTransition.current = monthSame;
@@ -418,7 +534,10 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }
   const weeks = arrayToParts(days, 7);
   const getCalendar = status => {
-    return /*#__PURE__*/React.createElement(Surface, null, ({
+    return /*#__PURE__*/React.createElement(Surface, {
+      color: color,
+      tonal: tonal
+    }, ({
       palette
     }) => /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
@@ -443,6 +562,7 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
         // not prior to 1970, we may potentially update this in the future
         day.onesyDate.year < 1970
       };
+      const isEdge = day.is.same || (day.is.monthStart || day.is.monthEnd) && day.is.selected;
       return /*#__PURE__*/React.createElement(Line, {
         key: index_,
         direction: "row",
@@ -452,12 +572,18 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
           const timeDate = startOf(day.onesyDate, 'hour');
           onTimeClick?.(timeDate, 'month', event);
         },
-        className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day', `onesy-CalendarMonth-day-${day.in ? 'in' : 'out'}`], classes.day, classes[`day_size_${size}`], classes[`day_${day.in ? 'in' : 'out'}`], !day.in && !outside && classes.day_out_no, !day.selectedSame && range && [(day.dayWeek === 1 || day.selected && day.selectedIndex === 0 || day.start && !outside) && classes.dayStart, (day.dayWeek === 0 || day.selected && day.selectedIndex === 1 || day.end && !outside) && classes.dayEnd, (day.dayWeek === 1 || day.selected && day.selectedIndex === 0 || day.start && !outside) && (day.dayWeek === 0 || day.selected && day.selectedIndex === 1 || day.end && !outside) && classes.dayStartEnd, day.selected && day.selectedIndex === 0 && !day.selectedSame && classes.dayStartSelected, day.selected && day.selectedIndex === 1 && !day.selectedSame && classes.dayEndSelected]]),
-        style: _objectSpread(_objectSpread({}, range && !day.selected && !day.selectedSame && day.between ? {
-          background: theme.methods.palette.color.value(undefined, 60, true, palette)
-        } : undefined), range && day.selected && !day.selectedSame ? {
-          color: theme.methods.palette.color.value(undefined, 60, true, palette)
-        } : undefined)
+        className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day', `onesy-CalendarMonth-day-${day.in ? 'in' : 'out'}`], classes.day, classes[`day_size_${size}`], classes[`day_${day.in ? 'in' : 'out'}`], !day.in && !outside && classes.day_out_no, !propsDay.disabled ? 'onesy-enabled' : 'onesy-disabled',
+        // same day
+        // (day.is.same || ((day.is.monthStart || day.is.monthEnd) && day.is.selected)) && classes.dayStartEnd,
+        // start
+        day.is.start && !isEdge && classes.dayStart,
+        // end
+        day.is.end && !isEdge && classes.dayEnd,
+        // between
+        day.is.between && !day.is.same && [!day.is.end && day.dayWeek !== 0 && !day.is.monthEnd && classes.dayStartSelection, !day.is.start && day.dayWeek !== 1 && !day.is.monthStart && classes.dayEndSelection]]),
+        style: {
+          '--onesy-color': day.is.fromSelected ? colorSelectedTheme.main : colorTheme.main
+        }
       }, is('function', renderDay) ? renderDay(day.onesyDate, propsDay, day, outside) : /*#__PURE__*/React.createElement(PaginationItem, _extends({
         tonal: tonal,
         color: "inherit",
@@ -467,19 +593,22 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
         },
         TypeProps: {
           version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-          priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
+          priority: !day.is.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
         },
         "aria-label": format(day.onesyDate, 'DD-MM-YYYY', {
           l
         })
       }, PaginationItemProps, {
-        className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day-value', day.in && 'onesy-CalendarMonth-day-in', day.dayWeek && 'onesy-CalendarMonth-day-day-week', day.weekend && 'onesy-CalendarMonth-day-weekend', day.today && 'onesy-CalendarMonth-day-today', day.between && 'onesy-CalendarMonth-day-between', day.selected && 'onesy-CalendarMonth-day-selected', day.start && 'onesy-CalendarMonth-day-start', day.end && 'onesy-CalendarMonth-day-end'], PaginationItemProps?.className, classes.dayValue]),
-        style: _objectSpread(_objectSpread(_objectSpread({}, day.today ? {
-          boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
-        } : undefined), day.selected ? {
-          color: theme.methods.palette.color.value(undefined, 90, true, palette),
-          backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
-        } : undefined), PaginationItemProps?.style)
+        className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day-value', day.in && 'onesy-CalendarMonth-day-in', day.dayWeek && 'onesy-CalendarMonth-day-day-week', day.weekend && 'onesy-CalendarMonth-day-weekend', day.today && 'onesy-CalendarMonth-day-today', day.is.between && 'onesy-CalendarMonth-day-between', day.is.selected && 'onesy-CalendarMonth-day-selected', day.is.start && 'onesy-CalendarMonth-day-start', day.is.end && 'onesy-CalendarMonth-day-end'], PaginationItemProps?.className, classes.dayValue, day.is.selected && classes.daySelected, classes[`day_size_${size}`]]),
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, day.today ? {
+          boxShadow: `inset 0px 0px 0px 1px ${colorTheme[40]}`
+        } : undefined), day.is.selected && day.is.between && {
+          color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 10 : 98})`,
+          backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 90 : 85 : propsDay.disabled ? 20 : 25})`
+        }), day.is.selected && (day.is.start || day.is.end) && {
+          color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 98 : 10})`,
+          backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 40 : 50 : propsDay.disabled ? 60 : 70})`
+        }), PaginationItemProps?.style)
       }, propsDay), day.value));
     })))));
   };
@@ -487,7 +616,7 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
     ref: ref,
     gap: 0,
     direction: "column",
-    className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
+    className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, noTransition ? classes.root : classes.root_transition, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
   }, isMonthFrom && {
     'data-month-from': true
   }, isMonthTo && {

package/esm/Transition/Transition.js

@@ -184,9 +184,6 @@ const Transition = props_ => {
   const add = async status_ => {
     if (!add_ || refs.status.current !== status_) return;
     updateStatus('add');
-
-    // Reflow
-    reflow(refs.root.current);
     await delay('add');
 
     // Prevent update batches
@@ -200,9 +197,6 @@ const Transition = props_ => {
   const enter = async status_ => {
     if (!enter_ || status_ !== 'appended' && (refs.status.current !== status_ || !refs.inProp.current)) return;
     updateStatus('enter');
-
-    // Reflow
-    reflow(refs.root.current);
     await delay('enter');
 
     // Prevent update batches
@@ -214,9 +208,6 @@ const Transition = props_ => {
   const exit = async status_ => {
     if (!exit_ || refs.status.current !== status_ || refs.inProp.current) return;
     updateStatus('exit');
-
-    // Reflow
-    reflow(refs.root.current);
     await delay('exit');
 
     // Prevent update batches
@@ -295,6 +286,9 @@ const Transition = props_ => {
       className_ = className_.replace(/ +/g, ' ').trim();
       if (refs.root.current.className?.baseVal) refs.root.current.className.baseVal = className_;else refs.root.current.className = className_;
     }
+
+    // reflow
+    reflow(refs.root.current);
   };
   if (status === 'removed') return null;
   const value_ = {

package/esm/Transitions/Transitions.js

@@ -33,9 +33,6 @@ const Transitions = props_ => {
   };
   refs.element.current = element;
   refs.status.current = status;
-
-  // No transition controll
-  // bug solve in nextjs
   React.useEffect(() => {
     if (id !== undefined) {
       if (id !== refs.id.current) {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.149
+/** @license UiReact v1.0.151
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/utils.js

@@ -1,6 +1,6 @@
 import { is, canvasFilterBrightness, canvasFilterContrast, canvasFilterSaturation, canvasFilterFade, canvasFilterInvert, canvasFilterOldPhoto, download, clamp, isEnvironment } from '@onesy/utils';
 export function reflow(element) {
-  element?.offsetHeight;
+  return element?.offsetHeight;
 }
 export const staticClassName = (name, theme) => {
   return theme?.ui?.elements?.[`onesy-${name}`]?.className?.static !== undefined ? theme?.ui?.elements?.[`onesy-${name}`]?.className?.static : theme?.ui?.className.static;

package/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.149
+/** @license UiReact v1.0.151
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.150",
+  "version": "1.0.152",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",

package/utils.d.ts

@@ -1,5 +1,5 @@
 import { IPoint } from './types';
-export declare function reflow(element: HTMLElement): void;
+export declare function reflow(element: HTMLElement): number;
 export declare const staticClassName: (name: string, theme: any) => any;
 export declare const iconSizeToFontSize: (value: string | number) => any;
 export declare const valueBreakpoints: (item: any, value: any, breakpoints: any, theme: any) => any;

package/utils.js

@@ -8,7 +8,7 @@ exports.reflow = reflow;
 exports.valueBreakpoints = exports.toNumber = exports.staticClassName = exports.save = exports.sanitize = exports.replace = void 0;
 var _utils = require("@onesy/utils");
 function reflow(element) {
-  element === null || element === void 0 || element.offsetHeight;
+  return element === null || element === void 0 ? void 0 : element.offsetHeight;
 }
 const staticClassName = (name, theme) => {
   var _theme$ui, _theme$ui2, _theme$ui3;