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

package/dist/Button/Button.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Loader2Icon } from "lucide-react";
+import { getControlSizeTokens } from "../core";
 const colors = {
     gray: "#888888",
     lightGray: "#f0f0f0",
@@ -35,63 +36,14 @@ const StyledButton = styled.button `
   white-space: nowrap;
 
   width: ${({ fullWidth }) => (fullWidth ? "100%" : "fit-content")};
-  height: ${({ theme, size }) => {
-    switch (size) {
-        case "xxs":
-            return `24px`;
-        case "xs":
-            return `28px`;
-        case "sm":
-            return `34px`;
-        case "md":
-            return `40px`;
-        case "lg":
-            return `48px`;
-        case "xl":
-            return `58px`;
-        default:
-            return `34px`;
-    }
-}};
+  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
 
-  font-size: ${({ theme, size }) => {
-    switch (size) {
-        case "xxs":
-            return `11px`;
-        case "xs":
-            return `12px`;
-        case "sm":
-            return `14px`;
-        case "md":
-            return `16px`;
-        case "lg":
-            return `18px`;
-        case "xl":
-            return `20px`;
-        default:
-            return `14px`;
-    }
-}};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
 
   padding: ${({ theme, size, variant }) => {
     if (variant === "text")
         return `0px 0px`;
-    switch (size) {
-        case "xxs":
-            return `0px 8px`;
-        case "xs":
-            return `0px 12px`;
-        case "sm":
-            return `0px 16px`;
-        case "md":
-            return `0px 20px`;
-        case "lg":
-            return `0px 24px`;
-        case "xl":
-            return `0px 30px`;
-        default:
-            return `0px 16px`;
-    }
+    return `0px ${getControlSizeTokens(size).buttonPaddingX}px`;
 }};
 
   color: ${({ theme, variant, color }) => {
@@ -175,6 +127,7 @@ const StyledButton = styled.button `
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
   }
 
   .button-label {
@@ -183,17 +136,15 @@ const StyledButton = styled.button `
   }
 
   [data-position="left"] {
-    margin-inline-end: 6px;
     display: flex;
     align-items: center;
   }
 
   [data-position="right"] {
-    margin-inline-start: 6px;
-    padding-inline-start: 6px;
     margin-left: auto;
     display: flex;
     align-items: center;
+    padding-inline-start: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
   }
 
   &:hover {
@@ -264,8 +215,8 @@ const StyledAnchor = styled.a `
 `;
 const StyledLoader = styled.span `
   svg {
-    width: 16px;
-    height: 16px;
+    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
     color: ${({ theme, color }) => {
     var _a;
     return color
@@ -285,6 +236,6 @@ const StyledLoader = styled.span `
 `;
 export const Button = forwardRef((props, ref) => {
     const { children, loading = false, leftSection = null, rightSection = null, href = null, download = null, justify = "center" } = props, other = __rest(props, ["children", "loading", "leftSection", "rightSection", "href", "download", "justify"]);
-    const buttonContent = (_jsx("div", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("div", { "data-position": "left", children: leftSection }), _jsx("div", { className: "button-label", children: children }), rightSection && _jsx("div", { "data-position": "right", children: rightSection })] })) }));
+    const buttonContent = (_jsx("div", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { size: other.size, children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("div", { "data-position": "left", children: leftSection }), _jsx("div", { className: "button-label", children: children }), rightSection && _jsx("div", { "data-position": "right", children: rightSection })] })) }));
     return (_jsx(StyledButton, Object.assign({ ref: ref }, other, { children: href ? (_jsx(StyledAnchor, { href: href, download: download, children: buttonContent })) : (buttonContent) })));
 });

package/dist/Calendar/Calendar.d.ts

