@connectif/ui-components 0.0.1

package/dist/src/components/icon/index.d.ts

@@ -0,0 +1 @@
+export { default as Icon, IconProps, IconId } from './Icon';

package/dist/src/components/image/ImageEditor.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { FilerobotImageEditorConfig } from 'react-filerobot-image-editor';
+export type ImageEditorProps = {
+    imageUrl: string;
+    maxWidth?: number;
+    maxHeight?: number;
+    maxMegapixels?: number;
+    onSave?: (imageBase64: string, name: string) => void;
+    onSaveError?: (error: string) => void;
+} & Pick<FilerobotImageEditorConfig, 'defaultSavedImageType'>;
+declare const ImageEditor: React.FC<ImageEditorProps>;
+export default ImageEditor;

package/dist/src/components/image/index.d.ts

@@ -0,0 +1 @@
+export { default as ImageEditor, ImageEditorProps } from '../image/ImageEditor';

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

@@ -0,0 +1,35 @@
+export * from './alert';
+export * from './avatar';
+export * from './button';
+export * from './card';
+export * from './chart';
+export * from './chat';
+export * from './chip';
+export * from './dialog';
+export * from './divider';
+export * from './drawer';
+export * from './formatter';
+export * from './header';
+export * from './icon';
+export * from './image';
+export * from './info';
+export * from './input';
+export * from './layout';
+export * from './list';
+export * from './loader';
+export * from './navbar';
+export * from './popover';
+export * from './overlay';
+export * from './pager';
+export * from './progress';
+export * from './scrollable';
+export * from './skeleton';
+export * from './snackbar';
+export * from './tab';
+export * from './table';
+export * from './toolbar';
+export * from './tooltip';
+export * from './transition';
+export * from './typography';
+export * from './widget';
+export * from './window';

package/dist/src/components/info/InfoBox.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+type InfoBoxVariant = 'default';
+export type InfoBoxProps = {
+    variant?: InfoBoxVariant;
+    collapsedHeight?: number;
+    sx?: SxProps;
+};
+declare const InfoBox: React.FC<InfoBoxProps>;
+export default InfoBox;

package/dist/src/components/info/index.d.ts

@@ -0,0 +1 @@
+export { default as InfoBox, InfoBoxProps } from './InfoBox';

