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

package/lib/components/Avatar/AvatarPlaceholderIcon.d.ts

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

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

@@ -0,0 +1,4 @@
+export { Avatar } from './Avatar';
+export { AvatarGroup } from './AvatarGroup/AvatarGroup';
+export type { AvatarCssVariables, AvatarFactory, AvatarProps, AvatarStylesNames, AvatarVariant, } from './Avatar';
+export type { AvatarGroupCssVariables, AvatarGroupFactory, AvatarGroupProps, AvatarGroupStylesNames, } from './AvatarGroup/AvatarGroup';

package/lib/components/BackgroundImage/BackgroundImage.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, MantineRadius, PolymorphicFactory } from '../../core';
 export type BackgroundImageStylesNames = 'root';
-export type BackgroundImageVariant = string;
 export type BackgroundImageCssVariables = {
     root: '--bi-radius';
 };
 export interface BackgroundImageProps extends BoxProps, StylesApiProps<BackgroundImageFactory> {
-    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem (1rem = 16px), `0` by default */
+    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `0` by default */
     radius?: MantineRadius | (string & {}) | number;
     /** Image url */
     src: string;
@@ -15,7 +14,6 @@ export type BackgroundImageFactory = PolymorphicFactory<{
     props: BackgroundImageProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
-    variant: BackgroundImageVariant;
     stylesNames: BackgroundImageStylesNames;
     vars: BackgroundImageCssVariables;
 }>;
@@ -29,7 +27,12 @@ export declare const BackgroundImage: (<C = "div">(props: import("../../core/fac
     props: BackgroundImageProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
-    variant: BackgroundImageVariant;
+    stylesNames: BackgroundImageStylesNames;
+    vars: BackgroundImageCssVariables;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: BackgroundImageProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
     stylesNames: BackgroundImageStylesNames;
     vars: BackgroundImageCssVariables;
 }> & Record<string, never>;

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

@@ -1,2 +1,2 @@
 export { BackgroundImage } from './BackgroundImage';
-export type { BackgroundImageProps, BackgroundImageCssVariables, BackgroundImageFactory, BackgroundImageStylesNames, BackgroundImageVariant, } from './BackgroundImage';
+export type { BackgroundImageProps, BackgroundImageCssVariables, BackgroundImageFactory, BackgroundImageStylesNames, } from './BackgroundImage';

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, PolymorphicFactory, MantineSize, MantineRadius, MantineColor, MantineGradient } from '../../core';
+export type BadgeStylesNames = 'root' | 'section' | 'label';
+export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'transparent' | 'white' | 'default' | 'gradient';
+export type BadgeCssVariables = {
+    root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
+};
+export interface BadgeProps extends BoxProps, StylesApiProps<BadgeFactory> {
+    /** Controls `font-size`, `height` and horizontal `padding`, `'md'` by default */
+    size?: MantineSize | (string & {});
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `'xl'` by default */
+    radius?: MantineRadius | (string & {}) | number;
+    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
+    color?: MantineColor;
+    /** Gradient configuration used when `variant="gradient"`, default value is `theme.defaultGradient` */
+    gradient?: MantineGradient;
+    /** Content displayed on the left side of the badge label */
+    leftSection?: React.ReactNode;
+    /** Content displayed on the right side of the badge label */
+    rightSection?: React.ReactNode;
+    /** Determines whether Badge should take 100% of its parent width, `false` by default */
+    fullWidth?: boolean;
+    /** Main badge content */
+    children?: React.ReactNode;
+}
+export type BadgeFactory = PolymorphicFactory<{
+    props: BadgeProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BadgeStylesNames;
+    vars: BadgeCssVariables;
+    variant: BadgeVariant;
+}>;
+export declare const Badge: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, BadgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(BadgeProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof BadgeProps> & {
+    ref?: any;
+}) | (BadgeProps & {
+    component: React.ElementType<any>;
+})>, never> & import("../../core/factory/factory").ThemeExtend<{
+    props: BadgeProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BadgeStylesNames;
+    vars: BadgeCssVariables;
+    variant: BadgeVariant;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: BadgeProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BadgeStylesNames;
+    vars: BadgeCssVariables;
+    variant: BadgeVariant;
+}> & Record<string, never>;

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeCssVariables, BadgeFactory, BadgeProps, BadgeStylesNames, BadgeVariant, } from './Badge';

package/lib/components/Blockquote/Blockquote.d.ts

@@ -1,20 +1,19 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../core';
 export type BlockquoteStylesNames = 'root' | 'icon' | 'cite';
-export type BlockquoteVariant = string;
 export type BlockquoteCssVariables = {
     root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';
 };
 export interface BlockquoteProps extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {
     /** Blockquote icon, displayed on the top left */
     icon?: React.ReactNode;
-    /** Controls icon width and height, numbers are converted to rem (`1rem = 16px`), `40` by default */
+    /** Controls icon `width` and `height`, numbers are converted to rem, `40` by default */
     iconSize?: number | string;
     /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
     radius?: MantineRadius | (string & {}) | number;
-    /** Describe a reference to a cited quote */
+    /** Reference to a cited quote */
     cite?: React.ReactNode;
 }
 export type BlockquoteFactory = Factory<{
@@ -22,12 +21,10 @@ export type BlockquoteFactory = Factory<{
     ref: HTMLQuoteElement;
     stylesNames: BlockquoteStylesNames;
     vars: BlockquoteCssVariables;
-    variant: BlockquoteVariant;
 }>;
 export declare const Blockquote: import("../../core").MantineComponent<{
     props: BlockquoteProps;
     ref: HTMLQuoteElement;
     stylesNames: BlockquoteStylesNames;
     vars: BlockquoteCssVariables;
-    variant: BlockquoteVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Blockquote } from './Blockquote';
-export type { BlockquoteCssVariables, BlockquoteFactory, BlockquoteProps, BlockquoteStylesNames, BlockquoteVariant, } from './Blockquote';
+export type { BlockquoteCssVariables, BlockquoteFactory, BlockquoteProps, BlockquoteStylesNames, } from './Blockquote';

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSpacing } from '../../core';
 export type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';
-export type BreadcrumbsVariant = string;
 export type BreadcrumbsCssVariables = {
     root: '--bc-separator-margin';
 };
 export interface BreadcrumbsProps extends BoxProps, StylesApiProps<BreadcrumbsFactory>, ElementProps<'div'> {
-    /** Separator between breadcrumbs, `'/'` by default */
+    /** Separator between children, `'/'` by default */
     separator?: React.ReactNode;
-    /** Spacing between separator and breadcrumb, `'xs'` by default */
+    /** Controls spacing between separator and breadcrumb, `'xs'` by default */
     separatorMargin?: MantineSpacing | (string & {}) | number;
     /** React nodes that should be separated with `separator` */
     children: React.ReactNode;
@@ -18,12 +17,10 @@ export type BreadcrumbsFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: BreadcrumbsStylesNames;
     vars: BreadcrumbsCssVariables;
-    variant: BreadcrumbsVariant;
 }>;
 export declare const Breadcrumbs: import("../../core").MantineComponent<{
     props: BreadcrumbsProps;
     ref: HTMLDivElement;
     stylesNames: BreadcrumbsStylesNames;
     vars: BreadcrumbsCssVariables;
-    variant: BreadcrumbsVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Breadcrumbs } from './Breadcrumbs';
-export type { BreadcrumbsCssVariables, BreadcrumbsFactory, BreadcrumbsProps, BreadcrumbsStylesNames, BreadcrumbsVariant, } from './Breadcrumbs';
+export type { BreadcrumbsCssVariables, BreadcrumbsFactory, BreadcrumbsProps, BreadcrumbsStylesNames, } from './Breadcrumbs';

package/lib/components/Burger/Burger.d.ts

@@ -1,11 +1,10 @@
 import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineColor } from '../../core';
 export type BurgerStylesNames = 'root' | 'burger';
