Project Init

This commit is contained in:
Muluhabt
2026-05-29 15:23:46 +03:00
commit 2fbc557aac
67387 changed files with 6063341 additions and 0 deletions

View File

@@ -0,0 +1,98 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { CalendarLevel, DateStringValue } from '../../types';
import { DecadeLevelSettings } from '../DecadeLevel';
import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
import { MonthLevelSettings } from '../MonthLevel';
import { MonthLevelGroupStylesNames } from '../MonthLevelGroup';
import { YearLevelSettings } from '../YearLevel';
import { YearLevelGroupStylesNames } from '../YearLevelGroup';
export type CalendarStylesNames = MonthLevelGroupStylesNames | YearLevelGroupStylesNames | DecadeLevelGroupStylesNames;
export interface CalendarAriaLabels {
monthLevelControl?: string;
yearLevelControl?: string;
nextMonth?: string;
previousMonth?: string;
nextYear?: string;
previousYear?: string;
nextDecade?: string;
previousDecade?: string;
}
type OmittedSettings = 'onNext' | 'onPrevious' | 'onLevelClick' | 'withNext' | 'withPrevious' | 'nextDisabled' | 'previousDisabled' | 'hasNextLevel';
export interface CalendarSettings extends Omit<DecadeLevelSettings, OmittedSettings>, Omit<YearLevelSettings, OmittedSettings>, Omit<MonthLevelSettings, OmittedSettings> {
/** Initial displayed level in uncontrolled mode */
defaultLevel?: CalendarLevel;
/** Current displayed level displayed in controlled mode */
level?: CalendarLevel;
/** Called when level changes */
onLevelChange?: (level: CalendarLevel) => void;
/** Called when user selects year */
onYearSelect?: (date: DateStringValue) => void;
/** Called when user selects month */
onMonthSelect?: (date: DateStringValue) => void;
/** Called when mouse enters year control */
onYearMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
/** Called when mouse enters month control */
onMonthMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
}
export interface CalendarBaseProps {
__staticSelector?: string;
/** Prevents focus shift when buttons are clicked */
__preventFocus?: boolean;
/** Determines whether date should be updated when year control is clicked */
__updateDateOnYearSelect?: boolean;
/** Determines whether date should be updated when month control is clicked */
__updateDateOnMonthSelect?: boolean;
/** Assigns function to set date to the given ref */
__setDateRef?: React.RefObject<((date: DateStringValue) => void) | null>;
/** Assigns function to set level to the given ref */
__setLevelRef?: React.RefObject<((level: CalendarLevel) => void) | null>;
/** Initial displayed date in uncontrolled mode */
defaultDate?: DateStringValue | Date;
/** Displayed date in controlled mode */
date?: DateStringValue | Date;
/** Called when date changes */
onDateChange?: (date: DateStringValue) => void;
/** Number of columns displayed next to each other @default `1` */
numberOfColumns?: number;
/** Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly */
columnsToScroll?: number;
/** `aria-label` attributes for controls on different levels */
ariaLabels?: CalendarAriaLabels;
/** Next button `aria-label` */
nextLabel?: string;
/** Previous button `aria-label` */
previousLabel?: string;
/** Called when the next decade button is clicked */
onNextDecade?: (date: DateStringValue) => void;
/** Called when the previous decade button is clicked */
onPreviousDecade?: (date: DateStringValue) => void;
/** Called when the next year button is clicked */
onNextYear?: (date: DateStringValue) => void;
/** Called when the previous year button is clicked */
onPreviousYear?: (date: DateStringValue) => void;
/** Called when the next month button is clicked */
onNextMonth?: (date: DateStringValue) => void;
/** Called when the previous month button is clicked */
onPreviousMonth?: (date: DateStringValue) => void;
}
export interface CalendarProps extends BoxProps, CalendarSettings, CalendarBaseProps, StylesApiProps<CalendarFactory>, ElementProps<'div'> {
/** Max level that user can go up to (decade, year, month) @default `'decade'` */
maxLevel?: CalendarLevel;
/** Min level that user can go down to (decade, year, month) @default `'month'` */
minLevel?: CalendarLevel;
/** Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way */
static?: boolean;
/** Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) */
enableKeyboardNavigation?: boolean;
}
export type CalendarFactory = Factory<{
props: CalendarProps;
ref: HTMLDivElement;
stylesNames: CalendarStylesNames;
}>;
export declare const Calendar: import("@mantine/core").MantineComponent<{
props: CalendarProps;
ref: HTMLDivElement;
stylesNames: CalendarStylesNames;
}>;
export {};

View File

@@ -0,0 +1,2 @@
import type { CalendarLevel } from '../../../types';
export declare function clampLevel(level: CalendarLevel | undefined, minLevel: CalendarLevel | undefined, maxLevel: CalendarLevel | undefined): CalendarLevel;

View File

@@ -0,0 +1,3 @@
export { Calendar } from './Calendar';
export { pickCalendarProps } from './pick-calendar-levels-props/pick-calendar-levels-props';
export type { CalendarSettings, CalendarAriaLabels, CalendarProps, CalendarStylesNames, CalendarBaseProps, CalendarFactory, } from './Calendar';

View File

@@ -0,0 +1,58 @@
export declare function pickCalendarProps<T extends Record<string, any>>(props: T): {
calendarProps: {
maxLevel: any;
minLevel: any;
defaultLevel: any;
level: any;
onLevelChange: any;
nextIcon: any;
previousIcon: any;
date: any;
defaultDate: any;
onDateChange: any;
numberOfColumns: any;
columnsToScroll: any;
ariaLabels: any;
nextLabel: any;
previousLabel: any;
onYearSelect: any;
onMonthSelect: any;
onYearMouseEnter: any;
onMonthMouseEnter: any;
onNextMonth: any;
onPreviousMonth: any;
onNextYear: any;
onPreviousYear: any;
onNextDecade: any;
onPreviousDecade: any;
withCellSpacing: any;
highlightToday: any;
__updateDateOnYearSelect: any;
__updateDateOnMonthSelect: any;
__setDateRef: any;
withWeekNumbers: any;
headerControlsOrder: any;
firstDayOfWeek: any;
weekdayFormat: any;
weekendDays: any;
getDayProps: any;
excludeDate: any;
renderDay: any;
hideOutsideDates: any;
hideWeekdays: any;
getDayAriaLabel: any;
monthLabelFormat: any;
monthsListFormat: any;
getMonthControlProps: any;
yearLabelFormat: any;
yearsListFormat: any;
getYearControlProps: any;
decadeLabelFormat: any;
allowSingleDateInRange: any;
allowDeselect: any;
minDate: any;
maxDate: any;
locale: any;
};
others: Omit<T, "date" | "locale" | "minDate" | "maxDate" | "firstDayOfWeek" | "weekendDays" | "renderDay" | "highlightToday" | "weekdayFormat" | "withWeekNumbers" | "getDayProps" | "excludeDate" | "hideOutsideDates" | "hideWeekdays" | "getDayAriaLabel" | "withCellSpacing" | "getYearControlProps" | "yearsListFormat" | "getMonthControlProps" | "monthsListFormat" | "level" | "nextIcon" | "previousIcon" | "nextLabel" | "previousLabel" | "headerControlsOrder" | "decadeLabelFormat" | "yearLabelFormat" | "monthLabelFormat" | "numberOfColumns" | "allowSingleDateInRange" | "allowDeselect" | "defaultLevel" | "onLevelChange" | "onYearSelect" | "onMonthSelect" | "onYearMouseEnter" | "onMonthMouseEnter" | "maxLevel" | "minLevel" | "__updateDateOnYearSelect" | "__updateDateOnMonthSelect" | "__setDateRef" | "__setLevelRef" | "defaultDate" | "onDateChange" | "columnsToScroll" | "ariaLabels" | "onNextDecade" | "onPreviousDecade" | "onNextYear" | "onPreviousYear" | "onNextMonth" | "onPreviousMonth">;
};

View File