package/dist/src/components/input/Autocomplete.d.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { DebouncedTextFieldProps } from './DebouncedTextField';
+export type AutocompleteValue<T, Multiple> = Multiple extends undefined | false ? T | '' : T[];
+type TextFieldFilteredProps = Pick<DebouncedTextFieldProps, 'autoFocus' | 'activeColor' | 'data-testid' | 'helperText' | 'highlighted' | 'iconId' | 'isError' | 'label' | 'placeholder' | 'debounce' | 'sx' | 'inputSx' | 'maxLength' | 'id' | 'endAdornment'>;
+export type AutocompleteOption<T extends string> = {
+    readonly id: T;
+};
+export type AutocompleteProps<T extends string, Multiple extends boolean | undefined, Value = AutocompleteValue<T, Multiple>, Option = AutocompleteOption<T>> = {
+    /**
+     * The variant of the Autocomplete
+     */
+    variant?: 'default' | 'text';
+    /**
+     * The value handled by this Autocomplete component. If multiple=true, it should be an array of ids.
+     * If multiple=false (by default) it should be a string.
+     */
+    value: Value;
+    /**
+     * The available options to be shown on dropdown
+     */
+    options: readonly Option[];
+    /**
+     * Whether the autocomplete is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Whether this component is working in multiple mode or single mode. By default it is single mode.
+     * See `value` prop description for more info.
+     */
+    multiple?: Multiple;
+    /**
+     * Called when the value changes. You should handle it and update the `value` prop.
+     */
+    onChange?: (event: React.SyntheticEvent, value: Value) => void;
+    /**
+     * Properties to be pass through inner TextField component.
+     */
+    textFieldProps?: TextFieldFilteredProps;
+    /**
+     * Wheather the search pattern is case sensitive or not.
+     */
+    isCaseSensitive?: boolean;
+    /**
+     * Whether the search pattern is diacritic sensitive or not.
+     */
+    isDiacriticSensitive?: boolean;
+    /**
+     * The mode to search within the options.
+     */
+    mode?: 'startsWith' | 'contains' | 'endsWith';
+    /**
+     * Use this function to render the desired text for each id. Leave it empty if the id is also the label.
+     */
+    renderLabel?: (id: T) => string;
+    /**
+     * Whether the autocomplete options are loading or not. Use only on initial load or if using async search approach
+     */
+    isLoading?: boolean;
+    /**
+     * This callback will be called when the searchText changes, so you can perform asynchronous on-deman load of options.
+     * Use it along with the `isLoading` prop.
+     */
+    onSearch?: (searchText: string) => void;
+    /**
+     * Custom text to be shown when autocomplete options are loading by the `isLoading` prop.
+     */
+    loadingText?: string;
+    /**
+     * Custom text to be shown when no options are available to be selected.
+     */
+    noOptionsText?: string;
+    /**
+     * Enables the feature to use text written by the user besides predefined options
+     */
+    allowFreeText?: boolean;
+    /**
+     * Custom text to be shown when allowFreeText feature is enabled and written text is a new value to add.
+     */
+    addNewValueText?: string;
+    /**
+     * Enables close popover when an option is selected. Default value is true if not multiple, false if multiple.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Maximum length of the value
+     */
+    maxValueLength?: number;
+    /**
+     * Maximum amount of values allowed when multiple is enabled. If not set, there is no limit.
+     */
+    maxValues?: number;
+    /**
+     * Custom text to be shown when number of values reaches maxValues.
+     */
+    maxValuesText?: string;
+    /**
+     * Number of selected values to be shown when multiple is enabled. Default value is 0, which shows all selected values tags.
+     */
+    limitValueTags?: number;
+    /**
+     * Callback when options list popover is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when options list popover is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Disables clear button at the end of the component when field is dirty.
+     */
+    disableClear?: boolean;
+    /**
+     * Ref to the inner HTMLInputElement
+     */
+    ref?: React.Ref<HTMLInputElement>;
+};
+declare const _default: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, options, disabled, mode, isCaseSensitive, isDiacriticSensitive, onChange, renderLabel, isLoading, onSearch, loadingText, noOptionsText, allowFreeText, addNewValueText, closeOnSelect, maxValueLength, maxValues, maxValuesText, limitValueTags, onClose, onOpen, disableClear }: AutocompleteProps<T, Multiple, Value, AutocompleteOption<T>>, ref: React.Ref<HTMLInputElement>) => JSX.Element;
+export default _default;

package/dist/src/components/input/CalendarDay.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export declare const calendarDayButtonSize = 32;
+export type CalendarDayProps = React.PropsWithChildren<{
+    disabled?: boolean;
+    onClick: () => void;
+    backgroundHighlight?: {
+        color: string;
+        type: 'start' | 'end' | 'full';
+    };
+    foregroundHighlight?: {
+        color: string;
+        type: 'fill' | 'stroke';
+    };
+    allowKeyboardNavigation?: boolean;
+}>;
+declare const CalendarDay: ({ children, disabled, onClick, backgroundHighlight, foregroundHighlight, allowKeyboardNavigation }: CalendarDayProps) => JSX.Element;
+export default CalendarDay;

package/dist/src/components/input/CalendarMonth.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { SimpleDate } from '../../models/SimpleDate';
+type Selection = {
+    startDate: SimpleDate;
+    endDate: SimpleDate;
+    color: string;
+};
+export type CalendarMonthProps = {
+    minDate?: SimpleDate | null;
+    maxDate?: SimpleDate | null;
+    year: number;
+    month: number;
+    selections: [Selection?, Selection?];
+    intersectionColor?: string;
+    onSelect?: (day: number) => void;
+    allowKeyboardNavigation?: boolean;
+};
+declare const CalendarMonth: ({ minDate, maxDate, year, month, selections, intersectionColor, onSelect, allowKeyboardNavigation }: CalendarMonthProps) => JSX.Element;
+export default CalendarMonth;

