@mantine/core 7.0.0-alpha.15 → 7.0.0-alpha.16

package/lib/components/Combobox/use-combobox/use-combobox.d.ts

@@ -1,27 +1,59 @@
 /// <reference types="react" />
 export type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';
 export interface ComboboxStore {
+    /** Current dropdown opened state */
     dropdownOpened: boolean;
+    /** Opens dropdown */
     openDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    /** Closes dropdown */
     closeDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    /** Toggles dropdown opened state */
     toggleDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    /** Selected option index */
     selectedOptionIndex: number;
+    /** Selects `Combobox.Option` by index */
     selectOption(index: number): void;
+    /** Selects first `Combobox.Option` with `active` prop.
+     *  If there are no such options, the function does nothing.
+     */
     selectActiveOption(): string | null;
+    /** Selects first `Combobox.Option` that is not disabled.
+     *  If there are no such options, the function does nothing.
+     * */
     selectFirstOption(): string | null;
+    /** Selects next `Combobox.Option` that is not disabled.
+     *  If the current option is the last one, the function selects first option, if `loop` is true.
+     */
     selectNextOption(): string | null;
+    /** Selects previous `Combobox.Option` that is not disabled.
+     *  If the current option is the first one, the function selects last option, if `loop` is true.
+     * */
     selectPreviousOption(): string | null;
+    /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */
     resetSelectedOption(): void;
+    /** Triggers `onClick` event of selected option.
+     *  If there is no selected option, the function does nothing.
+     */
     clickSelectedOption(): void;
+    /** Updates selected option index to currently selected or active option.
+     *  The function is required to be used with searchable components to update selected option index
+     *  when options list changes based on search query.
+     */
     updateSelectedOptionIndex(target?: 'active' | 'selected'): void;
+    /** List id, used for `aria-*` attributes */
     listId: string | null;
+    /** Sets list id */
     setListId(id: string): void;
+    /** Ref of `Combobox.Search` input */
     searchRef: React.MutableRefObject<HTMLInputElement | null>;
+    /** Moves focus to `Combobox.Search` input */
     focusSearchInput(): void;
+    /** Ref of the target element */
     targetRef: React.MutableRefObject<HTMLElement | null>;
+    /** Moves focus to the target element */
     focusTarget(): void;
 }