@@ -0,0 +1,57 @@
import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
export type CalendarHeaderStylesNames = 'calendarHeader' | 'calendarHeaderControl' | 'calendarHeaderLevel' | 'calendarHeaderControlIcon';
export type CalendarHeaderCssVariables = {
calendarHeader: '--dch-control-size' | '--dch-fz';
};
export interface CalendarHeaderSettings {
__preventFocus?: boolean;
/** Determines whether propagation for `Escape` key should be stopped */
__stopPropagation?: boolean;
/** Change next icon */
nextIcon?: React.ReactNode;
/** Change previous icon */
previousIcon?: React.ReactNode;
/** Next button `aria-label` */
nextLabel?: string;
/** Previous button `aria-label` */
previousLabel?: string;
/** Called when the next button is clicked */
onNext?: () => void;
/** Called when the previous button is clicked */
onPrevious?: () => void;
/** Called when the level button is clicked */
onLevelClick?: () => void;
/** Disables next control */
nextDisabled?: boolean;
/** Disables previous control */
previousDisabled?: boolean;
/** Determines whether next level button should be enabled @default `true` */
hasNextLevel?: boolean;
/** Determines whether next control should be rendered @default `true` */
withNext?: boolean;
/** Determines whether previous control should be rendered @default `true` */
withPrevious?: boolean;
/** Component size */
size?: MantineSize;
/** Controls order @default `['previous', 'level', 'next']` */
headerControlsOrder?: ('previous' | 'next' | 'level')[];
}
export interface CalendarHeaderProps extends BoxProps, CalendarHeaderSettings, StylesApiProps<CalendarHeaderFactory>, ElementProps<'div'> {
__staticSelector?: string;
/** Label displayed between next and previous buttons */
label: React.ReactNode;
/** Level control `aria-label` */
levelControlAriaLabel?: string;
}
export type CalendarHeaderFactory = Factory<{
props: CalendarHeaderProps;
ref: HTMLDivElement;
stylesNames: CalendarHeaderStylesNames;
vars: CalendarHeaderCssVariables;
}>;
export declare const CalendarHeader: import("@mantine/core").MantineComponent<{
props: CalendarHeaderProps;
ref: HTMLDivElement;
stylesNames: CalendarHeaderStylesNames;
vars: CalendarHeaderCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { CalendarHeader } from './CalendarHeader';
export type { CalendarHeaderProps, CalendarHeaderCssVariables, CalendarHeaderSettings, CalendarHeaderFactory, CalendarHeaderStylesNames, } from './CalendarHeader';

View File

@@ -0,0 +1,49 @@
import { __BaseInputProps, __InputStylesNames, BoxProps, ElementProps, Factory, InputVariant, PopoverProps, StylesApiProps } from '@mantine/core';
import { CalendarLevel, DateStringValue, DateValue } from '../../types';
import { CalendarBaseProps, CalendarStylesNames } from '../Calendar';
import { DecadeLevelSettings } from '../DecadeLevel';
import { MonthLevelSettings } from '../MonthLevel';
import { YearLevelSettings } from '../YearLevel';
export type DateInputStylesNames = __InputStylesNames | CalendarStylesNames;
export interface DateInputProps extends BoxProps, Omit<__BaseInputProps, 'size'>, CalendarBaseProps, DecadeLevelSettings, YearLevelSettings, MonthLevelSettings, StylesApiProps<DateInputFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
/** A function to parse user input and convert it to date string value */
dateParser?: (value: string) => DateStringValue | Date | null;
/** Controlled component value */
value?: DateValue | Date;
/** Uncontrolled component default value */
defaultValue?: DateValue | Date;
/** Called when value changes */
onChange?: (value: DateStringValue | null) => void;
/** Props passed down to the `Popover` component */
popoverProps?: Partial<Omit<PopoverProps, 'children'>>;
/** If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. @default `false` */
clearable?: boolean;
/** Props passed down to the clear button */
clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;
/** `dayjs` format to display input value, `"MMMM D, YYYY"` by default */
valueFormat?: string;
/** If set to `false`, invalid user input is preserved and is not corrected on blur */
fixOnBlur?: boolean;
/** If set, the value can be deselected by deleting everything from the input or by clicking the selected date in the dropdown. By default, `true` if `clearable` prop is set, `false` otherwise. */
allowDeselect?: boolean;
/** Max level that user can go up to @default `'decade'` */
maxLevel?: CalendarLevel;
/** Initial displayed level (uncontrolled) */
defaultLevel?: CalendarLevel;
/** Current displayed level (controlled) */
level?: CalendarLevel;
/** Called when the level changes */
onLevelChange?: (level: CalendarLevel) => void;
}
export type DateInputFactory = Factory<{
props: DateInputProps;
ref: HTMLInputElement;
stylesNames: DateInputStylesNames;
variant: InputVariant;
}>;
export declare const DateInput: import("@mantine/core").MantineComponent<{
props: DateInputProps;
ref: HTMLInputElement;
stylesNames: DateInputStylesNames;
variant: InputVariant;
}>;

View File

@@ -0,0 +1,2 @@
import { DateStringValue } from '../../../types';
export declare function dateStringParser(dateString: string | null): DateStringValue | null;

View File

@@ -0,0 +1,2 @@
export { DateInput } from './DateInput';
export type { DateInputProps, DateInputStylesNames, DateInputFactory } from './DateInput';

View File

@@ -0,0 +1,8 @@
import { DateStringValue } from '../../../types';
interface IsDateValid {
date: DateStringValue | Date;
maxDate: DateStringValue | Date | null | undefined;
minDate: DateStringValue | Date | null | undefined;
}
export declare function isDateValid({ date, maxDate, minDate }: IsDateValid): boolean;
export {};

View File

