@mantine/core 7.0.0-alpha.20 → 7.0.0-alpha.22

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

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

package/lib/components/Dialog/Dialog.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../core';
+import { AffixBaseProps } from '../Affix';
+import { PaperBaseProps } from '../Paper';
+import { TransitionOverride } from '../Transition';
+export type DialogStylesNames = 'root' | 'closeButton';
+export type DialogCssVariables = {
+    root: '--dialog-size';
+};
+export interface DialogProps extends BoxProps, AffixBaseProps, PaperBaseProps, StylesApiProps<DialogFactory>, ElementProps<'div'> {
+    /** If set dialog will not be unmounted from the DOM when it is hidden, display: none styles will be added instead */
+    keepMounted?: boolean;
+    /** Determines whether the close button should be displayed, `true` by default */
+    withCloseButton?: boolean;
+    /** Called when the close button is clicked */
+    onClose?(): void;
+    /** Dialog content */
+    children?: React.ReactNode;
+    /** Opened state */
+    opened: boolean;
+    /** Overrides default transition, `{ transition: 'pop-top-right', duration: 200 }` by default */
+    transitionProps?: TransitionOverride;
+    /** Controls `width` of the dialog, `'md'` by default */
+    size?: MantineSize | (string & {}) | number;
+}
+export type DialogFactory = Factory<{
+    props: DialogProps;
+    ref: HTMLDivElement;
+    stylesNames: DialogStylesNames;
+    vars: DialogCssVariables;
+}>;
+export declare const Dialog: import("../../core").MantineComponent<{
+    props: DialogProps;
+    ref: HTMLDivElement;
+    stylesNames: DialogStylesNames;
+    vars: DialogCssVariables;
+}>;

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

@@ -0,0 +1,2 @@
+export { Dialog } from './Dialog';
+export type { DialogCssVariables, DialogFactory, DialogProps, DialogStylesNames } from './Dialog';

package/lib/components/Flex/Flex.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, StyleProp, MantineSize } from '../../core';
+export type FlexStylesNames = 'root';
+export interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {
+    /** `gap` CSS property */
+    gap?: StyleProp<MantineSize | (string & {}) | number>;
+    /** `row-gap` CSS property */
+    rowGap?: StyleProp<MantineSize | (string & {}) | number>;
+    /** `column-gap` CSS property */
+    columnGap?: StyleProp<MantineSize | (string & {}) | number>;
+    /** `align-items` CSS property */
+    align?: StyleProp<React.CSSProperties['alignItems']>;
+    /** justify-content CSS property */
+    justify?: StyleProp<React.CSSProperties['justifyContent']>;
+    /** flex-wrap CSS property */
+    wrap?: StyleProp<React.CSSProperties['flexWrap']>;
+    /** flex-direction CSS property */
+    direction?: StyleProp<React.CSSProperties['flexDirection']>;
+}
+export type FlexFactory = Factory<{
+    props: FlexProps;
+    ref: HTMLDivElement;
+    stylesNames: FlexStylesNames;
+}>;
+export declare const Flex: import("../../core").MantineComponent<{
+    props: FlexProps;
+    ref: HTMLDivElement;
+    stylesNames: FlexStylesNames;
+}>;

package/lib/components/Flex/flex-props.d.ts

@@ -0,0 +1,2 @@
+import { SystemPropData } from '../../core';
+export declare const FLEX_STYLE_PROPS_DATA: Record<string, SystemPropData>;

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

@@ -0,0 +1,3 @@
+export { FLEX_STYLE_PROPS_DATA } from './flex-props';
+export { Flex } from './Flex';
+export type { FlexFactory, FlexProps, FlexStylesNames } from './Flex';

package/lib/components/Highlight/Highlight.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MantineColor, MantineTheme, PolymorphicFactory } from '../../core';
 import { TextStylesNames, TextProps, TextVariant } from '../Text';