package/dist/src/components/input/CalendarScrollPicker.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SimpleDate } from '../../models/SimpleDate';
+type Selection = {
+    startDate: SimpleDate;
+    endDate: SimpleDate;
+    color: string;
+};
+export type CalendarScrollPickerProps = {
+    minDate: SimpleDate;
+    maxDate: SimpleDate;
+    selections: [Selection?, Selection?];
+    intersectionColor: string;
+    focusedDate: SimpleDate | null;
+    onSelect?: (date: SimpleDate) => void;
+};
+declare const CalendarScrollPicker: ({ minDate, maxDate, selections, intersectionColor, focusedDate, onSelect }: CalendarScrollPickerProps) => JSX.Element;
+export default CalendarScrollPicker;

package/dist/src/components/input/CategorizedPicker.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+export type BaseOption = {
+    id: string;
+    name: string;
+};
+export type Category<T> = {
+    name: string;
+    filter: (value: T) => boolean;
+};
+export type CategorizedPickerProps<T> = {
+    value?: T;
+    options: T[];
+    categories: Category<T>[];
+    placeholder?: string;
+    disabled?: boolean;
+    sx?: SxProps;
+    dataTestId?: string;
+    onChange: (value: T) => void;
+};
+declare const CategorizedPicker: <T extends BaseOption>({ value, options, categories, placeholder, disabled, sx, dataTestId, onChange }: CategorizedPickerProps<T>) => JSX.Element;
+export default CategorizedPicker;

package/dist/src/components/input/Checkbox.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
+export type CheckboxProps = Pick<MuiCheckboxProps, 'checked' | 'tabIndex' | 'indeterminate'> & {
+    /**
+     * Whether the checkbox is checked or not.
+     */
+    checked: boolean;
+    /**
+     * Whether the checkbox is indeterminate or not.
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the checkbox is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Optional text label to show before or after the checkbox.
+     */
+    label?: string;
+    /**
+     * Where to put the `label` text, if any.
+     */
+    labelPlacement?: 'start' | 'end';
+    /**
+     * Optional class in the input of the checkbox.
+     */
+    inputClass?: string;
+    /**
+     * Callback fired when the state is changed.
+     */
+    onChange?: (value: boolean) => void;
+};
+/**
+ * Checkboxes can be used to turn an option on or off.
+ * If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.
+ * If you have a single option, avoid using a checkbox and use an on/off switch instead.
+ */
+declare const Checkbox: ({ label, disabled, labelPlacement, checked, indeterminate, inputClass, onChange, tabIndex }: CheckboxProps) => JSX.Element;
+export default Checkbox;

package/dist/src/components/input/CodeEditor.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { html } from '@codemirror/lang-html';
+import { linter, lintGutter } from '@codemirror/lint';
+type LanguageId = 'html' | undefined;
+export type LanguageOptions<T> = T extends 'html' ? Parameters<typeof html>[0] : Record<string, never>;
+export type CodeEditorProps<T extends LanguageId> = ReactCodeMirrorProps & {
+    /**
+     * The language of the editor
+     */
+    language?: T;
+    /**
+     * Options for the selected language
+     */
+    languageOptions?: LanguageOptions<T>;
+    /**
+     * Configuration for the lint gutter if a language is defined
+     */
+    lintGutterConfig?: Parameters<typeof lintGutter>[0];
+    /**
+     * Options for the linter if a language is defined
+     */
+    linterOptions?: {
+        source: Parameters<typeof linter>[0];
+        config?: Parameters<typeof linter>[1];
+    };
+};
+declare const _default: <T extends LanguageId>({ extensions, placeholder, language, languageOptions, lintGutterConfig, linterOptions, ...rest }: CodeEditorProps<T>, ref: React.Ref<ReactCodeMirrorRef>) => JSX.Element;
+export default _default;