-interface UseComboboxOptions {
+export interface UseComboboxOptions {
     /** Default value for `dropdownOpened`, `false` by default */
     defaultOpened?: boolean;
     /** Controlled `dropdownOpened` state */
@@ -38,4 +70,3 @@ interface UseComboboxOptions {
     scrollBehavior?: ScrollBehavior;
 }
 export declare function useCombobox({ defaultOpened, opened, onOpenedChange, onDropdownClose, onDropdownOpen, loop, scrollBehavior, }?: UseComboboxOptions): ComboboxStore;
-export {};

package/lib/components/Input/Input.d.ts

@@ -14,8 +14,8 @@ export type InputCssVariables = {
     wrapper: '--input-height' | '--input-fz' | '--input-radius' | '--input-left-section-width' | '--input-right-section-width' | '--input-left-section-pointer-events' | '--input-right-section-pointer-events' | '--input-padding-y' | '--input-margin-top' | '--input-margin-bottom';
 };
 export interface InputStylesCtx {
-    offsetTop: boolean;
-    offsetBottom: boolean;
+    offsetTop: boolean | undefined;
+    offsetBottom: boolean | undefined;
 }
 export interface __InputProps {
     /** Content section rendered on the left side of the input */
@@ -55,6 +55,10 @@ export interface InputProps extends BoxProps, __InputProps, StylesApiProps<Input
     error?: React.ReactNode;
     /** Determines whether the input can have multiple lines, for example when `component="textarea"`, `false` by default */
     multiline?: boolean;
+    /** Input element id */
+    id?: string;
+    /** Determines whether `aria-` and other accessibility attributes should be added to the input, `true` by default */
+    withAria?: boolean;
 }
 export type InputFactory = PolymorphicFactory<{
     props: InputProps;

package/lib/components/Input/InputWrapper.context.d.ts

@@ -5,8 +5,11 @@ interface InputWrapperContextValue {
     offsetTop: boolean;
     offsetBottom: boolean;
     describedBy: string | undefined;
+    inputId: string | undefined;
     getStyles: GetStylesApi<InputWrapperFactory> | null;
 }
-export declare const InputWrapperProvider: import("react").Provider<InputWrapperContextValue>;
-export declare const useInputWrapperContext: () => InputWrapperContextValue;
+export declare const InputWrapperProvider: ({ children, value }: {
+    value: InputWrapperContextValue;
+    children: import("react").ReactNode;
+}) => JSX.Element, useInputWrapperContext: () => InputWrapperContextValue | null;
 export {};

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

@@ -5,6 +5,7 @@ export { InputError } from './InputError/InputError';
 export { InputLabel } from './InputLabel/InputLabel';
 export { InputPlaceholder } from './InputPlaceholder/InputPlaceholder';
 export { useInputProps } from './use-input-props';
+export { useInputWrapperContext } from './InputWrapper.context';
 export type { __InputProps, __BaseInputProps, __InputStylesNames, InputCssVariables, InputFactory, InputProps, InputStylesNames, InputVariant, } from './Input';
 export type { __InputWrapperProps, InputWrapperFactory, InputWrapperProps, InputWrapperStylesNames, } from './InputWrapper/InputWrapper';
 export type { InputDescriptionCssVariables, InputDescriptionFactory, InputDescriptionProps, InputDescriptionStylesNames, InputDescriptionVariant, } from './InputDescription/InputDescription';

package/lib/components/Input/use-input-props.d.ts

@@ -9,33 +9,68 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     __stylesApiProps?: Record<string, any>;
     id?: string;
 }
-export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "vars" | "variant" | "className" | "style" | "unstyled" | "classNames" | "styles" | "size" | "__staticSelector" | "label" | "id" | "required" | "error" | "description" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
+export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "label" | "style" | "className" | "variant" | "size" | "styles" | "description" | "required" | "id" | "__staticSelector" | "unstyled" | "classNames" | "vars" | "error" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
     classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
     styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
     wrapperProps: {
-        className: string | undefined;
-        style: import("../../core").MantineStyleProp;
         children?: import("react").ReactNode;
-        hidden?: boolean | undefined;
-        color?: string | undefined;
         slot?: string | undefined;
+        style: import("../../core").MantineStyleProp;
         title?: string | undefined;
+        className: string | undefined;
+        color?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        hidden?: boolean | undefined;
         key?: import("react").Key | null | undefined;
-        id: string;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
-        role?: import("react").AriaRole | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
+        radioGroup?: string | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "false" | "true") | undefined;
-        'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "both" | "list" | undefined;
         'aria-busy'?: (boolean | "false" | "true") | undefined;
         'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
         'aria-colindex'?: number | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: (boolean | "false" | "true") | undefined;
@@ -44,7 +79,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         'aria-expanded'?: (boolean | "false" | "true") | undefined;
         'aria-flowto'?: string | undefined;
         'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-        'aria-haspopup'?: boolean | "listbox" | "grid" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
         'aria-hidden'?: (boolean | "false" | "true") | undefined;
         'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
@@ -61,7 +96,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         'aria-posinset'?: number | undefined;
         'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-readonly'?: (boolean | "false" | "true") | undefined;
-        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
         'aria-required'?: (boolean | "false" | "true") | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
@@ -69,7 +104,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         'aria-rowspan'?: number | undefined;
         'aria-selected'?: (boolean | "false" | "true") | undefined;
         'aria-setsize'?: number | undefined;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
         'aria-valuemax'?: number | undefined;
         'aria-valuemin'?: number | undefined;
         'aria-valuenow'?: number | undefined;
@@ -239,41 +274,6 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
-        nonce?: string | undefined;
-        placeholder?: string | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
-        translate?: "no" | "yes" | undefined;
-        radioGroup?: string | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        resource?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "off" | "on" | undefined;
-        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-        is?: string | undefined;
         label: import("react").ReactNode;
         description: import("react").ReactNode;
         error: import("react").ReactNode;
@@ -288,7 +288,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
         size: (string & {}) | import("../../core").MantineSize | undefined;
         inputContainer: ((children: import("react").ReactNode) => import("react").ReactNode) | undefined;
-        inputWrapperOrder: ("input" | "label" | "error" | "description")[] | undefined;
+        inputWrapperOrder: ("input" | "label" | "description" | "error")[] | undefined;
         withAsterisk: boolean | undefined;
         variant: string | undefined;
     } & BoxProps;
@@ -297,7 +297,6 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
         styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
         unstyled: boolean | undefined;
-        id: string;
         size: (string & {}) | import("../../core").MantineSize | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any>;

package/lib/components/InputBase/InputBase.d.ts

@@ -7,6 +7,8 @@ export interface InputBaseProps extends BoxProps, __BaseInputProps, StylesApiPro
     wrapperProps?: Record<string, any>;
     /** Determines whether the input can have multiple lines, for example when `component="textarea"`, `false` by default */
     multiline?: boolean;
+    /** Determines whether `aria-` and other accessibility attributes should be added to the input, `true` by default */
+    withAria?: boolean;
 }
 export type InputBaseFactory = PolymorphicFactory<{
     props: InputBaseProps;

package/lib/components/Pill/Pill.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineRadius } from '../../core';
+import { PillGroup } from './PillGroup/PillGroup';
+export type PillStylesNames = 'root' | 'label' | 'remove';
+export type PillVariant = 'default' | 'contrast';
+export type PillCssVariables = {
+    root: '--pill-fz' | '--pill-radius' | '--pill-height';
+};
+export interface PillProps extends BoxProps, StylesApiProps<PillFactory>, ElementProps<'div'> {
+    /** Controls pill `font-size` and `padding`, `'sm'` by default */
+    size?: MantineSize;
+    /** Determines whether the remove button should be displayed, `false` by default */
+    withRemoveButton?: boolean;
+    /** Called when the remove button is clicked */
+    onRemove?(): void;
+    /** Props passed down to the remove button */
+    removeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `'xl'` by default. */
+    radius?: MantineRadius | (string & {}) | number;
+    /** If pill is disabled it has higher contrast to be visible on the disabled input background and the remove button is hidden */
+    disabled?: boolean;
+}
+export type PillFactory = Factory<{
+    props: PillProps;
+    ref: HTMLDivElement;
+    stylesNames: PillStylesNames;
+    vars: PillCssVariables;
+    variant: PillVariant;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+    staticComponents: {
+        Group: typeof PillGroup;
+    };
+}>;
+export declare const Pill: import("../../core").MantineComponent<{
+    props: PillProps;
+    ref: HTMLDivElement;
+    stylesNames: PillStylesNames;
+    vars: PillCssVariables;
+    variant: PillVariant;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+    staticComponents: {
+        Group: typeof PillGroup;
+    };
+}>;