-export interface HighlightProps extends TextProps {
+export interface HighlightProps extends Omit<TextProps, 'color'> {
     /** Substring or an array of substrings to highlight in `children` */
     highlight: string | string[];
     /** Key of `theme.colors` or any valid CSS color, passed to `Mark` component `color` prop, `yellow` by default */

package/lib/components/Image/Image.d.ts

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

package/lib/components/Indicator/Indicator.d.ts

@@ -28,7 +28,7 @@ export interface IndicatorProps extends BoxProps, StylesApiProps<IndicatorFactor
     /** Determines whether the indicator should have processing animation, `false` by default */
     processing?: boolean;
     /** Indicator z-index, `200` by default */
-    zIndex?: React.CSSProperties['zIndex'];
+    zIndex?: string | number;
 }
 export type IndicatorFactory = Factory<{
     props: IndicatorProps;

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

@@ -1,7 +1,10 @@
+import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
 export type InputPlaceholderStylesNames = 'placeholder';
 export interface InputPlaceholderProps extends BoxProps, StylesApiProps<InputPlaceholderFactory>, ElementProps<'span'> {
     __staticSelector?: string;
+    /** If set, the placeholder will have error styles, `false` by default */
+    error?: React.ReactNode;
 }
 export type InputPlaceholderFactory = Factory<{
     props: InputPlaceholderProps;

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

@@ -10,15 +10,17 @@ 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]>; }, "style" | "label" | "className" | "id" | "unstyled" | "variant" | "classNames" | "styles" | "vars" | "size" | "required" | "__staticSelector" | "__stylesApiProps" | "wrapperProps" | "description" | "error" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder"> & {
+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]>; }, "size" | "className" | "style" | "label" | "variant" | "styles" | "id" | "unstyled" | "classNames" | "vars" | "required" | "error" | "description" | "__staticSelector" | "__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: {
-        children?: import("react").ReactNode;
+        color?: string | undefined;
+        className: string | undefined;
         style: import("../../core").MantineStyleProp;
         slot?: string | undefined;
         title?: string | undefined;
+        children?: import("react").ReactNode;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -26,7 +28,6 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
-        className: string | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
@@ -55,7 +56,6 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
-        color?: string | undefined;
         itemProp?: string | undefined;
         itemScope?: boolean | undefined;
         itemType?: string | undefined;
@@ -78,7 +78,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         'aria-colindextext'?: string | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "true" | "time" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-description'?: string | undefined;
         'aria-details'?: string | undefined;
@@ -88,7 +88,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         'aria-expanded'?: (boolean | "true" | "false") | undefined;
         'aria-flowto'?: string | undefined;
         'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "dialog" | "true" | "menu" | "grid" | "false" | "listbox" | "tree" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
         'aria-hidden'?: (boolean | "true" | "false") | undefined;
         'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
@@ -298,7 +298,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: import("../../core").MantineSize | (string & {}) | undefined;
         inputContainer: ((children: import("react").ReactNode) => import("react").ReactNode) | undefined;
-        inputWrapperOrder: ("input" | "label" | "description" | "error")[] | undefined;
+        inputWrapperOrder: ("input" | "label" | "error" | "description")[] | undefined;
         withAsterisk: boolean | undefined;
         variant: string | undefined;
     } & BoxProps;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { GetStylesApi } from '../../core';
