@mantine/core 7.0.0-alpha.2 → 7.0.0-alpha.21

package/lib/components/Chip/Chip.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineRadius, MantineSize, MantineColor } from '../../core';
+import { ChipGroup } from './ChipGroup/ChipGroup';
+export type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';
+export type ChipVariant = 'outline' | 'filled' | 'light';
+export type ChipCssVariables = {
+    root: '--chip-fz' | '--chip-size' | '--chip-icon-size' | '--chip-padding' | '--chip-checked-padding' | '--chip-radius' | '--chip-bg' | '--chip-hover' | '--chip-color' | '--chip-bd' | '--chip-spacing';
+};
+export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `'xl'` by default */
+    radius?: MantineRadius | (string & {}) | number;
+    /** Controls various properties, `'sm'` by default */
+    size?: MantineSize;
+    /** Chip input type */
+    type?: 'radio' | 'checkbox';
+    /** Chip label */
+    children: React.ReactNode;
+    /** Checked state for controlled component */
+    checked?: boolean;
+    /** Default checked state for uncontrolled component */
+    defaultChecked?: boolean;
+    /** Calls when checked state changes */
+    onChange?(checked: boolean): void;
+    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` */
+    color?: MantineColor;
+    /** Static id to bind input with label */
+    id?: string;
+    /** Props passed down to the wrapper element */
+    wrapperProps?: Record<string, any>;
+    /** Replaces default icon */
+    icon?: React.ReactNode;
+}
+export type ChipFactory = Factory<{
+    props: ChipProps;
+    ref: HTMLInputElement;
+    stylesNames: ChipStylesNames;
+    vars: ChipCssVariables;
+    variant: ChipVariant;
+    staticComponents: {
+        Group: typeof ChipGroup;
+    };
+}>;
+export declare const Chip: import("../../core").MantineComponent<{
+    props: ChipProps;
+    ref: HTMLInputElement;
+    stylesNames: ChipStylesNames;
+    vars: ChipCssVariables;
+    variant: ChipVariant;
+    staticComponents: {
+        Group: typeof ChipGroup;
+    };
+}>;

package/lib/components/Chip/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ChipGroupProps<T extends boolean = false> {
+    /** Allow multiple values to be selected at a time */
+    multiple?: T;
+    /** Controlled component value */
+    value?: T extends true ? string[] : string | null;
+    /** Uncontrolled component initial value */
+    defaultValue?: T extends true ? string[] : string | null;
+    /** Called when value changes */
+    onChange?(value: T extends true ? string[] : string): void;
+    /** <Chip /> components */
+    children?: React.ReactNode;
+}
+export declare function ChipGroup<T extends boolean>(props: ChipGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChipGroup {
+    var displayName: string;
+}

package/lib/components/Chip/ChipGroup.context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface ChipGroupContextValue {
+    isChipSelected(value: string): boolean;
+    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    multiple: boolean;
+}
+export declare const ChipGroupProvider: ({ children, value }: {
+    value: ChipGroupContextValue;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useChipGroupContext: () => ChipGroupContextValue | null;
+export {};

package/lib/components/Chip/index.d.ts

@@ -0,0 +1,4 @@
+export { Chip } from './Chip';
+export { ChipGroup } from './ChipGroup/ChipGroup';
+export type { ChipCssVariables, ChipFactory, ChipProps, ChipStylesNames, ChipVariant, } from './Chip';
+export type { ChipGroupProps } from './ChipGroup/ChipGroup';

package/lib/components/CloseButton/CloseButton.d.ts

@@ -4,7 +4,7 @@ import { ActionIconProps, ActionIconVariant, ActionIconStylesNames } from '../Ac
 export type CloseButtonVariant = ActionIconVariant;
 export type CloseButtonStylesNames = ActionIconStylesNames;
 export interface CloseButtonProps extends ActionIconProps {
-    /** X icon width and height, 80% by default */
+    /** `X` icon `width` and `height`, `80%` by default */
     iconSize?: number | string;
 }
 export type CloseButtonFactory = PolymorphicFactory<{
@@ -26,4 +26,10 @@ export declare const CloseButton: (<C = "button">(props: import("../../core/fact
     defaultRef: HTMLButtonElement;
     stylesNames: CloseButtonStylesNames;
     variant: CloseButtonVariant;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: CloseButtonProps;
+    defaultComponent: 'button';
+    defaultRef: HTMLButtonElement;
+    stylesNames: CloseButtonStylesNames;
+    variant: CloseButtonVariant;
 }> & Record<string, never>;

package/lib/components/Code/Code.d.ts

@@ -1,13 +1,12 @@
 import { BoxProps, StylesApiProps, ElementProps, MantineColor, Factory } from '../../core';
 export type CodeStylesNames = 'root';
-export type CodeVariant = string;
 export type CodeCssVariables = {
     root: '--code-bg';
 };
 export interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {
-    /** Key of `theme.colors` or any valid CSS color, controls background color of the code, by default value is calculated based on color scheme */
+    /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code, by default value is calculated based on color scheme */
     color?: MantineColor;
-    /** If set code will be block instead of inline */
+    /** If set code will be rendered inside `pre`, `false` by default */
     block?: boolean;
 }
 export type CodeFactory = Factory<{
@@ -15,12 +14,10 @@ export type CodeFactory = Factory<{
     ref: HTMLElement;
     stylesNames: CodeStylesNames;
     vars: CodeCssVariables;
-    variant: CodeVariant;
 }>;
 export declare const Code: import("../../core").MantineComponent<{
     props: CodeProps;
     ref: HTMLElement;
     stylesNames: CodeStylesNames;
     vars: CodeCssVariables;
-    variant: CodeVariant;
 }>;

package/lib/components/Code/index.d.ts

@@ -1,2 +1,2 @@
 export { Code } from './Code';
-export type { CodeProps, CodeCssVariables, CodeFactory, CodeStylesNames, CodeVariant, } from './Code';
+export type { CodeProps, CodeCssVariables, CodeFactory, CodeStylesNames } from './Code';

package/lib/components/ColorInput/ColorInput.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { __ColorPickerProps, ColorPickerStylesNames } from '../ColorPicker';
+import { __BaseInputProps, InputVariant, __InputStylesNames } from '../Input';
+import { PopoverProps } from '../Popover';
+export type ColorInputStylesNames = 'dropdown' | 'eyeDropperButton' | 'eyeDropperIcon' | 'colorPreview' | ColorPickerStylesNames | __InputStylesNames;
+export type ColorInputCssVariables = {
+    eyeDropperIcon: '--ci-eye-dropper-icon-size';
+    colorPreview: '--ci-preview-size';
+};
+export interface ColorInputProps extends BoxProps, __BaseInputProps, __ColorPickerProps, StylesApiProps<ColorInputFactory>, ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {
+    /** If input is not allowed, the user can only pick value with color picker and swatches, `false` by default */
+    disallowInput?: boolean;
+    /** Determines whether the input value should be reset to the last known valid value when the input loses focus, `true` by default */
+    fixOnBlur?: boolean;
+    /** Props passed down to the Popover component */
+    popoverProps?: PopoverProps;
+    /** Determines whether the preview color swatch should be displayed in the left section of the input, `true` by default */
+    withPreview?: boolean;
+    /** Determines whether eye dropper button should be displayed in the right section, `true` by default */
+    withEyeDropper?: boolean;
+    /** An icon that will replace the default eye dropper icon */
+    eyeDropperIcon?: React.ReactNode;
+    /** Determines whether the dropdown should be closed when one of the color swatches is clicked, `false` by default */
+    closeOnColorSwatchClick?: boolean;
+    /** Props passed down to the eye dropper button */
+    eyeDropperButtonProps?: Record<string, any>;
+}
+export type ColorInputFactory = Factory<{
+    props: ColorInputProps;
+    ref: HTMLInputElement;
+    stylesNames: ColorInputStylesNames;
+    vars: ColorInputCssVariables;
+    variant: InputVariant;
+}>;
+export declare const ColorInput: import("../../core").MantineComponent<{
+    props: ColorInputProps;
+    ref: HTMLInputElement;
+    stylesNames: ColorInputStylesNames;
+    vars: ColorInputCssVariables;
+    variant: InputVariant;
+}>;

package/lib/components/ColorInput/EyeDropperIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function EyeDropperIcon({ style, ...others }: React.ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/lib/components/ColorInput/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorInput } from './ColorInput';
+export type { ColorInputFactory, ColorInputProps, ColorInputStylesNames, ColorInputCssVariables, } from './ColorInput';

package/lib/components/ColorPicker/ColorPicker.context.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GetStylesApi } from '../../core';
 import type { ColorPickerFactory } from './ColorPicker';
 interface ColorPickerContextValue {
@@ -6,5 +7,5 @@ interface ColorPickerContextValue {
 export declare const ColorPickerProvider: ({ children, value }: {
     value: ColorPickerContextValue;
     children: import("react").ReactNode;
-}) => JSX.Element, useColorPickerContext: () => ColorPickerContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useColorPickerContext: () => ColorPickerContextValue;
 export {};

package/lib/components/ColorPicker/ColorPicker.d.ts

@@ -1,7 +1,6 @@
 import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../core';
 import { ColorFormat } from './ColorPicker.types';
 export type ColorPickerStylesNames = 'wrapper' | 'preview' | 'body' | 'sliders' | 'slider' | 'sliderOverlay' | 'thumb' | 'saturation' | 'thumb' | 'saturationOverlay' | 'thumb' | 'swatches' | 'swatch';
-export type ColorPickerVariant = string;
 export type ColorPickerCssVariables = {
     wrapper: '--cp-preview-size' | '--cp-width' | '--cp-body-spacing' | '--cp-swatch-size' | '--cp-thumb-size' | '--cp-saturation-height';
 };
@@ -12,7 +11,7 @@ export interface __ColorPickerProps {
     defaultValue?: string;
     /** Called when color changes */
     onChange?(value: string): void;
-    /** Called when user stops dragging thumb or changes value with arrow keys */
+    /** Called when user stops dragging or changes value with arrow keys */
     onChangeEnd?(value: string): void;
     /** Color format, `'hex'` by default */
     format?: ColorFormat;
@@ -20,9 +19,9 @@ export interface __ColorPickerProps {
     withPicker?: boolean;
     /** Color swatches */
     swatches?: string[];
-    /** Number of swatches displayed in one row, `10` by default */
+    /** Number of swatches displayed in one row, `7` by default */
     swatchesPerRow?: number;
-    /** Controls size of elements */
+    /** Controls size of hue, alpha and saturation sliders, `'md'` by default */
     size?: MantineSize | (string & {});
 }
 export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesApiProps<ColorPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
@@ -31,13 +30,13 @@ export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesAp
     fullWidth?: boolean;
     /** Determines whether interactive elements should be focusable, `true` by default */
     focusable?: boolean;
-    /** Saturation slider aria-label */
+    /** Saturation slider `aria-label` */
     saturationLabel?: string;
-    /** Hue slider aria-label */
+    /** Hue slider `aria-label` */
     hueLabel?: string;
-    /** Alpha slider aria-label */
+    /** Alpha slider `aria-label` */
     alphaLabel?: string;
-    /** Called when color swatch is clicked */
+    /** Called when one of the color swatches is clicked */
     onColorSwatchClick?(color: string): void;
 }
 export type ColorPickerFactory = Factory<{
@@ -45,12 +44,10 @@ export type ColorPickerFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: ColorPickerStylesNames;
     vars: ColorPickerCssVariables;
-    variant: ColorPickerVariant;
 }>;
 export declare const ColorPicker: import("../../core").MantineComponent<{
     props: ColorPickerProps;
     ref: HTMLDivElement;
     stylesNames: ColorPickerStylesNames;
     vars: ColorPickerCssVariables;
-    variant: ColorPickerVariant;
 }>;

package/lib/components/ColorPicker/Saturation/Saturation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ElementProps, MantineSize } from '../../../core';
 import { HsvaColor } from '../ColorPicker.types';
 export interface SaturationProps extends ElementProps<'div', 'onChange'> {
@@ -12,7 +11,7 @@ export interface SaturationProps extends ElementProps<'div', 'onChange'> {
     color: string;
     focusable?: boolean;
 }
-export declare function Saturation({ className, onChange, onChangeEnd, value, saturationLabel, focusable, size, color, onScrubStart, onScrubEnd, ...others }: SaturationProps): JSX.Element;
+export declare function Saturation({ className, onChange, onChangeEnd, value, saturationLabel, focusable, size, color, onScrubStart, onScrubEnd, ...others }: SaturationProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Saturation {
     var displayName: string;
 }

package/lib/components/ColorPicker/index.d.ts

@@ -1,2 +1,3 @@
 export { ColorPicker } from './ColorPicker';
-export type { ColorPickerCssVariables, ColorPickerFactory, ColorPickerProps, ColorPickerStylesNames, ColorPickerVariant, } from './ColorPicker';
+export * from './converters';
+export type { ColorPickerCssVariables, ColorPickerFactory, ColorPickerProps, ColorPickerStylesNames, __ColorPickerProps, } from './ColorPicker';

package/lib/components/ColorSwatch/ColorSwatch.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 import { BoxProps, MantineRadius, StylesApiProps, PolymorphicFactory } from '../../core';
 export type ColorSwatchStylesNames = 'root' | 'alphaOverlay' | 'shadowOverlay' | 'colorOverlay' | 'childrenOverlay';
-export type ColorSwatchVariant = string;
 export type ColorSwatchCssVariables = {
     root: '--cs-radius' | '--cs-size';
 };
 export interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {
-    /** Color to display */
+    /** Color to display, not related to `theme.colors` – supports only CSS color values */
     color: string;
-    /** Width and height of the swatch, any valid CSS value, numbers are converted to rem (1rem = 16px), `'1.75rem'` by default */
+    /** Controls `width` and `height` of the swatch, any valid CSS value, numbers are converted to rem */
     size?: React.CSSProperties['width'];
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem (1rem = 16px), `'1.75rem'` by default */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem */
     radius?: MantineRadius | (string & {}) | number;
-    /** Determines whether the swatch should have inner box-shadow, `true` by default */
+    /** Determines whether the swatch should have inner `box-shadow`, `true` by default */
     withShadow?: boolean;
     /** Content rendered inside the swatch */
     children?: React.ReactNode;
@@ -23,7 +22,6 @@ export type ColorSwatchFactory = PolymorphicFactory<{
     defaultComponent: 'div';
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
-    variant: ColorSwatchVariant;
 }>;
 export declare const ColorSwatch: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, ColorSwatchProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(ColorSwatchProps & {
     component?: any;
@@ -37,5 +35,10 @@ export declare const ColorSwatch: (<C = "div">(props: import("../../core/factory
     defaultComponent: 'div';
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
-    variant: ColorSwatchVariant;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: ColorSwatchProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: ColorSwatchStylesNames;
+    vars: ColorSwatchCssVariables;
 }> & Record<string, never>;

package/lib/components/ColorSwatch/index.d.ts

@@ -1,2 +1,2 @@
 export { ColorSwatch } from './ColorSwatch';
-export type { ColorSwatchCssVariables, ColorSwatchFactory, ColorSwatchProps, ColorSwatchStylesNames, ColorSwatchVariant, } from './ColorSwatch';
+export type { ColorSwatchCssVariables, ColorSwatchFactory, ColorSwatchProps, ColorSwatchStylesNames, } from './ColorSwatch';

package/lib/components/Combobox/Combobox.context.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { GetStylesApi, MantineSize } from '../../core';
+import type { ComboboxFactory } from './Combobox';
+import type { ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
+import type { ComboboxStore } from './use-combobox/use-combobox';
+export interface ComboboxContextValue {
+    getStyles: GetStylesApi<ComboboxFactory>;
+    store: ComboboxStore;
+    onOptionSubmit?(value: string, optionProps: ComboboxOptionProps): void;
+    size: MantineSize | (string & {});
+    resetSelectionOnOptionHover: boolean | undefined;
+}
+export declare const ComboboxProvider: ({ children, value }: {
+    value: ComboboxContextValue;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useComboboxContext: () => ComboboxContextValue;

package/lib/components/Combobox/Combobox.d.ts

@@ -0,0 +1,129 @@
+import React from 'react';
+import { StylesApiProps, Factory, MantineSize } from '../../core';
+import { __PopoverProps } from '../Popover';
+import { ComboboxStore } from './use-combobox/use-combobox';
+import { ComboboxTarget } from './ComboboxTarget/ComboboxTarget';
+import { ComboboxDropdown } from './ComboboxDropdown/ComboboxDropdown';
+import { ComboboxOptions } from './ComboboxOptions/ComboboxOptions';
+import { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
+import { ComboboxSearch } from './ComboboxSearch/ComboboxSearch';
+import { ComboboxEmpty } from './ComboboxEmpty/ComboboxEmpty';
+import { ComboboxChevron } from './ComboboxChevron/ComboboxChevron';
+import { ComboboxFooter } from './ComboboxFooter/ComboboxFooter';
+import { ComboboxHeader } from './ComboboxHeader/ComboboxHeader';
+import { ComboboxEventsTarget } from './ComboboxEventsTarget/ComboboxEventsTarget';
+import { ComboboxDropdownTarget } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
+import { ComboboxGroup } from './ComboboxGroup/ComboboxGroup';
+export type ComboboxStylesNames = 'options' | 'dropdown' | 'option' | 'search' | 'empty' | 'footer' | 'header' | 'group' | 'groupLabel';
+export type ComboboxCSSVariables = {
+    options: '--combobox-option-fz' | '--combobox-option-padding';
+    dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';
+};
+export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {
+    __staticSelector?: string;
+    /** Combobox content */
+    children?: React.ReactNode;
+    /** Combobox store, can be used to control combobox state */
+    store?: ComboboxStore;
+    /** Called when item is selected with `Enter` key or by clicking it */
+    onOptionSubmit?(value: string, optionProps: ComboboxOptionProps): void;
+    /** Controls items `font-size` and `padding`, `'sm'` by default */
+    size?: MantineSize | (string & {});
+    /** Controls `padding` of the dropdown, `4` by default */
+    dropdownPadding?: React.CSSProperties['padding'];
+    /** Determines whether selection should be reset when option is hovered, `false` by default */
+    resetSelectionOnOptionHover?: boolean;
+}
+export type ComboboxFactory = Factory<{
+    props: ComboboxProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxStylesNames;
+    vars: ComboboxCSSVariables;
+    staticComponents: {
+        Target: typeof ComboboxTarget;
+        Dropdown: typeof ComboboxDropdown;
+        Options: typeof ComboboxOptions;
+        Option: typeof ComboboxOption;
+        Search: typeof ComboboxSearch;
+        Empty: typeof ComboboxEmpty;
+        Chevron: typeof ComboboxChevron;
+        Footer: typeof ComboboxFooter;
+        Header: typeof ComboboxHeader;
+        EventsTarget: typeof ComboboxEventsTarget;
+        DropdownTarget: typeof ComboboxDropdownTarget;
+        Group: typeof ComboboxGroup;
+    };
+}>;
+export declare function Combobox(_props: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Combobox {
+    var classes: any;
+    var displayName: string;
+    var Target: import("../../core").MantineComponent<{
+        props: import("./ComboboxTarget/ComboboxTarget").ComboboxTargetProps;
+        ref: HTMLElement;
+        compound: true;
+    }>;
+    var Dropdown: import("../../core").MantineComponent<{
+        props: import("./ComboboxDropdown/ComboboxDropdown").ComboboxDropdownProps;
+        ref: HTMLDivElement;
+        stylesNames: "dropdown";
+        compound: true;
+    }>;
+    var Options: import("../../core").MantineComponent<{
+        props: import("./ComboboxOptions/ComboboxOptions").ComboboxOptionsProps;
+        ref: HTMLDivElement;
+        stylesNames: "options";
+        compound: true;
+    }>;
+    var Option: import("../../core").MantineComponent<{
+        props: ComboboxOptionProps;
+        ref: HTMLDivElement;
+        stylesNames: "option";
+        compound: true;
+    }>;
+    var Search: import("../../core").MantineComponent<{
+        props: import("./ComboboxSearch/ComboboxSearch").ComboboxSearchProps;
+        ref: HTMLInputElement;
+        stylesNames: import("..").InputStylesNames;
+    }>;
+    var Empty: import("../../core").MantineComponent<{
+        props: import("./ComboboxEmpty/ComboboxEmpty").ComboboxEmptyProps;
+        ref: HTMLDivElement;
+        stylesNames: "empty";
+        compound: true;
+    }>;
+    var Chevron: import("../../core").MantineComponent<{
+        props: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronProps;
+        ref: SVGSVGElement;
+        stylesNames: "chevron";
+        vars: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronCSSVariables;
+    }>;
+    var Footer: import("../../core").MantineComponent<{
+        props: import("./ComboboxFooter/ComboboxFooter").ComboboxFooterProps;
+        ref: HTMLDivElement;
+        stylesNames: "footer";
+        compound: true;
+    }>;
+    var Header: import("../../core").MantineComponent<{
+        props: import("./ComboboxHeader/ComboboxHeader").ComboboxHeaderProps;
+        ref: HTMLDivElement;
+        stylesNames: "header";
+        compound: true;
+    }>;
+    var EventsTarget: import("../../core").MantineComponent<{
+        props: import("./ComboboxEventsTarget/ComboboxEventsTarget").ComboboxEventsTargetProps;
+        ref: HTMLElement;
+        compound: true;
+    }>;
+    var DropdownTarget: import("../../core").MantineComponent<{
+        props: import("./ComboboxDropdownTarget/ComboboxDropdownTarget").ComboboxDropdownTargetProps;
+        ref: HTMLElement;
+        compound: true;
+    }>;
+    var Group: import("../../core").MantineComponent<{
+        props: import("./ComboboxGroup/ComboboxGroup").ComboboxGroupProps;
+        ref: HTMLDivElement;
+        stylesNames: import("./ComboboxGroup/ComboboxGroup").ComboboxGroupStylesNames;
+        compound: true;
+    }>;
+}

package/lib/components/Combobox/Combobox.types.d.ts

@@ -1,7 +1,9 @@
+import type { ComboboxProps, ComboboxStylesNames } from './Combobox';
+import type { OptionsFilter } from './OptionsDropdown/OptionsDropdown';
 export interface ComboboxItem {
     value: string;
-    label?: string;
-    [key: string]: any;
+    label: string;
+    disabled?: boolean;
 }
 export interface ComboboxItemGroup {
     group: string;
@@ -13,3 +15,30 @@ export interface ComboboxParsedItemGroup {
 }
 export type ComboboxData = (string | ComboboxItem | ComboboxItemGroup)[];
 export type ComboboxParsedItem = ComboboxItem | ComboboxParsedItemGroup;
+export type ComboboxLikeStylesNames = Exclude<ComboboxStylesNames, 'header' | 'footer' | 'search'>;
+export interface ComboboxLikeProps {
+    /** Data used to generate options */
+    data?: ComboboxData;
+    /** Controlled dropdown opened state */
+    dropdownOpened?: boolean;
+    /** Uncontrolled dropdown initial opened state */
+    defaultDropdownOpened?: boolean;
+    /** Called when dropdown opens */
+    onDropdownOpen?(): void;
+    /** Called when dropdown closes */
+    onDropdownClose?(): void;
+    /** Determines whether the first option should be selected when value changes, `false` by default */
+    selectFirstOptionOnChange?: boolean;
+    /** Called when option is submitted from dropdown with mouse click or `Enter` key */
+    onOptionSubmit?(value: string): void;
+    /** Props passed down to `Combobox` component */
+    comboboxProps?: ComboboxProps;
+    /** Function based on which items are filtered and sorted */
+    filter?: OptionsFilter;
+    /** Maximum number of options displayed at a time, `Infinity` by default */
+    limit?: number;
+    /** Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default */
+    withScrollArea?: boolean;
+    /** `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default */
+    maxDropdownHeight?: number | string;
+}

