@mantine/core 8.3.15 → 9.0.0-alpha.1

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

@@ -1,5 +1,15 @@
-import { ColorSliderProps } from '../ColorSlider/ColorSlider';
-export interface AlphaSliderProps extends Omit<ColorSliderProps, 'maxValue' | 'overlays' | 'round'> {
+import { Factory } from '../../../core';
+import { ColorSliderOptions, ColorSliderStylesNames } from '../ColorSlider/ColorSlider';
+export interface AlphaSliderProps extends ColorSliderOptions {
     color: string;
 }
-export declare const AlphaSlider: import("react").ForwardRefExoticComponent<AlphaSliderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type AlphaSliderFactory = Factory<{
+    props: AlphaSliderProps;
+    ref: HTMLDivElement;
+    stylesNames: ColorSliderStylesNames;
+}>;
+export declare const AlphaSlider: import("../../..").MantineComponent<{
+    props: AlphaSliderProps;
+    ref: HTMLDivElement;
+    stylesNames: ColorSliderStylesNames;
+}>;

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

@@ -4,8 +4,5 @@ interface ColorPickerContextValue {
     getStyles: GetStylesApi<ColorPickerFactory>;
     unstyled: boolean | undefined;
 }
-export declare const ColorPickerProvider: ({ children, value }: {
-    value: ColorPickerContextValue;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useColorPickerContext: () => ColorPickerContextValue | null;
+export declare const ColorPickerContext: import("react").Context<ColorPickerContextValue | null>;
 export {};

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

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineSize, StylesApiProps } 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 ColorPickerCssVariables = {
@@ -13,22 +13,22 @@ export interface __ColorPickerProps {
     onChange?: (value: string) => void;
     /** Called when the user stops dragging one of the sliders or changes the value with keyboard */
     onChangeEnd?: (value: string) => void;
-    /** Color format @default `'hex'` */
+    /** Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' */
     format?: ColorFormat;
-    /** Determines whether the color picker should be displayed @default `true` */
+    /** If `false`, the component displays only swatches @default true */
     withPicker?: boolean;
     /** A list of colors used to display swatches list below the color picker */
     swatches?: string[];
-    /** Number of swatches per row @default `7` */
+    /** Number of swatches per row @default 7 */
     swatchesPerRow?: number;
-    /** Controls size of hue, alpha and saturation sliders @default `'md'` */
+    /** Component size @default 'md' */
     size?: MantineSize | (string & {});
 }
 export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesApiProps<ColorPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     __staticSelector?: string;
-    /** If set, the component takes 100% width of its container @default `false` */
+    /** If set, the component takes 100% width of its container @default false */
     fullWidth?: boolean;
-    /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default `true` */
+    /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */
     focusable?: boolean;
     /** Saturation slider `aria-label` */
     saturationLabel?: string;
@@ -38,6 +38,10 @@ export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesAp
     alphaLabel?: string;
     /** Called when one of the color swatches is clicked */
     onColorSwatchClick?: (color: string) => void;
+    /** Hidden input `name` attribute, if not set, the input will not be rendered */
+    name?: string;
+    /** Props spread to the hidden input */
+    hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;
 }
 export type ColorPickerFactory = Factory<{
     props: ColorPickerProps;

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

@@ -1,12 +1,19 @@
 import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
 export type ColorSliderStylesNames = 'slider' | 'sliderOverlay' | 'thumb';
 export interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {
+    /** Controlled component value */
     value: number;
+    /** Called when value changes */
     onChange?: (value: number) => void;
+    /** Called when user stops dragging the slider or uses keyboard to change value */
     onChangeEnd?: (value: number) => void;
+    /** Called when user starts dragging the slider */
     onScrubStart?: () => void;
+    /** Called when user stops dragging the slider */
     onScrubEnd?: () => void;
+    /** Slider size @default 'md' */
     size?: MantineSize | (string & {});
+    /** If set, slider thumb can be focused @default true */
     focusable?: boolean;
 }
 export interface ColorSliderProps extends BoxProps, StylesApiProps<ColorSliderFactory>, __ColorSliderProps, ElementProps<'div', 'onChange'> {
@@ -16,6 +23,7 @@ export interface ColorSliderProps extends BoxProps, StylesApiProps<ColorSliderFa
     round: boolean;
     thumbColor?: string;
 }
+export type ColorSliderOptions = Omit<ColorSliderProps, 'maxValue' | 'overlays' | 'round' | 'thumbColor'>;
 export type ColorSliderFactory = Factory<{
     props: ColorSliderProps;
     ref: HTMLDivElement;

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

@@ -1,4 +1,14 @@
-import { ColorSliderProps } from '../ColorSlider/ColorSlider';
-export interface HueSliderProps extends Omit<ColorSliderProps, 'maxValue' | 'overlays' | 'round'> {
+import { Factory } from '../../../core';
+import { ColorSliderOptions, ColorSliderStylesNames } from '../ColorSlider/ColorSlider';
+export interface HueSliderProps extends ColorSliderOptions {
 }
-export declare const HueSlider: import("react").ForwardRefExoticComponent<HueSliderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type HueSliderFactory = Factory<{
+    props: HueSliderProps;
+    ref: HTMLDivElement;
+    stylesNames: ColorSliderStylesNames;
+}>;
+export declare const HueSlider: import("../../..").MantineComponent<{
+    props: HueSliderProps;
+    ref: HTMLDivElement;
+    stylesNames: ColorSliderStylesNames;
+}>;

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

@@ -8,4 +8,7 @@ export interface SwatchesProps extends ElementProps<'div'> {
     onChangeEnd?: (color: string) => void;
     setValue: (value: string) => void;
 }
-export declare const Swatches: import("react").ForwardRefExoticComponent<SwatchesProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Swatches({ className, datatype, setValue, onChangeEnd, size, focusable, data, swatchesPerRow, value, ...others }: SwatchesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Swatches {
+    var displayName: string;
+}

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

@@ -1,8 +1,11 @@
-export interface ThumbProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface ThumbProps extends React.ComponentProps<'div'> {
     variant?: string;
     position: {
         x: number;
         y: number;
     };
 }
-export declare const Thumb: import("react").ForwardRefExoticComponent<ThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Thumb({ position, ...others }: ThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Thumb {
+    var displayName: string;
+}

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

@@ -1,5 +1,23 @@
+import type { AlphaSliderFactory, AlphaSliderProps } from './AlphaSlider/AlphaSlider';
+import type { __ColorPickerProps, ColorPickerCssVariables, ColorPickerFactory, ColorPickerProps, ColorPickerStylesNames } from './ColorPicker';
+import type { ColorSliderFactory } from './ColorSlider/ColorSlider';
+import type { HueSliderFactory, HueSliderProps } from './HueSlider/HueSlider';
 export { ColorPicker } from './ColorPicker';
 export { AlphaSlider } from './AlphaSlider/AlphaSlider';
 export { HueSlider } from './HueSlider/HueSlider';
 export * from './converters';
-export type { ColorPickerCssVariables, ColorPickerFactory, ColorPickerProps, ColorPickerStylesNames, __ColorPickerProps, } from './ColorPicker';
+export type { ColorPickerProps, ColorPickerCssVariables, ColorPickerFactory, ColorPickerStylesNames, __ColorPickerProps, ColorSliderFactory, HueSliderFactory, HueSliderProps, AlphaSliderFactory, AlphaSliderProps, };
+export declare namespace ColorPicker {
+    type Props = ColorPickerProps;
+    type CssVariables = ColorPickerCssVariables;
+    type Factory = ColorPickerFactory;
+    type StylesNames = ColorPickerStylesNames;
+}
+export declare namespace HueSlider {
+    type Props = HueSliderProps;
+    type Factory = HueSliderFactory;
+}
+export declare namespace AlphaSlider {
+    type Props = AlphaSliderProps;
+    type Factory = AlphaSliderFactory;
+}

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

@@ -6,13 +6,13 @@ export type ColorSwatchCssVariables = {
 export interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {
     /** Valid CSS color to display */
     color: string;
-    /** Controls `width` and `height` of the swatch, any valid CSS value, numbers are converted to rem. @default `28` */
+    /** Swatch `width` and `height`, any valid CSS value, numbers are converted to rem. @default 28 */
     size?: React.CSSProperties['width'];
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default `1000` */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default 1000 */
     radius?: MantineRadius;
-    /** Determines whether the swatch should have inner `box-shadow` @default `true` */
+    /** If set, the swatch has inner `box-shadow` @default true */
     withShadow?: boolean;
-    /** Content displayed inside the swatch */
+    /** Children inside the swatch */
     children?: React.ReactNode;
 }
 export type ColorSwatchFactory = PolymorphicFactory<{
@@ -24,7 +24,7 @@ export type ColorSwatchFactory = PolymorphicFactory<{
 }>;
 export declare const ColorSwatch: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, ColorSwatchProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ColorSwatchProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof ColorSwatchProps> & {
+} & Omit<any, "component" | keyof ColorSwatchProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (ColorSwatchProps & {
@@ -42,7 +42,15 @@ export declare const ColorSwatch: (<C = "div">(props: import("../..").Polymorphi
     defaultComponent: "div";
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
-}> & import("../..").PolymorphicComponentWithProps<{
+}> & {
+    varsResolver: import("../..").VarsResolver<{
+        props: ColorSwatchProps;
+        defaultRef: HTMLDivElement;
+        defaultComponent: "div";
+        stylesNames: ColorSwatchStylesNames;
+        vars: ColorSwatchCssVariables;
+    }>;
+} & import("../..").PolymorphicComponentWithProps<{
     props: ColorSwatchProps;
     defaultRef: HTMLDivElement;
     defaultComponent: "div";

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

@@ -1,2 +1,9 @@
+import type { ColorSwatchCssVariables, ColorSwatchFactory, ColorSwatchProps, ColorSwatchStylesNames } from './ColorSwatch';
 export { ColorSwatch } from './ColorSwatch';
-export type { ColorSwatchCssVariables, ColorSwatchFactory, ColorSwatchProps, ColorSwatchStylesNames, } from './ColorSwatch';
+export type { ColorSwatchProps, ColorSwatchCssVariables, ColorSwatchFactory, ColorSwatchStylesNames, };
+export declare namespace ColorSwatch {
+    type Props = ColorSwatchProps;
+    type CssVariables = ColorSwatchCssVariables;
+    type Factory = ColorSwatchFactory;
+    type StylesNames = ColorSwatchStylesNames;
+}

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

@@ -10,7 +10,4 @@ export interface ComboboxContextValue {
     resetSelectionOnOptionHover: boolean | undefined;
     readOnly: boolean | undefined;
 }
-export declare const ComboboxProvider: ({ children, value }: {
-    value: ComboboxContextValue;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useComboboxContext: () => ComboboxContextValue;
+export declare const ComboboxProvider: import("react").Context<ComboboxContextValue | null>, useComboboxContext: () => ComboboxContextValue;

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

@@ -1,19 +1,19 @@
 import { ExtendComponent, Factory, MantineSize, MantineThemeComponent, StylesApiProps } from '../../core';
 import { __PopoverProps } from '../Popover';
-import { ComboboxChevron } from './ComboboxChevron/ComboboxChevron';
-import { ComboboxClearButton } from './ComboboxClearButton/ComboboxClearButton';
-import { ComboboxDropdown } from './ComboboxDropdown/ComboboxDropdown';
-import { ComboboxDropdownTarget } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
-import { ComboboxEmpty } from './ComboboxEmpty/ComboboxEmpty';
-import { ComboboxEventsTarget } from './ComboboxEventsTarget/ComboboxEventsTarget';
-import { ComboboxFooter } from './ComboboxFooter/ComboboxFooter';
-import { ComboboxGroup } from './ComboboxGroup/ComboboxGroup';
-import { ComboboxHeader } from './ComboboxHeader/ComboboxHeader';
-import { ComboboxHiddenInput } from './ComboboxHiddenInput/ComboboxHiddenInput';
+import { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';
+import { ComboboxClearButton, ComboboxClearButtonProps } from './ComboboxClearButton/ComboboxClearButton';
+import { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';
+import { ComboboxDropdownTarget, ComboboxDropdownTargetProps } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
+import { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';
+import { ComboboxEventsTarget, ComboboxEventsTargetProps } from './ComboboxEventsTarget/ComboboxEventsTarget';
+import { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';
+import { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';
+import { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';
+import { ComboboxHiddenInput, ComboboxHiddenInputProps } from './ComboboxHiddenInput/ComboboxHiddenInput';
 import { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
-import { ComboboxOptions } from './ComboboxOptions/ComboboxOptions';
-import { ComboboxSearch } from './ComboboxSearch/ComboboxSearch';
-import { ComboboxTarget } from './ComboboxTarget/ComboboxTarget';
+import { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';
+import { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';
+import { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';
 import { ComboboxStore } from './use-combobox/use-combobox';
 export type ComboboxStylesNames = 'options' | 'dropdown' | 'option' | 'search' | 'empty' | 'footer' | 'header' | 'group' | 'groupLabel';
 export type ComboboxCSSVariables = {
@@ -28,11 +28,11 @@ export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFa
     store?: ComboboxStore;
     /** Called when item is selected with the `Enter` key or by clicking it */
     onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;
-    /** Controls items `font-size` and `padding` @default `'sm'` */
+    /** Controls items `font-size` and `padding` @default 'sm' */
     size?: MantineSize | (string & {});
-    /** Controls `padding` of the dropdown @default `4` */
+    /** Controls `padding` of the dropdown @default 4 */
     dropdownPadding?: React.CSSProperties['padding'];
-    /** Determines whether selection should be reset when option is hovered @default `false` */
+    /** Determines whether selection should be reset when option is hovered @default false */
     resetSelectionOnOptionHover?: boolean;
     /** Determines whether the `Combobox` value can be changed */
     readOnly?: boolean;
@@ -59,79 +59,148 @@ export type ComboboxFactory = Factory<{
         HiddenInput: typeof ComboboxHiddenInput;
     };
 }>;
-export declare function Combobox(_props: ComboboxProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Combobox {
-    var extend: (c: ExtendComponent<ComboboxFactory>) => MantineThemeComponent;
-    var classes: any;
-    var displayName: string;
-    var Target: import("../..").MantineComponent<{
-        props: import(".").ComboboxTargetProps;
+export declare const Combobox: {
+    (_props: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+    extend: (c: ExtendComponent<ComboboxFactory>) => MantineThemeComponent;
+    classes: any;
+    varsResolver: import("../..").VarsResolver<{
+        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;
+            ClearButton: typeof ComboboxClearButton;
+            HiddenInput: typeof ComboboxHiddenInput;
+        };
+    }>;
+    displayName: string;
+    Target: import("../..").MantineComponent<{
+        props: ComboboxTargetProps;
         ref: HTMLElement;
         compound: true;
     }>;
-    var Dropdown: import("../..").MantineComponent<{
-        props: import(".").ComboboxDropdownProps;
+    Dropdown: import("../..").MantineComponent<{
+        props: ComboboxDropdownProps;
         ref: HTMLDivElement;
         stylesNames: import("./ComboboxDropdown/ComboboxDropdown").ComboboxDropdownStylesNames;
         compound: true;
     }>;
-    var Options: import("../..").MantineComponent<{
-        props: import(".").ComboboxOptionsProps;
+    Options: import("../..").MantineComponent<{
+        props: ComboboxOptionsProps;
         ref: HTMLDivElement;
         stylesNames: import("./ComboboxOptions/ComboboxOptions").ComboboxOptionsStylesNames;
         compound: true;
     }>;
-    var Option: import("../..").MantineComponent<{
+    Option: import("../..").MantineComponent<{
         props: ComboboxOptionProps;
         ref: HTMLDivElement;
         stylesNames: import("./ComboboxOption/ComboboxOption").ComboboxOptionStylesNames;
         compound: true;
     }>;
-    var Search: import("../..").MantineComponent<{
-        props: import(".").ComboboxSearchProps;
+    Search: import("../..").MantineComponent<{
+        props: ComboboxSearchProps;
         ref: HTMLInputElement;
         stylesNames: import("./ComboboxSearch/ComboboxSearch").ComboboxSearchStylesNames;
     }>;
-    var Empty: import("../..").MantineComponent<{
-        props: import(".").ComboboxEmptyProps;
+    Empty: import("../..").MantineComponent<{
+        props: ComboboxEmptyProps;
         ref: HTMLDivElement;
         stylesNames: import("./ComboboxEmpty/ComboboxEmpty").ComboboxEmptyStylesNames;
         compound: true;
     }>;
-    var Chevron: import("../..").MantineComponent<{
-        props: import(".").ComboboxChevronProps;
+    Chevron: import("../..").MantineComponent<{
+        props: ComboboxChevronProps;
         ref: SVGSVGElement;
         stylesNames: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronStylesNames;
         vars: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronCSSVariables;
     }>;
-    var Footer: import("../..").MantineComponent<{
-        props: import(".").ComboboxFooterProps;
+    Footer: import("../..").MantineComponent<{
+        props: ComboboxFooterProps;
         ref: HTMLDivElement;
         stylesNames: import("./ComboboxFooter/ComboboxFooter").ComboboxFooterStylesNames;
         compound: true;
     }>;
-    var Header: import("../..").MantineComponent<{
-        props: import(".").ComboboxHeaderProps;
+    Header: import("../..").MantineComponent<{
+        props: ComboboxHeaderProps;
         ref: HTMLDivElement;
         stylesNames: import("./ComboboxHeader/ComboboxHeader").ComboboxHeaderStylesNames;
         compound: true;
     }>;
-    var EventsTarget: import("../..").MantineComponent<{
-        props: import(".").ComboboxEventsTargetProps;
+    EventsTarget: import("../..").MantineComponent<{
+        props: ComboboxEventsTargetProps;
         ref: HTMLElement;
         compound: true;
     }>;
-    var DropdownTarget: import("../..").MantineComponent<{
-        props: import(".").ComboboxDropdownTargetProps;
+    DropdownTarget: import("../..").MantineComponent<{
+        props: ComboboxDropdownTargetProps;
         ref: HTMLElement;
         compound: true;
     }>;
-    var Group: import("../..").MantineComponent<{
-        props: import(".").ComboboxGroupProps;
+    Group: import("../..").MantineComponent<{
+        props: ComboboxGroupProps;
         ref: HTMLDivElement;
         stylesNames: import("./ComboboxGroup/ComboboxGroup").ComboboxGroupStylesNames;
         compound: true;
     }>;
-    var ClearButton: import("react").ForwardRefExoticComponent<import(".").ComboboxClearButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-    var HiddenInput: typeof ComboboxHiddenInput;
+    ClearButton: typeof ComboboxClearButton;
+    HiddenInput: typeof ComboboxHiddenInput;
+};
+export declare namespace Combobox {
+    type Props = ComboboxProps;
+    type StylesNames = ComboboxStylesNames;
+    type Factory = ComboboxFactory;
+    namespace Dropdown {
+        type Props = ComboboxDropdownProps;
+    }
+    namespace Options {
+        type Props = ComboboxOptionsProps;
+    }
+    namespace Option {
+        type Props = ComboboxOptionProps;
+    }
+    namespace Target {
+        type Props = ComboboxTargetProps;
+    }
+    namespace Chevron {
+        type Props = ComboboxChevronProps;
+    }
+    namespace Empty {
+        type Props = ComboboxEmptyProps;
+    }
+    namespace Search {
+        type Props = ComboboxSearchProps;
+    }
+    namespace Footer {
+        type Props = ComboboxFooterProps;
+    }
+    namespace Header {
+        type Props = ComboboxHeaderProps;
+    }
+    namespace DropdownTarget {
+        type Props = ComboboxDropdownTargetProps;
+    }
+    namespace EventsTarget {
+        type Props = ComboboxEventsTargetProps;
+    }
+    namespace Group {
+        type Props = ComboboxGroupProps;
+    }
+    namespace ClearButton {
+        type Props = ComboboxClearButtonProps;
+    }
+    namespace HiddenInput {
+        type Props = ComboboxHiddenInputProps;
+    }
 }

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

@@ -1,27 +1,28 @@
+import { Primitive } from '../../core';
 import type { ComboboxProps, ComboboxStylesNames } from './Combobox';
 import type { OptionsFilter } from './OptionsDropdown/OptionsDropdown';
-export interface ComboboxStringItem {
-    value: string;
+export interface ComboboxGenericItem<Value extends Primitive = string> {
+    value: Value;
     disabled?: boolean;
 }
-export interface ComboboxItem extends ComboboxStringItem {
+export interface ComboboxItem<Value extends Primitive = string> extends ComboboxGenericItem<Value> {
     label: string;
 }
-export interface ComboboxItemGroup<T = ComboboxItem | string> {
+export interface ComboboxItemGroup<T> {
     group: string;
     items: T[];
 }
-export interface ComboboxParsedItemGroup {
+export interface ComboboxParsedItemGroup<Value extends Primitive = string> {
     group: string;
-    items: ComboboxItem[];
+    items: ComboboxItem<Value>[];
 }
-export type ComboboxStringData = Array<string | ComboboxStringItem | ComboboxItemGroup<string | ComboboxStringItem>> | ReadonlyArray<string | ComboboxStringItem | ComboboxItemGroup<string | ComboboxStringItem>>;
-export type ComboboxData = Array<string | ComboboxItem | ComboboxItemGroup> | ReadonlyArray<string | ComboboxItem | ComboboxItemGroup>;
-export type ComboboxParsedItem = ComboboxItem | ComboboxParsedItemGroup;
+export type ComboboxGenericData<Value extends Primitive = string> = Array<Value | ComboboxGenericItem<Value> | ComboboxItemGroup<Value | ComboboxGenericItem<Value>>> | ReadonlyArray<Value | ComboboxGenericItem<Value> | ComboboxItemGroup<Value | ComboboxGenericItem<Value>>>;
+export type ComboboxData<Value extends Primitive = string> = Array<Value | ComboboxItem<Value> | ComboboxItemGroup<Value | ComboboxGenericItem<Value> | ComboboxItem<Value>>> | ReadonlyArray<Value | ComboboxItem<Value> | ComboboxItemGroup<Value | ComboboxGenericItem<Value> | ComboboxItem<Value>>>;
+export type ComboboxParsedItem<Value extends Primitive = string> = ComboboxItem<Value> | ComboboxParsedItemGroup<Value>;
 export type ComboboxLikeStylesNames = Exclude<ComboboxStylesNames, 'header' | 'footer' | 'search'>;
-export interface ComboboxLikeProps {
+export interface ComboboxLikeProps<Value extends Primitive = string> {
     /** Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render. */
-    data?: ComboboxData;
+    data?: ComboboxData<Value>;
     /** Controlled dropdown opened state */
     dropdownOpened?: boolean;
     /** Uncontrolled dropdown initial opened state */
@@ -35,11 +36,11 @@ export interface ComboboxLikeProps {
     /** If set, the first option is selected when dropdown opens, `false` by default */
     selectFirstOptionOnDropdownOpen?: boolean;
     /** Called when option is submitted from dropdown with mouse click or `Enter` key */
-    onOptionSubmit?: (value: string) => void;
+    onOptionSubmit?: (value: Value) => void;
     /** Props passed down to `Combobox` component */
     comboboxProps?: ComboboxProps;
     /** Function based on which items are filtered and sorted */
-    filter?: OptionsFilter;
+    filter?: OptionsFilter<Value>;
     /** 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 */
@@ -51,3 +52,9 @@ export interface ComboboxLikeRenderOptionInput<T> {
     option: T;
     checked?: boolean;
 }
+export interface ComboboxRenderPillInput<Value extends Primitive = string> {
+    option: ComboboxItem<Primitive>;
+    value?: Value;
+    onRemove?: () => void;
+    disabled?: boolean;
+}

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

@@ -3,4 +3,7 @@ import { InputClearButtonProps } from '../../Input';
 export interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {
     onClear: () => void;
 }
-export declare const ComboboxClearButton: import("react").ForwardRefExoticComponent<ComboboxClearButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function ComboboxClearButton({ size, onMouseDown, onClick, onClear, ...others }: ComboboxClearButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ComboboxClearButton {
+    var displayName: string;
+}

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

@@ -1,5 +1,6 @@
 import { Factory } from '../../../core';
 export interface ComboboxDropdownTargetProps {
+    ref?: React.RefObject<HTMLElement>;
     /** Target element */
     children: React.ReactNode;
     /** Key of the prop that should be used to access element ref */

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

@@ -4,15 +4,15 @@ export interface ComboboxEventsTargetProps {
     children: React.ReactNode;
     /** Key of the prop is used to access element ref */
     refProp?: string;
-    /** If set, the component responds to the keyboard events @default `true` */
+    /** If set, the component responds to the keyboard events @default true */
     withKeyboardNavigation?: boolean;
-    /** If set, the target has `aria-` attributes @default `true` */
+    /** If set, the target has `aria-` attributes @default true */
     withAriaAttributes?: boolean;
-    /** If set, the target has `aria-expanded` attribute @default `false` */
+    /** If set, the target has `aria-expanded` attribute @default false */
     withExpandedAttribute?: boolean;
     /** Determines which events should be handled by the target element.
      * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.
-     * @default `input`
+     * @default input
      * */
     targetType?: 'button' | 'input';
     /** Input autocomplete attribute */

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

@@ -1,7 +1,8 @@
-export interface ComboboxHiddenInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value'> {
+import { Primitive } from '../../../core';
+export interface ComboboxHiddenInputProps extends Omit<React.ComponentProps<'input'>, 'value'> {
     /** Input value */
-    value: string | string[] | null;
-    /** Divider character to join array values into string @default `','` */
+    value: Primitive | Primitive[] | null;
+    /** Divider character to join array values into string @default ',' */
     valuesDivider?: string;
 }
 export declare function ComboboxHiddenInput({ value, valuesDivider, ...others }: ComboboxHiddenInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
-import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, Primitive } from '../../../core';
 export type ComboboxOptionStylesNames = 'option';
 export interface ComboboxOptionProps extends BoxProps, CompoundStylesApiProps<ComboboxOptionFactory>, ElementProps<'div'> {
     /** Option value */
-    value: string;
+    value: Primitive;
     /** Current active state */
     active?: boolean;
     /** Disabled state */

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

@@ -2,9 +2,9 @@ import { ElementProps, Factory } from '../../../core';
 import { InputProps, InputStylesNames } from '../../Input/Input';
 export type ComboboxSearchStylesNames = InputStylesNames;
 export interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {
-    /** if set, the search input has `aria-` attribute @default `true` */
+    /** if set, the search input has `aria-` attribute @default true */
     withAriaAttributes?: boolean;
-    /** if set, the search input handles keyboard navigation @default `true` */
+    /** if set, the search input handles keyboard navigation @default true */
     withKeyboardNavigation?: boolean;
 }
 export type ComboboxSearchFactory = Factory<{

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

@@ -4,15 +4,15 @@ export interface ComboboxTargetProps {
     children: React.ReactNode;
     /** Key of the prop that is used to access element ref */
     refProp?: string;
-    /** If set, the component responds to keyboard events @default `true` */
+    /** If set, the component responds to keyboard events @default true */
     withKeyboardNavigation?: boolean;
-    /** If set, the target has `aria-` attributes @default `true` */
+    /** If set, the target has `aria-` attributes @default true */
     withAriaAttributes?: boolean;
-    /** If set, the target has `aria-expanded` attribute @default `false` */
+    /** If set, the target has `aria-expanded` attribute @default false */
     withExpandedAttribute?: boolean;
     /** Determines which events is handled by the target element.
      * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.
-     * @default `input`
+     * @default input
      * */
     targetType?: 'button' | 'input';
     /** Input autocomplete attribute */