package/dist/src/components/input/CodeEditorPopup.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CodeEditorProps } from './CodeEditor';
+import { LintSource } from '@codemirror/lint';
+export type CodeEditorPopupProps = Pick<CodeEditorProps<'html'>, 'value' | 'onChange'> & {
+    open: boolean;
+    codeEditorSubtitle?: string;
+    messageNode?: React.ReactNode;
+    readonly?: boolean;
+    onCopyToClipboard?: () => void;
+    onAccept: () => void;
+    onCancel: () => void;
+    linterFunction?: (value: string, view: Parameters<LintSource>[0]) => {
+        response: ReturnType<LintSource>;
+        hasErrors: boolean;
+    };
+};
+declare const CodeEditorPopup: ({ value, open, readonly, codeEditorSubtitle, messageNode, linterFunction, onCopyToClipboard, onChange, onAccept, onCancel }: CodeEditorPopupProps) => JSX.Element;
+export default CodeEditorPopup;

package/dist/src/components/input/ColorPicker.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+export declare const isValidColor: (color: string) => boolean;
+export type ColorPickerProps = {
+    /**
+     * The starting color
+     *
+     */
+    value?: string;
+    /**
+     * The input label
+     *
+     */
+    label?: string;
+    /**
+     * (optional) The width of the picker
+     * @default 294
+     */
+    width?: number;
+    /**
+     * (optional) The height of the picker
+     *  @default 294
+     */
+    height?: number;
+    /**
+     * (optional) Allow empty string as a valid value.
+     * If false, value should not be undefined nor empty string in order to behave as expected.
+     * @default true
+     */
+    allowEmpty?: boolean;
+    /**
+     * (optional) Allow apha mode to activate rgba colors.
+     * If false, color value would be always 6-hex.
+     * @default true
+     */
+    allowAlpha?: boolean;
+    /**
+     * (optional) pass in custom preset options ['rgba()', 'rgba()', ..]
+     * if is provided the default colors will be ignored
+     * Default : ['rgba(0,0,0,1)', ...]
+     */
+    presets?: string[];
+    /**
+     * (optional) The z-index of the popover
+     */
+    popoverZIndex?: number;
+    /**
+     * (optional) The width of the input field
+     */
+    inputWidthStyle?: string;
+    /**
+     * A function to update color value
+     */
+    onChange: (value: string) => void;
+};
+export declare const colorPickerDefaultColors: string[];
+/**
+ * A component that displays color picker from react-best-gradient-color-picker.
+ * By default, this components renders in a simple UI without gradients.
+ * It can be customized by width and height.
+ */
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLInputElement>>;
+export default ColorPicker;

package/dist/src/components/input/DateIntervalPicker.d.ts