+import type { ListFactory } from './List';
+interface ListContextValue {
+    getStyles: GetStylesApi<ListFactory>;
+    center: boolean | undefined;
+    icon: React.ReactNode | undefined;
+}
+export declare const ListProvider: ({ children, value }: {
+    value: ListContextValue;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useListContext: () => ListContextValue;
+export {};

package/lib/components/List/List.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineSpacing } from '../../core';
+import { ListItem, ListItemStylesNames } from './ListItem/ListItem';
+export type ListStylesNames = 'root' | ListItemStylesNames;
+export type ListCssVariables = {
+    root: '--list-fz' | '--list-lh' | '--list-spacing';
+};
+export interface ListProps extends BoxProps, StylesApiProps<ListFactory>, ElementProps<'ul', 'type'> {
+    /** `List.Item` components only */
+    children?: React.ReactNode;
+    /** List type: `ol` or `ul`, `'unordered'` by default */
+    type?: 'ordered' | 'unordered';
+    /** Determines whether list items should be offset with padding, `false` by default */
+    withPadding?: boolean;
+    /** Controls `font-size` and `line-height`, `'md'` by default */
+    size?: MantineSize;
+    /** Icon that replaces list item dot */
+    icon?: React.ReactNode;
+    /** Key of `theme.spacing` or any valid CSS value to set spacing between items, `0` by default */
+    spacing?: MantineSpacing | (string & {}) | number;
+    /** Determines whether items must be centered with their icon, `false` by default */
+    center?: boolean;
+    /** Controls `list-style-type`, by default inferred from `type` */
+    listStyleType?: React.CSSProperties['listStyleType'];
+}
+export type ListFactory = Factory<{
+    props: ListProps;
+    ref: HTMLUListElement;
+    stylesNames: ListStylesNames;
+    vars: ListCssVariables;
+    staticComponents: {
+        Item: typeof ListItem;
+    };
+}>;
+export declare const List: import("../../core").MantineComponent<{
+    props: ListProps;
+    ref: HTMLUListElement;
+    stylesNames: ListStylesNames;
+    vars: ListCssVariables;
+    staticComponents: {
+        Item: typeof ListItem;
+    };
+}>;

package/lib/components/List/ListItem/ListItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+export type ListItemStylesNames = 'item' | 'itemWrapper' | 'itemIcon' | 'itemLabel';
+export interface ListItemProps extends BoxProps, StylesApiProps<ListItemFactory>, ElementProps<'li'> {
+    /** Icon to replace item bullet */
+    icon?: React.ReactNode;
+    /** Item content */
+    children?: React.ReactNode;
+}
+export type ListItemFactory = Factory<{
+    props: ListItemProps;
+    ref: HTMLLIElement;
+    stylesNames: ListItemStylesNames;
+    compound: true;
+}>;
+export declare const ListItem: import("../../../core").MantineComponent<{
+    props: ListItemProps;
+    ref: HTMLLIElement;
+    stylesNames: ListItemStylesNames;
+    compound: true;
+}>;

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

@@ -0,0 +1,4 @@
+export { List } from './List';
+export { ListItem } from './ListItem/ListItem';
+export type { ListProps, ListStylesNames, ListCssVariables, ListFactory } from './List';
+export type { ListItemProps, ListItemStylesNames, ListItemFactory } from './ListItem/ListItem';

package/lib/components/LoadingOverlay/LoadingOverlay.d.ts

@@ -0,0 +1,32 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { TransitionOverride } from '../Transition';
+import { LoaderProps } from '../Loader';
+import { OverlayProps } from '../Overlay';
+export type LoadingOverlayStylesNames = 'root' | 'loader' | 'overlay';
+export type LoadingOverlayCssVariables = {
+    root: '--lo-z-index';
+};
+export interface LoadingOverlayProps extends BoxProps, StylesApiProps<LoadingOverlayFactory>, ElementProps<'div'> {
+    /** Props passed down to `Transition` component, `{ transition: 'fade', duration: 0 }` by default */
+    transitionProps?: TransitionOverride;
+    /** Props passed down to `Loader` component */
+    loaderProps?: LoaderProps;
+    /** Props passed down to `Overlay` component */
+    overlayProps?: OverlayProps;
+    /** Determines whether the overlay should be visible, `false` by default */
+    visible?: boolean;
+    /** Controls overlay `z-index`, `400` by default */
+    zIndex?: string | number;
+}
+export type LoadingOverlayFactory = Factory<{
+    props: LoadingOverlayProps;
+    ref: HTMLDivElement;
+    stylesNames: LoadingOverlayStylesNames;
+    vars: LoadingOverlayCssVariables;
+}>;
+export declare const LoadingOverlay: import("../../core").MantineComponent<{
+    props: LoadingOverlayProps;
+    ref: HTMLDivElement;
+    stylesNames: LoadingOverlayStylesNames;
+    vars: LoadingOverlayCssVariables;
+}>;

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

@@ -0,0 +1,2 @@
+export { LoadingOverlay } from './LoadingOverlay';
+export type { LoadingOverlayProps, LoadingOverlayCssVariables, LoadingOverlayFactory, LoadingOverlayStylesNames, } from './LoadingOverlay';

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

@@ -8,7 +8,7 @@ interface ModalBaseContextValue {
     getTitleId(): string;
     getBodyId(): string;
     transitionProps: Partial<TransitionOverride> | undefined;
-    zIndex: React.CSSProperties['zIndex'];
+    zIndex: string | number | undefined;
     opened: boolean;
     onClose(): void;
     closeOnEscape: boolean | undefined;

package/lib/components/ModalBase/ModalBase.d.ts

@@ -30,7 +30,7 @@ export interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {
     /** Determines whether focus should be returned to the last active element when `onClose` is called, `true` by default */
     returnFocus?: boolean;
     /** `z-index` CSS property of the root element, `200` by default */
-    zIndex?: React.CSSProperties['zIndex'];
+    zIndex?: string | number;
     /** Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by default */
     shadow?: MantineShadow | (string & {});
     /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding, `'md'` by default */

package/lib/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { OnValueChange, NumberFormatValues } from 'react-number-format';
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
+export interface NumberInputHandlers {
+    increment(): void;
+    decrement(): void;
+}
+export type NumberInputStylesNames = 'controls' | 'control' | __InputStylesNames;
+export type NumberInputCssVariables = {
+    controls: '--ni-chevron-size';
+};
+export interface NumberInputProps extends BoxProps, __BaseInputProps, StylesApiProps<NumberInputFactory>, ElementProps<'input', 'size' | 'type' | 'onChange'> {
+    /** Controlled component value */
+    value?: number | string;
+    /** Uncontrolled component default value */
+    defaultValue?: number | string;
+    /** Called when value changes */
+    onChange?(value: number | string): void;
+    /** Called when value changes with `react-number-format` payload */
+    onValueChange?: OnValueChange;
+    /** Determines whether leading zeros are allowed. If not set, leading zeros are removed when the input is blurred. `false` by default */
+    allowLeadingZeros?: boolean;
+    /** Determines whether negative values are allowed, `true` by default */
+    allowNegative?: boolean;
+    /** Characters which when pressed result in a decimal separator, `['.']` by default */
+    allowedDecimalSeparators?: string[];
+    /** Limits the number of digits that can be entered after the decimal point */
+    decimalScale?: number;
+    /** Character used as a decimal separator, `'.'` by default */
+    decimalSeparator?: string;
+    /** If set, 0s are added after `decimalSeparator` to match given `decimalScale`. `false` by default */
+    fixedDecimalScale?: boolean;
+    /** Prefix added before the input value */
+    prefix?: string;
+    /** Suffix added after the input value */
+    suffix?: string;
+    /** Defines the thousand grouping style. */
+    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+    /** A function to validate the input value. If this function returns `false`, the `onChange` will not be called and the input value will not change. */
+    isAllowed?(values: NumberFormatValues): boolean;
+    /** If value is passed as string representation of numbers (unformatted) and number is used in any format props like in prefix or suffix in numeric format and format prop in pattern format then this should be passed as `true`. `false` by default. */
+    valueIsNumericString?: boolean;
+    /** Controls input `type` attribute, `'text'` by default */
+    type?: 'text' | 'tel' | 'password';
+    /** A character used to separate thousands */
+    thousandSeparator?: string | boolean;
+    /** Minimum possible value */
+    min?: number;
+    /** Maximum possible value */
+    max?: number;
+    /** Number by which value will be incremented/decremented with up/down controls and keyboard arrows, `1` by default */
+    step?: number;
+    /** Determines whether the up/down controls should be hidden, `false` by default */
+    hideControls?: boolean;
+    /** Controls how value is clamped, `strict` – user is not allowed to enter values that are not in `[min, max]` range, `blur` – user is allowed to enter any values, but the value is clamped when the input loses focus (default behavior), `none` – lifts all restrictions, `[min, max]` range is applied only for controls and up/down keys */
+    clampBehavior?: 'strict' | 'blur' | 'none';
+    /** Determines whether decimal values are allowed, `true` by default */
+    allowDecimal?: boolean;
+    /** Increment/decrement handlers */
+    handlersRef?: React.ForwardedRef<NumberInputHandlers | undefined>;
+    /** Value set to the input when increment/decrement buttons are clicked or up/down arrows pressed if the input is empty, `0` by default */
+    startValue?: number;
+}
+export type NumberInputFactory = Factory<{
+    props: NumberInputProps;
+    ref: HTMLDivElement;
+    stylesNames: NumberInputStylesNames;
+    vars: NumberInputCssVariables;
+    variant: InputVariant;
+}>;
+export declare const NumberInput: import("../../core").MantineComponent<{
+    props: NumberInputProps;
+    ref: HTMLDivElement;
+    stylesNames: NumberInputStylesNames;
+    vars: NumberInputCssVariables;
+    variant: InputVariant;
+}>;

package/lib/components/NumberInput/NumberInputChevron.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ChevronProps extends React.ComponentPropsWithoutRef<'svg'> {
+    direction: 'up' | 'down';
+}
+export declare function NumberInputChevron({ direction, style, ...others }: ChevronProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { NumberInput } from './NumberInput';
+export type { NumberInputCssVariables, NumberInputFactory, NumberInputProps, NumberInputStylesNames, NumberInputHandlers, } from './NumberInput';

package/lib/components/Overlay/Overlay.d.ts

@@ -14,7 +14,7 @@ export interface OverlayProps extends BoxProps, StylesApiProps<OverlayFactory> {
     /** Changes overlay to gradient. If set, `color` prop is ignored */
     gradient?: string;
     /** Overlay z-index, `200` by default */
-    zIndex?: React.CSSProperties['zIndex'];
+    zIndex?: string | number;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, `0` by default */
     radius?: MantineRadius | (string & {}) | number;
     /** Content inside overlay */

package/lib/components/Paper/Paper.d.ts

@@ -4,7 +4,7 @@ export type PaperStylesNames = 'root';
 export type PaperCssVariables = {
     root: '--paper-radius' | '--paper-shadow';
 };
-export interface PaperProps extends BoxProps, StylesApiProps<PaperFactory> {
+export interface PaperBaseProps {
     /** 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 */
@@ -12,6 +12,8 @@ export interface PaperProps extends BoxProps, StylesApiProps<PaperFactory> {
     /** Determines whether the paper should have border, border color depends on color scheme, `false` by default */
     withBorder?: boolean;
 }
+export interface PaperProps extends BoxProps, PaperBaseProps, StylesApiProps<PaperFactory> {
+}
 export type PaperFactory = PolymorphicFactory<{
     props: PaperProps;
     defaultComponent: 'div';

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

@@ -1,2 +1,2 @@
 export { Paper } from './Paper';
-export type { PaperProps, PaperStylesNames, PaperCssVariables, PaperFactory } from './Paper';
+export type { PaperProps, PaperStylesNames, PaperCssVariables, PaperFactory, PaperBaseProps, } from './Paper';

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

@@ -26,7 +26,7 @@ interface PopoverContext {
     withinPortal: boolean | undefined;
     portalProps?: Omit<PortalProps, 'children'>;
     closeOnEscape: boolean | undefined;
-    zIndex: React.CSSProperties['zIndex'];
+    zIndex: string | number | undefined;
     radius?: MantineRadius | (string & {}) | number | undefined;
     shadow?: MantineShadow | (string & {}) | undefined;
     onClose?(): void;

package/lib/components/Popover/Popover.d.ts

@@ -44,7 +44,7 @@ export interface __PopoverProps {
     /** Props to pass down to the `Portal` when `withinPortal` is true */
     portalProps?: Omit<PortalProps, 'children'>;
     /** Dropdown `z-index`, `300` by default */
-    zIndex?: React.CSSProperties['zIndex'];
+    zIndex?: string | number;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, `theme.defaultRadius` by default */
     radius?: MantineRadius | (string & {}) | number;
     /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */

package/lib/components/Radio/Radio.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineSize, MantineRadius } from '../../core';
+import { InlineInputStylesNames } from '../InlineInput';
+import { RadioIconProps } from './RadioIcon';
+import { RadioGroup } from './RadioGroup/RadioGroup';
+export type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';
+export type RadioCssVariables = {
+    root: '--radio-size' | '--radio-radius' | '--radio-color';
+};
+export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size'> {
+    /** Radio 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, `'sm'` by default */
+    size?: MantineSize;
+    /** Custom checked icon component, by default a circle is displayed in checked state */
+    icon?: React.FC<RadioIconProps>;
+    /** Props passed down to the root 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;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
+    radius?: MantineRadius | (string & {}) | number;
+}
+export type RadioFactory = Factory<{
+    props: RadioProps;
+    ref: HTMLInputElement;
+    stylesNames: RadioStylesNames;
+    vars: RadioCssVariables;
+    staticComponents: {
+        Group: typeof RadioGroup;
+    };
+}>;
+export declare const Radio: import("../../core").MantineComponent<{
+    props: RadioProps;
+    ref: HTMLInputElement;
+    stylesNames: RadioStylesNames;
+    vars: RadioCssVariables;
+    staticComponents: {
+        Group: typeof RadioGroup;
+    };
+}>;

package/lib/components/Radio/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MantineSize, Factory } from '../../../core';
+import { InputWrapperStylesNames, InputWrapperProps } from '../../Input';
+export type RadioGroupStylesNames = InputWrapperStylesNames;
+export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange'> {
+    /** `Radio` 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;
+    /** Name attribute of child radio inputs */
+    name?: string;
+}
+export type RadioGroupFactory = Factory<{
+    props: RadioGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: RadioGroupStylesNames;
+}>;
+export declare const RadioGroup: import("../../../core").MantineComponent<{
+    props: RadioGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: RadioGroupStylesNames;
+}>;

package/lib/components/Radio/RadioGroup.context.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { MantineSize } from '../../core';
+interface RadioGroupContextValue {
+    size: MantineSize | undefined;
+    value: string;
+    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    name: string;
+}
+export declare const RadioGroupProvider: ({ children, value }: {
+    value: RadioGroupContextValue;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useRadioGroupContext: () => RadioGroupContextValue | null;
+export {};

package/lib/components/Radio/RadioIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface RadioIconProps extends React.ComponentPropsWithoutRef<'svg'> {
+    size?: string | number;
+}
+export declare function RadioIcon({ size, style, ...others }: RadioIconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export { Radio } from './Radio';
+export { RadioGroup } from './RadioGroup/RadioGroup';
+export { RadioIcon } from './RadioIcon';
+export type { RadioIconProps } from './RadioIcon';
+export type { RadioCssVariables, RadioFactory, RadioProps, RadioStylesNames } from './Radio';
+export type { RadioGroupFactory, RadioGroupProps, RadioGroupStylesNames, } from './RadioGroup/RadioGroup';

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { GetStylesApi } from '../../core';
+import type { StepperFactory } from './Stepper';
+interface StepperContextValue {
+    getStyles: GetStylesApi<StepperFactory>;
+    orientation: 'horizontal' | 'vertical' | undefined;
+    iconPosition: 'left' | 'right' | undefined;
+}
+export declare const StepperProvider: ({ children, value }: {
+    value: StepperContextValue;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useStepperContext: () => StepperContextValue;
+export {};