@@ -1,7 +1,9 @@
 interface CalendarProps {
     defaultValue?: Date;
     value?: Date | null;
-    onChange?: (date: Date | null) => void;
+    onChange?: (date: Date | null, meta?: {
+        source: "date" | "month" | "year" | "time" | "clear";
+    }) => void;
     hourFormat?: "12" | "24";
     includeTime?: boolean;
     clearable?: boolean;

package/dist/Calendar/Calendar.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { CalendarContainer, CalendarHeader, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHourSelect, TimeHeader, TimeMinuteSelect, TimeItem, TimeItemActive, NoValueButton, } from "./CalendarStyles";
-import calendar, { isDate, isSameDay, isSameMonth, getDateISO, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, HOURS24, HOURS12, MINUTES, } from "./calendarHelpers";
+import { CalendarContainer, CalendarHeader, CalendarHeaderControls, CalendarHeaderSelect, CalendarNavButton, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHourSelect, TimeHeader, TimeMinuteSelect, TimeItem, TimeItemActive, 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 moment from "moment";
 const checkValidRange = (value, min, max) => {
     if (min && moment(value).startOf("day").isBefore(moment(min).startOf("day")))
@@ -20,6 +21,10 @@ const resolveValue = (value) => {
         minutes: safeValue.getMinutes(),
     };
 };
+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 isControlled = useRef(value !== undefined);
     const [valueState, setValueState] = useState(defaultValue);
@@ -33,16 +38,44 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     let pressureTimer;
     let pressureTimeout;
     let dayTimeout;
+    const syncCalendarState = (date) => {
+        setCalendarState({
+            month: +date.getMonth() + 1,
+            year: date.getFullYear(),
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+        });
+    };
+    const commitDate = (date, source = "date") => {
+        if (date && isDate(date)) {
+            if (!isControlled.current) {
+                setValueState(date);
+            }
+            syncCalendarState(date);
+            onChange(date, { source });
+            return;
+        }
+        if (!isControlled.current) {
+            setValueState(null);
+        }
+        onChange(null, { source: "clear" });
+    };
+    const getWorkingDate = () => {
+        if (_value && isDate(_value)) {
+            return _value;
+        }
+        const fallbackDay = Math.min(today.getDate(), getMonthDays(calendarState.month, calendarState.year));
+        const fallbackDate = createLocalDate(calendarState.year, calendarState.month, fallbackDay);
+        fallbackDate.setHours(calendarState.hours, calendarState.minutes, 0, 0);
+        return fallbackDate;
+    };
     const addDateToState = (date) => {
         const isDateObject = isDate(date);
         const _date = isDateObject ? date : new Date();
-        setValueState(_date);
-        setCalendarState({
-            month: +_date.getMonth() + 1,
-            year: _date.getFullYear(),
-            hours: _date.getHours(),
-            minutes: _date.getMinutes(),
-        });
+        if (!isControlled.current) {
+            setValueState(_date);
+        }
+        syncCalendarState(_date);
     };
     const getCalendarDates = () => {
         const { month, year } = calendarState;
@@ -50,37 +83,87 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const calendarYear = year || (_value === null || _value === void 0 ? void 0 : _value.getFullYear()) || new Date().getFullYear();
         return calendar(calendarMonth, calendarYear);
     };
-    //new start
+    const setCalendarView = (nextMonth, nextYear) => {
+        setCalendarState((prev) => (Object.assign(Object.assign({}, prev), { month: nextMonth, year: nextYear })));
+    };
+    const commitMonthOrYearSelection = (nextMonth, nextYear, source) => {
+        const workingDate = getWorkingDate();
+        const clampedDay = Math.min(workingDate.getDate(), getMonthDays(nextMonth, nextYear));
+        const nextDate = createLocalDate(nextYear, nextMonth, clampedDay);
+        nextDate.setHours(workingDate.getHours(), workingDate.getMinutes(), 0, 0);
+        commitDate(nextDate, source);
+    };
+    const getYearOptions = () => {
+        var _a, _b;
+        const currentYear = calendarState.year;
+        const minYear = (_a = min === null || min === void 0 ? void 0 : min.getFullYear()) !== null && _a !== void 0 ? _a : currentYear - 50;
+        const maxYear = (_b = max === null || max === void 0 ? void 0 : max.getFullYear()) !== null && _b !== void 0 ? _b : currentYear + 50;
+        return Array.from({ length: maxYear - minYear + 1 }, (_, index) => {
+            const optionYear = minYear + index;
+            return {
+                label: `${optionYear}`,
+                value: optionYear,
+            };
+        });
+    };
     const renderMonthAndYear = () => {
         const { month, year } = calendarState;
-        // Resolve the month name from the CALENDAR_MONTHS object map
-        const monthname = Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
-        return (_jsxs(CalendarHeader, { children: [_jsx(ChevronLeftIcon, { onMouseDown: handlePrevious, onMouseUp: clearPressureTimer }), _jsxs(CalendarMonth, { children: [monthname, " ", year] }), _jsx(ChevronRightIcon, { onMouseDown: handleNext, onMouseUp: clearPressureTimer })] }));
+        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 },
+                                }, 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: {
+                                    style: { width: 120, maxHeight: 260 },
+                                }, buttonProps: {
+                                    title: "Select year",
+                                    size: "xxs",
+                                    style: { minWidth: 50 },
+                                }, children: _jsx(CalendarMonth, { children: year }) }) })] }), _jsx(CalendarNavButton, { type: "button", onClick: handleNext, onMouseUp: clearPressureTimer, "aria-label": "Go to next month", title: "Next month. Hold Shift to jump by year.", children: _jsx(ChevronRightIcon, { "aria-hidden": "true" }) })] }));
+    };
+    const handleActionKeyDown = (action) => (evt) => {
+        if (evt.key === "Enter" || evt.key === " ") {
+            evt.preventDefault();
+            action();
+        }
     };
     // Render the label for day of the week
     // This method is used as a map callback as seen in render()
     const renderDayLabel = (day, index) => {
         // Resolve the day of the week label from the WEEK_DAYS object map
         const daylabel = WEEK_DAYS[day];
-        return (_jsx(CalendarDay, { index: index, children: daylabel }, daylabel));
+        return (_jsx(CalendarDay, { index: index, role: "columnheader", children: daylabel }, daylabel));
     };
     // Render a calendar date as returned from the calendar builder function
     // This method is used as a map callback as seen in render()
     const renderCalendarDate = (date, index) => {
+        const [dateYear, dateMonth, dateDay] = date.map(Number);
         const { month, year } = calendarState;
-        const _date = new Date(date.join("-"));
+        const _date = createLocalDate(dateYear, dateMonth, dateDay);
         // Check if calendar date is same day as today
         const isToday = isSameDay(_date, today);
         // Check if calendar date is same day as currently selected date
         const isCurrent = _value && isSameDay(_date, _value);
         // Check if calendar date is in the same month as the state month and year
-        const inMonth = month && year && isSameMonth(_date, new Date([year, month, 1].join("-")));
+        const inMonth = month && year && isSameMonth(_date, createLocalDate(year, month, 1));
+        const isDisabled = !checkValidRange(getDateISO(_date), min || null, max || null);
+        const ariaCurrent = isToday ? "date" : undefined;
         // The click handler
         const props = {
-            "data-disabled": !checkValidRange(getDateISO(_date), min || null, max || null),
+            "data-disabled": isDisabled,
+            "aria-current": ariaCurrent,
+            "aria-disabled": isDisabled,
+            "aria-label": `${isCurrent ? "Selected" : "Select"} ${_date.toDateString()}`,
+            "aria-pressed": Boolean(isCurrent),
             index,
             key: getDateISO(_date),
             onClick: gotoDate(_date),
+            onKeyDown: handleActionKeyDown(() => gotoDate(_date)(undefined)),
+            role: "button",
+            tabIndex: isDisabled ? -1 : 0,
             title: _date.toDateString(),
             inMonth,
         };
@@ -92,28 +175,42 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
         return hoursArray.map((hour, index) => {
             const HourComponent = hour.value === hours ? TimeItemActive : TimeItem;
-            return (_jsx(HourComponent, { 
+            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(_value).hours(hour.value).toDate();
-                    setCalendarState(Object.assign(Object.assign({}, calendarState), { hours: hour.value }));
-                    setValueState(newTime);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newTime);
-                }, children: hour.label }, hour.value));
+                    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 renderMinutes = () => {
         const { minutes } = calendarState;
         return MINUTES.map((minute) => {
-            const MinuteComponent = minute === minutes ? TimeItemActive : TimeItem;
-            return (_jsx(MinuteComponent, { 
+            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(_value).minutes(Number(minute)).toDate();
-                    setCalendarState(Object.assign(Object.assign({}, calendarState), { minutes: Number(minute) }));
-                    setValueState(newTime);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newTime);
-                }, children: minute }, minute));
+                    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));
         });
     };
     // new 2