@@ -0,0 +1,84 @@
+/// <reference types="react" />
+import { DateInterval } from '../../models/DateInterval';
+import { ComparisonInterval } from '../../models/ComparisonInterval';
+export type DateIntervalValues = {
+    interval: DateInterval;
+    startDate: Date;
+    endDate: Date;
+    comparisonInterval: ComparisonInterval | null;
+    comparisonStartDate: Date | null;
+    comparisonEndDate: Date | null;
+};
+export type DateIntervalPickerProps = {
+    /**
+     * The identifier of the interval.
+     */
+    interval: DateInterval;
+    /**
+     * The start date of the date interval
+     */
+    startDate: Date;
+    /**
+     * The end date of the date interval
+     */
+    endDate: Date;
+    /**
+     * The color to mark the selected interval. If not provided, the Theme primary color will be used.
+     */
+    color?: string;
+    /**
+     * The maximum quantity of days allowed to be selected in the date interval
+     */
+    maxSelectableDays: number;
+    /**
+     * Whether the date interval picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether it should allow comparison of intervals
+     */
+    allowCompare?: boolean;
+    /**
+     * The identifier of the comparison interval.
+     */
+    comparisonInterval?: ComparisonInterval | null;
+    /**
+     * The start date of the comparison date interval
+     */
+    comparisonStartDate?: Date | null;
+    /**
+     * The end date of the comparison date interval
+     */
+    comparisonEndDate?: Date | null;
+    /**
+     * The color to mark the selected comparison interval. If not provided, the Theme primary color will be used.
+     */
+    comparisonColor?: string;
+    /**
+     * Color to be used when represent intersection of intervals
+     */
+    intersectionColor?: string;
+    /**
+     * The minimum date allowed to be selected in the date interval.
+     * By default it will be the maxDate minus the maxSelectableDays
+     */
+    minDate?: Date;
+    /**
+     * The maximum date allowed to be selected in the date interval.
+     * By default it will be the current date
+     */
+    maxDate?: Date;
+    /**
+     * Set of intervals to show at the DateIntervalPicker popover. All showed by default.
+     */
+    allowedIntervals?: DateInterval[];
+    /**
+     * Function to be called when the date interval changes
+     */
+    onChange?: (values: DateIntervalValues) => void;
+};
+/**
+ * Date interval picker component, which allows to select an interval between two Dates.
+ */
+declare const DateIntervalPicker: ({ interval, startDate, endDate, color, maxSelectableDays, disabled, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, minDate, maxDate, allowedIntervals, onChange }: DateIntervalPickerProps) => JSX.Element;
+export default DateIntervalPicker;

package/dist/src/components/input/DateIntervalPickerInputs.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type FocusableInputDate = 'startDate' | 'endDate' | 'comparisonStartDate' | 'comparisonEndDate';
+export type DateIntervalPickerInputsProps = {
+    startDate: string;
+    endDate: string;
+    comparisonStartDate: string;
+    comparisonEndDate: string;
+    placeholder: string;
+    highlightedInput: FocusableInputDate;
+    color: string;
+    comparisonColor: string;
+    isComparing?: boolean;
+    onChange: (value: string) => void;
+    onFocus: (focusableInput: FocusableInputDate) => void;
+    onBlur: (focusableInput: FocusableInputDate, value: string) => void;
+};
+declare const DateIntervalPickerInputs: ({ startDate, endDate, comparisonStartDate, comparisonEndDate, placeholder, highlightedInput, color, comparisonColor, isComparing, onChange, onFocus, onBlur }: DateIntervalPickerInputsProps) => JSX.Element;
+export default DateIntervalPickerInputs;

package/dist/src/components/input/DateIntervalPickerList.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { ComparisonInterval } from '../../models/ComparisonInterval';
+import { DateInterval } from '../../models/DateInterval';
+export declare const dateIntervals: {
+    readonly today: "TODAY";
+    readonly yesterday: "YESTERDAY";
+    readonly thisWeekFromSunday: "THIS_WEEK_FROM_SUNDAY";
+    readonly thisWeekFromMonday: "THIS_WEEK_FROM_MONDAY";
+    readonly thisMonth: "THIS_MONTH";
+    readonly thisYear: "THIS_YEAR";
+    readonly last7Days: "LAST_7_DAYS";
+    readonly last30Days: "LAST_30_DAYS";
+    readonly last90Days: "LAST_90_DAYS";
+    readonly last12Months: "LAST_12_MONTHS";
+    readonly all: "ALL_TIME";
+    readonly custom: "CUSTOM";
+};
+export declare const comparisonIntervals: {
+    readonly previousPeriod: "PREVIOUS_PERIOD";
+    readonly samePeriodLastYear: "SAME_PERIOD_LAST_YEAR";
+    readonly custom: "CUSTOM";
+};
+export type DateIntervalPickerListProps = {
+    mainInterval: DateInterval;
+    comparisonInterval: ComparisonInterval | null;
+    allowCompare?: boolean;
+    isComparing?: boolean;
+    maxSelectableDays: number;
+    onSelectMain: (interval: DateInterval) => void;
+    onSelectComparison: (comparisonInterval: ComparisonInterval) => void;
+    onChangeIsComparing: (isComparing: boolean) => void;
+    allowedIntervals?: DateInterval[];
+};
+declare const DateIntervalPickerList: ({ mainInterval, comparisonInterval, allowCompare, isComparing, maxSelectableDays, onSelectMain, onSelectComparison, onChangeIsComparing, allowedIntervals }: DateIntervalPickerListProps) => JSX.Element;
+export default DateIntervalPickerList;

