@monolith-forensics/monolith-ui 1.8.1-dev.1 → 1.8.1-dev.3

package/dist/Calendar/Calendar.d.ts

@@ -9,9 +9,12 @@ interface CalendarProps {
     clearable?: boolean;
     min?: Date;
     max?: Date;
+    timeIntervalMinutes?: number;
+    minuteStep?: number;
+    timeZoneLabel?: string;
 }
 declare const Calendar: {
-    ({ defaultValue, value, onChange, hourFormat, includeTime, clearable, min, max, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    ({ defaultValue, value, onChange, hourFormat, includeTime, clearable, min, max, timeIntervalMinutes, minuteStep, timeZoneLabel, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Calendar;

package/dist/Calendar/Calendar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { CalendarContainer, CalendarHeader, CalendarHeaderControls, CalendarHeaderSelect, CalendarNavButton, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHourSelect, TimeHeader, TimeMinuteSelect, TimeItem, TimeItemActive, NoValueButton, } from "./CalendarStyles";
+import { CalendarContainer, CalendarHeader, CalendarHeaderControls, CalendarHeaderSelect, CalendarNavButton, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHeader, TimeHeaderValue, TimeItem, TimeItemActive, TimeSelectList, TimeZoneBadge, NoValueButton, } from "./CalendarStyles";
 import { DropDownMenu } from "../DropDownMenu";
-import calendar, { createLocalDate, isDate, isSameDay, isSameMonth, getDateISO, getMonthDays, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, HOURS24, HOURS12, MINUTES, } from "./calendarHelpers";
+import calendar, { createLocalDate, isDate, isSameDay, isSameMonth, getDateISO, getMonthDays, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, } from "./calendarHelpers";
 import moment from "moment";
 const checkValidRange = (value, min, max) => {
     if (min && moment(value).startOf("day").isBefore(moment(min).startOf("day")))
@@ -25,8 +25,10 @@ const MONTH_OPTIONS = Object.keys(CALENDAR_MONTHS).map((monthName, index) => ({
     label: monthName,
     value: index + 1,
 }));
-const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, }) => {
+const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, timeIntervalMinutes, minuteStep = 1, timeZoneLabel = "Local", }) => {
     const isControlled = useRef(value !== undefined);
+    const activeTimeRef = useRef(null);
+    const hasScrolledInitialTimeIntoView = useRef(false);
     const [valueState, setValueState] = useState(defaultValue);
     const _value = isControlled.current
         ? value
@@ -38,6 +40,36 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     let pressureTimer;
     let pressureTimeout;
     let dayTimeout;
+    const normalizedTimeInterval = Math.max(1, Math.min(1440, timeIntervalMinutes || minuteStep || 1));
+    const selectedMinutesOfDay = calendarState.hours * 60 + calendarState.minutes;
+    const timeOptions = useMemo(() => {
+        const steppedTimes = Array.from({ length: Math.ceil(1440 / normalizedTimeInterval) }, (_, index) => index * normalizedTimeInterval).filter((minutesOfDay) => minutesOfDay < 1440);
+        if (!steppedTimes.includes(selectedMinutesOfDay)) {
+            steppedTimes.push(selectedMinutesOfDay);
+        }
+        return steppedTimes
+            .sort((a, b) => a - b)
+            .map((minutesOfDay) => {
+            const hours = Math.floor(minutesOfDay / 60);
+            const minutes = minutesOfDay % 60;
+            return {
+                value: minutesOfDay,
+                hours,
+                minutes,
+                label: `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`,
+            };
+        });
+    }, [normalizedTimeInterval, selectedMinutesOfDay]);
+    useEffect(() => {
+        var _a;
+        if (!includeTime || hasScrolledInitialTimeIntoView.current)
+            return;
+        (_a = activeTimeRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            block: "center",
+            inline: "nearest",
+        });
+        hasScrolledInitialTimeIntoView.current = true;
+    }, [includeTime]);
     const syncCalendarState = (date) => {
         setCalendarState({
             month: +date.getMonth() + 1,
@@ -110,13 +142,15 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const { month, year } = calendarState;
         const monthName = Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
         const yearOptions = getYearOptions();
-        return (_jsxs(CalendarHeader, { children: [_jsx(CalendarNavButton, { type: "button", onClick: handlePrevious, onMouseUp: clearPressureTimer, "aria-label": "Go to previous month", title: "Previous month. Hold Shift to jump by year.", children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsxs(CalendarHeaderControls, { children: [_jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: MONTH_OPTIONS, variant: "outlined", size: "xs", arrow: true, onItemSelect: (item) => commitMonthOrYearSelection(Number(item.value), year, "month"), dropDownProps: {
-                                    style: { width: 75, maxHeight: 260 },
+        const selectedMonthOption = MONTH_OPTIONS.find((option) => option.value === month);
+        const selectedYearOption = yearOptions.find((option) => option.value === year);
+        return (_jsxs(CalendarHeader, { children: [_jsx(CalendarNavButton, { type: "button", onClick: handlePrevious, onMouseUp: clearPressureTimer, "aria-label": "Go to previous month", title: "Previous month. Hold Shift to jump by year.", children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsxs(CalendarHeaderControls, { children: [_jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: MONTH_OPTIONS, value: selectedMonthOption ? [selectedMonthOption] : [], variant: "outlined", size: "xs", arrow: true, onItemSelect: (item) => commitMonthOrYearSelection(Number(item.value), year, "month"), dropDownProps: {
+                                    style: { maxHeight: 260, width: 125 },
                                 }, buttonProps: {
                                     title: "Select month",
                                     size: "xxs",
                                     style: { minWidth: 95 },
-                                }, children: _jsx(CalendarMonth, { children: monthName }) }) }), _jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: yearOptions, variant: "outlined", size: "xs", arrow: true, searchable: true, onItemSelect: (item) => commitMonthOrYearSelection(month, Number(item.value), "year"), dropDownProps: {
+                                }, children: _jsx(CalendarMonth, { children: monthName }) }) }), _jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: yearOptions, value: selectedYearOption ? [selectedYearOption] : [], variant: "outlined", size: "xs", arrow: true, searchable: true, onItemSelect: (item) => commitMonthOrYearSelection(month, Number(item.value), "year"), dropDownProps: {
                                     style: { width: 120, maxHeight: 260 },
                                 }, buttonProps: {
                                     title: "Select year",
@@ -151,6 +185,10 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const inMonth = month && year && isSameMonth(_date, createLocalDate(year, month, 1));
         const isDisabled = !checkValidRange(getDateISO(_date), min || null, max || null);
         const ariaCurrent = isToday ? "date" : undefined;
+        const handleDisabledAction = (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
         // The click handler
         const props = {
             "data-disabled": isDisabled,
@@ -160,8 +198,10 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
             "aria-pressed": Boolean(isCurrent),
             index,
             key: getDateISO(_date),
-            onClick: gotoDate(_date),
-            onKeyDown: handleActionKeyDown(() => gotoDate(_date)(undefined)),
+            onClick: isDisabled ? handleDisabledAction : gotoDate(_date),
+            onKeyDown: isDisabled
+                ? handleDisabledAction
+                : handleActionKeyDown(() => gotoDate(_date)(undefined)),
             role: "button",
             tabIndex: isDisabled ? -1 : 0,
             title: _date.toDateString(),
@@ -170,49 +210,85 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         // Conditionally render a styled date component
         return isCurrent ? (_jsx(HighlightedCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : isToday ? (_jsx(TodayCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : (_jsx(CalendarDate, Object.assign({}, props, { children: _date.getDate() })));
     };
-    const renderHours = () => {
-        const { hours } = calendarState;
-        const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
-        return hoursArray.map((hour, index) => {
-            const HourComponent = hour.value === hours ? TimeItemActive : TimeItem;
-            return (_jsx(HourComponent, { role: "button", tabIndex: 0, "aria-label": `Select ${hour.label}`, "aria-pressed": hour.value === hours, 
-                // value={hour.value}
-                onClick: (e) => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(hour.value)
-                        .minutes(calendarState.minutes)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }, onKeyDown: handleActionKeyDown(() => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(hour.value)
-                        .minutes(calendarState.minutes)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }), children: hour.label }, hour.value));
-        });
+    const isTimeOptionDisabled = (hours, minutes) => {
+        const candidate = moment(getWorkingDate())
+            .hours(hours)
+            .minutes(minutes)
+            .seconds(0)
+            .milliseconds(0);
+        if (min && candidate.isBefore(moment(min)))
+            return true;
+        if (max && candidate.isAfter(moment(max)))
+            return true;
+        return false;
     };
-    const renderMinutes = () => {
-        const { minutes } = calendarState;
-        return MINUTES.map((minute) => {
-            const MinuteComponent = minute.value === minutes ? TimeItemActive : TimeItem;
-            return (_jsx(MinuteComponent, { role: "button", tabIndex: 0, "aria-label": `Select ${minute.label} minutes`, "aria-pressed": minute.value === minutes, 
-                // value={minute}
-                onClick: (e) => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(calendarState.hours)
-                        .minutes(minute.value)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }, onKeyDown: handleActionKeyDown(() => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(calendarState.hours)
-                        .minutes(minute.value)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }), children: minute.label }, minute.value));
+    const renderTimeOptions = () => {
+        return timeOptions.map((timeOption, index) => {
+            const isActive = timeOption.value === selectedMinutesOfDay;
+            const isDisabled = isTimeOptionDisabled(timeOption.hours, timeOption.minutes);
+            const TimeComponent = isActive ? TimeItemActive : TimeItem;
+            const commitTime = () => {
+                if (isDisabled)
+                    return;
+                const newTime = moment(getWorkingDate())
+                    .hours(timeOption.hours)
+                    .minutes(timeOption.minutes)
+                    .seconds(0)
+                    .milliseconds(0)
+                    .toDate();
+                commitDate(newTime, "time");
+            };
+            return (_jsx(TimeComponent, { ref: isActive ? activeTimeRef : undefined, role: "button", tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled, "aria-disabled": isDisabled, "aria-label": `Select ${timeOption.label}`, "aria-pressed": isActive, onClick: commitTime, onKeyDown: handleTimeKeyDown(index, commitTime), children: timeOption.label }, timeOption.value));
         });
     };
+    const handleTimeKeyDown = (index, selectCurrent) => (evt) => {
+        const findEnabledIndex = (nextIndex, direction) => {
+            let boundedIndex = Math.max(0, Math.min(timeOptions.length - 1, nextIndex));
+            while (boundedIndex >= 0 &&
+                boundedIndex < timeOptions.length &&
+                isTimeOptionDisabled(timeOptions[boundedIndex].hours, timeOptions[boundedIndex].minutes)) {
+                boundedIndex += direction;
+            }
+            if (boundedIndex < 0 || boundedIndex >= timeOptions.length) {
+                return null;
+            }
+            return boundedIndex;
+        };
+        const commitOption = (nextIndex, direction) => {
+            const enabledIndex = findEnabledIndex(nextIndex, direction);
+            if (enabledIndex === null)
+                return;
+            const nextOption = timeOptions[enabledIndex];
+            const newTime = moment(getWorkingDate())
+                .hours(nextOption.hours)
+                .minutes(nextOption.minutes)
+                .seconds(0)
+                .milliseconds(0)
+                .toDate();
+            commitDate(newTime, "time");
+        };
+        if (evt.key === "Enter" || evt.key === " ") {
+            evt.preventDefault();
+            selectCurrent();
+            return;
+        }
+        if (evt.key === "ArrowDown") {
+            evt.preventDefault();
+            commitOption(index + 1, 1);
+        }
+        if (evt.key === "ArrowUp") {
+            evt.preventDefault();
+            commitOption(index - 1, -1);
+        }
+        if (evt.key === "Home") {
+            evt.preventDefault();
+            commitOption(0, 1);
+        }
+        if (evt.key === "End") {
+            evt.preventDefault();
+            commitOption(timeOptions.length - 1, -1);
+        }
+    };
     // new 2
     const gotoDate = (date) => (evt) => {
         evt && evt.preventDefault();
@@ -303,7 +379,7 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     // const clearDayTimeout = () => {
     //   dayTimeout && clearTimeout(dayTimeout);
     // };
-    return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { role: "grid", "aria-label": `Calendar view for ${Object.keys(CALENDAR_MONTHS)[calendarState.month - 1]} ${calendarState.year}`, children: [_jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }), _jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && (_jsx("div", { style: { textAlign: "center", marginTop: 3 }, children: _jsx(NoValueButton, { type: "button", onClick: () => commitDate(null, "clear"), "aria-label": "Clear selected date", children: "Clear Date" }) }))] }), includeTime && (_jsxs(TimeContainer, { children: [_jsx(TimeHeader, { children: "Select Time" }), _jsxs(TimePickerContainer, { children: [_jsx(TimeHourSelect, { children: renderHours() }), _jsx(TimeMinuteSelect, { children: renderMinutes() })] })] }))] }));
+    return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { role: "grid", "aria-label": `Calendar view for ${Object.keys(CALENDAR_MONTHS)[calendarState.month - 1]} ${calendarState.year}`, children: [_jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }), _jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && (_jsx("div", { style: { textAlign: "center", marginTop: 3 }, children: _jsx(NoValueButton, { type: "button", onClick: () => commitDate(null, "clear"), "aria-label": "Clear selected date", children: "Clear Date" }) }))] }), includeTime && (_jsxs(TimeContainer, { children: [_jsxs(TimeHeader, { children: [_jsx(TimeHeaderValue, { children: `${String(calendarState.hours).padStart(2, "0")}:${String(calendarState.minutes).padStart(2, "0")}` }), timeZoneLabel && _jsx(TimeZoneBadge, { children: timeZoneLabel })] }), _jsx(TimePickerContainer, { children: _jsx(TimeSelectList, { children: renderTimeOptions() }) })] }))] }));
 };
 Calendar.displayName = "Calendar";
 export default Calendar;

package/dist/Calendar/CalendarStyles.d.ts

@@ -21,8 +21,9 @@ export declare const TodayCalendarDate: import("styled-components/dist/types").I
 export declare const TimeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimePickerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeHourSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeMinuteSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeHeaderValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TimeZoneBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TimeSelectList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeItemActive: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 export declare const NoValueButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/Calendar/CalendarStyles.js

@@ -5,7 +5,7 @@ export const MainContainer = styled.div `
   gap: 8px;
 `;
 export const CalendarContainer = styled.div `
-  width: 264px;
+  width: 268px;
   border-radius: 4px;
   overflow: hidden;
   box-sizing: border-box;
@@ -48,8 +48,10 @@ export const CalendarNavButton = styled.button `
 `;
 export const CalendarGrid = styled.div `
   display: grid;
-  grid-template: repeat(7, auto) / repeat(7, auto);
+  grid-template: repeat(7, auto) / repeat(7, 32px);
   gap: 3px;
+  justify-content: center;
+  justify-items: center;
 `;
 export const CalendarMonth = styled.div `
   font-weight: 500;
@@ -74,7 +76,9 @@ export const CalendarCell = styled.div `
   align-self: center;
   letter-spacing: 0.1rem;
   min-width: 32px;
+  width: 32px;
   min-height: 32px;
+  height: 32px;
   padding: 6px 4px;
   user-select: none;
   border-radius: 5px;
@@ -112,11 +116,18 @@ export const CalendarDate = styled(CalendarCell) `
   }
 
   &[data-disabled="true"] {
-    pointer-events: none;
-    color: ${({ theme }) => theme.palette.text.disabled};
-    background: ${({ theme }) => `${theme.palette.action.hover}99`};
-    opacity: 0.45;
-    border-style: dashed;
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.palette.text.secondary};
+
+    opacity: 0.62;
+    font-weight: 500;
+    text-decoration: line-through;
+    text-decoration-thickness: 1px;
+
+    &:hover {
+      background: transparent;
+      opacity: 0.62;
+    }
   }
 `;
 export const HighlightedCalendarDate = styled(CalendarDate) `
@@ -126,7 +137,8 @@ export const HighlightedCalendarDate = styled(CalendarDate) `
   font-weight: 700;
   opacity: 1;
   position: relative;
-  box-shadow: inset 0 0 0 1px ${(props) => props.theme.palette.primary.main},
+  box-shadow:
+    inset 0 0 0 1px ${(props) => props.theme.palette.primary.main},
     0 4px 10px ${(props) => `${props.theme.palette.primary.main}33`};
   ::before {
     content: "";
@@ -160,49 +172,67 @@ export const TodayCalendarDate = styled(HighlightedCalendarDate) `
   }
 `;
 export const TimeContainer = styled.div `
+  position: relative;
+  flex: 0 0 132px;
   font-size: 12px;
-  width: 152px;
-  height: 100%;
+  width: 132px;
+  height: auto;
+  box-sizing: border-box;
   border: 1px solid ${(props) => props.theme.palette.divider};
-  border-left: none;
   border-radius: 4px;
+  background: ${(props) => props.theme.palette.input.background};
   overflow: hidden;
 `;
 export const TimePickerContainer = styled.div `
   display: flex;
-  height: 100%;
+  height: 238px;
 `;
 export const TimeHeader = styled.div `
-  font-weight: 500;
+  box-sizing: border-box;
+  font-weight: 600;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
   border-bottom: 1px solid ${(props) => props.theme.palette.divider};
   text-align: center;
-  padding: 5px;
-  line-height: 2.3;
+  padding: 6px 5px;
+  line-height: 1.25;
   height: 40px;
   user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 `;
-export const TimeHourSelect = styled.div `
-  border-right: 1px solid ${(props) => props.theme.palette.divider};
-  width: 50%;
-  height: 250px;
-  overflow-y: auto;
+export const TimeHeaderValue = styled.span `
+  color: ${(props) => props.theme.palette.text.primary};
 `;
-export const TimeMinuteSelect = styled.div `
-  width: 50%;
-  height: 250px;
+export const TimeZoneBadge = styled.span `
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: ${(props) => props.theme.palette.action.hover};
+  color: ${(props) => props.theme.palette.text.secondary};
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  text-transform: uppercase;
+`;
+export const TimeSelectList = styled.div `
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
   overflow-y: auto;
 `;
 export const TimeItem = styled.div `
   font-weight: 500;
-  font-size: 10px;
+  font-size: 11px;
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
-  padding: 5px;
+  padding: 6px 5px;
   user-select: none;
   cursor: pointer;
   transition: all 0.2s ease-out;
+  border-radius: 4px;
+  margin: 1px 4px;
   :hover {
     background: ${(props) => props.theme.palette.action.hover};
   }
@@ -211,10 +241,22 @@ export const TimeItem = styled.div `
     outline: 2px solid ${(props) => props.theme.palette.primary.main};
     outline-offset: -2px;
   }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.palette.text.secondary};
+    opacity: 0.62;
+    text-decoration: line-through;
+
+    &:hover {
+      background: transparent;
+    }
+  }
 `;
 export const TimeItemActive = styled(TimeItem) `
   background: ${(props) => props.theme.palette.primary.main};
   color: white;
+  font-weight: 700;
   &:hover {
     background: ${(props) => props.theme.palette.primary.main};
   }

package/dist/Calendar/calendarHelpers.d.ts

@@ -39,7 +39,7 @@ export declare const CALENDAR_MONTHS: {
 export declare const CALENDAR_WEEKS = 6;
 export declare const zeroPad: (value: number, length: number) => string;
 export declare const createLocalDate: (year: number, month: number, day: number) => Date;
-export declare const getMonthDays: (month?: number, year?: number) => 28 | 29 | 30 | 31;
+export declare const getMonthDays: (month?: number, year?: number) => 28 | 30 | 29 | 31;
 export declare const getMonthFirstDay: (month?: number, year?: number) => number;
 export declare const isDate: (date: Date) => boolean;
 export declare const isSameMonth: (date: Date, basedate?: Date) => boolean;

package/dist/CheckBox/CheckBox.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { useState, useEffect } from "react";
-import { FaCheckSquare, FaRegSquare, FaRegMinusSquare } from "react-icons/fa";
 import { getControlSizeTokens } from "../core";
 const CheckBox = styled(({ className, defaultValue = false, value, partialCheck = false, onChange = () => { }, }) => {
     const [checkedState, setCheckedState] = useState(defaultValue);
@@ -15,15 +14,47 @@ const CheckBox = styled(({ className, defaultValue = false, value, partialCheck
             setCheckedState(value);
     }, [value]);
     const _checked = value === undefined ? checkedState : value;
-    return (_jsx("div", { className: className, onClick: handleChange, children: partialCheck === true ? (_jsx(FaRegMinusSquare, { className: "checkbox partial" })) : _checked === true ? (_jsx(FaCheckSquare, { className: "checkbox checked" })) : (_jsx(FaRegSquare, { className: "checkbox unchecked" })) }));
+    return (_jsx("div", { className: className, onClick: handleChange, children: partialCheck === true ? (_jsx("span", { className: "checkbox partial" })) : _checked === true ? (_jsx("span", { className: "checkbox checked" })) : (_jsx("span", { className: "checkbox unchecked" })) }));
 }) `
   display: flex;
   align-items: center;
   cursor: pointer;
 
   .checkbox {
-    color: ${(props) => props.theme.palette.primary.main};
-    font-size: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    border-radius: 2px;
+  }
+
+  .checked,
+  .partial {
+    background-color: ${(props) => props.theme.palette.primary.main};
+  }
+
+  .checked::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    width: 32%;
+    height: 56%;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+    transform-origin: center;
+  }
+
+  .partial::after {
+    content: "";
+    width: 60%;
+    height: 2px;
+    background-color: #fff;
   }
 `;
 export default CheckBox;

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import type { FormatOptions } from "../DateInput/DateInput";
+import { Size, Variant } from "../core";
+export type DateTimeRangeValue = {
+    start?: string | null;
+    end?: string | null;
+};
+export type DateTimeRangePreset = {
+    label: string;
+    getRange: () => Required<DateTimeRangeValue>;
+};
+export type DateTimeRangePickerChangeMeta = {
+    source: "apply" | "clear" | "preset";
+    preset?: DateTimeRangePreset;
+};
+export type DateTimeRangePickerProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    defaultValue?: DateTimeRangeValue;
+    value?: DateTimeRangeValue;
+    onChange?: (value: DateTimeRangeValue, meta: DateTimeRangePickerChangeMeta) => void;
+    label?: string;
+    description?: ReactNode;
+    placeholder?: string;
+    startLabel?: string;
+    endLabel?: string;
+    format?: FormatOptions;
+    size?: Size;
+    variant?: Variant;
+    required?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    error?: string;
+    width?: string | number;
+    min?: Date;
+    max?: Date;
+    utc?: boolean;
+    presets?: DateTimeRangePreset[];
+};
+declare const DateTimeRangePicker: import("react").ForwardRefExoticComponent<DateTimeRangePickerProps & import("react").RefAttributes<HTMLElement>>;
+export default DateTimeRangePicker;