@@ -124,8 +221,12 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
             .hours(includeTime ? calendarState.hours : 0)
             .minutes(includeTime ? calendarState.minutes : 0)
             .toDate();
-        !(_value && isSameDay(newTime, _value)) && addDateToState(newTime);
-        onChange(newTime);
+        if (!(_value && isSameDay(newTime, _value))) {
+            commitDate(newTime, "date");
+            return;
+        }
+        syncCalendarState(newTime);
+        onChange(newTime, { source: "date" });
     };
     const gotoPreviousMonth = () => {
         const { month, year } = calendarState;
@@ -202,7 +303,7 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     // const clearDayTimeout = () => {
     //   dayTimeout && clearTimeout(dayTimeout);
     // };
-    return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { 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, { onClick: () => onChange(null), 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: [_jsx(TimeHeader, { children: "Select Time" }), _jsxs(TimePickerContainer, { children: [_jsx(TimeHourSelect, { children: renderHours() }), _jsx(TimeMinuteSelect, { children: renderMinutes() })] })] }))] }));
 };
 Calendar.displayName = "Calendar";
 export default Calendar;

package/dist/Calendar/CalendarStyles.d.ts

@@ -1,8 +1,11 @@
 export declare const MainContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CalendarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CalendarHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CalendarHeaderControls: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CalendarNavButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const CalendarGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CalendarMonth: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CalendarHeaderSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 interface CalendarCellProps {
     index?: number;
     inMonth?: boolean | 0;

package/dist/Calendar/CalendarStyles.js

@@ -1,70 +1,133 @@
 import styled from "styled-components";
 export const MainContainer = styled.div `
   display: flex;
+  align-items: flex-start;
+  gap: 8px;
 `;
 export const CalendarContainer = styled.div `
-  font-size: 5px;
-  width: 250px;
+  width: 264px;
   border-radius: 4px;
   overflow: hidden;
+  box-sizing: border-box;
 `;
 export const CalendarHeader = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 4px;
+  padding: 0 2px 6px;
+`;
+export const CalendarHeaderControls = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+`;
+export const CalendarNavButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: ${(props) => props.theme.palette.text.secondary};
+  cursor: pointer;
+  transition: background 0.2s ease-out;
+
+  &:hover {
+    background: ${(props) => props.theme.palette.action.hover};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.palette.primary.main};
+    outline-offset: 2px;
+  }
 `;
 export const CalendarGrid = styled.div `
   display: grid;
   grid-template: repeat(7, auto) / repeat(7, auto);