@@ -0,0 +1,41 @@
import { BoxProps, ElementProps, Factory, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
import { CalendarLevel, DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
import { CalendarBaseProps, CalendarProps, CalendarSettings, CalendarStylesNames } from '../Calendar';
import { DecadeLevelBaseSettings } from '../DecadeLevel';
import { MonthLevelBaseSettings } from '../MonthLevel';
import { YearLevelBaseSettings } from '../YearLevel';
export interface DatePickerPreset<Type extends DatePickerType> {
value: Type extends 'range' ? [DateStringValue | null, DateStringValue | null] : Type extends 'multiple' ? DateStringValue[] : DateStringValue | null;
label: React.ReactNode;
}
export type DatePickerCssVariables = {
datePickerRoot: '--preset-font-size';
};
export type DatePickerStylesNames = CalendarStylesNames | 'presetsList' | 'presetButton' | 'datePickerRoot';
export interface DatePickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, YearLevelBaseSettings, MonthLevelBaseSettings, CalendarBaseProps, Omit<CalendarSettings, 'hasNextLevel'>, Pick<CalendarProps, 'enableKeyboardNavigation'> {
maxLevel?: CalendarLevel;
/** Initial displayed level (uncontrolled) */
defaultLevel?: CalendarLevel;
/** Current displayed level (controlled) */
level?: CalendarLevel;
/** Called when level changes */
onLevelChange?: (level: CalendarLevel) => void;
/** Predefined values to pick from */
presets?: DatePickerPreset<Type>[];
/** If defined, called with preset value, suppresses `onChange` call */
__onPresetSelect?: (preset: Type extends 'range' ? [DateStringValue | null, DateStringValue | null] : DateStringValue | null) => void;
}
export interface DatePickerProps<Type extends DatePickerType = 'default'> extends BoxProps, DatePickerBaseProps<Type>, StylesApiProps<DatePickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
}
export type DatePickerFactory = Factory<{
props: DatePickerProps;
ref: HTMLDivElement;
stylesNames: DatePickerStylesNames;
}>;
type DatePickerComponent = (<Type extends DatePickerType = 'default'>(props: DatePickerProps<Type> & {
ref?: React.ForwardedRef<HTMLDivElement>;
}) => React.JSX.Element) & {
displayName?: string;
} & MantineComponentStaticProperties<DatePickerFactory>;
export declare const DatePicker: DatePickerComponent;
export {};

View File

@@ -0,0 +1,2 @@
export { DatePicker } from './DatePicker';
export type { DatePickerBaseProps, DatePickerProps, DatePickerFactory, DatePickerStylesNames, DatePickerPreset, DatePickerCssVariables, } from './DatePicker';

View File

@@ -0,0 +1,22 @@
import { __InputStylesNames, BoxProps, Factory, InputVariant, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
import { DatePickerType } from '../../types';
import { DatePickerBaseProps, DatePickerStylesNames } from '../DatePicker';
import { DateInputSharedProps } from '../PickerInputBase';
export type DatePickerInputStylesNames = __InputStylesNames | 'placeholder' | DatePickerStylesNames;
export interface DatePickerInputProps<Type extends DatePickerType = 'default'> extends BoxProps, DateInputSharedProps, DatePickerBaseProps<Type>, StylesApiProps<DatePickerInputFactory> {
/** `dayjs` format for input value @default `"MMMM D, YYYY"` */
valueFormat?: string;
}
export type DatePickerInputFactory = Factory<{
props: DatePickerInputProps;
ref: HTMLButtonElement;
stylesNames: DatePickerInputStylesNames;
variant: InputVariant;
}>;
type DatePickerInputComponent = (<Type extends DatePickerType = 'default'>(props: DatePickerInputProps<Type> & {
ref?: React.ForwardedRef<HTMLButtonElement>;
}) => React.JSX.Element) & {
displayName?: string;
} & MantineComponentStaticProperties<DatePickerInputFactory>;
export declare const DatePickerInput: DatePickerInputComponent;
export {};

View File

@@ -0,0 +1,2 @@
export { DatePickerInput } from './DatePickerInput';
export type { DatePickerInputProps, DatePickerInputStylesNames, DatePickerInputFactory, } from './DatePickerInput';

View File

@@ -0,0 +1,41 @@
import { ActionIconProps, BoxProps, Factory, InputVariant, StylesApiProps } from '@mantine/core';
import { CalendarLevel, DateStringValue, DateValue } from '../../types';
import { CalendarBaseProps, CalendarSettings, CalendarStylesNames } from '../Calendar';
import { DatePickerPreset } from '../DatePicker';
import { DateInputSharedProps, PickerInputBaseStylesNames } from '../PickerInputBase';
import { TimePickerProps } from '../TimePicker/TimePicker';
export type DateTimePickerStylesNames = 'timeWrapper' | 'timeInput' | 'submitButton' | 'placeholder' | PickerInputBaseStylesNames | CalendarStylesNames;
export interface DateTimePickerProps extends BoxProps, Omit<DateInputSharedProps, 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'>, CalendarBaseProps, Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>, StylesApiProps<DateTimePickerFactory> {
/** `dayjs` format for input value @default `"DD/MM/YYYY HH:mm" */
valueFormat?: string;
/** Controlled component value */
value?: DateValue;
/** Uncontrolled component default value */
defaultValue?: DateValue;
/** Called when value changes */
onChange?: (value: DateStringValue | null) => void;
/** Default time value in `HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */
defaultTimeValue?: string;
/** Props passed down to `TimePicker` component */
timePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;
/** Props passed down to the submit button */
submitButtonProps?: ActionIconProps & React.ComponentPropsWithoutRef<'button'>;
/** Determines whether the seconds input should be displayed @default `false` */
withSeconds?: boolean;
/** Max level that user can go up to @default `'decade'` */
maxLevel?: CalendarLevel;
/** Presets values */
presets?: DatePickerPreset<'default'>[];
}
export type DateTimePickerFactory = Factory<{
props: DateTimePickerProps;
ref: HTMLButtonElement;
stylesNames: DateTimePickerStylesNames;
variant: InputVariant;
}>;
export declare const DateTimePicker: import("@mantine/core").MantineComponent<{
props: DateTimePickerProps;
ref: HTMLButtonElement;
stylesNames: DateTimePickerStylesNames;
variant: InputVariant;
}>;

View File

@@ -0,0 +1,12 @@
import { DateStringValue } from '../../../types';
interface GetMinTimeInput {
minDate: DateStringValue | Date | undefined;
value: DateStringValue | null;
}
export declare function getMinTime({ minDate, value }: GetMinTimeInput): string | undefined;
interface GetMaxTimeInput {
maxDate: DateStringValue | Date | undefined;
value: DateStringValue | null;
}
export declare function getMaxTime({ maxDate, value }: GetMaxTimeInput): string | undefined;
export {};

View File

@@ -0,0 +1,2 @@
export { DateTimePicker } from './DateTimePicker';
export type { DateTimePickerProps, DateTimePickerStylesNames, DateTimePickerFactory, } from './DateTimePicker';

View File

@@ -0,0 +1,16 @@
import { DayOfWeek } from '../../types';
export interface DatesProviderValue {
locale: string;
firstDayOfWeek: DayOfWeek;
weekendDays: DayOfWeek[];
labelSeparator: string;
consistentWeeks: boolean;
}
export type DatesProviderSettings = Partial<DatesProviderValue>;
export declare const DATES_PROVIDER_DEFAULT_SETTINGS: DatesProviderValue;
export declare const DatesProviderContext: import("react").Context<DatesProviderValue>;
export interface DatesProviderProps {
settings: DatesProviderSettings;
children?: React.ReactNode;
}
export declare function DatesProvider({ settings, children }: DatesProviderProps): import("react/jsx-runtime").JSX.Element;

View File

@@ -0,0 +1,3 @@
export { DATES_PROVIDER_DEFAULT_SETTINGS, DatesProvider } from './DatesProvider';
export { useDatesContext } from './use-dates-context';
export type { DatesProviderProps, DatesProviderSettings } from './DatesProvider';

View File

@@ -0,0 +1,12 @@
import { DayOfWeek } from '../../types';
export declare function useDatesContext(): {
getLocale: (input?: string) => string;
getFirstDayOfWeek: (input?: DayOfWeek) => DayOfWeek;
getWeekendDays: (input?: DayOfWeek[]) => DayOfWeek[];
getLabelSeparator: (input?: string) => string;
locale: string;
firstDayOfWeek: DayOfWeek;
weekendDays: DayOfWeek[];
labelSeparator: string;
consistentWeeks: boolean;
};

View File

@@ -0,0 +1,46 @@
import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
import { DateStringValue } from '../../types';
export type RenderDay = (date: DateStringValue) => React.ReactNode;
export type DayStylesNames = 'day';
export type DayCssVariables = {
day: '--day-size';
};
export interface DayProps extends BoxProps, StylesApiProps<DayFactory>, ElementProps<'button'> {
__staticSelector?: string;
/** Determines which element is used as root, `'button'` by default, `'div'` if static prop is set */
static?: boolean;
/** Date that is displayed in `YYYY-MM-DD` format */
date: DateStringValue;
/** Control width and height of the day @default `'sm'` */
size?: MantineSize;
/** Determines whether the day is considered to be a weekend @default `false` */
weekend?: boolean;
/** Determines whether the day is outside of the current month @default `false` */
outside?: boolean;
/** Determines whether the day is selected @default `false` */
selected?: boolean;
/** Determines whether the day should not be displayed @default `false` */
hidden?: boolean;
/** Determines whether the day is selected in range @default `false` */
inRange?: boolean;
/** Determines whether the day is first in range selection @default `false` */
firstInRange?: boolean;
/** Determines whether the day is last in range selection @default `false` */
lastInRange?: boolean;
/** Controls day value rendering */
renderDay?: RenderDay;
/** Determines whether today should be highlighted with a border @default `false` */
highlightToday?: boolean;
}
export type DayFactory = Factory<{
props: DayProps;
ref: HTMLButtonElement;
stylesNames: DayStylesNames;
vars: DayCssVariables;
}>;
export declare const Day: import("@mantine/core").MantineComponent<{
props: DayProps;
ref: HTMLButtonElement;
stylesNames: DayStylesNames;
vars: DayCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { Day } from './Day';
export type { DayCssVariables, DayFactory, DayProps, DayStylesNames, RenderDay } from './Day';

View File

@@ -0,0 +1,30 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { DateStringValue } from '../../types';
import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHeader';
import { YearsListSettings, YearsListStylesNames } from '../YearsList';
export type DecadeLevelStylesNames = YearsListStylesNames | CalendarHeaderStylesNames;
export interface DecadeLevelBaseSettings extends YearsListSettings {
/** `dayjs` format for decade label or a function that returns decade label based on the date value @default `"YYYY"` */
decadeLabelFormat?: string | ((startOfDecade: DateStringValue, endOfDecade: DateStringValue) => React.ReactNode);
}
export interface DecadeLevelSettings extends DecadeLevelBaseSettings, Omit<CalendarHeaderSettings, 'onLevelClick' | 'hasNextLevel'> {
}
export interface DecadeLevelProps extends BoxProps, DecadeLevelSettings, Omit<StylesApiProps<DecadeLevelFactory>, 'classNames' | 'styles'>, ElementProps<'div'> {
classNames?: Partial<Record<string, string>>;
styles?: Partial<Record<string, React.CSSProperties>>;
__staticSelector?: string;
/** Displayed decade */
decade: DateStringValue;
/** Level control `aria-label` */
levelControlAriaLabel?: string;
}
export type DecadeLevelFactory = Factory<{
props: DecadeLevelProps;
ref: HTMLDivElement;
stylesNames: DecadeLevelStylesNames;
}>;
export declare const DecadeLevel: import("@mantine/core").MantineComponent<{
props: DecadeLevelProps;
ref: HTMLDivElement;
stylesNames: DecadeLevelStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
import { DateStringValue } from '../../../types';
export declare function getDecadeRange(decade: DateStringValue): readonly [string, string];

View File

@@ -0,0 +1,2 @@
export { DecadeLevel } from './DecadeLevel';
export type { DecadeLevelBaseSettings, DecadeLevelFactory, DecadeLevelProps, DecadeLevelSettings, DecadeLevelStylesNames, } from './DecadeLevel';

View File

@@ -0,0 +1,26 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { DateStringValue } from '../../types';
import { DecadeLevelSettings, DecadeLevelStylesNames } from '../DecadeLevel';
import { LevelsGroupStylesNames } from '../LevelsGroup';
export type DecadeLevelGroupStylesNames = LevelsGroupStylesNames | DecadeLevelStylesNames;
export interface DecadeLevelGroupProps extends BoxProps, Omit<StylesApiProps<DecadeLevelGroupFactory>, 'classNames' | 'styles'>, Omit<DecadeLevelSettings, 'withPrevious' | 'withNext' | '__onControlKeyDown' | '__getControlRef'>, ElementProps<'div'> {
classNames?: Partial<Record<string, string>>;
styles?: Partial<Record<string, React.CSSProperties>>;
__staticSelector?: string;
/** Number of columns to display next to each other */
numberOfColumns?: number;
/** Displayed decade */
decade: DateStringValue;
/** Function that returns level control `aria-label` based on year date */
levelControlAriaLabel?: ((decade: DateStringValue) => string) | string;
}
export type DecadeLevelGroupFactory = Factory<{
props: DecadeLevelGroupProps;
ref: HTMLDivElement;
stylesNames: DecadeLevelGroupStylesNames;
}>;
export declare const DecadeLevelGroup: import("@mantine/core").MantineComponent<{
props: DecadeLevelGroupProps;
ref: HTMLDivElement;
stylesNames: DecadeLevelGroupStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
export { DecadeLevelGroup } from './DecadeLevelGroup';
export type { DecadeLevelGroupFactory, DecadeLevelGroupProps, DecadeLevelGroupStylesNames, } from './DecadeLevelGroup';

View File

@@ -0,0 +1,13 @@
import { DatePickerType, DatesRangeValue, DateValue } from '../../types';
export type HiddenDatesInputValue = DatesRangeValue | DateValue | DateValue[];
export interface HiddenDatesInputProps {
value: HiddenDatesInputValue;
type: DatePickerType;
name: string | undefined;
form: string | undefined;
withTime?: boolean;
}
export declare function HiddenDatesInput({ value, type, name, form, withTime, }: HiddenDatesInputProps): import("react/jsx-runtime").JSX.Element;
export declare namespace HiddenDatesInput {
var displayName: string;
}

View File

@@ -0,0 +1,2 @@
export { HiddenDatesInput } from './HiddenDatesInput';
export type { HiddenDatesInputProps, HiddenDatesInputValue } from './HiddenDatesInput';

View File

@@ -0,0 +1,16 @@
import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
export type LevelsGroupStylesNames = 'levelsGroup';
export interface LevelsGroupProps extends BoxProps, StylesApiProps<LevelsGroupFactory>, ElementProps<'div'> {
__staticSelector?: string;
size?: MantineSize;
}
export type LevelsGroupFactory = Factory<{
props: LevelsGroupProps;
ref: HTMLDivElement;
stylesNames: LevelsGroupStylesNames;
}>;
export declare const LevelsGroup: import("@mantine/core").MantineComponent<{
props: LevelsGroupProps;
ref: HTMLDivElement;
stylesNames: LevelsGroupStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
export { LevelsGroup } from './LevelsGroup';
export type { LevelsGroupProps, LevelsGroupFactory, LevelsGroupStylesNames } from './LevelsGroup';

View File

@@ -0,0 +1,51 @@
import { BoxProps, DataAttributes, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
export type MiniCalendarStylesNames = 'root' | 'control' | 'days' | 'day' | 'dayMonth' | 'dayNumber';
export type MiniCalendarCssVariables = {
root: '--mini-calendar-font-size';
};
export interface MiniCalendarProps extends BoxProps, StylesApiProps<MiniCalendarFactory>, ElementProps<'div', 'onChange'> {
/** Controlled component date value, start date of the interval */
date?: Date | string;
/** Uncontrolled component default value, start date of the interval */
defaultDate?: Date | string;
/** Called with date in `YYYY-MM-DD` format when date internal changes */
onDateChange?: (date: string) => void;
/** Selected date, controlled value */
value?: Date | string | null;
/** Called with date in `YYYY-MM-DD` format when date changes */
onChange?: (date: string) => void;
/** Maximum date that can be selected, date object or date string in `YYYY-MM-DD` format */
maxDate?: Date | string;
/** Minimum date that can be selected, date object or date string in `YYYY-MM-DD` format */
minDate?: Date | string;
/** Number of days to display in the calendar @default 7 */
numberOfDays?: number;
/** Dayjs format string for month label @default `MMM` */
monthLabelFormat?: string;
/** Called when the next button is clicked */
onNext?: () => void;
/** Called when the previous button is clicked */
onPrevious?: () => void;
/** Props passed down to the day component */
getDayProps?: (date: string) => Record<string, any>;
/** Component size @default 'sm' */
size?: MantineSize;
/** Props passed to previous control button */
previousControlProps?: React.ComponentPropsWithoutRef<'button'> & DataAttributes;
/** Props passed to next control button */
nextControlProps?: React.ComponentPropsWithoutRef<'button'> & DataAttributes;
/** dayjs locale used for formatting */
locale?: string;
}
export type MiniCalendarFactory = Factory<{
props: MiniCalendarProps;
ref: HTMLDivElement;
stylesNames: MiniCalendarStylesNames;
vars: MiniCalendarCssVariables;
}>;
export declare const MiniCalendar: import("@mantine/core").MantineComponent<{
props: MiniCalendarProps;
ref: HTMLDivElement;
stylesNames: MiniCalendarStylesNames;
vars: MiniCalendarCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { MiniCalendar } from './MiniCalendar';
export type { MiniCalendarCssVariables, MiniCalendarFactory, MiniCalendarStylesNames, MiniCalendarProps, } from './MiniCalendar';

View File

@@ -0,0 +1,67 @@
import { BoxProps, DataAttributes, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
import { ControlKeydownPayload, DateLabelFormat, DateStringValue, DayOfWeek } from '../../types';
import { DayProps, DayStylesNames, RenderDay } from '../Day';
export type MonthStylesNames = 'month' | 'weekday' | 'weekdaysRow' | 'monthRow' | 'month' | 'monthThead' | 'monthTbody' | 'monthCell' | 'weekNumber' | DayStylesNames;
export interface MonthSettings {
/** Determines whether propagation for `Escape` key should be stopped */
__stopPropagation?: boolean;
/** Prevents focus shift when buttons are clicked */
__preventFocus?: boolean;
/** Called when day is clicked with click event and date */
__onDayClick?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
/** Called when mouse enters day */
__onDayMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
/** Called when any keydown event is registered on day, used for arrows navigation */
__onDayKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, payload: ControlKeydownPayload) => void;
/** Assigns ref of every day based on its position in the table, used for arrows navigation */
__getDayRef?: (rowIndex: number, cellIndex: number, node: HTMLButtonElement) => void;
/** `dayjs` locale, the default value is defined by `DatesProvider` */
locale?: string;
/** Number 0-6, where 0 Sunday and 6 Saturday. @default `1` Monday */
firstDayOfWeek?: DayOfWeek;
/** `dayjs` format for weekdays names @default `'dd'` */
weekdayFormat?: DateLabelFormat;
/** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */
weekendDays?: DayOfWeek[];
/** Passes props down to `Day` components */
getDayProps?: (date: DateStringValue) => Omit<Partial<DayProps>, 'classNames' | 'styles' | 'vars'> & DataAttributes;
/** Callback function to determine whether the day should be disabled */
excludeDate?: (date: DateStringValue) => boolean;
/** Minimum possible date, in `YYYY-MM-DD` format */
minDate?: DateStringValue | Date;
/** Maximum possible date, in `YYYY-MM-DD` format */
maxDate?: DateStringValue | Date;
/** Controls day value rendering */
renderDay?: RenderDay;
/** Determines whether outside dates should be hidden @default `false` */
hideOutsideDates?: boolean;
/** Determines whether weekdays row should be hidden @default `false` */
hideWeekdays?: boolean;
/** Assigns `aria-label` to `Day` components based on date */
getDayAriaLabel?: (date: DateStringValue) => string;
/** Controls size */
size?: MantineSize;
/** Determines whether controls should be separated by space @default `true` */
withCellSpacing?: boolean;
/** Determines whether today should be highlighted with a border @default `false` */
highlightToday?: boolean;
/** Determines whether week numbers should be displayed @default `false` */
withWeekNumbers?: boolean;
}
export interface MonthProps extends BoxProps, MonthSettings, StylesApiProps<MonthFactory>, ElementProps<'div'> {
__staticSelector?: string;
/** Month to display, value `YYYY-MM-DD` */
month: DateStringValue;
/** Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way */
static?: boolean;
}
export type MonthFactory = Factory<{
props: MonthProps;
ref: HTMLTableElement;
stylesNames: MonthStylesNames;
}>;
export declare const Month: import("@mantine/core").MantineComponent<{
props: MonthProps;
ref: HTMLTableElement;
stylesNames: MonthStylesNames;
}>;

View File

@@ -0,0 +1,13 @@
import { DateStringValue } from '../../../types';
import { DayProps } from '../../Day/Day';
interface GetDateInTabOrderInput {
dates: DateStringValue[][];
minDate: DateStringValue | undefined;
maxDate: DateStringValue | undefined;
getDayProps: ((date: DateStringValue) => Partial<DayProps>) | undefined;
excludeDate: ((date: DateStringValue) => boolean) | undefined;
hideOutsideDates: boolean | undefined;
month: DateStringValue;
}
export declare function getDateInTabOrder({ dates, minDate, maxDate, getDayProps, excludeDate, hideOutsideDates, month, }: GetDateInTabOrderInput): string;
export {};

View File

@@ -0,0 +1,3 @@
import dayjs from 'dayjs';
import type { DateStringValue, DayOfWeek } from '../../../types';
export declare function getEndOfWeek(date: DateStringValue, firstDayOfWeek?: DayOfWeek): string | dayjs.Dayjs;

View File

@@ -0,0 +1,8 @@
import { DateStringValue, DayOfWeek } from '../../../types';
interface GetMonthDaysInput {
month: DateStringValue;
firstDayOfWeek: DayOfWeek | undefined;
consistentWeeks: boolean | undefined;
}
export declare function getMonthDays({ month, firstDayOfWeek, consistentWeeks, }: GetMonthDaysInput): DateStringValue[][];
export {};

View File

@@ -0,0 +1,2 @@
import type { DateStringValue, DayOfWeek } from '../../../types';
export declare function getStartOfWeek(date: DateStringValue, firstDayOfWeek?: DayOfWeek): string;

View File

@@ -0,0 +1,2 @@
import { DateStringValue } from '../../../types';
export declare function getWeekNumber(week: DateStringValue[]): number;

View File

@@ -0,0 +1,6 @@
export { getEndOfWeek } from './get-end-of-week/get-end-of-week';
export { getStartOfWeek } from './get-start-of-week/get-start-of-week';
export { getMonthDays } from './get-month-days/get-month-days';
export { isSameMonth } from './is-same-month/is-same-month';
export { Month } from './Month';
export type { MonthProps, MonthSettings, MonthStylesNames, MonthFactory } from './Month';

View File

@@ -0,0 +1,2 @@
import { DateStringValue } from '../../../types';
export declare function isAfterMinDate(date: DateStringValue, minDate: DateStringValue | undefined): boolean;

View File

@@ -0,0 +1,2 @@
import { DateStringValue } from '../../../types';
export declare function isBeforeMaxDate(date: DateStringValue, maxDate: DateStringValue | undefined): boolean;

View File

@@ -0,0 +1 @@
export declare function isSameMonth(date: Date | string, comparison: Date | string): boolean;

View File

@@ -0,0 +1,32 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { DateLabelFormat, DateStringValue } from '../../types';
import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHeader';
import { MonthSettings, MonthStylesNames } from '../Month';
export type MonthLevelStylesNames = MonthStylesNames | CalendarHeaderStylesNames;
export interface MonthLevelBaseSettings extends MonthSettings {
/** dayjs label format to display month label or a function that returns month label based on month value @default `"MMMM YYYY"` */
monthLabelFormat?: DateLabelFormat;
}
export interface MonthLevelSettings extends MonthLevelBaseSettings, CalendarHeaderSettings {
}
export interface MonthLevelProps extends BoxProps, MonthLevelSettings, Omit<StylesApiProps<MonthLevelFactory>, 'classNames' | 'styles'>, ElementProps<'div'> {
classNames?: Partial<Record<string, string>>;
styles?: Partial<Record<string, React.CSSProperties>>;
__staticSelector?: string;
/** Month that is currently displayed */
month: DateStringValue;
/** Aria-label for change level control */
levelControlAriaLabel?: string;
/** Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way */
static?: boolean;
}
export type MonthLevelFactory = Factory<{
props: MonthLevelProps;
ref: HTMLDivElement;
stylesNames: MonthLevelStylesNames;
}>;
export declare const MonthLevel: import("@mantine/core").MantineComponent<{
props: MonthLevelProps;
ref: HTMLDivElement;
stylesNames: MonthLevelStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
export { MonthLevel } from './MonthLevel';
export type { MonthLevelBaseSettings, MonthLevelFactory, MonthLevelProps, MonthLevelSettings, MonthLevelStylesNames, } from './MonthLevel';

View File

@@ -0,0 +1,28 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { DateStringValue } from '../../types';
import { LevelsGroupStylesNames } from '../LevelsGroup';
import { MonthLevelSettings, MonthLevelStylesNames } from '../MonthLevel';
export type MonthLevelGroupStylesNames = MonthLevelStylesNames | LevelsGroupStylesNames;
export interface MonthLevelGroupProps extends BoxProps, Omit<MonthLevelSettings, 'withPrevious' | 'withNext' | '__onDayKeyDown' | '__getDayRef'>, Omit<StylesApiProps<MonthLevelGroupFactory>, 'classNames' | 'styles'>, ElementProps<'div'> {
classNames?: Partial<Record<string, string>>;
styles?: Partial<Record<string, React.CSSProperties>>;
__staticSelector?: string;
/** Number of columns to display next to each other */
numberOfColumns?: number;
/** Month to display */
month: DateStringValue;
/** Function that returns level control `aria-label` based on month date */
levelControlAriaLabel?: ((month: DateStringValue) => string) | string;
/** Passed as `isStatic` prop to `Month` component */
static?: boolean;
}
export type MonthLevelGroupFactory = Factory<{
props: MonthLevelGroupProps;
ref: HTMLDivElement;
stylesNames: MonthLevelGroupStylesNames;
}>;
export declare const MonthLevelGroup: import("@mantine/core").MantineComponent<{
props: MonthLevelGroupProps;
ref: HTMLDivElement;
stylesNames: MonthLevelGroupStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
export { MonthLevelGroup } from './MonthLevelGroup';
export type { MonthLevelGroupFactory, MonthLevelGroupProps, MonthLevelGroupStylesNames, } from './MonthLevelGroup';

View File

@@ -0,0 +1,35 @@
import { BoxProps, ElementProps, Factory, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
import { CalendarLevel, DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
import { CalendarBaseProps } from '../Calendar';
import { DecadeLevelBaseSettings } from '../DecadeLevel';
import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
import { YearLevelBaseSettings } from '../YearLevel';
import { YearLevelGroupStylesNames } from '../YearLevelGroup';
export type MonthPickerStylesNames = DecadeLevelGroupStylesNames | YearLevelGroupStylesNames;
type MonthPickerLevel = Exclude<CalendarLevel, 'month'>;
export interface MonthPickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, YearLevelBaseSettings, Omit<CalendarBaseProps, 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {
/** Max level that user can go up to @default `'decade'` */
maxLevel?: CalendarLevel;
/** Initial displayed level (uncontrolled) */
defaultLevel?: CalendarLevel;
/** Current displayed level (controlled) */
level?: CalendarLevel;
/** Called when level changes */
onLevelChange?: (level: MonthPickerLevel) => void;
}
export interface MonthPickerProps<Type extends DatePickerType = 'default'> extends BoxProps, MonthPickerBaseProps<Type>, StylesApiProps<MonthPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
/** Called when month is selected */
onMonthSelect?: (date: DateStringValue) => void;
}
export type MonthPickerFactory = Factory<{
props: MonthPickerProps;
ref: HTMLDivElement;
stylesNames: MonthPickerStylesNames;
}>;
type MonthPickerComponent = (<Type extends DatePickerType = 'default'>(props: MonthPickerProps<Type> & {
ref?: React.ForwardedRef<HTMLDivElement>;
}) => React.JSX.Element) & {
displayName?: string;
} & MantineComponentStaticProperties<MonthPickerFactory>;
export declare const MonthPicker: MonthPickerComponent;
export {};

View File

@@ -0,0 +1,2 @@
export { MonthPicker } from './MonthPicker';
export type { MonthPickerBaseProps, MonthPickerProps, MonthPickerFactory, MonthPickerStylesNames, } from './MonthPicker';

View File

@@ -0,0 +1,22 @@
import { __InputStylesNames, BoxProps, Factory, InputVariant, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
import { DatePickerType } from '../../types';
import { MonthPickerBaseProps, MonthPickerStylesNames } from '../MonthPicker';
import { DateInputSharedProps } from '../PickerInputBase';
export type MonthPickerInputStylesNames = __InputStylesNames | 'placeholder' | MonthPickerStylesNames;
export interface MonthPickerInputProps<Type extends DatePickerType = 'default'> extends BoxProps, DateInputSharedProps, MonthPickerBaseProps<Type>, StylesApiProps<MonthPickerInputFactory> {
/** `dayjs` format for input value @default `"MMMM YYYY"` */
valueFormat?: string;
}
export type MonthPickerInputFactory = Factory<{
props: MonthPickerInputProps;
ref: HTMLButtonElement;
stylesNames: MonthPickerInputStylesNames;
variant: InputVariant;
}>;
type MonthPickerInputComponent = (<Type extends DatePickerType = 'default'>(props: MonthPickerInputProps<Type> & {
ref?: React.ForwardedRef<HTMLButtonElement>;
}) => React.JSX.Element) & {
displayName?: string;
} & MantineComponentStaticProperties<MonthPickerInputFactory>;
export declare const MonthPickerInput: MonthPickerInputComponent;
export {};

View File

@@ -0,0 +1,2 @@
export { MonthPickerInput } from './MonthPickerInput';
export type { MonthPickerInputProps, MonthPickerInputStylesNames, MonthPickerInputFactory, } from './MonthPickerInput';

View File

@@ -0,0 +1,33 @@
import { BoxProps, DataAttributes, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
import { ControlsGroupSettings, DateStringValue } from '../../types';
import { PickerControlProps } from '../PickerControl';
export type MonthsListStylesNames = 'monthsList' | 'monthsListCell' | 'monthsListRow' | 'monthsListControl';
export interface MonthsListSettings extends ControlsGroupSettings {
/** `dayjs` format for months list */
monthsListFormat?: string;
/** Passes props down month picker control */
getMonthControlProps?: (date: DateStringValue) => Partial<PickerControlProps> & DataAttributes;
/** Determines whether controls should be separated @default `true` */
withCellSpacing?: boolean;
}
export interface MonthsListProps extends BoxProps, MonthsListSettings, StylesApiProps<MonthsListFactory>, ElementProps<'table'> {
__staticSelector?: string;
/** Prevents focus shift when buttons are clicked */
__preventFocus?: boolean;
/** Determines whether propagation for Escape key should be stopped */
__stopPropagation?: boolean;
/** Year for which months list should be displayed */
year: DateStringValue;
/** Component size */
size?: MantineSize;
}
export type MonthsListFactory = Factory<{
props: MonthsListProps;
ref: HTMLTableElement;
stylesNames: MonthsListStylesNames;
}>;
export declare const MonthsList: import("@mantine/core").MantineComponent<{
props: MonthsListProps;
ref: HTMLTableElement;
stylesNames: MonthsListStylesNames;
}>;

View File

@@ -0,0 +1,10 @@
import { DateStringValue } from '../../../types';
import { PickerControlProps } from '../../PickerControl';
interface GetMonthInTabOrderInput {
months: DateStringValue[][];
minDate: DateStringValue | undefined;
maxDate: DateStringValue | undefined;
getMonthControlProps: ((month: DateStringValue) => Partial<PickerControlProps>) | undefined;
}
export declare function getMonthInTabOrder({ months, minDate, maxDate, getMonthControlProps, }: GetMonthInTabOrderInput): string;
export {};

View File

@@ -0,0 +1,2 @@
import { DateStringValue } from '../../../types';
export declare function getMonthsData(year: DateStringValue): string[][];

View File

@@ -0,0 +1,2 @@
export { MonthsList } from './MonthsList';
export type { MonthsListProps, MonthsListFactory, MonthsListSettings, MonthsListStylesNames, } from './MonthsList';

View File

@@ -0,0 +1,8 @@
import { DateStringValue } from '../../../types';
interface IsMonthDisabledInput {
month: DateStringValue;
minDate: DateStringValue | undefined;
maxDate: DateStringValue | undefined;
}
export declare function isMonthDisabled({ month, minDate, maxDate }: IsMonthDisabledInput): boolean;
export {};

View File

@@ -0,0 +1,34 @@
import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
export type PickerControlStylesNames = 'pickerControl';
export type PickerControlCssVariables = {
pickerControl: '--dpc-size' | '--dpc-fz';
};
export interface PickerControlProps extends BoxProps, StylesApiProps<PickerControlFactory>, ElementProps<'button'> {
__staticSelector?: string;
/** Control children */
children?: React.ReactNode;
/** Disables control */
disabled?: boolean;
/** Assigns selected styles */
selected?: boolean;
/** Assigns in range styles */
inRange?: boolean;
/** Assigns first in range styles */
firstInRange?: boolean;
/** Assigns last in range styles */
lastInRange?: boolean;
/** Component size */
size?: MantineSize;
}
export type PickerControlFactory = Factory<{
props: PickerControlProps;
ref: HTMLButtonElement;
stylesNames: PickerControlStylesNames;
vars: PickerControlCssVariables;
}>;
export declare const PickerControl: import("@mantine/core").MantineComponent<{
props: PickerControlProps;
ref: HTMLButtonElement;
stylesNames: PickerControlStylesNames;
vars: PickerControlCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { PickerControl } from './PickerControl';
export type { PickerControlProps, PickerControlCssVariables, PickerControlFactory, PickerControlStylesNames, } from './PickerControl';

View File

@@ -0,0 +1,59 @@
import { __BaseInputProps, __InputStylesNames, BoxProps, ElementProps, Factory, InputVariant, MantineSize, ModalProps, PopoverProps, StylesApiProps } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { DatePickerType } from '../../types';
import { DateFormatter } from '../../utils';
import { HiddenDatesInputValue } from '../HiddenDatesInput';
export type PickerInputBaseStylesNames = __InputStylesNames;
export interface DateInputSharedProps extends Omit<__BaseInputProps, 'size'>, ElementProps<'button', 'defaultValue' | 'value' | 'onChange' | 'type'> {
/** Determines whether the dropdown is closed when date is selected, not applicable with `type="multiple"` @default `true` */
closeOnChange?: boolean;
/** Type of the dropdown @default `'popover'` */
dropdownType?: 'popover' | 'modal';
/** Props passed down to `Popover` component */
popoverProps?: Partial<Omit<PopoverProps, 'children'>>;
/** Props passed down to `Modal` component */
modalProps?: Partial<Omit<ModalProps, 'children'>>;
/** If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. @default `false` */
clearable?: boolean;
/** Props passed down to the clear button */
clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;
/** If set, the component value cannot be changed by the user */
readOnly?: boolean;
/** Determines whether dates values should be sorted before `onChange` call, only applicable with type="multiple" @default `true` */
sortDates?: boolean;
/** Separator between range value */
labelSeparator?: string;
/** Input placeholder */
placeholder?: string;
/** A function to format selected dates values into a string. By default, date is formatted based on the input type. */
valueFormatter?: DateFormatter;
/** Called when the dropdown is closed */
onDropdownClose?: () => void;
}
export interface PickerInputBaseProps extends BoxProps, DateInputSharedProps, Omit<StylesApiProps<PickerInputBaseFactory>, 'classNames' | 'styles'> {
classNames?: Partial<Record<string, string>>;
styles?: Partial<Record<string, React.CSSProperties>>;
__staticSelector?: string;
children: React.ReactNode;
formattedValue: string | null | undefined;
dropdownHandlers: ReturnType<typeof useDisclosure>[1];
dropdownOpened: boolean;
onClear: () => void;
shouldClear: boolean;
value: HiddenDatesInputValue;
type: DatePickerType;
size?: MantineSize;
withTime?: boolean;
}
export type PickerInputBaseFactory = Factory<{
props: PickerInputBaseProps;
ref: HTMLButtonElement;
stylesNames: PickerInputBaseStylesNames;
variant: InputVariant;
}>;
export declare const PickerInputBase: import("@mantine/core").MantineComponent<{
props: PickerInputBaseProps;
ref: HTMLButtonElement;
stylesNames: PickerInputBaseStylesNames;
variant: InputVariant;
}>;

View File

@@ -0,0 +1,2 @@
export { PickerInputBase } from './PickerInputBase';
export type { PickerInputBaseFactory, PickerInputBaseProps, PickerInputBaseStylesNames, DateInputSharedProps, } from './PickerInputBase';

View File

@@ -0,0 +1,14 @@
interface SpinInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange' | 'value'> {
value: number | null;
min: number;
max: number;
onChange: (value: number | null) => void;
focusable: boolean;
step: number;
onNextInput?: () => void;
onPreviousInput?: () => void;
allowTemporaryZero?: boolean;
placeholder?: string;
}
export declare const SpinInput: import("react").ForwardRefExoticComponent<SpinInputProps & import("react").RefAttributes<HTMLInputElement>>;
export {};

View File

@@ -0,0 +1 @@
export { SpinInput } from './SpinInput';

View File

@@ -0,0 +1,10 @@
import { GetStylesApi } from '@mantine/core';
import type { TimeGridFactory } from './TimeGrid';
interface TimeGridContextValue {
getStyles: GetStylesApi<TimeGridFactory>;
}
export declare const TimeGridProvider: ({ children, value }: {
value: TimeGridContextValue;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useTimeGridContext: () => TimeGridContextValue;
export {};

View File

@@ -0,0 +1,52 @@
import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, MantineSize, SimpleGridProps, StylesApiProps } from '@mantine/core';
import type { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker';
export type TimeGridStylesNames = 'root' | 'control' | 'simpleGrid';
export type TimeGridCssVariables = {
root: '--time-grid-fz' | '--time-grid-radius';
};
export interface TimeGridProps extends BoxProps, StylesApiProps<TimeGridFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
/** Time data in 24h format to be displayed in the grid, for example `['10:00', '18:30', '22:00']`. Time values must be unique. */
data: string[];
/** Controlled component value */
value?: string | null;
/** Uncontrolled component default value */
defaultValue?: string | null;
/** Called when value changes */
onChange?: (value: string | null) => void;
/** Determines whether the value can be deselected when the current active option is clicked or activated with keyboard @default `false` */
allowDeselect?: boolean;
/** Time format displayed in the grid @default `'24h'` */
format?: TimePickerFormat;
/** Determines whether the seconds part should be displayed @default `false` */
withSeconds?: boolean;
/** Labels used for am/pm values @default `{ am: 'AM', pm: 'PM' }` */
amPmLabels?: TimePickerAmPmLabels;
/** Props passed down to the underlying `SimpleGrid` component @default `{ cols: 3, spacing: 'xs' }` */
simpleGridProps?: SimpleGridProps;
/** A function to pass props down to control based on the time value */
getControlProps?: (time: string) => React.ComponentPropsWithoutRef<'button'> & DataAttributes;
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Control `font-size` of controls, key of `theme.fontSizes` or any valid CSS value @default `'sm'` */
size?: MantineSize;
/** All controls before this time are disabled */
minTime?: string;
/** All controls after this time are disabled */
maxTime?: string;
/** Array of time values to disable */
disableTime?: string[] | ((time: string) => boolean);
/** If set, all controls are disabled */
disabled?: boolean;
}
export type TimeGridFactory = Factory<{
props: TimeGridProps;
ref: HTMLDivElement;
stylesNames: TimeGridStylesNames;
vars: TimeGridCssVariables;
}>;
export declare const TimeGrid: import("@mantine/core").MantineComponent<{
props: TimeGridProps;
ref: HTMLDivElement;
stylesNames: TimeGridStylesNames;
vars: TimeGridCssVariables;
}>;

View File

@@ -0,0 +1,10 @@
import type { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker';
interface TimeGridControlProps extends React.ComponentPropsWithoutRef<'button'> {
time: string;
active: boolean;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
withSeconds: boolean | undefined;
}
export declare function TimeGridControl({ time, active, className, amPmLabels, format, withSeconds, ...others }: TimeGridControlProps): import("react/jsx-runtime").JSX.Element;
export {};

View File

@@ -0,0 +1,2 @@
export declare function isTimeBefore(value: string, compareTo: string): boolean;
export declare function isTimeAfter(value: string, compareTo: string): boolean;

View File

@@ -0,0 +1,3 @@
export { TimeGrid } from './TimeGrid';
export { isTimeBefore, isTimeAfter } from './compare-time';
export type { TimeGridCssVariables, TimeGridFactory, TimeGridProps, TimeGridStylesNames, } from './TimeGrid';

View File

@@ -0,0 +1,19 @@
import { __BaseInputProps, __InputStylesNames, BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
export interface TimeInputProps extends BoxProps, __BaseInputProps, StylesApiProps<TimeInputFactory>, ElementProps<'input', 'size'> {
/** Determines whether seconds input should be displayed @default `false` */
withSeconds?: boolean;
/** Minimum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm */
minTime?: string;
/** Maximum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm */
maxTime?: string;
}
export type TimeInputFactory = Factory<{
props: TimeInputProps;
ref: HTMLInputElement;
stylesNames: __InputStylesNames;
}>;
export declare const TimeInput: import("@mantine/core").MantineComponent<{
props: TimeInputProps;
ref: HTMLInputElement;
stylesNames: __InputStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
export { TimeInput } from './TimeInput';
export type { TimeInputFactory, TimeInputProps } from './TimeInput';

View File

@@ -0,0 +1,14 @@
import React from 'react';
interface AmPmInputProps extends Omit<React.ComponentPropsWithoutRef<'select'>, 'value' | 'onChange'> {
labels: {
am: string;
pm: string;
};
value: string | null;
inputType: 'select' | 'input';
onChange: (value: string | null) => void;
readOnly?: boolean;
onPreviousInput?: () => void;
}
export declare const AmPmInput: React.ForwardRefExoticComponent<AmPmInputProps & React.RefAttributes<HTMLSelectElement>>;
export {};

View File

@@ -0,0 +1,13 @@
interface AmPmControlsListProps {
value: string | null;
onSelect: (value: string) => void;
labels: {
am: string;
pm: string;
};
}
export declare function AmPmControlsList({ labels, value, onSelect }: AmPmControlsListProps): import("react/jsx-runtime").JSX.Element;
export declare namespace AmPmControlsList {
var displayName: string;
}
export {};

View File

@@ -0,0 +1,10 @@
interface TimeControlProps {
value: number | string;
active: boolean;
onSelect: (value: any) => void;
}
export declare function TimeControl({ value, active, onSelect }: TimeControlProps): import("react/jsx-runtime").JSX.Element;
export declare namespace TimeControl {
var displayName: string;
}
export {};

View File

@@ -0,0 +1,13 @@
interface TimeControlsListProps {
min: number;
max: number;
step: number;
value: number | null;
onSelect: (value: number) => void;
reversed: boolean | undefined;
}
export declare function TimeControlsList({ min, max, step, value, onSelect, reversed, }: TimeControlsListProps): import("react/jsx-runtime").JSX.Element;
export declare namespace TimeControlsList {
var displayName: string;
}
export {};

View File

@@ -0,0 +1,12 @@
import { GetStylesApi, ScrollAreaProps } from '@mantine/core';
import type { TimePickerFactory } from './TimePicker';
interface TimePickerContext {
getStyles: GetStylesApi<TimePickerFactory>;
maxDropdownContentHeight: number;
scrollAreaProps: ScrollAreaProps | undefined;
}
export declare const TimePickerProvider: ({ children, value }: {
value: TimePickerContext;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useTimePickerContext: () => TimePickerContext;
export {};

View File

@@ -0,0 +1,106 @@
import { __BaseInputProps, __InputStylesNames, BoxProps, CloseButtonProps, DataAttributes, ElementProps, Factory, InputVariant, PopoverProps, ScrollAreaProps, StylesApiProps } from '@mantine/core';
import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit, TimePickerPresets } from './TimePicker.types';
export type TimePickerStylesNames = 'fieldsRoot' | 'fieldsGroup' | 'field' | 'controlsList' | 'controlsListGroup' | 'control' | 'dropdown' | 'presetsRoot' | 'presetsGroup' | 'presetsGroupLabel' | 'presetControl' | 'scrollarea' | __InputStylesNames;
export type TimePickerCssVariables = {
dropdown: '--control-font-size';
};
export interface TimePickerProps extends BoxProps, __BaseInputProps, StylesApiProps<TimePickerFactory>, ElementProps<'div', 'onChange' | 'defaultValue'> {
/** Controlled component value */
value?: string;
/** Uncontrolled component default value */
defaultValue?: string;
/** Called when the value changes */
onChange?: (value: string) => void;
/** Determines whether the clear button should be displayed @default `false` */
clearable?: boolean;
/** `name` prop passed down to the hidden input */
name?: string;
/** `form` prop passed down to the hidden input */
form?: string;
/** Min possible time value in `hh:mm:ss` format */
min?: string;
/** Max possible time value in `hh:mm:ss` format */
max?: string;
/** Time format, `'24h'` by default */
format?: TimePickerFormat;
/** Number by which hours are incremented/decremented @default `1` */
hoursStep?: number;
/** Number by which minutes are incremented/decremented @default `1` */
minutesStep?: number;
/** Number by which seconds are incremented/decremented @default `1` */
secondsStep?: number;
/** Determines whether the seconds input should be displayed @default `false` */
withSeconds?: boolean;
/** `aria-label` of hours input */
hoursInputLabel?: string;
/** `aria-label` of minutes input */
minutesInputLabel?: string;
/** `aria-label` of seconds input */
secondsInputLabel?: string;
/** `aria-label` of am/pm input */
amPmInputLabel?: string;
/** Labels used for am/pm values @default `{ am: 'AM', pm: 'PM' }` */
amPmLabels?: TimePickerAmPmLabels;
/** Determines whether the dropdown with time controls list should be visible when the input has focus @default `false` */
withDropdown?: boolean;
/** Props passed down to `Popover` component */
popoverProps?: PopoverProps;
/** Called once when one of the inputs is focused, not called when focused is shifted between hours, minutes, seconds and am/pm inputs */
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
/** Called once when the focus is no longer on any of the inputs */
onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
/** Props passed down to clear button */
clearButtonProps?: CloseButtonProps & ElementProps<'button'> & DataAttributes;
/** Props passed down to hours input */
hoursInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
/** Props passed down to minutes input */
minutesInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
/** Props passed down to seconds input */
secondsInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
/** Props passed down to am/pm select */
amPmSelectProps?: React.ComponentPropsWithoutRef<'select'> & DataAttributes;
/** If set, the value cannot be updated */
readOnly?: boolean;
/** If set, the component becomes disabled */
disabled?: boolean;
/** Props passed down to the hidden input */
hiddenInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
/** A function to transform paste values, by default time in 24h format can be parsed on paste for example `23:34:22` */
pasteSplit?: TimePickerPasteSplit;
/** A ref object to get node reference of the hours input */
hoursRef?: React.Ref<HTMLInputElement>;
/** A ref object to get node reference of the minutes input */
minutesRef?: React.Ref<HTMLInputElement>;
/** A ref object to get node reference of the seconds input */
secondsRef?: React.Ref<HTMLInputElement>;
/** A ref object to get node reference of the am/pm select */
amPmRef?: React.Ref<HTMLSelectElement>;
/** Time presets to display in the dropdown */
presets?: TimePickerPresets;
/** Maximum height of the content displayed in the dropdown in px @default `200` */
maxDropdownContentHeight?: number;
/** Props passed down to all underlying `ScrollArea` components */
scrollAreaProps?: ScrollAreaProps;
/** If set, the time controls list are reversed, @default `false` */
reverseTimeControlsList?: boolean;
/** Hours input placeholder, @default `--` */
hoursPlaceholder?: string;
/** Minutes input placeholder, @default `--` */
minutesPlaceholder?: string;
/** Seconds input placeholder, @default `--` */
secondsPlaceholder?: string;
}
export type TimePickerFactory = Factory<{
props: TimePickerProps;
ref: HTMLDivElement;
stylesNames: TimePickerStylesNames;
vars: TimePickerCssVariables;
variant: InputVariant;
}>;
export declare const TimePicker: import("@mantine/core").MantineComponent<{
props: TimePickerProps;
ref: HTMLDivElement;
stylesNames: TimePickerStylesNames;
vars: TimePickerCssVariables;
variant: InputVariant;
}>;

View File

@@ -0,0 +1,22 @@
export type TimePickerFormat = '12h' | '24h';
export interface TimePickerAmPmLabels {
am: string;
pm: string;
}
export interface TimePickerPasteSplitInput {
time: string;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
}
export interface TimePickerPasteSplitReturnType {
hours: number | null;
minutes: number | null;
seconds: number | null;
amPm: string | null;
}
export type TimePickerPasteSplit = (input: TimePickerPasteSplitInput) => TimePickerPasteSplitReturnType;
export interface TimePickerPresetGroup {
label: React.ReactNode;
values: string[];
}
export type TimePickerPresets = string[] | TimePickerPresetGroup[];

View File

@@ -0,0 +1,14 @@
import { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker.types';
interface TimePresetControlProps {
value: string;
active: boolean;
onChange: (value: string) => void;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
withSeconds: boolean;
}
export declare function TimePresetControl({ value, active, onChange, format, amPmLabels, withSeconds, }: TimePresetControlProps): import("react/jsx-runtime").JSX.Element;
export declare namespace TimePresetControl {
var displayName: string;
}
export {};

View File

@@ -0,0 +1,14 @@
import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPresetGroup } from '../TimePicker.types';
interface TimePresetGroupProps {
value: string;
data: TimePickerPresetGroup;
onChange: (value: string) => void;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
withSeconds: boolean;
}
export declare function TimePresetGroup({ value, data, onChange, format, amPmLabels, withSeconds, }: TimePresetGroupProps): import("react/jsx-runtime").JSX.Element;
export declare namespace TimePresetGroup {
var displayName: string;
}
export {};

View File

@@ -0,0 +1,14 @@
import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPresets } from '../TimePicker.types';
interface TimePresetsProps {
presets: TimePickerPresets;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
value: string;
withSeconds: boolean;
onChange: (value: string) => void;
}
export declare function TimePresets({ presets, format, amPmLabels, withSeconds, value, onChange, }: TimePresetsProps): import("react/jsx-runtime").JSX.Element | null;
export declare namespace TimePresets {
var displayName: string;
}
export {};

View File

@@ -0,0 +1,4 @@
export { TimePicker } from './TimePicker';
export { getTimeRange } from './utils/get-time-range/get-time-range';
export type { TimePickerCssVariables, TimePickerFactory, TimePickerProps, TimePickerStylesNames, } from './TimePicker';
export type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit, TimePickerPresets, } from './TimePicker.types';

View File

@@ -0,0 +1,40 @@
import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './TimePicker.types';
interface UseTimePickerInput {
value: string | undefined;
defaultValue: string | undefined;
onChange: ((value: string) => void) | undefined;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
withSeconds: boolean | undefined;
min: string | undefined;
max: string | undefined;
readOnly: boolean | undefined;
disabled: boolean | undefined;
clearable: boolean | undefined;
pasteSplit: TimePickerPasteSplit | undefined;
}
export declare function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, withSeconds, min, max, clearable, readOnly, disabled, pasteSplit, }: UseTimePickerInput): {
refs: {
hours: import("react").RefObject<HTMLInputElement | null>;
minutes: import("react").RefObject<HTMLInputElement | null>;
seconds: import("react").RefObject<HTMLInputElement | null>;
amPm: import("react").RefObject<HTMLSelectElement | null>;
};
values: {
hours: number | null;
minutes: number | null;
seconds: number | null;
amPm: string | null;
};
setHours: (value: number | null) => void;
setMinutes: (value: number | null) => void;
setSeconds: (value: number | null) => void;
setAmPm: (value: string | null) => void;
focus: (field: "hours" | "minutes" | "seconds" | "amPm") => void;
clear: () => void;
onPaste: (event: React.ClipboardEvent<any>) => void;
setTimeString: (timeString: string) => void;
isClearable: boolean | undefined;
hiddenInputValue: string;
};
export {};

View File

@@ -0,0 +1,6 @@
export declare function clampTime(time: string, min: string | undefined, max: string | undefined): {
timeString: string;
hours: number;
minutes: number;
seconds: number;
};

View File

@@ -0,0 +1,35 @@
import { TimePickerAmPmLabels, TimePickerFormat } from '../../TimePicker.types';
interface GetParsedTimeInput {
time: string;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
}
interface ConvertTimeTo12HourFormatInput {
hours: number | null;
minutes: number | null;
seconds: number | null;
amPmLabels: TimePickerAmPmLabels;
}
export declare function convertTimeTo12HourFormat({ hours, minutes, seconds, amPmLabels, }: ConvertTimeTo12HourFormatInput): {
hours: null;
minutes: null;
seconds: null;
amPm: null;
} | {
hours: number;
minutes: number | null;
seconds: number | null;
amPm: string;
};
export declare function getParsedTime({ time, format, amPmLabels }: GetParsedTimeInput): {
hours: number;
minutes: number | null;
seconds: number | null;
amPm: string;
} | {
amPm: null;
hours: number | null;
minutes: number | null;
seconds: number | null;
};
export {};

View File

@@ -0,0 +1,7 @@
interface GetTimeRangeInput {
startTime: string;
endTime: string;
interval: string;
}
export declare function getTimeRange({ startTime, endTime, interval }: GetTimeRangeInput): string[];
export {};

View File

@@ -0,0 +1,15 @@
import { TimePickerAmPmLabels, TimePickerFormat } from '../../TimePicker.types';
interface GetTimeStringInput {
hours: number | null;
minutes: number | null;
seconds: number | null;
format: TimePickerFormat;
withSeconds: boolean;
amPm: string | null;
amPmLabels: TimePickerAmPmLabels;
}
export declare function getTimeString({ hours, minutes, seconds, format, withSeconds, amPm, amPmLabels, }: GetTimeStringInput): {
valid: boolean;
value: string;
};
export {};

View File

@@ -0,0 +1,7 @@
interface IsSameTimeInput {
time: string;
compare: string;
withSeconds: boolean;
}
export declare function isSameTime({ time, compare, withSeconds }: IsSameTimeInput): boolean;
export {};

View File

@@ -0,0 +1 @@
export declare function padTime(value: number): string;

View File

@@ -0,0 +1,5 @@
export declare function splitTimeString(timeString: string): {
hours: number | null;
minutes: number | null;
seconds: number | null;
};

View File

@@ -0,0 +1,7 @@
export declare function timeToSeconds(timeStr: string): number;
export declare function secondsToTime(seconds: number): {
timeString: string;
hours: number;
minutes: number;
seconds: number;
};

View File

@@ -0,0 +1,15 @@
import type { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker';
export interface TimeValueProps {
/** Time to format */
value: string | Date;
/** Time format @default `'24h'` */
format?: TimePickerFormat;
/** AM/PM labels @default `{ am: 'AM', pm: 'PM' }` */
amPmLabels?: TimePickerAmPmLabels;
/** Determines whether seconds should be displayed @default `false` */
withSeconds?: boolean;
}
export declare function TimeValue({ value, format, amPmLabels, withSeconds, }: TimeValueProps): import("react/jsx-runtime").JSX.Element;
export declare namespace TimeValue {
var displayName: string;
}

View File

@@ -0,0 +1,8 @@
import type { TimePickerAmPmLabels, TimePickerFormat } from '../../TimePicker';
export interface GetFormattedTimeInput {
value: string | Date;
format: TimePickerFormat;
amPmLabels: TimePickerAmPmLabels;
withSeconds: boolean;
}
export declare function getFormattedTime({ value, format, amPmLabels, withSeconds, }: GetFormattedTimeInput): string | null;

View File

@@ -0,0 +1,2 @@
export { TimeValue } from './TimeValue';
export type { TimeValueProps } from './TimeValue';

View File

@@ -0,0 +1,33 @@
import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
import type { DateLabelFormat, DayOfWeek } from '../../types';
export type WeekdaysRowStylesNames = 'weekday' | 'weekdaysRow';
export type WeekdaysRowCssVariables = {
weekdaysRow: '--wr-fz' | '--wr-spacing';
};
export interface WeekdaysRowProps extends BoxProps, StylesApiProps<WeekdaysRowFactory>, ElementProps<'tr'> {
__staticSelector?: string;
/** Controls size */
size?: MantineSize;
/** dayjs locale */
locale?: string;
/** Number 0-6, 0 Sunday, 6 Saturday @default `1` Monday */
firstDayOfWeek?: DayOfWeek;
/** dayjs format to get weekday name @default `'dd'` */
weekdayFormat?: DateLabelFormat;
/** Sets cell type that is used for weekdays @default `'th'` */
cellComponent?: 'td' | 'th';
/** If set, heading for week numbers is displayed */
withWeekNumbers?: boolean;
}
export type WeekdaysRowFactory = Factory<{
props: WeekdaysRowProps;
ref: HTMLTableRowElement;
stylesNames: WeekdaysRowStylesNames;
vars: WeekdaysRowCssVariables;
}>;
export declare const WeekdaysRow: import("@mantine/core").MantineComponent<{
props: WeekdaysRowProps;
ref: HTMLTableRowElement;
stylesNames: WeekdaysRowStylesNames;
vars: WeekdaysRowCssVariables;
}>;

View File

@@ -0,0 +1,8 @@
import type { DateLabelFormat, DayOfWeek } from '../../../types';
interface GetWeekdaysNamesInput {
locale: string;
format?: DateLabelFormat;
firstDayOfWeek?: DayOfWeek;
}
export declare function getWeekdayNames({ locale, format, firstDayOfWeek, }: GetWeekdaysNamesInput): import("react").ReactNode[];
export {};

View File

@@ -0,0 +1,2 @@
export { WeekdaysRow } from './WeekdaysRow';
export type { WeekdaysRowCssVariables, WeekdaysRowFactory, WeekdaysRowProps, WeekdaysRowStylesNames, } from './WeekdaysRow';

View File

@@ -0,0 +1,30 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { DateLabelFormat, DateStringValue } from '../../types';
import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHeader';
import { MonthsListSettings, MonthsListStylesNames } from '../MonthsList';
export type YearLevelStylesNames = MonthsListStylesNames | CalendarHeaderStylesNames;
export interface YearLevelBaseSettings extends MonthsListSettings {
/** dayjs label format to display year label or a function that returns year label based on year value @default `"YYYY"` */
yearLabelFormat?: DateLabelFormat;
}
export interface YearLevelSettings extends YearLevelBaseSettings, CalendarHeaderSettings {
}
export interface YearLevelProps extends BoxProps, YearLevelSettings, Omit<StylesApiProps<YearLevelFactory>, 'classNames' | 'styles'>, ElementProps<'div'> {
classNames?: Partial<Record<string, string>>;
styles?: Partial<Record<string, React.CSSProperties>>;
__staticSelector?: string;
/** Displayed year value in `YYYY-MM-DD` format */
year: DateStringValue;
/** `aria-label` for change level control */
levelControlAriaLabel?: string;
}
export type YearLevelFactory = Factory<{
props: YearLevelProps;
ref: HTMLDivElement;
stylesNames: YearLevelStylesNames;
}>;
export declare const YearLevel: import("@mantine/core").MantineComponent<{
props: YearLevelProps;
ref: HTMLDivElement;
stylesNames: YearLevelStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
export { YearLevel } from './YearLevel';
export type { YearLevelBaseSettings, YearLevelFactory, YearLevelProps, YearLevelSettings, YearLevelStylesNames, } from './YearLevel';

View File

@@ -0,0 +1,26 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { DateStringValue } from '../../types';
import { LevelsGroupStylesNames } from '../LevelsGroup';
import { YearLevelSettings, YearLevelStylesNames } from '../YearLevel';
export type YearLevelGroupStylesNames = YearLevelStylesNames | LevelsGroupStylesNames;
export interface YearLevelGroupProps extends BoxProps, Omit<YearLevelSettings, 'withPrevious' | 'withNext' | '__onControlKeyDown' | '__getControlRef'>, Omit<StylesApiProps<YearLevelGroupFactory>, 'classNames' | 'styles'>, ElementProps<'div'> {
classNames?: Partial<Record<string, string>>;
styles?: Partial<Record<string, React.CSSProperties>>;
__staticSelector?: string;
/** Number of columns displayed next to each other */
numberOfColumns?: number;
/** Displayed year */
year: DateStringValue;
/** Function that returns level control `aria-label` */
levelControlAriaLabel?: ((year: DateStringValue) => string) | string;
}
export type YearLevelGroupFactory = Factory<{
props: YearLevelGroupProps;
ref: HTMLDivElement;
stylesNames: YearLevelGroupStylesNames;
}>;
export declare const YearLevelGroup: import("@mantine/core").MantineComponent<{
props: YearLevelGroupProps;
ref: HTMLDivElement;
stylesNames: YearLevelGroupStylesNames;
}>;

View File

@@ -0,0 +1,2 @@
export { YearLevelGroup } from './YearLevelGroup';
export type { YearLevelGroupFactory, YearLevelGroupProps, YearLevelGroupStylesNames, } from './YearLevelGroup';

View File

@@ -0,0 +1,24 @@
import { BoxProps, ElementProps, Factory, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
import { DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
import { CalendarBaseProps } from '../Calendar';
import { DecadeLevelBaseSettings } from '../DecadeLevel';
import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
export type YearPickerStylesNames = DecadeLevelGroupStylesNames;
export interface YearPickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, Omit<CalendarBaseProps, 'onNextYear' | 'onPreviousYear' | 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {
}
export interface YearPickerProps<Type extends DatePickerType = 'default'> extends BoxProps, YearPickerBaseProps<Type>, StylesApiProps<YearPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
/** Called when year is selected */
onYearSelect?: (date: DateStringValue) => void;
}
export type YearPickerFactory = Factory<{
props: YearPickerProps;
ref: HTMLDivElement;
stylesNames: YearPickerStylesNames;
}>;
type YearPickerComponent = (<Type extends DatePickerType = 'default'>(props: YearPickerProps<Type> & {
ref?: React.ForwardedRef<HTMLDivElement>;
}) => React.JSX.Element) & {
displayName?: string;
} & MantineComponentStaticProperties<YearPickerFactory>;
export declare const YearPicker: YearPickerComponent;
export {};

Some files were not shown because too many files have changed in this diff Show More