@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.9.0

package/dist/Calendar/CalendarStyles.js

@@ -1,145 +1,70 @@
 import styled from "styled-components";
 export const MainContainer = styled.div `
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
 `;
 export const CalendarContainer = styled.div `
-  width: 268px;
+  font-size: 5px;
+  width: 250px;
   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, 32px);
-  gap: 3px;
-  justify-content: center;
-  justify-items: center;
+  grid-template: repeat(7, auto) / repeat(7, auto);
 `;
 export const CalendarMonth = styled.div `
   font-weight: 500;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
-  padding: 8px 4px;
+  padding: 0.5em 0.25em;
   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;
-  min-width: 32px;
-  width: 32px;
-  min-height: 32px;
-  height: 32px;
-  padding: 6px 4px;
+  padding: 7px;
   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: 11px;
+  font-size: 10px;
   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: 11px;
-  line-height: 1.1;
+  font-size: 10px;
   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"] {
-    cursor: not-allowed;
-    color: ${({ theme }) => theme.palette.text.secondary};
-
-    opacity: 0.62;
-    font-weight: 500;
-    text-decoration: line-through;
-    text-decoration-thickness: 1px;
-
-    &:hover {
-      background: transparent;
-      opacity: 0.62;
-    }
+    pointer-events: none;
+    color: ${({ theme }) => theme.palette.text.disabled};
   }
 `;
 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;
@@ -151,112 +76,72 @@ export const HighlightedCalendarDate = styled(CalendarDate) `
 `;
 export const TodayCalendarDate = styled(HighlightedCalendarDate) `
   color: ${(props) => props.theme.palette.text.primary} !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;
+  background: transparent !important;
   ::after {
     content: "";
     position: absolute;
-    left: 50%;
-    bottom: 3px;
-    width: 4px;
-    height: 4px;
-    border-radius: 999px;
-    background: ${(props) => props.theme.palette.primary.main};
-    transform: translateX(-50%);
+    right: 0;
+    bottom: 0;
+    border-bottom: 0.75em solid #06c;
+    border-left: 0.75em solid transparent;
+    border-top: 0.75em solid transparent;
   }
   :hover {
     color: ${(props) => props.theme.palette.text.primary} !important;
-    background: ${(props) => `${props.theme.palette.primary.main}20`} !important;
+    background: ${(props) => props.theme.palette.action.hover} !important;
   }
 `;
 export const TimeContainer = styled.div `
-  position: relative;
-  flex: 0 0 132px;
   font-size: 12px;
-  width: 132px;
-  height: auto;
-  box-sizing: border-box;
+  width: 150px;
+  height: 100%;
   border: 1px solid ${(props) => props.theme.palette.divider};
+  border-left: none;
   border-radius: 4px;
-  background: ${(props) => props.theme.palette.input.background};
   overflow: hidden;
 `;
 export const TimePickerContainer = styled.div `
   display: flex;
-  height: 238px;
+  height: 100%;
 `;
 export const TimeHeader = styled.div `
-  box-sizing: border-box;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
   border-bottom: 1px solid ${(props) => props.theme.palette.divider};
   text-align: center;
-  padding: 6px 5px;
-  line-height: 1.25;
+  padding: 5px;
+  line-height: 2.3;
   height: 40px;
   user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-`;
-export const TimeHeaderValue = styled.span `
-  color: ${(props) => props.theme.palette.text.primary};
 `;
-export const TimeZoneBadge = styled.span `
-  padding: 2px 5px;
-  border-radius: 4px;
-  background: ${(props) => props.theme.palette.action.hover};
-  color: ${(props) => props.theme.palette.text.secondary};
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1;
-  text-transform: uppercase;
+export const TimeHourSelect = styled.div `
+  border-right: 1px solid ${(props) => props.theme.palette.divider};
+  width: 50%;
+  height: 250px;
+  overflow-y: auto;
 `;
-export const TimeSelectList = styled.div `
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
+export const TimeMinuteSelect = styled.div `
+  width: 50%;
+  height: 250px;
   overflow-y: auto;
 `;
 export const TimeItem = styled.div `
   font-weight: 500;
-  font-size: 11px;
+  font-size: 10px;
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
-  padding: 6px 5px;
+  padding: 5px;
   user-select: none;
   cursor: pointer;
   transition: all 0.2s ease-out;
-  border-radius: 4px;
-  margin: 1px 4px;
   :hover {
     background: ${(props) => props.theme.palette.action.hover};
   }
-
-  &:focus-visible {
-    outline: 2px solid ${(props) => props.theme.palette.primary.main};
-    outline-offset: -2px;
-  }
-
-  &[data-disabled="true"] {
-    cursor: not-allowed;
-    color: ${({ theme }) => theme.palette.text.secondary};
-    opacity: 0.62;
-    text-decoration: line-through;
-
-    &:hover {
-      background: transparent;
-    }
-  }
 `;
 export const TimeItemActive = styled(TimeItem) `
   background: ${(props) => props.theme.palette.primary.main};
   color: white;
-  font-weight: 700;
   &:hover {
     background: ${(props) => props.theme.palette.primary.main};
   }
@@ -276,9 +161,4 @@ 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,10 +8,7 @@ export declare const HOURS12: {
     value: number;
     label: string;
 }[];
-export declare const MINUTES: {
-    value: number;
-    label: string;
-}[];
+export declare const MINUTES: (string | number)[];
 export declare const WEEK_DAYS: {
     Sunday: string;
     Monday: string;
@@ -38,8 +35,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 | 30 | 29 | 31;
+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;
 export declare const isSameMonth: (date: Date, basedate?: Date) => boolean;

package/dist/Calendar/calendarHelpers.js

@@ -12,25 +12,20 @@ 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: displayHour < 10 ? `0${displayHour} AM` : `${displayHour} AM`,
+            label: index < 10 ? `0${index} AM` : `${index} AM`,
         };
     }),
     ...[...new Array(12)].map((n, index) => {
-        const displayHour = index === 0 ? 12 : index;
         return {
             value: index + 12,
-            label: displayHour < 10 ? `0${displayHour} PM` : `${displayHour} PM`,
+            label: index < 10 ? `0${index} PM` : `${index} PM`,
         };
     }),
 ];
 export const MINUTES = new Array(60).fill(0).map((n, index) => {
-    return {
-        value: index,
-        label: index < 10 ? `0${index}` : `${index}`,
-    };
+    return index < 10 ? `0${index}` : index;
 });
 export const WEEK_DAYS = {
     Sunday: "Su",
@@ -63,13 +58,10 @@ 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 && (year % 100 !== 0 || year % 400 === 0);
+    const leapYear = year % 4 === 0;
     return month === 2
         ? leapYear
             ? 29
@@ -81,7 +73,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 createLocalDate(year, month, 1).getDay() + 1;
+    return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
 };
 // (bool) Checks if a value is a date - this is just a simple check
 export const isDate = (date) => {

package/dist/CheckBox/CheckBox.js

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