+  gap: 3px;
 `;
 export const CalendarMonth = styled.div `
   font-weight: 500;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
-  padding: 0.5em 0.25em;
+  padding: 8px 4px;
   word-spacing: 5px;
   user-select: none;
+  flex: 1;
+`;
+export const CalendarHeaderSelect = styled.div `
+  .mfui-DropDownMenu {
+    min-width: 0;
+  }
 `;
 export const CalendarCell = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   align-self: center;
   letter-spacing: 0.1rem;
-  padding: 7px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 6px 4px;
   user-select: none;
   border-radius: 5px;
   border: 1px solid transparent;
+  box-sizing: border-box;
   grid-column: ${({ index = 0 }) => (index % 7) + 1} / span 1;
 `;
 export const CalendarDay = styled(CalendarCell) `
   font-weight: bold;
-  font-size: 10px;
+  font-size: 11px;
   border-radius: 0px;
   color: ${(props) => props.theme.palette.text.secondary};
+  min-height: 24px;
 `;
 export const CalendarDate = styled(CalendarCell) `
   font-weight: ${(props) => (props.inMonth ? 500 : 300)};
-  font-size: 10px;
+  font-size: 11px;
+  line-height: 1.1;
   cursor: pointer;
 
   color: ${({ inMonth, theme }) => inMonth ? theme.palette.text.primary : theme.palette.text.secondary};
+  background: transparent;
+  opacity: ${({ inMonth }) => (inMonth ? 1 : 0.65)};
   grid-row: ${({ index }) => Math.floor((index || 0) / 7) + 2} / span 1;
   transition: all 0.2s ease-out;
   border-radius: 5px;
   &:hover {
     background: ${({ theme }) => theme.palette.action.hover};
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.palette.primary.main};
+    outline-offset: 1px;
   }
 
   &[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;
   }
 `;
 export const HighlightedCalendarDate = styled(CalendarDate) `
   color: white !important;
   background: ${(props) => props.theme.palette.primary.main} !important;
   border: 1px solid ${(props) => props.theme.palette.primary.main} !important;
+  font-weight: 700;
+  opacity: 1;
   position: relative;
+  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: "";
     position: absolute;
@@ -76,24 +139,29 @@ export const HighlightedCalendarDate = styled(CalendarDate) `
 `;
 export const TodayCalendarDate = styled(HighlightedCalendarDate) `
   color: ${(props) => props.theme.palette.text.primary} !important;
