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

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;

package/dist/Calendar/calendarHelpers.js

@@ -12,20 +12,25 @@ export const HOURS24 = [...new Array(24)].map((n, index) => {
 });
 export const HOURS12 = [
     ...[...new Array(12)].map((n, index) => {
+        const displayHour = index === 0 ? 12 : index;
         return {
             value: index,
-            label: index < 10 ? `0${index} AM` : `${index} AM`,
+            label: displayHour < 10 ? `0${displayHour} AM` : `${displayHour} AM`,
         };
     }),
     ...[...new Array(12)].map((n, index) => {
+        const displayHour = index === 0 ? 12 : index;
         return {
             value: index + 12,
-            label: index < 10 ? `0${index} PM` : `${index} PM`,
+            label: displayHour < 10 ? `0${displayHour} PM` : `${displayHour} PM`,
         };
     }),
 ];
 export const MINUTES = new Array(60).fill(0).map((n, index) => {
-    return index < 10 ? `0${index}` : index;
+    return {
+        value: index,
+        label: index < 10 ? `0${index}` : `${index}`,
+    };
 });
 export const WEEK_DAYS = {
     Sunday: "Su",
@@ -58,10 +63,13 @@ export const CALENDAR_WEEKS = 6;
 export const zeroPad = (value, length) => {
     return `${value}`.padStart(length, "0");
 };
+export const createLocalDate = (year, month, day) => {
+    return new Date(year, month - 1, day);
+};
 // (int) Number days in a month for a given year from 28 - 31
 export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
     const months30 = [4, 6, 9, 11];
-    const leapYear = year % 4 === 0;
+    const leapYear = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
     return month === 2
         ? leapYear
             ? 29
@@ -73,7 +81,7 @@ export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
 // (int) First day of the month for a given year from 1 - 7
 // 1 => Sunday, 7 => Saturday
 export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
-    return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
+    return createLocalDate(year, month, 1).getDay() + 1;
 };
 // (bool) Checks if a value is a date - this is just a simple check
 export const isDate = (date) => {

package/dist/ChartPrimitives/chartLegend.styled.d.ts

@@ -0,0 +1,12 @@
+export declare const StyledChartLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const sharedLegendItemStyles: import("styled-components").RuleSet<{
+    $active: boolean;
+}>;
+export declare const StyledChartLegendLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledChartLegendValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledChartLegendSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $width?: number;
+    $height?: number;
+    $radius?: number;
+}>> & string;

package/dist/ChartPrimitives/chartLegend.styled.js

@@ -0,0 +1,52 @@
+import styled, { css } from "styled-components";
+export const StyledChartLegend = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 168px;
+  max-width: 280px;
+  gap: 6px;
+`;
+export const sharedLegendItemStyles = css `
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  gap: 10px;
+  min-height: 30px;
+  padding: 5px 7px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 12px;
+  transition:
+    background-color 0.16s ease,
+    border-color 0.16s ease;
+
+  &:hover,
+  &:focus-visible {
+    border-color: ${({ theme }) => theme.palette.divider};
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    outline: none;
+  }
+
+  ${({ $active, theme }) => $active &&
+    `
+      border-color: ${theme.palette.divider};
+      background-color: ${theme.palette.action.hover};
+    `}
+`;
+export const StyledChartLegendLabel = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const StyledChartLegendValue = styled.span `
+  font-variant-numeric: tabular-nums;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  white-space: nowrap;
+`;
+export const StyledChartLegendSwatch = styled.span `
+  width: ${({ $width = 4 }) => $width}px;
+  height: ${({ $height = 22 }) => $height}px;
+  border-radius: ${({ $radius = 2 }) => $radius}px;
+  background: ${({ $color }) => $color};
+`;

package/dist/ChartPrimitives/chartTooltip.styled.d.ts

@@ -0,0 +1,19 @@
+export declare const StyledChartTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}>> & string;
+export declare const StyledChartTooltipHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartTooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $radius?: string;
+}>> & string;
+export declare const StyledChartTooltipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledChartTooltipMeta: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $marginTop?: number;
+    $direction?: "row" | "column";
+    $gap?: number;
+}>> & string;
+export declare const StyledChartTooltipList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartTooltipRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartTooltipValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;