@monolith-forensics/monolith-ui 1.1.29 → 1.1.30

package/dist/Button/Button.d.ts

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { Size, Variant } from "../core";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: ReactNode;
+    rightSection?: ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: Size;
+    variant?: Variant;
+    color?: string;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/Button/Button.js

@@ -0,0 +1,332 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const lucide_react_1 = require("lucide-react");
+const colors = {
+    gray: "#888888",
+    red: "#e03131",
+    pink: "#c2255c",
+    grape: "#9c36b5",
+    violet: "#6741d9",
+    indigo: "#3b5bdb",
+    cyan: "#0c8599",
+    teal: "#099268",
+    green: "#2f9e44",
+    lime: "#66a80f",
+    yellow: "#f08c00",
+    orange: "#e8590c",
+};
+const StyledButton = styled_components_1.default.button `
+  user-select: none;
+  display: flex;
+  outline: none;
+  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`;
+    }
+}};
+
+  font-weight: 525;
+  letter-spacing: 0.75px;
+  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`;
+    }
+}};
+
+  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`;
+    }
+}};
+
+  color: ${({ theme, variant, color }) => {
+    var _a, _b;
+    if (variant === "default")
+        return theme.palette.text.primary;
+    if (variant === "contained")
+        return "white";
+    if (variant === "filled")
+        return "white";
+    switch (color) {
+        case "primary":
+            return theme.palette.primary.main;
+        case undefined:
+            return theme.palette.text.primary;
+        default:
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.text.primary
+                : theme.palette.text.primary;
+    }
+}};
+
+  background-color: ${({ theme, variant, color }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (variant === "default")
+        return "transparent";
+    switch (variant) {
+        case "contained":
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary;
+        case "filled":
+            return color
+                ? ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c[color]) === null || _d === void 0 ? void 0 : _d.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary;
+        case "light":
+            return ((color
+                ? ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e[color]) === null || _f === void 0 ? void 0 : _f.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "30");
+        case "outlined":
+            return "transparent";
+        case "text":
+            return "transparent";
+        default:
+            return "transparent";
+    }
+}};
+
+  border-radius: 4px;
+  border: 1px solid
+    ${({ theme, variant, color }) => {
+    var _a, _b, _c, _d;
+    switch (variant) {
+        case "contained":
+            return "transparent";
+        case "filled":
+            return "transparent";
+        case "light":
+            return "transparent";
+        case "outlined":
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.divider
+                : theme.palette.divider;
+        case "text":
+            return "transparent";
+        case "subtle":
+            return "transparent";
+        default:
+            return color
+                ? ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c[color]) === null || _d === void 0 ? void 0 : _d.main) ||
+                    colors[color] ||
+                    theme.palette.divider
+                : theme.palette.divider;
+    }
+}};
+
+  cursor: pointer;
+
+  transition: background-color 0.2s, border 0.2s;
+
+  .inner-span {
+    display: flex;
+    align-items: center;
+  }
+
+  .button-label {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-position="left"] {
+    margin-inline-end: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  [data-position="right"] {
+    margin-inline-start: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  &:hover {
+    background-color: ${({ theme, variant, color }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (variant === "default")
+        return "transparent";
+    switch (variant) {
+        case "contained":
+            return ((color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "90");
+        case "filled":
+            return ((color
+                ? ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c[color]) === null || _d === void 0 ? void 0 : _d.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "90");
+        case "light":
+            return ((color
+                ? ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e[color]) === null || _f === void 0 ? void 0 : _f.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "70");
+        case "outlined":
+            return theme.palette.action.hover;
+        case "text":
+            return "transparent";
+        case "subtle":
+            return color
+                ? (((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g[color]) === null || _h === void 0 ? void 0 : _h.main) ||
+                    colors[color]) + "30" ||
+                    theme.palette.action.hover
+                : theme.palette.action.hover;
+        default:
+            return theme.palette.action.hover;
+    }
+}};
+
+    border: 1px solid
+      ${({ theme, variant, color }) => {
+    var _a, _b;
+    switch (variant) {
+        case "contained":
+            return "transparent";
+        case "filled":
+            return "transparent";
+        case "light":
+            return "transparent";
+        case "outlined":
+            return color
+                ? colors[color] || theme.palette.divider
+                : theme.palette.divider;
+        case "text":
+            return "transparent";
+        case "subtle":
+            return "transparent";
+        default:
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.divider
+                : theme.palette.divider;
+    }
+}};
+    opacity: ${({ variant }) => (variant === "text" ? 0.8 : 1)};
+  }
+
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:active {
+    // simulate physical button press
+    translate: 0px 1px;
+    text-decoration: none;
+  }
+
+  // disabled styles
+  ${({ disabled }) => disabled &&
+    `
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  `}
+`;
+const StyledAnchor = styled_components_1.default.a `
+  text-decoration: none;
+  height: 100%;
+
+  &:hover {
+    text-decoration: none !important;
+  }
+`;
+const StyledLoader = styled_components_1.default.span `
+  svg {
+    width: 16px;
+    height: 16px;
+    color: ${({ theme, color }) => color
+    ? theme.palette[color] || colors[color]
+    : theme.palette.primary};
+
+    animation: spin 0.75s linear infinite;
+
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+`;
+const Button = (0, react_1.forwardRef)((props, ref) => {
+    const { children, loading = false, leftSection = null, rightSection = null, href = null, download = null } = props, other = __rest(props, ["children", "loading", "leftSection", "rightSection", "href", "download"]);
+    const buttonContent = ((0, jsx_runtime_1.jsx)("span", { className: "inner-span", style: { height: "100%" }, children: loading ? ((0, jsx_runtime_1.jsx)(StyledLoader, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, {}) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftSection && (0, jsx_runtime_1.jsx)("span", { "data-position": "left", children: leftSection }), (0, jsx_runtime_1.jsx)("span", { className: "button-label", children: children }), rightSection && (0, jsx_runtime_1.jsx)("span", { "data-position": "right", children: rightSection })] })) }));
+    return ((0, jsx_runtime_1.jsx)(StyledButton, Object.assign({ ref: ref }, other, { children: href ? ((0, jsx_runtime_1.jsx)(StyledAnchor, { href: href, download: download, children: buttonContent })) : (buttonContent) })));
+});
+exports.default = Button;

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export type { ButtonProps } from "./Button";

package/dist/Button/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });

package/dist/Calendar/Calendar.d.ts

@@ -0,0 +1,15 @@
+interface CalendarProps {
+    defaultValue?: Date;
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    hourFormat?: "12" | "24";
+    includeTime?: boolean;
+    clearable?: boolean;
+    min?: Date;
+    max?: Date;
+}
+declare const Calendar: {
+    ({ defaultValue, value, onChange, hourFormat, includeTime, clearable, min, max, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Calendar;

package/dist/Calendar/Calendar.js

@@ -0,0 +1,232 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const CalendarStyles_1 = require("./CalendarStyles");
+const calendarHelpers_1 = __importStar(require("./calendarHelpers"));
+const moment_1 = __importDefault(require("moment"));
+const checkValidRange = (value, min, max) => {
+    if (min && (0, moment_1.default)(value).startOf("day").isBefore((0, moment_1.default)(min).startOf("day")))
+        return false;
+    if (max && (0, moment_1.default)(value).startOf("day").isAfter((0, moment_1.default)(max).startOf("day")))
+        return false;
+    return true;
+};
+const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, }) => {
+    const [dateState, setDateState] = (0, react_1.useState)({
+        current: defaultValue,
+        month: defaultValue.getMonth() + 1,
+        year: defaultValue.getFullYear(),
+        hours: 0,
+        minutes: 0,
+    });
+    const [today, setToday] = (0, react_1.useState)(new Date());
+    let pressureTimer;
+    let pressureTimeout;
+    let dayTimeout;
+    const addDateToState = (date) => {
+        const isDateObject = (0, calendarHelpers_1.isDate)(date);
+        const _date = isDateObject ? date : new Date();
+        setDateState({
+            current: isDateObject ? date : null,
+            month: +_date.getMonth() + 1,
+            year: _date.getFullYear(),
+            hours: _date.getHours(),
+            minutes: _date.getMinutes(),
+        });
+    };
+    const getCalendarDates = () => {
+        const { current, month, year } = dateState;
+        const calendarMonth = month || +((current === null || current === void 0 ? void 0 : current.getMonth()) || 0) + 1;
+        const calendarYear = year || (current === null || current === void 0 ? void 0 : current.getFullYear());
+        return (0, calendarHelpers_1.default)(calendarMonth, calendarYear);
+    };
+    //new start
+    const renderMonthAndYear = () => {
+        const { month, year } = dateState;
+        // Resolve the month name from the CALENDAR_MONTHS object map
+        const monthname = Object.keys(calendarHelpers_1.CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
+        return ((0, jsx_runtime_1.jsxs)(CalendarStyles_1.CalendarHeader, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, { onMouseDown: handlePrevious, onMouseUp: clearPressureTimer }), (0, jsx_runtime_1.jsxs)(CalendarStyles_1.CalendarMonth, { children: [monthname, " ", year] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { onMouseDown: handleNext, onMouseUp: clearPressureTimer })] }));
+    };
+    // 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 = calendarHelpers_1.WEEK_DAYS[day];
+        return ((0, jsx_runtime_1.jsx)(CalendarStyles_1.CalendarDay, { index: index, 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 { current, month, year } = dateState;
+        const _date = new Date(date.join("-"));
+        // Check if calendar date is same day as today
+        const isToday = (0, calendarHelpers_1.isSameDay)(_date, today);
+        // Check if calendar date is same day as currently selected date
+        const isCurrent = current && (0, calendarHelpers_1.isSameDay)(_date, current);
+        // Check if calendar date is in the same month as the state month and year
+        const inMonth = month && year && (0, calendarHelpers_1.isSameMonth)(_date, new Date([year, month, 1].join("-")));
+        // The click handler
+        const props = {
+            "data-disabled": !checkValidRange((0, calendarHelpers_1.getDateISO)(_date), min || null, max || null),
+            index,
+            key: (0, calendarHelpers_1.getDateISO)(_date),
+            onClick: gotoDate(_date),
+            title: _date.toDateString(),
+            inMonth,
+        };
+        // Conditionally render a styled date component
+        return isCurrent ? ((0, jsx_runtime_1.jsx)(CalendarStyles_1.HighlightedCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : isToday ? ((0, jsx_runtime_1.jsx)(CalendarStyles_1.TodayCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : ((0, jsx_runtime_1.jsx)(CalendarStyles_1.CalendarDate, Object.assign({}, props, { children: _date.getDate() })));
+    };
+    const renderHours = () => {
+        const { hours } = dateState;
+        const hoursArray = hourFormat === "24" ? calendarHelpers_1.HOURS24 : calendarHelpers_1.HOURS12;
+        return hoursArray.map((hour, index) => {
+            const HourComponent = hour.value === hours ? CalendarStyles_1.TimeItemActive : CalendarStyles_1.TimeItem;
+            return ((0, jsx_runtime_1.jsx)(HourComponent, { 
+                // value={hour.value}
+                onClick: (e) => {
+                    const newTime = (0, moment_1.default)(dateState.current)
+                        .hours(hour.value)
+                        .toDate();
+                    setDateState(Object.assign(Object.assign({}, dateState), { hours: hour.value, current: newTime }));
+                    onChange(newTime);
+                }, children: hour.label }, hour.value));
+        });
+    };
+    const renderMinutes = () => {
+        const { minutes } = dateState;
+        return calendarHelpers_1.MINUTES.map((minute) => {
+            const MinuteComponent = minute === minutes ? CalendarStyles_1.TimeItemActive : CalendarStyles_1.TimeItem;
+            return ((0, jsx_runtime_1.jsx)(MinuteComponent, { 
+                // value={minute}
+                onClick: (e) => {
+                    const newTime = (0, moment_1.default)(dateState.current)
+                        .minutes(Number(minute))
+                        .toDate();
+                    setDateState(Object.assign(Object.assign({}, dateState), { minutes: Number(minute), current: newTime }));
+                    onChange(newTime);
+                }, children: minute }, minute));
+        });
+    };
+    // new 2
+    const gotoDate = (date) => (evt) => {
+        evt && evt.preventDefault();
+        const { current } = dateState;
+        // Set Hours and Minutes
+        const newTime = (0, moment_1.default)(date)
+            .hours(includeTime ? dateState.hours : 0)
+            .minutes(includeTime ? dateState.minutes : 0)
+            .toDate();
+        !(current && (0, calendarHelpers_1.isSameDay)(newTime, current)) && addDateToState(newTime);
+        onChange(newTime);
+    };
+    const gotoPreviousMonth = () => {
+        const { month, year } = dateState;
+        const previousMonth = (0, calendarHelpers_1.getPreviousMonth)(month, year);
+        setDateState({
+            month: previousMonth.month,
+            year: previousMonth.year,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const gotoNextMonth = () => {
+        const { month, year } = dateState;
+        const nextMonth = (0, calendarHelpers_1.getNextMonth)(month, year);
+        setDateState({
+            month: nextMonth.month,
+            year: nextMonth.year,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const gotoPreviousYear = () => {
+        const { year } = dateState;
+        setDateState({
+            month: dateState.month,
+            year: year - 1,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const gotoNextYear = () => {
+        const { year } = dateState;
+        setDateState({
+            month: dateState.month,
+            year: year + 1,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const clearPressureTimer = () => {
+        pressureTimer && clearInterval(pressureTimer);
+        pressureTimeout && clearTimeout(pressureTimeout);
+    };
+    const handlePrevious = (evt) => {
+        evt && evt.preventDefault();
+        const fn = evt.shiftKey ? gotoPreviousYear : gotoPreviousMonth;
+        fn();
+    };
+    const handleNext = (evt) => {
+        evt && evt.preventDefault();
+        const fn = evt.shiftKey ? gotoNextYear : gotoNextMonth;
+        fn();
+    };
+    (0, react_1.useEffect)(() => {
+        if (value) {
+            addDateToState(value);
+        }
+    }, [value]);
+    // lifecycle methods
+    (0, react_1.useEffect)(() => {
+        const now = new Date().valueOf();
+        const tomorrow = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000;
+        const ms = tomorrow - now;
+        dayTimeout = setTimeout(() => {
+            setToday(new Date());
+            clearDayTimeout();
+        }, ms);
+        return () => {
+            clearPressureTimer();
+            clearDayTimeout();
+        };
+    }, []);
+    const clearDayTimeout = () => {
+        dayTimeout && clearTimeout(dayTimeout);
+    };
+    return ((0, jsx_runtime_1.jsxs)(CalendarStyles_1.MainContainer, { children: [(0, jsx_runtime_1.jsxs)(CalendarStyles_1.CalendarContainer, { children: [renderMonthAndYear(), (0, jsx_runtime_1.jsxs)(CalendarStyles_1.CalendarGrid, { children: [(0, jsx_runtime_1.jsx)(react_1.Fragment, { children: Object.keys(calendarHelpers_1.WEEK_DAYS).map(renderDayLabel) }), (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", marginTop: 3 }, children: (0, jsx_runtime_1.jsx)(CalendarStyles_1.NoValueButton, { onClick: () => onChange(null), children: "Clear Date" }) }))] }), includeTime && ((0, jsx_runtime_1.jsxs)(CalendarStyles_1.TimeContainer, { children: [(0, jsx_runtime_1.jsx)(CalendarStyles_1.TimeHeader, { children: "Select Time" }), (0, jsx_runtime_1.jsxs)(CalendarStyles_1.TimePickerContainer, { children: [(0, jsx_runtime_1.jsx)(CalendarStyles_1.TimeHourSelect, { children: renderHours() }), (0, jsx_runtime_1.jsx)(CalendarStyles_1.TimeMinuteSelect, { children: renderMinutes() })] })] }))] }));
+};
+Calendar.displayName = "Calendar";
+exports.default = Calendar;

package/dist/Calendar/CalendarStyles.d.ts

@@ -0,0 +1,36 @@
+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 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;
+interface CalendarCellProps {
+    index?: number;
+    inMonth?: boolean | 0;
+    "data-disabled"?: boolean | 0;
+    key: string | null;
+    title?: string;
+}
+export declare const CalendarCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CalendarCellProps>> & string;
+export declare const CalendarDay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, CalendarCellProps>> & string;
+export declare const CalendarDate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, CalendarCellProps>> & string;
+export declare const HighlightedCalendarDate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof CalendarCellProps> & CalendarCellProps, CalendarCellProps>> & string;
+export declare const TodayCalendarDate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof CalendarCellProps> & CalendarCellProps, keyof CalendarCellProps> & CalendarCellProps, CalendarCellProps>> & string;
+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 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<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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;
+export {};