package/lib/components/Pill/PillGroup/PillGroup.d.ts

@@ -0,0 +1,31 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../../core';
+export type PillGroupStylesNames = 'root';
+export type PillGroupCssVariables = {
+    root: '--pg-gap';
+};
+export interface PillGroupProps extends BoxProps, StylesApiProps<PillGroupFactory>, ElementProps<'div'> {
+    /** Controls spacing between pills, by default controlled by `size` */
+    gap?: MantineSize | (string & {}) | number;
+    /** Controls size of the child `Pill` components and gap between them, `'sm'` by default */
+    size?: MantineSize | (string & {});
+    /** Determines whether child `Pill` components should be disabled */
+    disabled?: boolean;
+}
+export type PillGroupFactory = Factory<{
+    props: PillGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: PillGroupStylesNames;
+    vars: PillGroupCssVariables;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;
+export declare const PillGroup: import("../../../core").MantineComponent<{
+    props: PillGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: PillGroupStylesNames;
+    vars: PillGroupCssVariables;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;

package/lib/components/Pill/PillGroup.context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MantineSize } from '../../core';
+export interface PillGroupContextValue {
+    size: MantineSize | (string & {}) | undefined;
+    disabled: boolean | undefined;
+}
+export declare const PillGroupProvider: ({ children, value }: {
+    value: PillGroupContextValue;
+    children: import("react").ReactNode;
+}) => JSX.Element, usePillGroupContext: () => PillGroupContextValue | null;

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

@@ -0,0 +1,4 @@
+export { Pill } from './Pill';
+export { PillGroup } from './PillGroup/PillGroup';
+export type { PillCssVariables, PillFactory, PillProps, PillStylesNames, PillVariant, } from './Pill';
+export type { PillGroupCssVariables, PillGroupFactory, PillGroupProps, PillGroupStylesNames, } from './PillGroup/PillGroup';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MantineSize } from '../../core';
+import { InputVariant } from '../Input';
+export interface PillsInputContextValue {
+    fieldRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    size: MantineSize | (string & {});
+    disabled: boolean | undefined;
+    hasError: boolean | undefined;
+    variant: InputVariant | (string & {}) | undefined;
+}
+export declare const PillsInputProvider: ({ children, value }: {
+    value: PillsInputContextValue;
+    children: React.ReactNode;
+}) => JSX.Element, usePillsInputContext: () => PillsInputContextValue | null;

package/lib/components/PillsInput/PillsInput.d.ts

@@ -0,0 +1,22 @@
+import { ElementProps, Factory } from '../../core';
+import { __InputStylesNames } from '../Input';
+import { InputBaseProps } from '../InputBase';
+import { PillsInputField } from './PillsInputField/PillsInputField';
+export interface PillsInputProps extends InputBaseProps, ElementProps<'div', 'size'> {
+}
+export type PillsInputFactory = Factory<{
+    props: PillsInputProps;
+    ref: HTMLInputElement;
+    stylesNames: __InputStylesNames;
+    staticComponents: {
+        Field: typeof PillsInputField;
+    };
+}>;
+export declare const PillsInput: import("../../core").MantineComponent<{
+    props: PillsInputProps;
+    ref: HTMLInputElement;
+    stylesNames: __InputStylesNames;
+    staticComponents: {
+        Field: typeof PillsInputField;
+    };
+}>;

