@mantine/core 8.3.13 → 9.0.0-alpha.0

package/lib/components/Card/Card.d.ts

@@ -7,14 +7,16 @@ export type CardCssVariables = {
 export interface CardProps extends BoxProps, StylesApiProps<CardFactory> {
     /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */
     shadow?: MantineShadow;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default `theme.defaultRadius` */
+    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */
     radius?: MantineRadius;
     /** Adds border to the card */
     withBorder?: boolean;
-    /** Key of `theme.spacing` or any valid CSS value to set padding @default `'md'` */
+    /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */
     padding?: MantineSpacing;
     /** Card content */
     children?: React.ReactNode;
+    /** Card orientation @default 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
 }
 export type CardFactory = PolymorphicFactory<{
     props: CardProps;
@@ -28,7 +30,7 @@ export type CardFactory = PolymorphicFactory<{
 }>;
 export declare const Card: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, CardProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CardProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof CardProps> & {
+} & Omit<any, "component" | keyof CardProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (CardProps & {
@@ -52,7 +54,18 @@ export declare const Card: (<C = "div">(props: import("../..").PolymorphicCompon
     staticComponents: {
         Section: typeof CardSection;
     };
-}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+}> & {
+    varsResolver: import("../..").VarsResolver<{
+        props: CardProps;
+        defaultRef: HTMLDivElement;
+        defaultComponent: "div";
+        stylesNames: CardStylesNames;
+        vars: CardCssVariables;
+        staticComponents: {
+            Section: typeof CardSection;
+        };
+    }>;
+} & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
     props: CardProps;
     defaultRef: HTMLDivElement;
     defaultComponent: "div";

package/lib/components/Card/CardSection/CardSection.d.ts

@@ -15,7 +15,7 @@ export type CardSectionFactory = PolymorphicFactory<{
 }>;
 export declare const CardSection: (<C = "div">(props: import("../../..").PolymorphicComponentProps<C, CardSectionProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CardSectionProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof CardSectionProps> & {
+} & Omit<any, "component" | keyof CardSectionProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (CardSectionProps & {

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

@@ -1,4 +1,15 @@
+import type { CardCssVariables, CardFactory, CardProps, CardStylesNames } from './Card';
+import type { CardSectionProps } from './CardSection/CardSection';
 export { Card } from './Card';
 export { CardSection } from './CardSection/CardSection';
-export type { CardCssVariables, CardFactory, CardProps, CardStylesNames } from './Card';
-export type { CardSectionProps } from './CardSection/CardSection';
+export type { CardProps, CardStylesNames, CardCssVariables, CardFactory, CardSectionProps };
+export declare namespace Card {
+    type Props = CardProps;
+    type StylesNames = CardStylesNames;
+    type CssVariables = CardCssVariables;
+    type Factory = CardFactory;
+    type SectionProps = CardSectionProps;
+    namespace Section {
+        type Props = CardSectionProps;
+    }
+}

package/lib/components/Center/Center.d.ts

@@ -14,7 +14,7 @@ export type CenterFactory = PolymorphicFactory<{
 }>;
 export declare const Center: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, CenterProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CenterProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof CenterProps> & {
+} & Omit<any, "component" | keyof CenterProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (CenterProps & {

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

@@ -1,2 +1,8 @@
+import type { CenterFactory, CenterProps, CenterStylesNames } from './Center';
 export { Center } from './Center';
-export type { CenterProps, CenterFactory, CenterStylesNames } from './Center';
+export type { CenterProps, CenterFactory, CenterStylesNames };
+export declare namespace Center {
+    type Props = CenterProps;
+    type Factory = CenterFactory;
+    type StylesNames = CenterStylesNames;
+}

package/lib/components/Checkbox/CheckIcon.d.ts

@@ -1,7 +1,7 @@
-export interface CheckboxIconProps extends React.ComponentPropsWithoutRef<'svg'> {
+export interface CheckboxIconProps extends React.ComponentProps<'svg'> {
     indeterminate: boolean | undefined;
 }
-export interface CheckIconProps extends React.ComponentPropsWithoutRef<'svg'> {
+export interface CheckIconProps extends React.ComponentProps<'svg'> {
     size?: number | string;
 }
 export declare function CheckIcon({ size, style, ...others }: CheckIconProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Checkbox/Checkbox.d.ts

@@ -8,38 +8,41 @@ export type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStyles
 export type CheckboxCssVariables = {
     root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
 };
+export type CheckboxIconComponent = React.FC<{
+    indeterminate: boolean | undefined;
+    className: string;
+}>;
 export interface CheckboxProps extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {
     /** Unique input id */
     id?: string;
     /** `label` associated with the checkbox */
     label?: React.ReactNode;
-    /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */
     color?: MantineColor;
-    /** Controls size of the component @default `'sm'` */
+    /** Controls size of the component @default 'sm' */
     size?: MantineSize | (string & {});
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
     radius?: MantineRadius;
     /** Props passed down to the root element */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
-    /** Position of the label relative to the input @default `'right'` */
+    wrapperProps?: React.ComponentProps<'div'> & DataAttributes;
+    /** Position of the label relative to the input @default 'right' */
     labelPosition?: 'left' | 'right';
-    /** Description displayed below the label */
+    /** Description below the label */
     description?: React.ReactNode;
-    /** Error message displayed below the label */
+    /** Error message below the label */
     error?: React.ReactNode;
-    /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */
+    /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */
     indeterminate?: boolean;
-    /** Icon displayed when checkbox is in checked or indeterminate state */
-    icon?: React.FC<{
-        indeterminate: boolean | undefined;
-        className: string;
-    }>;
+    /** Icon for checked or indeterminate state */
+    icon?: CheckboxIconComponent;
     /** Root element ref */
-    rootRef?: React.ForwardedRef<HTMLDivElement>;
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */
     iconColor?: MantineColor;
-    /** If set, adjusts text color based on background color for `filled` variant */
+    /** If set, adjusts icon color based on background color for `filled` variant */
     autoContrast?: boolean;
+    /** If set, applies error styles to the checkbox when `error` prop is set @default true */
+    withErrorStyles?: boolean;
 }
 export type CheckboxFactory = Factory<{
     props: CheckboxProps;

package/lib/components/Checkbox/CheckboxCard/CheckboxCard.d.ts

@@ -1,4 +1,8 @@
 import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '../../../core';
+export interface CheckboxCardContextValue {
+    checked: boolean;
+}
+export declare const CheckboxCardContext: import("react").Context<CheckboxCardContextValue | null>;
 export type CheckboxCardStylesNames = 'card';
 export type CheckboxCardCssVariables = {
     card: '--card-radius';
@@ -12,7 +16,7 @@ export interface CheckboxCardProps extends BoxProps, StylesApiProps<CheckboxCard
     onChange?: (checked: boolean) => void;
     /** Adds border to the root element */
     withBorder?: boolean;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default `theme.defaultRadius` */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */
     radius?: MantineRadius;
     /** Value of the checkbox, used with `Checkbox.Group` */
     value?: string;

package/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,21 +1,36 @@
 import { DataAttributes, Factory, MantineSize } from '../../../core';
 import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
+export interface CheckboxGroupContextValue<Value extends string = string> {
+    value: Value[];
+    onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;
+    size: MantineSize | (string & {}) | undefined;
+    isDisabled?: (value: Value) => boolean;
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue<string> | null>;
 export type CheckboxGroupStylesNames = InputWrapperStylesNames;
-export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'> {
+export interface CheckboxGroupProps<Value extends string = string> extends Omit<InputWrapperProps, 'onChange'> {
     /** `Checkbox` components and any other elements */
     children: React.ReactNode;
     /** Controlled component value */
-    value?: string[];
+    value?: Value[];
     /** Default value for uncontrolled component */
-    defaultValue?: string[];
+    defaultValue?: Value[];
     /** Called with an array of selected checkboxes values when value changes */
-    onChange?: (value: string[]) => void;
+    onChange?: (value: Value[]) => void;
     /** Props passed down to the root element (`Input.Wrapper` component) */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
-    /** Controls size of the `Input.Wrapper` @default `'sm'` */
+    wrapperProps?: React.ComponentProps<'div'> & DataAttributes;
+    /** Controls size of the `Input.Wrapper` @default 'sm' */
     size?: MantineSize | (string & {});
     /** If set, value cannot be changed */
     readOnly?: boolean;
+    /** `name` attribute of the hidden input for uncontrolled forms */
+    name?: string;
+    /** Props passed down to the hidden input for uncontrolled forms */
+    hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** Separator for values in the hidden input for uncontrolled forms @default ',' */
+    hiddenInputValuesSeparator?: string;
+    /** Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled */
+    maxSelectedValues?: number;
     /** Sets `disabled` attribute, prevents interactions */
     disabled?: boolean;
 }
@@ -23,9 +38,23 @@ export type CheckboxGroupFactory = Factory<{
     props: CheckboxGroupProps;
     ref: HTMLDivElement;
     stylesNames: CheckboxGroupStylesNames;
+    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
 }>;
-export declare const CheckboxGroup: import("../../..").MantineComponent<{
+export declare const CheckboxGroup: (<Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element) & import("../../../core/factory/factory").ThemeExtend<{
     props: CheckboxGroupProps;
     ref: HTMLDivElement;
     stylesNames: CheckboxGroupStylesNames;
-}>;
+    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
+}> & import("../../../core/factory/factory").ComponentClasses<{
+    props: CheckboxGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: CheckboxGroupStylesNames;
+    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
+}> & Record<string, never> & import("../../..").FactoryComponentWithProps<{
+    props: CheckboxGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: CheckboxGroupStylesNames;
+    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
+}> & {
+    displayName?: string;
+};

package/lib/components/Checkbox/CheckboxIndicator/CheckboxIndicator.d.ts

@@ -1,30 +1,28 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
+import type { CheckboxIconComponent } from '../Checkbox';
 export type CheckboxIndicatorStylesNames = 'indicator' | 'icon';
 export type CheckboxIndicatorVariant = 'filled' | 'outline';
 export type CheckboxIndicatorCssVariables = {
     indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
 };
 export interface CheckboxIndicatorProps extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {
-    /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */
     color?: MantineColor;
-    /** Controls size of the component @default `'sm'` */
+    /** Controls size of the component @default 'sm' */
     size?: MantineSize | (string & {});
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
     radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */
     iconColor?: MantineColor;
-    /** If set, adjusts text color based on background color for `filled` variant */
+    /** If set, adjusts icon color based on background color for `filled` variant */
     autoContrast?: boolean;
     /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */
     indeterminate?: boolean;
-    /** Icon displayed when checkbox is in checked or indeterminate state */
-    icon?: React.FC<{
-        indeterminate: boolean | undefined;
-        className: string;
-    }>;
+    /** Icon for checked or indeterminate state */
+    icon?: CheckboxIconComponent;
     /** Determines whether the component should have checked styles */
     checked?: boolean;
-    /** Determines whether the component should have disabled styles */
+    /** Indicates disabled state */
     disabled?: boolean;
 }
 export type CheckboxIndicatorFactory = Factory<{

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

@@ -1,13 +1,37 @@
+import type { CheckboxCssVariables, CheckboxFactory, CheckboxIconComponent, CheckboxProps, CheckboxStylesNames, CheckboxVariant } from './Checkbox';
+import type { CheckboxCardCssVariables, CheckboxCardFactory, CheckboxCardProps, CheckboxCardStylesNames } from './CheckboxCard/CheckboxCard';
+import type { CheckboxGroupFactory, CheckboxGroupProps, CheckboxGroupStylesNames } from './CheckboxGroup/CheckboxGroup';
+import type { CheckboxIndicatorCssVariables, CheckboxIndicatorFactory, CheckboxIndicatorProps, CheckboxIndicatorStylesNames, CheckboxIndicatorVariant } from './CheckboxIndicator/CheckboxIndicator';
+import type { CheckboxIconProps, CheckIconProps } from './CheckIcon';
 export { Checkbox } from './Checkbox';
-export { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
+export { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';
 export { CheckIcon } from './CheckIcon';
 export { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';
-export { CheckboxCard } from './CheckboxCard/CheckboxCard';
-export { useCheckboxCardContext } from './CheckboxCard/CheckboxCard.context';
-export { useCheckboxGroupContext } from './CheckboxGroup.context';
-export type { CheckboxIconProps, CheckIconProps } from './CheckIcon';
-export type { CheckboxCardContextValue } from './CheckboxCard/CheckboxCard.context';
-export type { CheckboxCssVariables, CheckboxFactory, CheckboxProps, CheckboxStylesNames, CheckboxVariant, } from './Checkbox';
-export type { CheckboxGroupFactory, CheckboxGroupProps, CheckboxGroupStylesNames, } from './CheckboxGroup/CheckboxGroup';
-export type { CheckboxIndicatorCssVariables, CheckboxIndicatorFactory, CheckboxIndicatorProps, CheckboxIndicatorStylesNames, CheckboxIndicatorVariant, } from './CheckboxIndicator/CheckboxIndicator';
-export type { CheckboxCardCssVariables, CheckboxCardProps, CheckboxCardFactory, CheckboxCardStylesNames, } from './CheckboxCard/CheckboxCard';
+export { CheckboxCard, CheckboxCardContext } from './CheckboxCard/CheckboxCard';
+export type { CheckboxProps, CheckboxStylesNames, CheckboxCssVariables, CheckboxFactory, CheckboxVariant, CheckboxIconComponent, CheckboxGroupProps, CheckboxGroupStylesNames, CheckboxGroupFactory, CheckboxIndicatorProps, CheckboxIndicatorStylesNames, CheckboxIndicatorCssVariables, CheckboxIndicatorFactory, CheckboxIndicatorVariant, CheckboxCardProps, CheckboxCardStylesNames, CheckboxCardCssVariables, CheckboxCardFactory, CheckboxIconProps, CheckIconProps, };
+export declare namespace Checkbox {
+    type Props = CheckboxProps;
+    type StylesNames = CheckboxStylesNames;
+    type CssVariables = CheckboxCssVariables;
+    type Factory = CheckboxFactory;
+    type Variant = CheckboxVariant;
+    type IconComponent = CheckboxIconComponent;
+    namespace Group {
+        type Props = CheckboxGroupProps;
+        type StylesNames = CheckboxGroupStylesNames;
+        type Factory = CheckboxGroupFactory;
+    }
+    namespace Indicator {
+        type Props = CheckboxIndicatorProps;
+        type StylesNames = CheckboxIndicatorStylesNames;
+        type CssVariables = CheckboxIndicatorCssVariables;
+        type Factory = CheckboxIndicatorFactory;
+        type Variant = CheckboxIndicatorVariant;
+    }
+    namespace Card {
+        type Props = CheckboxCardProps;
+        type StylesNames = CheckboxCardStylesNames;
+        type CssVariables = CheckboxCardCssVariables;
+        type Factory = CheckboxCardFactory;
+    }
+}

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

@@ -6,31 +6,31 @@ 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` @default `'xl'` */
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */
     radius?: MantineRadius;
-    /** Controls various properties related to component size @default `'sm'` */
+    /** Controls various properties related to the component size @default 'sm' */
     size?: MantineSize;
-    /** Chip input type @default `'checkbox'` */
+    /** Chip input type @default 'checkbox' */
     type?: 'radio' | 'checkbox';
     /** `label` element associated with the input */
     children: React.ReactNode;
-    /** Checked state for controlled component */
+    /** Controlled checked state */
     checked?: boolean;
-    /** Default checked state for uncontrolled component */
+    /** Uncontrolled checked state initial value */
     defaultChecked?: boolean;
     /** Calls when checked state changes */
     onChange?: (checked: boolean) => void;
-    /** Controls components colors based on `variant` prop. Key of `theme.colors` or any valid CSS color. @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */
     color?: MantineColor;
-    /** Unique input id */
+    /** Unique input id, generated randomly if not provided */
     id?: string;
     /** Props passed down to the root element */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
-    /** Any element or component to replace default icon */
+    wrapperProps?: React.ComponentProps<'div'> & DataAttributes;
+    /** Any element or component to replace the default icon */
     icon?: React.ReactNode;
     /** Assigns ref of the root element */
-    rootRef?: React.ForwardedRef<HTMLDivElement>;
-    /** If set, adjusts text color based on background color for `filled` variant */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** If set, adjusts text color based on the chip background color for `filled` variant */
     autoContrast?: boolean;
 }
 export type ChipFactory = Factory<{

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

@@ -1,16 +1,35 @@
-export interface ChipGroupProps<T extends boolean = false> {
+import { Factory } from '../../../core';
+export interface ChipGroupProps<Multiple extends boolean = false, Value extends string = string> {
     /** If set, multiple values can be selected */
-    multiple?: T;
+    multiple?: Multiple;
     /** Controlled component value */
-    value?: T extends true ? string[] : string | null;
+    value?: Multiple extends true ? Value[] : Value | null;
     /** Uncontrolled component initial value */
-    defaultValue?: T extends true ? string[] : string | null;
+    defaultValue?: Multiple extends true ? Value[] : Value | null;
     /** Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. */
-    onChange?: (value: T extends true ? string[] : string) => void;
+    onChange?: (value: Multiple extends true ? Value[] : Value) => void;
     /** `Chip` components and any other elements */
     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;
+export type ChipGroupFactory = Factory<{
+    props: ChipGroupProps;
+    signature: <Multiple extends boolean = false, Value extends string = string>(props: ChipGroupProps<Multiple, Value>) => React.JSX.Element;
+}>;
+export declare const ChipGroup: (<Multiple extends boolean = false, Value extends string = string>(props: ChipGroupProps<Multiple, Value>) => React.JSX.Element) & import("../../../core/factory/factory").ThemeExtend<{
+    props: ChipGroupProps;
+    signature: <Multiple extends boolean = false, Value extends string = string>(props: ChipGroupProps<Multiple, Value>) => React.JSX.Element;
+}> & import("../../../core/factory/factory").ComponentClasses<{
+    props: ChipGroupProps;
+    signature: <Multiple extends boolean = false, Value extends string = string>(props: ChipGroupProps<Multiple, Value>) => React.JSX.Element;
+}> & Record<string, never> & import("../../..").FactoryComponentWithProps<{
+    props: ChipGroupProps;
+    signature: <Multiple extends boolean = false, Value extends string = string>(props: ChipGroupProps<Multiple, Value>) => React.JSX.Element;
+}> & {
+    displayName?: string;
+};
+export interface ChipGroupContextValue<Value extends string = string> {
+    isChipSelected: (value: Value) => boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    multiple: boolean | undefined;
 }
+export declare const ChipGroupContext: import("react").Context<ChipGroupContextValue<string> | null>;

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

@@ -1,4 +1,16 @@
+import type { ChipCssVariables, ChipFactory, ChipProps, ChipStylesNames, ChipVariant } from './Chip';
+import type { ChipGroupContextValue, ChipGroupProps } from './ChipGroup/ChipGroup';
 export { Chip } from './Chip';
-export { ChipGroup } from './ChipGroup/ChipGroup';
-export type { ChipCssVariables, ChipFactory, ChipProps, ChipStylesNames, ChipVariant, } from './Chip';
-export type { ChipGroupProps } from './ChipGroup/ChipGroup';
+export { ChipGroup, ChipGroupContext } from './ChipGroup/ChipGroup';
+export type { ChipProps, ChipStylesNames, ChipCssVariables, ChipFactory, ChipVariant, ChipGroupProps, ChipGroupContextValue, };
+export declare namespace Chip {
+    type Props = ChipProps;
+    type StylesNames = ChipStylesNames;
+    type CssVariables = ChipCssVariables;
+    type Factory = ChipFactory;
+    type Variant = ChipVariant;
+    namespace Group {
+        type Props<Multiple extends boolean = false, Value extends string = string> = ChipGroupProps<Multiple, Value>;
+        type ContextValue<Value extends string = string> = ChipGroupContextValue<Value>;
+    }
+}

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

@@ -6,13 +6,13 @@ export type CloseButtonCssVariables = {
 };
 export interface __CloseButtonProps {
     'data-disabled'?: boolean;
-    /** Controls width and height of the button. Numbers are converted to rem. @default `'md'` */
+    /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */
     size?: MantineSize | (string & {}) | number;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default `theme.defaultRadius` */
+    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */
     radius?: MantineRadius;
     /** Sets `disabled` attribute, assigns disabled styles */
     disabled?: boolean;
-    /** `X` icon `width` and `height` @default `80%` */
+    /** `X` icon `width` and `height` @default 80% */
     iconSize?: number | string;
     /** Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. */
     children?: React.ReactNode;
@@ -32,7 +32,7 @@ export type CloseButtonFactory = PolymorphicFactory<{
 }>;
 export declare const CloseButton: (<C = "button">(props: import("../..").PolymorphicComponentProps<C, CloseButtonProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CloseButtonProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof CloseButtonProps> & {
+} & Omit<any, "component" | keyof CloseButtonProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (CloseButtonProps & {
@@ -52,7 +52,16 @@ export declare const CloseButton: (<C = "button">(props: import("../..").Polymor
     stylesNames: CloseButtonStylesNames;
     variant: CloseButtonVariant;
     vars: CloseButtonCssVariables;
-}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+}> & {
+    varsResolver: import("../..").VarsResolver<{
+        props: CloseButtonProps;
+        defaultComponent: "button";
+        defaultRef: HTMLButtonElement;
+        stylesNames: CloseButtonStylesNames;
+        variant: CloseButtonVariant;
+        vars: CloseButtonCssVariables;
+    }>;
+} & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
     props: CloseButtonProps;
     defaultComponent: "button";
     defaultRef: HTMLButtonElement;

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

@@ -1,5 +1,9 @@
-export interface CloseIconProps extends React.ComponentPropsWithoutRef<'svg'> {
+import React from 'react';
+export interface CloseIconProps extends React.ComponentProps<'svg'> {
     /** Icon width and height, `var(--icon-size)` by default */
     size?: string;
 }
-export declare const CloseIcon: import("react").ForwardRefExoticComponent<CloseIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare function CloseIcon({ size, style, ...others }: CloseIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CloseIcon {
+    var displayName: string;
+}

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

@@ -1,4 +1,12 @@
+import type { __CloseButtonProps, CloseButtonCssVariables, CloseButtonFactory, CloseButtonProps, CloseButtonStylesNames, CloseButtonVariant } from './CloseButton';
+import type { CloseIconProps } from './CloseIcon';
 export { CloseIcon } from './CloseIcon';
 export { CloseButton } from './CloseButton';
-export type { CloseButtonProps, CloseButtonStylesNames, CloseButtonFactory, CloseButtonVariant, CloseButtonCssVariables, __CloseButtonProps, } from './CloseButton';
-export type { CloseIconProps } from './CloseIcon';
+export type { CloseButtonProps, CloseButtonStylesNames, CloseButtonFactory, CloseButtonVariant, CloseButtonCssVariables, __CloseButtonProps, CloseIconProps, };
+export declare namespace CloseButton {
+    type Props = CloseButtonProps;
+    type StylesNames = CloseButtonStylesNames;
+    type Factory = CloseButtonFactory;
+    type Variant = CloseButtonVariant;
+    type CssVariables = CloseButtonCssVariables;
+}

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

@@ -1,2 +1,9 @@
+import type { CodeCssVariables, CodeFactory, CodeProps, CodeStylesNames } from './Code';
 export { Code } from './Code';
-export type { CodeProps, CodeCssVariables, CodeFactory, CodeStylesNames } from './Code';
+export type { CodeProps, CodeCssVariables, CodeFactory, CodeStylesNames };
+export declare namespace Code {
+    type Props = CodeProps;
+    type CssVariables = CodeCssVariables;
+    type Factory = CodeFactory;
+    type StylesNames = CodeStylesNames;
+}

package/lib/components/Collapse/Collapse.d.ts

@@ -1,16 +1,20 @@
 import { BoxProps, Factory } from '../../core';
-export interface CollapseProps extends BoxProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof BoxProps> {
-    /** Opened state */
-    in: boolean;
-    /** Called each time transition ends */
+export interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {
+    /** Collapse orientation @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal';
+    /** Expanded state */
+    expanded: boolean;
+    /** Called when the transition ends */
     onTransitionEnd?: () => void;
-    /** Transition duration in ms @default `200` */
+    /** Called when transition starts */
+    onTransitionStart?: () => void;
+    /** Transition duration in ms @default 200 */
     transitionDuration?: number;
-    /** Transition timing function @default `ease` */
+    /** Transition timing function @default ease */
     transitionTimingFunction?: string;
-    /** Determines whether opacity should be animated @default `true` */
+    /** Determines whether the opacity is animated @default true */
     animateOpacity?: boolean;
-    /** Keep element in DOM when collapsed, useful for nested collapses */
+    /** Determines whether the element is kept in the DOM when collapsed @default false */
     keepMounted?: boolean;
 }
 export type CollapseFactory = Factory<{

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

@@ -1,2 +1,7 @@
+import type { CollapseFactory, CollapseProps } from './Collapse';
 export { Collapse } from './Collapse';
-export type { CollapseProps } from './Collapse';
+export type { CollapseProps, CollapseFactory };
+export declare namespace Collapse {
+    type Props = CollapseProps;
+    type Factory = CollapseFactory;
+}

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

@@ -11,17 +11,17 @@ export type ColorInputCssVariables = {
 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 */
     disallowInput?: boolean;
-    /** If set, the input value resets to the last known valid value when the input loses focus @default `true` */
+    /** If set, the input value resets to the last known valid value when the input loses focus @default true */
     fixOnBlur?: boolean;
     /** Props passed down to the `Popover` component */
     popoverProps?: PopoverProps;
-    /** If set, the preview color swatch is displayed in the left section of the input @default `true` */
+    /** If set, the preview color swatch is displayed in the left section of the input @default true */
     withPreview?: boolean;
-    /** If set, the eye dropper button is displayed in the right section @default `true` */
+    /** If set, the eye dropper button is displayed in the right section @default true */
     withEyeDropper?: boolean;
     /** An icon to replace the default eye dropper icon */
     eyeDropperIcon?: React.ReactNode;
-    /** If set, the dropdown is closed when one of the color swatches is clicked @default `false` */
+    /** If set, the dropdown is closed when one of the color swatches is clicked @default false */
     closeOnColorSwatchClick?: boolean;
     /** Props passed down to the eye dropper button */
     eyeDropperButtonProps?: Record<string, any>;

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

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

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

@@ -1,2 +1,9 @@
+import type { ColorInputCssVariables, ColorInputFactory, ColorInputProps, ColorInputStylesNames } from './ColorInput';
 export { ColorInput } from './ColorInput';
-export type { ColorInputFactory, ColorInputProps, ColorInputStylesNames, ColorInputCssVariables, } from './ColorInput';
+export type { ColorInputProps, ColorInputStylesNames, ColorInputCssVariables, ColorInputFactory };
+export declare namespace ColorInput {
+    type Props = ColorInputProps;
+    type StylesNames = ColorInputStylesNames;
+    type CssVariables = ColorInputCssVariables;
+    type Factory = ColorInputFactory;
+}