package/lib/components/Combobox/ComboboxChevron/ComboboxChevron.d.ts

@@ -1,8 +1,22 @@
 import React from 'react';
-import { MantineSize } from '../../../core';
-interface ComboboxChevronProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'display'> {
-    size: MantineSize | (string & {});
-    error: React.ReactNode;
+import { MantineSize, BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
+export type ComboboxChevronStylesNames = 'chevron';
+export type ComboboxChevronCSSVariables = {
+    chevron: '--combobox-chevron-size';
+};
+export interface ComboboxChevronProps extends BoxProps, StylesApiProps<ComboboxChevronFactory>, ElementProps<'svg', 'opacity' | 'display'> {
+    size?: MantineSize | (string & {});
+    error?: React.ReactNode;
 }
-export declare function ComboboxChevron({ size, error, style, className, ...others }: ComboboxChevronProps): JSX.Element;
-export {};
+export type ComboboxChevronFactory = Factory<{
+    props: ComboboxChevronProps;
+    ref: SVGSVGElement;
+    stylesNames: ComboboxChevronStylesNames;
+    vars: ComboboxChevronCSSVariables;
+}>;
+export declare const ComboboxChevron: import("../../../core").MantineComponent<{
+    props: ComboboxChevronProps;
+    ref: SVGSVGElement;
+    stylesNames: ComboboxChevronStylesNames;
+    vars: ComboboxChevronCSSVariables;
+}>;

package/lib/components/Combobox/ComboboxDropdown/ComboboxDropdown.d.ts

@@ -0,0 +1,19 @@
+import { Factory } from '../../../core';
+import { PopoverDropdownProps } from '../../Popover';
+export type ComboboxDropdownStylesNames = 'dropdown';
+export interface ComboboxDropdownProps extends PopoverDropdownProps {
+    /** Determines whether the dropdown should be hidden, for example, when there are no options to display */
+    hidden?: boolean;
+}
+export type ComboboxDropdownFactory = Factory<{
+    props: ComboboxDropdownProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxDropdownStylesNames;
+    compound: true;
+}>;
+export declare const ComboboxDropdown: import("../../../core").MantineComponent<{
+    props: ComboboxDropdownProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxDropdownStylesNames;
+    compound: true;
+}>;

package/lib/components/Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Factory } from '../../../core';
+export interface ComboboxDropdownTargetProps {
+    /** Target element */
+    children: React.ReactNode;
+    /** Key of the prop that should be used to access element ref */
+    refProp?: string;
+}
+export type ComboboxDropdownTargetFactory = Factory<{
+    props: ComboboxDropdownTargetProps;
+    ref: HTMLElement;
+    compound: true;
+}>;
+export declare const ComboboxDropdownTarget: import("../../../core").MantineComponent<{
+    props: ComboboxDropdownTargetProps;
+    ref: HTMLElement;
+    compound: true;
+}>;

package/lib/components/Combobox/ComboboxEmpty/ComboboxEmpty.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+export type ComboboxEmptyStylesNames = 'empty';
+export interface ComboboxEmptyProps extends BoxProps, StylesApiProps<ComboboxEmptyFactory>, ElementProps<'div'> {
+}
+export type ComboboxEmptyFactory = Factory<{
+    props: ComboboxEmptyProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxEmptyStylesNames;
+    compound: true;
+}>;
+export declare const ComboboxEmpty: import("../../../core").MantineComponent<{
+    props: ComboboxEmptyProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxEmptyStylesNames;
+    compound: true;
+}>;

package/lib/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Factory } from '../../../core';
+export interface ComboboxEventsTargetProps {
+    /** Target element */
+    children: React.ReactNode;
+    /** Key of the prop that should be used to access element ref */
+    refProp?: string;
+    /** Determines whether component should respond to keyboard events, `true` by default */
+    withKeyboardNavigation?: boolean;
+    /** Determines whether the target should have `aria-` attributes, `true` by default */
+    withAriaAttributes?: boolean;
+    /** Determines which events should be handled by the target element.
+     * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.
+     * `input` by default.
+     * */
+    targetType?: 'button' | 'input';
+}
+export type ComboboxEventsTargetFactory = Factory<{
+    props: ComboboxEventsTargetProps;
+    ref: HTMLElement;
+    compound: true;
+}>;
+export declare const ComboboxEventsTarget: import("../../../core").MantineComponent<{
+    props: ComboboxEventsTargetProps;
+    ref: HTMLElement;
+    compound: true;
+}>;