package/dist/src/components/input/DateIntervalPickerPopover.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { DateInterval } from '../../models/DateInterval';
+import { ComparisonInterval } from '../../models/ComparisonInterval';
+export type DateIntervalPickerPopoverProps = {
+    interval: DateInterval;
+    startDate: Date;
+    endDate: Date;
+    color: string;
+    maxSelectableDays: number;
+    disabled?: boolean;
+    allowCompare?: boolean;
+    comparisonInterval?: ComparisonInterval | null;
+    comparisonStartDate?: Date | null;
+    comparisonEndDate?: Date | null;
+    comparisonColor: string;
+    intersectionColor: string;
+    minDate: Date;
+    maxDate: Date;
+    allowedIntervals?: DateInterval[];
+    anchorEl?: HTMLElement | null;
+    onApply: (values: {
+        interval: DateInterval;
+        startDate: Date;
+        endDate: Date;
+        comparisonInterval: ComparisonInterval | null;
+        comparisonStartDate: Date | null;
+        comparisonEndDate: Date | null;
+    }) => void;
+    onCancel: () => void;
+};
+declare const DateIntervalPickerPopover: ({ interval, startDate, endDate, color, maxSelectableDays, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, anchorEl, minDate, maxDate, allowedIntervals, onApply, onCancel }: DateIntervalPickerPopoverProps) => JSX.Element;
+export default DateIntervalPickerPopover;

package/dist/src/components/input/DatePicker.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { TextFieldProps } from './TextField';
+export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'type' | 'onScroll' | 'maxLength' | 'onBlur' | 'onKeyDown'> & {
+    /**
+     * The value handled by this DatePicker
+     */
+    value?: Date | null;
+    /**
+     * Called on every change
+     */
+    onChange?: (date: Date | null) => void;
+    /**
+     * Called when inner TextField emit blur event
+     */
+    onBlur?: TextFieldProps['onBlur'];
+    /**
+     * Called when inner TextField emit keyDown event
+     */
+    onKeyDown?: TextFieldProps['onKeyDown'];
+    /**
+     * The minimum date available for selection
+     */
+    minDate?: Date | null;
+    /**
+     * The maximum date available for selection
+     */
+    maxDate?: Date | null;
+};
+/**
+ * An input component which uses a vitamined TextField with a popover to allow user
+ * to pick a Date (without time component)
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<TextFieldProps, "type" | "onBlur" | "onChange" | "onKeyDown" | "onScroll" | "value" | "maxLength"> & {
+    /**
+     * The value handled by this DatePicker
+     */
+    value?: Date | null | undefined;
+    /**
+     * Called on every change
+     */
+    onChange?: ((date: Date | null) => void) | undefined;
+    /**
+     * Called when inner TextField emit blur event
+     */
+    onBlur?: TextFieldProps['onBlur'];
+    /**
+     * Called when inner TextField emit keyDown event
+     */
+    onKeyDown?: TextFieldProps['onKeyDown'];
+    /**
+     * The minimum date available for selection
+     */
+    minDate?: Date | null | undefined;
+    /**
+     * The maximum date available for selection
+     */
+    maxDate?: Date | null | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default DatePicker;

package/dist/src/components/input/DatePickerPopover.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PopoverProps } from '../popover/Popover';
+export type DatePickerPopoverProps = Pick<PopoverProps, 'anchorEl' | 'onClose'> & {
+    value?: Date | null;
+    onSelect: (date: Date | null) => void;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+};
+declare const DatePickerPopover: ({ value, onSelect, minDate, maxDate, ...rest }: DatePickerPopoverProps) => JSX.Element;
+export default DatePickerPopover;