-export type BurgerVariant = string;
 export type BurgerCssVariables = {
     root: '--burger-color' | '--burger-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
 };
 export interface BurgerProps extends BoxProps, StylesApiProps<BurgerFactory>, ElementProps<'button'> {
-    /** Controls burger width and height, numbers are converted to rem (`1rem = 16px`), `'md'` by default */
+    /** Controls burger `width` and `height`, numbers are converted to rem, `'md'` by default */
     size?: MantineSize | (string & {}) | number;
     /** Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light */
     color?: MantineColor;
@@ -21,12 +20,10 @@ export type BurgerFactory = Factory<{
     ref: HTMLButtonElement;
     stylesNames: BurgerStylesNames;
     vars: BurgerCssVariables;
-    variant: BurgerVariant;
 }>;
 export declare const Burger: import("../../core").MantineComponent<{
     props: BurgerProps;
     ref: HTMLButtonElement;
     stylesNames: BurgerStylesNames;
     vars: BurgerCssVariables;
-    variant: BurgerVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Burger } from './Burger';
-export type { BurgerCssVariables, BurgerFactory, BurgerProps, BurgerStylesNames, BurgerVariant, } from './Burger';
+export type { BurgerCssVariables, BurgerFactory, BurgerProps, BurgerStylesNames } from './Burger';

package/lib/components/Button/Button.d.ts

@@ -9,7 +9,7 @@ export type ButtonCssVariables = {
 };
 export interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {
     'data-disabled'?: boolean;
-    /** Controls button height, font-size and horizontal padding, `'sm'` by default */
+    /** Controls button `height`, `font-size` and horizontal `padding`, `'sm'` by default */
     size?: MantineSize | `compact-${MantineSize}` | (string & {});
     /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
     color?: MantineColor;
@@ -19,19 +19,19 @@ export interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {
     leftSection?: React.ReactNode;
     /** Content displayed on the right side of the button label */
     rightSection?: React.ReactNode;
-    /** Determines whether button must take 100% width of its parent container, `false` by default */
+    /** Determines whether button should take 100% width of its parent container, `false` by default */
     fullWidth?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
     radius?: MantineRadius | (string & {}) | number;
-    /** Gradient styles used when `variant="gradient"`, default value is `theme.defaultGradient` */
+    /** Gradient configuration used when `variant="gradient"`, default value is `theme.defaultGradient` */
     gradient?: MantineGradient;
     /** Indicates disabled state */
     disabled?: boolean;
     /** Button content */
     children?: React.ReactNode;
-    /** Determines whether `Loader` component should be displayed over the button */
+    /** Determines whether the `Loader` component should be displayed over the button */
     loading?: boolean;
-    /** Props added to the Loader component (only visible when `loading` prop is set) */
+    /** Props added to the `Loader` component (only visible when `loading` prop is set) */
     loaderProps?: LoaderProps;
 }
 export type ButtonFactory = PolymorphicFactory<{
@@ -40,6 +40,7 @@ export type ButtonFactory = PolymorphicFactory<{
     defaultComponent: 'button';
     stylesNames: ButtonStylesNames;
     vars: ButtonCssVariables;
+    variant: ButtonVariant;
     staticComponents: {
         Group: typeof ButtonGroup;
     };
@@ -56,6 +57,17 @@ export declare const Button: (<C = "button">(props: import("../../core/factory/c
     defaultComponent: 'button';
     stylesNames: ButtonStylesNames;
     vars: ButtonCssVariables;
+    variant: ButtonVariant;
+    staticComponents: {
+        Group: typeof ButtonGroup;
+    };
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: ButtonProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: ButtonStylesNames;
+    vars: ButtonCssVariables;
+    variant: ButtonVariant;
     staticComponents: {
         Group: typeof ButtonGroup;
     };

package/lib/components/Button/ButtonGroup/ButtonGroup.d.ts

@@ -1,29 +1,26 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, Factory } from '../../../core';
-export type ButtonGroupStylesNames = 'root';
-export type ButtonGroupVariant = string;
+export type ButtonGroupStylesNames = 'group';
 export type ButtonGroupCssVariables = {
-    root: '--button-border-width';
+    group: '--button-border-width';
 };
 export interface ButtonGroupProps extends BoxProps, StylesApiProps<ButtonGroupFactory> {
     /** `Button` components */
     children?: React.ReactNode;
     /** Orientation of the group, `horizontal` by default */
     orientation?: 'horizontal' | 'vertical';
-    /** Controls border-width of child `Button` components. Default value in `1`. Numbers are converted to rem (1rem = 16px). */
+    /** `border-width` of the child `Button` components. Numbers are converted to rem. Default value in `1`. */
     borderWidth?: number | string;
 }
 export type ButtonGroupFactory = Factory<{
     props: ButtonGroupProps;
     ref: HTMLDivElement;
-    variant: ButtonGroupVariant;
     stylesNames: ButtonGroupStylesNames;
     vars: ButtonGroupCssVariables;
 }>;
 export declare const ButtonGroup: import("../../../core").MantineComponent<{
     props: ButtonGroupProps;
     ref: HTMLDivElement;
-    variant: ButtonGroupVariant;
     stylesNames: ButtonGroupStylesNames;
     vars: ButtonGroupCssVariables;
 }>;

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

@@ -1,3 +1,4 @@
 export { Button } from './Button';
+export { ButtonGroup } from './ButtonGroup/ButtonGroup';
 export type { ButtonProps, ButtonStylesNames, ButtonFactory, ButtonCssVariables, ButtonVariant, } from './Button';
 export type { ButtonGroupProps, ButtonGroupCssVariables, ButtonGroupStylesNames, ButtonGroupFactory, } from './ButtonGroup/ButtonGroup';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { GetStylesApi } from '../../core';
+import type { CardFactory } from './Card';
+interface CardContextValue {
+    getStyles: GetStylesApi<CardFactory>;
+}
+export declare const CardProvider: ({ children, value }: {
+    value: CardContextValue;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useCardContext: () => CardContextValue;
+export {};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, PolymorphicFactory, MantineShadow, MantineRadius, MantineSpacing } from '../../core';
+import { CardSection } from './CardSection/CardSection';
+export type CardStylesNames = 'root' | 'section';
+export type CardCssVariables = {
+    root: '--card-padding';
+};
+export interface CardProps extends BoxProps, StylesApiProps<CardFactory> {
+    /** Key of `theme.shadows` or any valid CSS value to set `box-shadow`, `none` by default */
+    shadow?: MantineShadow | (string & {});
+    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default */
+    radius?: MantineRadius | number | (string & {});
+    /** Determines whether the card should have border, border color depends on color scheme, `false` by default */
+    withBorder?: boolean;
+    /** Controls `padding`, key of `theme.spacing` or any valid CSS value, `'md'` by default */
+    padding?: MantineSpacing | (string & {}) | number;
+    /** Card content */
+    children?: React.ReactNode;
+}
+export type CardFactory = PolymorphicFactory<{
+    props: CardProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardStylesNames;
+    vars: CardCssVariables;
+    staticComponents: {
+        Section: typeof CardSection;
+    };
+}>;
+export declare const Card: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, CardProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(CardProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof CardProps> & {
+    ref?: any;
+}) | (CardProps & {
+    component: React.ElementType<any>;
+})>, never> & import("../../core/factory/factory").ThemeExtend<{
+    props: CardProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardStylesNames;
+    vars: CardCssVariables;
+    staticComponents: {
+        Section: typeof CardSection;
+    };
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: CardProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardStylesNames;
+    vars: CardCssVariables;
+    staticComponents: {
+        Section: typeof CardSection;
+    };
+}> & {
+    Section: typeof CardSection;
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, PolymorphicFactory } from '../../../core';
+export type CardSectionStylesNames = 'section';
+export interface CardSectionProps extends BoxProps, StylesApiProps<CardSectionFactory> {
+    /** Determines whether the section should have a border, `false` by default */
+    withBorder?: boolean;
+    /** Determines whether the section should inherit padding from the parent `Card`, `false` by default */
+    inheritPadding?: boolean;
+}
+export type CardSectionFactory = PolymorphicFactory<{
+    props: CardSectionProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardSectionStylesNames;
+    compound: true;
+}>;
+export declare const CardSection: (<C = "div">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, CardSectionProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(CardSectionProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof CardSectionProps> & {
+    ref?: any;
+}) | (CardSectionProps & {
+    component: React.ElementType<any>;
+})>, never> & import("../../../core/factory/factory").ThemeExtend<{
+    props: CardSectionProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardSectionStylesNames;
+    compound: true;
+}> & import("../../../core/factory/factory").ComponentClasses<{
+    props: CardSectionProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardSectionStylesNames;
+    compound: true;
+}> & Record<string, never>;

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

@@ -0,0 +1,4 @@
+export { Card } from './Card';
+export { CardSection } from './CardSection/CardSection';
+export type { CardCssVariables, CardFactory, CardProps, CardStylesNames } from './Card';
+export type { CardSectionProps } from './CardSection/CardSection';

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, PolymorphicFactory } from '../../core';
 export type CenterStylesNames = 'root';
-export type CenterVariant = string;
 export type CenterCssVariables = {
     root: '--center-display';
 };
 export interface CenterProps extends BoxProps, StylesApiProps<CenterFactory> {
     /** Content that should be centered vertically and horizontally */
-    children: React.ReactNode;
-    /** Set to true to use `inline-flex` instead of `flex`, `false` by default */
+    children?: React.ReactNode;
+    /** Determines whether `inline-flex` should be used instead of `flex`, `false` by default */
     inline?: boolean;
 }
 export type CenterFactory = PolymorphicFactory<{
@@ -17,7 +16,6 @@ export type CenterFactory = PolymorphicFactory<{
     defaultComponent: 'div';
     stylesNames: CenterStylesNames;
     vars: CenterCssVariables;
-    variant: CenterVariant;
 }>;
 export declare const Center: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, CenterProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(CenterProps & {
     component?: any;
@@ -31,5 +29,10 @@ export declare const Center: (<C = "div">(props: import("../../core/factory/crea
     defaultComponent: 'div';
     stylesNames: CenterStylesNames;
     vars: CenterCssVariables;
-    variant: CenterVariant;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: CenterProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CenterStylesNames;
+    vars: CenterCssVariables;
 }> & Record<string, never>;

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

@@ -1,2 +1,2 @@
 export { Center } from './Center';
-export type { CenterProps, CenterCssVariables, CenterFactory, CenterStylesNames, CenterVariant, } from './Center';
+export type { CenterProps, CenterCssVariables, CenterFactory, CenterStylesNames } from './Center';

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

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

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineSize, MantineRadius, Factory } from '../../core';
+import { InlineInputStylesNames } from '../InlineInput';
+import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
+export type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;
+export type CheckboxCssVariables = {
+    root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color';
+};
+export interface CheckboxProps extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size'> {
+    /** Id used to bind input and label, if not passed, unique id will be generated instead */
+    id?: string;
+    /** Checkbox label */
+    label?: React.ReactNode;
+    /** Key of `theme.colors` or any valid CSS color to set input color in checked state, `theme.primaryColor` by default */
+    color?: MantineColor;
+    /** Controls size of all elements */
+    size?: MantineSize | (string & {});
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
+    radius?: MantineRadius | (string & {}) | number;
+    /** Props passed down to wrapper element */
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    /** Position of the label relative to the input, `'right'` by default */
+    labelPosition?: 'left' | 'right';
+    /** Description displayed below the label */
+    description?: React.ReactNode;
+    /** Error displayed below the label */
+    error?: React.ReactNode;
+    /** Indeterminate state of checkbox, if set, `checked` prop is ignored */
+    indeterminate?: boolean;
+    /** Icon rendered when checkbox has checked or indeterminate state */
+    icon?: React.FC<{
+        indeterminate: boolean | undefined;
+        className: string;
+    }>;
+}
+export type CheckboxFactory = Factory<{
+    props: CheckboxProps;
+    ref: HTMLInputElement;
+    stylesNames: CheckboxStylesNames;
+    vars: CheckboxCssVariables;
+    staticComponents: {
+        Group: typeof CheckboxGroup;
+    };
+}>;
+export declare const Checkbox: import("../../core").MantineComponent<{
+    props: CheckboxProps;
+    ref: HTMLInputElement;
+    stylesNames: CheckboxStylesNames;
+    vars: CheckboxCssVariables;
+    staticComponents: {
+        Group: typeof CheckboxGroup;
+    };
+}>;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { MantineSize, Factory } from '../../../core';
+import { InputWrapperStylesNames, InputWrapperProps } from '../../Input';
+export type CheckboxGroupStylesNames = InputWrapperStylesNames;
+export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'> {
+    /** `Checkbox` components */
+    children: React.ReactNode;
+    /** Controlled component value */
+    value?: string[];
+    /** Default value for uncontrolled component */
+    defaultValue?: string[];
+    /** Called when value changes */
+    onChange?(value: string[]): void;
+    /** Props passed down to the `Input.Wrapper` */
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    /** Controls size of the `Input.Wrapper`, `'sm'` by default */
+    size?: MantineSize | (string & {});
+}
+export type CheckboxGroupFactory = Factory<{
+    props: CheckboxGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: CheckboxGroupStylesNames;
+}>;
+export declare const CheckboxGroup: import("../../../core").MantineComponent<{
+    props: CheckboxGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: CheckboxGroupStylesNames;
+}>;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MantineSize } from '../../core';
+interface CheckboxGroupContextValue {
+    value: string[];
+    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    size: MantineSize | (string & {}) | undefined;
+}
+export declare const CheckboxGroupProvider: import("react").Provider<CheckboxGroupContextValue | null>;
+export declare const useCheckboxGroupContext: () => CheckboxGroupContextValue | null;
+export {};

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

@@ -1,2 +1,6 @@
+export { Checkbox } from './Checkbox';
+export { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 export { CheckIcon } from './CheckIcon';
-export type { CheckboxIconProps } from './CheckIcon';
+export type { CheckboxIconProps, CheckIconProps } from './CheckIcon';
+export type { CheckboxCssVariables, CheckboxFactory, CheckboxProps, CheckboxStylesNames, } from './Checkbox';
+export type { CheckboxGroupFactory, CheckboxGroupProps, CheckboxGroupStylesNames, } from './CheckboxGroup/CheckboxGroup';