package/lib/components/PillsInput/PillsInputField/PillsInputField.d.ts

@@ -0,0 +1,22 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../../core';
+export type PillsInputFieldStylesNames = 'root';
+export interface PillsInputFieldProps extends BoxProps, StylesApiProps<PillsInputFieldFactory>, ElementProps<'input', 'type'> {
+    /** Controls input styles when focused. If `auto` the input is hidden when not focused. If `visible` the input will always remain visible. `'visible'` by default  */
+    type?: 'auto' | 'visible' | 'hidden';
+}
+export type PillsInputFieldFactory = Factory<{
+    props: PillsInputFieldProps;
+    ref: HTMLInputElement;
+    stylesNames: PillsInputFieldStylesNames;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;
+export declare const PillsInputField: import("../../../core").MantineComponent<{
+    props: PillsInputFieldProps;
+    ref: HTMLInputElement;
+    stylesNames: PillsInputFieldStylesNames;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;

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

@@ -0,0 +1,4 @@
+export { PillsInput } from './PillsInput';
+export { PillsInputField } from './PillsInputField/PillsInputField';
+export type { PillsInputFactory, PillsInputProps } from './PillsInput';
+export type { PillsInputFieldFactory, PillsInputFieldProps, PillsInputFieldStylesNames, } from './PillsInputField/PillsInputField';

package/lib/components/UnstyledButton/UnstyledButton.d.ts

@@ -12,7 +12,7 @@ export type UnstyledButtonFactory = PolymorphicFactory<{
 }>;
 export declare const UnstyledButton: (<C = "button">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, UnstyledButtonProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(UnstyledButtonProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, keyof UnstyledButtonProps | "component"> & {
+} & Omit<Omit<any, "ref">, "component" | keyof UnstyledButtonProps> & {
     ref?: any;
 }) | (UnstyledButtonProps & {
     component: React.ElementType<any>;

package/lib/components/index.d.ts

@@ -42,6 +42,8 @@ export * from './NativeSelect';
 export * from './Notification';
 export * from './Overlay';
 export * from './Paper';
+export * from './Pill';
+export * from './PillsInput';
 export * from './Popover';
 export * from './Portal';
 export * from './ScrollArea';

package/lib/core/Box/Box.d.ts

@@ -22,7 +22,7 @@ export interface BoxComponentProps extends BoxProps {
 }
 export declare const Box: (<C = "div">(props: import("../factory/create-polymorphic-component").PolymorphicComponentProps<C, BoxComponentProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(BoxComponentProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, keyof BoxComponentProps | "component"> & {
+} & Omit<Omit<any, "ref">, "component" | keyof BoxComponentProps> & {
     ref?: any;
 }) | (BoxComponentProps & {
     component: React.ElementType<any>;

package/lib/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.d.ts

@@ -1,2 +1,2 @@
 import { UseMediaQueryOptions } from '@mantine/hooks';
-export declare function useComputedColorScheme(defaultValue: 'light' | 'dark', options?: UseMediaQueryOptions): "light" | "dark";
+export declare function useComputedColorScheme(defaultValue: 'light' | 'dark', options?: UseMediaQueryOptions): "dark" | "light";

package/lib/core/utils/create-optional-context/create-optional-context.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function createOptionalContext<ContextValue>(initialValue?: ContextValue | null): readonly [({ children, value }: {
+    value: ContextValue;
+    children: React.ReactNode;
+}) => JSX.Element, () => ContextValue | null];

package/lib/core/utils/index.d.ts

@@ -6,6 +6,7 @@ export { filterProps } from './filter-props/filter-props';
 export { isNumberLike } from './is-number-like/is-number-like';
 export { isElement } from './is-element/is-element';
 export { createSafeContext } from './create-safe-context/create-safe-context';
+export { createOptionalContext } from './create-optional-context/create-optional-context';
 export { getSafeId } from './get-safe-id/get-safe-id';
 export { createScopedKeydownHandler } from './create-scoped-keydown-handler/create-scoped-keydown-handler';
 export { findElementAncestor } from './find-element-ancestor/find-element-ancestor';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "7.0.0-alpha.15",
+  "version": "7.0.0-alpha.16",
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
@@ -34,7 +34,7 @@
     "design"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "7.0.0-alpha.15",
+    "@mantine/hooks": "7.0.0-alpha.16",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },