@dynamic-framework/ui-react 1.2.0 → 1.2.2

package/dist/types/components/MCardBody.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare type Props = PropsWithChildren<{
+    className?: string;
+}>;
+export default function MCardBody({ className, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/MCardFooter.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare type Props = PropsWithChildren<{
+    className?: string;
+}>;
+export default function MCardFooter({ className, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/MCardHeader.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare type Props = PropsWithChildren<{
+    className?: string;
+}>;
+export default function MCardHeader({ className, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/MDatePicker.d.ts

@@ -0,0 +1,20 @@
+import { ReactDatePickerProps } from 'react-datepicker';
+import { ButtonVariant, ComponentSize } from '@dynamic-framework/ui';
+declare type CalendarProps = Omit<ReactDatePickerProps, 'onChange' | 'selectsRange'> & {
+    date: string;
+    setDate: (value: Date | [Date | null, Date | null] | null) => void;
+    selectsRange?: boolean;
+    withMonthSelector?: boolean;
+    inputLabel?: string;
+    inputIcon?: string;
+    inputId?: string;
+    timeId?: string;
+    timeLabel?: string;
+    headerDecreaseMonthIcon?: string;
+    headerIncreaseMonthIcon?: string;
+    headerIconSize?: ComponentSize;
+    headerButtonVariant?: ButtonVariant;
+    headerButtonTheme?: string;
+};
+export default function MDatePicker({ setDate, date, selectsRange, withMonthSelector, inputLabel, inputIcon, inputId, timeId, timeLabel, headerDecreaseMonthIcon, headerIncreaseMonthIcon, headerIconSize, headerButtonVariant, headerButtonTheme, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/MDatePickerHeader.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { ButtonVariant, ComponentSize } from '@dynamic-framework/ui';
+import { MButton } from './proxies';
+export declare type MDatePickerHeaderProps = {
+    monthDate: Date;
+    decreaseMonth: () => void;
+    increaseMonth: () => void;
+    changeMonth: (monthNumber: number) => void;
+    changeYear: (yearNumber: number) => void;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+    withMonthSelector: boolean;
+    decreaseMonthIcon: string;
+    increaseMonthIcon: string;
+    iconSize: ComponentSize;
+    buttonVariant: ButtonVariant;
+    buttonTheme: string;
+} & Omit<ComponentProps<typeof MButton>, 'iconStart' | 'onMClick' | 'isDisabled'>;
+export default function MDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, decreaseMonthIcon, increaseMonthIcon, iconSize, buttonVariant, buttonTheme, }: MDatePickerHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/MDatePickerInput.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { MInput } from './proxies';
+export declare type InnerDatePickerProps = {
+    value?: string;
+    onClick?: () => void;
+};
+declare type MDatePickerInputProps = InnerDatePickerProps & Omit<ComponentProps<typeof MInput>, 'type' | 'isReadOnly' | 'onMIconEndClick' | 'value'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MDatePickerInputProps, "ref"> & import("react").RefAttributes<unknown>>;
+export default _default;

package/dist/types/components/MDatePickerTime.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, FormEventHandler } from 'react';
+import { MInput } from './proxies';
+export declare type InnerDatePickerTimeProps = {
+    value?: string | number;
+    onChange?: ((value: string) => void) & FormEventHandler<HTMLMInputElement>;
+};
+declare type MDatePickerTimeProps = InnerDatePickerTimeProps & Omit<ComponentProps<typeof MInput>, 'type' | 'isReadOnly' | 'onMChange' | 'value'>;
+export default function MDatePickerTime({ value, onChange, mId, label, ...props }: MDatePickerTimeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/MInputCurrency.d.ts

@@ -2,8 +2,8 @@ import { ComponentProps } from 'react';
 import { MInputCurrencyBase } from './proxies';
 declare type Props = {
     onChange: (value: number) => void;
-    onBlur: (value: number) => void;
-    onFocus: (value: number) => void;
+    onBlur?: (value: number) => void;
+    onFocus?: (value: number) => void;
 } & Omit<ComponentProps<typeof MInputCurrencyBase>, 'currencyOptions' | 'onChange' | 'onMChange'>;
 export default function MInputCurrency({ onChange, onBlur, onFocus, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/MMonthPicker.d.ts

@@ -0,0 +1,7 @@
+import { ReactDatePickerProps } from 'react-datepicker';
+declare type CalendarProps = Omit<ReactDatePickerProps, 'onChange' | 'selectsRange'> & {
+    date: string;
+    setDate: (value: Date | null) => void;
+};
+export default function MMonthPicker({ setDate, date, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/index.d.ts

@@ -1,6 +1,6 @@
 export * from './proxies';
 export * from './banking';
-export { default as MCalendar } from './MCalendar';
+export { default as MDatePicker } from './MDatePicker';
 export { default as MSkeleton } from './MSkeleton';
 export { default as MTabs, useTabContext } from './MTabs';
 export { default as MTabContent } from './MTabContent';
@@ -20,4 +20,10 @@ export { default as MListItem } from './MListItem';
 export { default as MListItemMovement } from './MListItemMovement';
 export { default as MStepper } from './MStepper';
 export { default as MFormikInputCurrency } from './MFormikInputCurrency';
+export { default as MCardAccount } from './MCardAccount';
+export { default as MCard } from './MCard';
+export { default as MCardHeader } from './MCardHeader';
+export { default as MCardBody } from './MCardBody';
+export { default as MCardFooter } from './MCardFooter';
+export { default as MPaginator } from './MPaginator';
 export type { TabOption } from './MTabs';

package/dist/types/stories/components/MCard.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MCard } from '../../components';
+declare const config: Meta<typeof MCard>;
+export default config;
+declare type Story = StoryObj<typeof MCard>;
+export declare const Default: Story;
+export declare const HeaderAndBody: Story;
+export declare const OnlyBody: Story;
+export declare const TopImage: Story;
+export declare const Horizontal: Story;

package/dist/types/stories/components/MCardAccount.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MCardAccount from '../../components/MCardAccount';
+declare const config: Meta<typeof MCardAccount>;
+export default config;
+declare type Story = StoryObj<typeof MCardAccount>;
+export declare const Default: Story;

package/dist/types/stories/components/MDatePicker.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MDatePicker } from '../../components';
+declare const config: Meta<typeof MDatePicker>;
+export default config;
+declare type Story = StoryObj<typeof MDatePicker>;
+export declare const Default: Story;
+export declare const DefaultWithMonth: Story;
+export declare const Inline: Story;
+export declare const WithTime: Story;
+export declare const WithMonthSelector: Story;
+export declare const MonthPicker: Story;
+export declare const DateRange: Story;
+export declare const DateRangeWithMonthSelector: Story;
+export declare const OnPortal: Story;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamic-framework/ui-react",
   "sideEffects": false,
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "src/style"
   ],
   "dependencies": {
-    "@dynamic-framework/ui": "^1.3.0",
+    "@dynamic-framework/ui": "^1.3.1",
     "@floating-ui/react": "^0.24.1",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
@@ -133,5 +133,5 @@
       "@dynamic-framework/ui"
     ]
   },
-  "gitHead": "125b91980cab3c9ac80e23fcc9f44c9e93f71d01"
+  "gitHead": "a9d912522b9ccac7d92aac718a8df483d0670125"
 }

package/src/style/components/_+import.scss

@@ -1,9 +1,12 @@
 @import "m-collapse";
 @import "m-collapse-icon-text";
-@import "m-calendar";
+@import "m-datepicker";
+@import "m-timepicker";
+@import "m-monthpicker";
 @import "m-tabs";
 @import "m-popover";
 @import "m-box-file";
 @import "m-carousel";
 @import "m-stepper";
 @import "m-paginator";
+@import "m-card-account";

package/src/style/components/_m-card-account.scss

@@ -0,0 +1,15 @@
+.m-card-account {
+  // Card
+  --#{$prefix}card-border-width: 0px;
+  --#{$prefix}card-spacer-y: #{$spacer};
+  --#{$prefix}card-spacer-x: #{$spacer};
+  --#{$prefix}card-color: var(--#{$prefix}body-color);
+  // Card body
+  --#{$prefix}card-body-gap: #{$spacer};
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}card-body-gap);
+  }
+}

package/src/style/components/_m-datepicker.scss

@@ -0,0 +1,224 @@
+@import "react-datepicker/src/stylesheets/datepicker";
+
+// stylelint-disable selector-class-pattern
+
+.react-datepicker {
+  --#{$prefix}m-datepicker-font-family: var(--#{$prefix}font-sans-serif);
+  --#{$prefix}m-datepicker-border: 0px;
+  --#{$prefix}m-datepicker-box-shadow: var(--#{$prefix}box-shadow);
+  --#{$prefix}m-datepicker-font-size: var(--#{$prefix}ref-spacer-3);
+
+  // Header variables
+  --#{$prefix}m-datepicker-header-gap: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}m-datepicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}m-datepicker-header-background-color: var(--#{$prefix}indigo-soft);
+  --#{$prefix}m-datepicker-header-border: 0;
+  --#{$prefix}m-datepicker-header-font-size: var(--#{$prefix}ref-fs-6);
+
+  --#{$prefix}m-datepicker-day-names-margin: 0;
+  --#{$prefix}m-datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-3);
+
+  --#{$prefix}m-datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}m-datepicker-day-name-margin: 0;
+  --#{$prefix}m-datepicker-day-name-size: 20px;
+  --#{$prefix}m-datepicker-day-name-color: var(--#{$prefix}gray-500);
+
+  // Calendar variables
+  --#{$prefix}m-datepicker-month-gap: var(--#{$prefix}ref-fs-subparagraph);
+  --#{$prefix}m-datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}m-datepicker-month-margin: 0;
+
+  --#{$prefix}m-datepicker-week-gap: 1.875rem;
+
+  // Day variables
+  --#{$prefix}m-datepicker-day-margin: 0;
+  --#{$prefix}m-datepicker-day-font-size: var(--#{$prefix}ref-fs-subparagraph);
+  --#{$prefix}m-datepicker-day-size: 20px;
+  --#{$prefix}m-datepicker-day-radius: 100%;
+
+  --#{$prefix}m-datepicker-day-bg-hover: var(--#{$prefix}body);
+  --#{$prefix}m-datepicker-day-color-hover: var(--#{$prefix}info-100);
+
+  --#{$prefix}m-datepicker-day-selected-color: var(--#{$prefix}white);
+  --#{$prefix}m-datepicker-day-selected-bg: var(--#{$prefix}secondary-500);
+
+  --#{$prefix}m-datepicker-day-in-range-color: var(--#{$prefix}dark);
+  --#{$prefix}m-datepicker-day-in-range-bg: var(--#{$prefix}secondary-100);
+
+  --#{$prefix}m-datepicker-day-outside-month-color: var(--#{$prefix}gray-400);
+
+  --#{$prefix}m-datepicker-day-today-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}m-datepicker-day-today-box-shadow: 0 0 0 2px inset var(--#{$prefix}secondary);
+
+  // Time variables
+  --#{$prefix}m-datepicker-time-container-margin: 0;
+  --#{$prefix}m-datepicker-time-container-align: center;
+  --#{$prefix}m-datepicker-time-input-width: 50%;
+  --#{$prefix}m-datepicker-time-input-margin: 0;
+  --#{$prefix}m-datepicker-time-input-align: center;
+
+  --#{$prefix}m-datepicker-time-input-padding: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}m-datepicker-time-input-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-datepicker-time-input-label-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}m-datepicker-time-input-label-color: var(--#{$prefix}gray-700);
+  --#{$prefix}m-datepicker-time-input-label-size: var(--#{$prefix}ref-fs-small);
+
+  font-family: var(--#{$prefix}m-datepicker-font-family);
+  font-size: var(--#{$prefix}m-datepicker-font-size);
+  border: var(--#{$prefix}m-datepicker-border);
+  box-shadow: var(--#{$prefix}m-datepicker-box-shadow);
+
+  .react-datepicker__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}m-datepicker-header-gap);
+    padding: var(--#{$prefix}m-datepicker-header-padding);
+    font-size: var(--#{$prefix}m-datepicker-header-font-size);
+    background-color: var(--#{$prefix}m-datepicker-header-background-color);
+    border: var(--#{$prefix}m-datepicker-header-border);
+
+    .react-datepicker__day-names {
+      display: flex;
+      justify-content: space-between;
+      margin: var(--#{$prefix}m-datepicker-day-names-margin);
+      font-size: var(--#{$prefix}m-datepicker-day-names-font-size);
+    }
+    .react-datepicker__day-name {
+      width: var(--#{$prefix}m-datepicker-day-name-size);
+      height: var(--#{$prefix}m-datepicker-day-name-size);
+      margin: var(--#{$prefix}m-datepicker-day-name-margin);
+      font-weight: var(--#{$prefix}m-datepicker-day-name-weight);
+      line-height: var(--#{$prefix}m-datepicker-day-name-size);
+      color: var(--#{$prefix}m-datepicker-day-name-color);
+    }
+  }
+
+  .react-datepicker__month {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}m-datepicker-month-gap);
+    padding: var(--#{$prefix}m-datepicker-month-padding);
+    margin: var(--#{$prefix}m-datepicker-month-margin);
+
+    .react-datepicker__week {
+      display: flex;
+      gap: var(--#{$prefix}m-datepicker-week-gap);
+    }
+
+    .react-datepicker__day {
+      width: var(--#{$prefix}m-datepicker-day-size);
+      height: var(--#{$prefix}m-datepicker-day-size);
+      margin: var(--#{$prefix}m-datepicker-day-margin);
+      font-size: var(--#{$prefix}m-datepicker-day-font-size);
+      line-height: var(--#{$prefix}m-datepicker-day-size);
+    }
+  }
+
+  // Hover state
+  .react-datepicker__day,
+  .react-datepicker__month-text,
+  .react-datepicker__quarter-text,
+  .react-datepicker__year-text {
+    &:not(
+    .react-datepicker__day--selected,
+    .react-datepicker__month-text--selected,
+    .react-datepicker__quarter-text--selected,
+    .react-datepicker__year-text--selected):hover {
+      color: var(--#{$prefix}m-datepicker-day-bg-hover);
+      background-color: var(--#{$prefix}m-datepicker-day-color-hover);
+      border-radius: var(--#{$prefix}m-datepicker-day-radius);
+    }
+  }
+
+  // Selected single item
+  .react-datepicker__day--selected,
+  .react-datepicker__month--selected,
+  .react-datepicker__quarter--selected,
+  .react-datepicker__year--selected {
+    color: var(--#{$prefix}m-datepicker-day-selected-color);
+    background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
+    border-radius: var(--#{$prefix}m-datepicker-day-radius);
+  }
+
+  .react-datepicker__day--selected {
+    &.react-datepicker__day--in-range.react-datepicker__day--range-start,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
+      color: var(--#{$prefix}m-datepicker-day-selected-color);
+      background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
+    }
+  }
+  .react-datepicker__day {
+    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
+      color: var(--#{$prefix}m-datepicker-day-selected-color);
+      background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
+    }
+  }
+
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--in-range,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__quarter-text--in-selecting-range,
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__quarter-text--keyboard-selected,
+  .react-datepicker__year-text--keyboard-selected {
+    color: var(--#{$prefix}m-datepicker-day-in-range-color);
+    background-color: var(--#{$prefix}m-datepicker-day-in-range-bg);
+    border-radius: var(--#{$prefix}m-datepicker-day-radius);
+  }
+
+  .react-datepicker__day--outside-month {
+    color: var(--#{$prefix}m-datepicker-day-outside-month-color);
+  }
+
+  /* Start time selector */
+  .react-datepicker__input-time-container {
+    width: 100%;
+    margin: var(--#{$prefix}m-datepicker-time-container-margin);
+    text-align: var(--#{$prefix}m-datepicker-time-container-align);
+    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}light);
+
+    .react-datepicker-time__caption {
+      display: none;
+    }
+
+    .react-datepicker-time__input-container {
+      width: 100%;
+
+      .react-datepicker-time__input {
+        width: var(--#{$prefix}m-datepicker-time-input-width);
+        margin: var(--#{$prefix}m-datepicker-time-input-margin);
+        text-align: var(--#{$prefix}m-datepicker-time-input-align);
+        outline: 0;
+      }
+    }
+  }
+
+  /* End time selector */
+
+  .react-datepicker__day--today {
+    font-weight: var(--#{$prefix}m-datepicker-day-today-font-weight);
+    border-radius: var(--#{$prefix}m-datepicker-day-radius);
+    box-shadow: var(--#{$prefix}m-datepicker-day-today-box-shadow);
+  }
+
+  .m-datepicker-time {
+    gap: var(--#{$prefix}m-datepicker-time-input-gap);
+    padding: var(--#{$prefix}m-datepicker-time-input-padding);
+    .m-datepicker-time-label {
+      font-size: var(--#{$prefix}m-datepicker-time-input-label-size);
+      font-weight: var(--#{$prefix}m-datepicker-time-input-label-weight);
+      color: var(--#{$prefix}m-datepicker-time-input-label-color);
+    }
+  }
+  .m-datepicker-header {
+    font-size: var(--#{$prefix}ref-fs-6);
+  }
+}
+
+// stylelint-enable selector-class-pattern

package/src/style/components/_m-monthpicker.scss

@@ -0,0 +1,90 @@
+// stylelint-disable selector-class-pattern
+
+.react-datepicker.m-month-picker {
+  // Month variables
+  --#{$prefix}m-monthpicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-2) 0;
+  --#{$prefix}m-monthpicker-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}m-monthpicker-header-color: var(--#{$prefix}white);
+  --#{$prefix}m-monthpicker-header-bg: var(--#{$prefix}dark);
+
+  --#{$prefix}m-monthpicker-month-gap: 0;
+  --#{$prefix}m-monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}m-monthpicker-month-color: var(--#{$prefix}white);
+  --#{$prefix}m-monthpicker-month-bg: var(--#{$prefix}dark);
+
+  --#{$prefix}m-monthpicker-month-today-color: var(--#{$prefix}white);
+  --#{$prefix}m-monthpicker-month-selected-bg: var(--#{$prefix}gray-500);
+  --#{$prefix}m-monthpicker-month-selected-box-shadow: 0 0 0 1px inset var(--#{$prefix}gray-100);
+
+  --#{$prefix}m-monthpicker-month-hover-bg: var(--#{$prefix}gray-700);
+
+  --#{$prefix}m-monthpicker-month-wrapper-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-monthpicker-month-wrapper-font-size: var(--#{$prefix}-ref-fs-small);
+
+  --#{$prefix}m-monthpicker-single-month-width: 46px;
+  --#{$prefix}m-monthpicker-single-month-padding: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-monthpicker-single-month-margin: 0;
+  --#{$prefix}m-monthpicker-single-month-text-transform: capitalize;
+  --#{$prefix}m-monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-4);
+
+  --#{$prefix}m-monthpicker-single-month-after-display: ".";
+  --#{$prefix}m-monthpicker-single-month-after-content: ".";
+
+  --#{$prefix}m-datepicker-triangle-color: var(--#{$prefix}dark);
+
+  font-family: var(--#{$prefix}m-datepicker-font-family);
+  border: var(--#{$prefix}m-datepicker-border);
+  box-shadow: var(--#{$prefix}m-datepicker-box-shadow);
+
+  .react-datepicker__header {
+    padding: var(--#{$prefix}m-monthpicker-header-padding);
+    font-weight: var(--#{$prefix}m-monthpicker-font-weight);
+    color: var(--#{$prefix}m-monthpicker-header-color);
+    background-color: var(--#{$prefix}m-monthpicker-header-bg);
+  }
+
+  .react-datepicker__month.react-datepicker__monthPicker,
+  .react-datepicker__header.react-datepicker-year-header {
+    gap: var(--#{$prefix}m-monthpicker-month-gap);
+    padding: var(--#{$prefix}m-monthpicker-month-padding);
+    color: var(--#{$prefix}m-monthpicker-month-color);
+    background-color: var(--#{$prefix}m-monthpicker-month-bg);
+
+  }
+  .react-datepicker__month--selected,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--keyboard-selected {
+    color: var(--#{$prefix}m-monthpicker-month-today-color);
+    background-color: var(--#{$prefix}m-monthpicker-month-selected-bg);
+    box-shadow: var(--#{$prefix}m-monthpicker-month-selected-box-shadow);
+  }
+  .react-datepicker__month-text:hover {
+    background-color: var(--#{$prefix}m-monthpicker-month-hover-bg);
+  }
+  .react-datepicker__month-wrapper {
+    display: flex;
+    gap: var(--#{$prefix}m-monthpicker-month-wrapper-gap);
+    font-size: var(--#{$prefix}m-monthpicker-month-wrapper-font-size);
+    .react-datepicker__month-text {
+      width: var(--#{$prefix}m-monthpicker-single-month-width);
+      padding: var(--#{$prefix}m-monthpicker-single-month-padding);
+      margin: var(--#{$prefix}m-monthpicker-single-month-margin);
+      text-transform: var(--#{$prefix}m-monthpicker-single-month-text-transform);
+      border-radius: var(--#{$prefix}m-monthpicker-single-month-radius);
+      &::after {
+        display: var(--#{$prefix}m-monthpicker-single-month-after-display);
+        content: var(--#{$prefix}m-monthpicker-single-month-after-content);
+      }
+    }
+  }
+  .react-datepicker__triangle {
+    &::after,
+    &::before {
+      top: 0;
+      border-bottom-color: var(--#{$prefix}m-datepicker-triangle-color);
+    }
+  }
+}
+
+// stylelint-enable selector-class-pattern

package/src/style/components/_m-timepicker.scss

@@ -0,0 +1,37 @@
+.m-datepicker-time {
+  --#{$prefix}m-datepicker-time-m-input: 100%;
+  --#{$prefix}m-datepicker-webkit-time-color: var(--#{$prefix}black);
+  --#{$prefix}m-datepicker-webkit-time-align: left;
+  --#{$prefix}m-datepicker-webkit-edit-text-padding: 2px;
+
+  --#{$prefix}m-datepicker-webkit-edit-ampm-padding: 0 4px;
+  --#{$prefix}m-datepicker-webkit-edit-ampm-color: var(--#{$prefix}secondary-900);
+  --#{$prefix}m-datepicker-webkit-edit-ampm-bg: var(--#{$prefix}secondary-100);
+  --#{$prefix}m-datepicker-webkit-edit-ampm-radius: 4px;
+
+  --#{$prefix}m-datepicker-calendar-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
+
+  .m-input {
+    width: var(--#{$prefix}m-datepicker-time-m-input);
+  }
+  // stylelint-disable selector-no-qualifying-type
+  input[type="time"] {
+    &::-webkit-datetime-edit {
+      color: var(--#{$prefix}m-datepicker-webkit-time-color);
+      text-align: var(--#{$prefix}m-datepicker-webkit-time-align);
+    }
+    &::-webkit-datetime-edit-text {
+      padding-inline: var(--#{$prefix}m-datepicker-webkit-edit-text-padding);
+    }
+    &::-webkit-datetime-edit-ampm-field {
+      padding: var(--#{$prefix}m-datepicker-webkit-edit-ampm-padding);
+      color: var(--#{$prefix}m-datepicker-webkit-edit-ampm-color);
+      background-color: var(--#{$prefix}m-datepicker-webkit-edit-ampm-bg);
+      border-radius: var(--#{$prefix}m-datepicker-webkit-edit-ampm-radius);
+    }
+    &::-webkit-calendar-picker-indicator {
+      background-image: var(--#{$prefix}m-datepicker-calendar-picker-icon);
+    }
+  }
+
+}

package/dist/types/components/MCalendar.d.ts

@@ -1,25 +0,0 @@
-import { ReactDatePickerProps } from 'react-datepicker';
-import type { FC } from 'react';
-export declare interface CalendarProps {
-    date: string;
-    setDate: (date: string | [string | null, string | null] | null) => void;
-    calendarContainer?: FC;
-    inline?: boolean;
-    withPortal?: boolean;
-    minDate?: string;
-    showTimeInput?: boolean;
-    calendarStartDay?: number;
-    timeInputLabel?: string;
-    className?: string;
-    calendarClassName?: ReactDatePickerProps['calendarClassName'];
-    dateFormat?: string | string[];
-    selectsRange?: boolean;
-    selectsStart?: boolean;
-    selectsEnd?: boolean;
-    startDate?: Date | null;
-    endDate?: Date | null;
-    autoFocus?: boolean;
-    fixedHeight?: boolean;
-    monthsShown?: number;
-}
-export default function MCalendar({ setDate, date, calendarContainer, inline, withPortal, minDate, showTimeInput, calendarStartDay, timeInputLabel, dateFormat, className, calendarClassName, selectsRange, selectsStart, selectsEnd, startDate, endDate, autoFocus, monthsShown, fixedHeight, }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/stories/components/MCalendar.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { MCalendar } from '../../components';
-declare const config: Meta<typeof MCalendar>;
-export default config;
-declare type Story = StoryObj<typeof MCalendar>;
-export declare const Default: Story;

package/src/style/abstracts/variables/_calendar.scss

@@ -1,19 +0,0 @@
-// stylelint-disable scss/dollar-variable-pattern
-$datepicker__background-color: transparent !default;
-$datepicker__border-color: transparent !default;
-$datepicker__highlighted-color: var(--#{$prefix}secondary) !default;
-$datepicker__muted-color: #ccc !default;
-$datepicker__selected-color: var(--#{$prefix}secondary) !default;
-$datepicker__text-color: var(--#{$prefix}body-color) !default;
-$datepicker__header-color: var(--#{$prefix}body-color) !default;
-$datepicker__navigation-disabled-color: var(--#{$prefix}light) !default;
-
-$datepicker__border-radius: .3rem !default;
-$datepicker__day-margin: .166rem !default;
-$datepicker__font-size: .8rem !default;
-$datepicker__font-family: "Helvetica Neue", helvetica, arial, sans-serif !default;
-$datepicker__item-size: 1.7rem !default;
-$datepicker__margin: .4rem !default;
-$datepicker__navigation-button-size: 32px !default;
-$datepicker__triangle-size: 8px !default;
-// stylelint-enable scss/dollar-variable-pattern