-  background: transparent !important;
+  background: ${(props) => `${props.theme.palette.primary.main}14`} !important;
+  border: 1px dashed ${(props) => props.theme.palette.primary.main} !important;
+  box-shadow: none;
+  font-weight: 600;
   ::after {
     content: "";
     position: absolute;
-    right: 0;
-    bottom: 0;
-    border-bottom: 0.75em solid #06c;
-    border-left: 0.75em solid transparent;
-    border-top: 0.75em solid transparent;
+    left: 50%;
+    bottom: 3px;
+    width: 4px;
+    height: 4px;
+    border-radius: 999px;
+    background: ${(props) => props.theme.palette.primary.main};
+    transform: translateX(-50%);
   }
   :hover {
     color: ${(props) => props.theme.palette.text.primary} !important;
-    background: ${(props) => props.theme.palette.action.hover} !important;
+    background: ${(props) => `${props.theme.palette.primary.main}20`} !important;
   }
 `;
 export const TimeContainer = styled.div `
   font-size: 12px;
-  width: 150px;
+  width: 152px;
   height: 100%;
   border: 1px solid ${(props) => props.theme.palette.divider};
   border-left: none;
@@ -138,6 +206,11 @@ export const TimeItem = styled.div `
   :hover {
     background: ${(props) => props.theme.palette.action.hover};
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.palette.primary.main};
+    outline-offset: -2px;
+  }
 `;
 export const TimeItemActive = styled(TimeItem) `
   background: ${(props) => props.theme.palette.primary.main};
@@ -161,4 +234,9 @@ export const NoValueButton = styled.button `
   :hover {
     background: ${(props) => props.theme.palette.action.hover};
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.palette.primary.main};
+    outline-offset: 2px;
+  }
 `;

package/dist/Calendar/calendarHelpers.d.ts

@@ -8,7 +8,10 @@ export declare const HOURS12: {
     value: number;
     label: string;
 }[];
-export declare const MINUTES: (string | number)[];
+export declare const MINUTES: {
+    value: number;
+    label: string;
+}[];
 export declare const WEEK_DAYS: {
     Sunday: string;
     Monday: string;
@@ -35,6 +38,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 getMonthFirstDay: (month?: number, year?: number) => number;
 export declare const isDate: (date: Date) => boolean;