@mantine/core 8.3.13 → 9.0.0-alpha.0

package/lib/components/PinInput/PinInput.d.ts

@@ -1,21 +1,22 @@
-import { BoxProps, ElementProps, Factory, MantineRadius, MantineSize, MantineSpacing, StylesApiProps } from '../../core';
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, MantineSize, MantineSpacing, StylesApiProps } from '../../core';
 import { InputProps } from '../Input';
 export type PinInputStylesNames = 'root' | 'pinInput' | 'input';
 export type PinInputCssVariables = {
     root: '--pin-input-size';
 };
-export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange'> {
+export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange' | 'ref'> {
+    ref?: React.Ref<HTMLInputElement>;
     /** Hidden input `name` attribute */
     name?: string;
     /** Hidden input `form` attribute */
     form?: string;
-    /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default `'md'` */
+    /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' */
     gap?: MantineSpacing;
-    /** 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;
-    /** Controls inputs `width` and `height` @default `'sm'` */
+    /** Controls inputs `width` and `height` @default 'sm' */
     size?: MantineSize;
-    /** If set, the first input is focused when component is mounted @default `false` */
+    /** If set, the first input is focused when component is mounted @default false */
     autoFocus?: boolean;
     /** Controlled component value */
     value?: string;
@@ -25,11 +26,11 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     onChange?: (value: string) => void;
     /** Called when all inputs have value */
     onComplete?: (value: string) => void;
-    /** Inputs placeholder @default `'○'` */
+    /** Inputs placeholder @default '○' */
     placeholder?: string;
-    /** Determines whether focus should be moved automatically to the next input once filled @default `true` */
+    /** Determines whether focus should be moved automatically to the next input once filled @default true */
     manageFocus?: boolean;
-    /** Determines whether `autocomplete="one-time-code"` attribute should be set on all inputs @default `true` */
+    /** Determines whether `autocomplete="one-time-code"` attribute should be set on all inputs @default true */
     oneTimeCode?: boolean;
     /** Base id used to generate unique ids for inputs */
     id?: string;
@@ -37,11 +38,11 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     disabled?: boolean;
     /** Sets `aria-invalid` attribute and applies error styles to all inputs */
     error?: boolean;
-    /** Determines which values can be entered @default `'alphanumeric'` */
+    /** Determines which values can be entered @default 'alphanumeric' */
     type?: 'alphanumeric' | 'number' | RegExp;
-    /** Changes input type to `"password"` @default `false` */
+    /** Changes input type to `"password"` @default false */
     mask?: boolean;
-    /** Number of inputs @default `4` */
+    /** Number of inputs @default 4 */
     length?: number;
     /** If set, the user cannot edit the value */
     readOnly?: boolean;
@@ -52,21 +53,21 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     /** `aria-label` attribute */
     ariaLabel?: string;
     /** Props passed down to the hidden input */
-    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    hiddenInputProps?: React.ComponentProps<'input'>;
     /** Assigns ref of the root element */
-    rootRef?: React.ForwardedRef<HTMLDivElement>;
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Props added to the input element depending on its index */
-    getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'>;
+    getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'> & DataAttributes;
 }
 export type PinInputFactory = Factory<{
     props: PinInputProps;
-    ref: HTMLInputElement;
+    ref: HTMLDivElement;
     stylesNames: PinInputStylesNames;
     vars: PinInputCssVariables;
 }>;
 export declare const PinInput: import("../..").MantineComponent<{
     props: PinInputProps;
-    ref: HTMLInputElement;
+    ref: HTMLDivElement;
     stylesNames: PinInputStylesNames;
     vars: PinInputCssVariables;
 }>;

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

@@ -1,2 +1,8 @@
+import type { PinInputFactory, PinInputProps, PinInputStylesNames } from './PinInput';
 export { PinInput } from './PinInput';
-export type { PinInputProps, PinInputStylesNames, PinInputFactory } from './PinInput';
+export type { PinInputProps, PinInputStylesNames, PinInputFactory };
+export declare namespace PinInput {
+    type Props = PinInputProps;
+    type StylesNames = PinInputStylesNames;
+    type Factory = PinInputFactory;
+}

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

@@ -4,7 +4,7 @@ import { BasePortalProps } from '../Portal';
 import { TransitionOverride } from '../Transition';
 import type { PopoverFactory } from './Popover';
 import { PopoverWidth } from './Popover.types';
-interface PopoverContext {
+export interface PopoverContextValue {
     x: number;
     y: number;
     arrowX: number | undefined;
@@ -49,8 +49,4 @@ interface PopoverContext {
     floatingStrategy: FloatingStrategy | undefined;
     referenceHidden: boolean | undefined;
 }
-export declare const PopoverContextProvider: ({ children, value }: {
-    value: PopoverContext;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, usePopoverContext: () => PopoverContext;
-export {};
+export declare const PopoverContextProvider: import("react").Context<PopoverContextValue | null>, usePopoverContext: () => PopoverContextValue;

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

@@ -3,20 +3,21 @@ import { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy
 import { OverlayProps } from '../Overlay';
 import { BasePortalProps } from '../Portal';
 import { TransitionOverride } from '../Transition';
+import { PopoverContextValue } from './Popover.context';
 import { PopoverMiddlewares, PopoverWidth } from './Popover.types';
+import { PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';
+import { PopoverTargetProps } from './PopoverTarget/PopoverTarget';
 export type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';
 export type PopoverCssVariables = {
     dropdown: '--popover-radius' | '--popover-shadow';
 };
 export interface __PopoverProps {
-    /** Dropdown position relative to the target element @default `'bottom'` */
+    /** Dropdown position relative to the target element @default 'bottom' */
     position?: FloatingPosition;
-    /** Offset of the dropdown element @default `8` */
+    /** Offset of the dropdown element @default 8 */
     offset?: number | FloatingAxesOffsets;
     /** Called when dropdown position changes */
     onPositionChange?: (position: FloatingPosition) => void;
-    /** @deprecated: Do not use, will be removed in 9.0 */
-    positionDependencies?: any[];
     /** Called when dropdown closes */
     onClose?: () => void;
     /** Called when the popover is dismissed by clicking outside or by pressing escape */
@@ -25,47 +26,47 @@ export interface __PopoverProps {
     onOpen?: () => void;
     /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */
     keepMounted?: boolean;
-    /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default `{ duration: 150, transition: 'fade' }` */
+    /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */
     transitionProps?: TransitionOverride;
     /** Called when exit transition ends */
     onExitTransitionEnd?: () => void;
     /** Called when enter transition ends */
     onEnterTransitionEnd?: () => void;
-    /** Dropdown width, or `'target'` to make dropdown width the same as target element @default `'max-content'` */
+    /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */
     width?: PopoverWidth;
-    /** Floating ui middlewares to configure position handling @default `{ flip: true, shift: true, inline: false }` */
+    /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */
     middlewares?: PopoverMiddlewares;
-    /** Determines whether component should have an arrow @default `false` */
+    /** Determines whether component should have an arrow @default false */
     withArrow?: boolean;
-    /** Determines whether the overlay should be displayed when the dropdown is opened @default `false` */
+    /** Determines whether the overlay should be displayed when the dropdown is opened @default false */
     withOverlay?: boolean;
     /** Props passed down to `Overlay` component */
     overlayProps?: OverlayProps & ElementProps<'div'>;
-    /** Arrow size in px @default `7` */
+    /** Arrow size in px @default 7 */
     arrowSize?: number;
-    /** Arrow offset in px @default `5` */
+    /** Arrow offset in px @default 5 */
     arrowOffset?: number;
-    /** Arrow `border-radius` in px @default `0` */
+    /** Arrow `border-radius` in px @default 0 */
     arrowRadius?: number;
     /** Arrow position */
     arrowPosition?: ArrowPosition;
-    /** Determines whether dropdown should be rendered within the `Portal` @default `true` */
+    /** Determines whether dropdown should be rendered within the `Portal` @default true */
     withinPortal?: boolean;
     /** Props to pass down to the `Portal` when `withinPortal` is true */
     portalProps?: BasePortalProps;
-    /** Dropdown `z-index` @default `300` */
+    /** Dropdown `z-index` @default 300 */
     zIndex?: string | number;
-    /** 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.shadows` or any other valid CSS `box-shadow` value */
     shadow?: MantineShadow;
     /** If set, popover dropdown will not be rendered */
     disabled?: boolean;
-    /** Determines whether focus should be automatically returned to control when dropdown closes @default `false` */
+    /** Determines whether focus should be automatically returned to control when dropdown closes @default false */
     returnFocus?: boolean;
-    /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default `'absolute'` */
+    /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */
     floatingStrategy?: FloatingStrategy;
-    /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default `true` */
+    /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */
     hideDetached?: boolean;
     /** Prevents popover from flipping/shifting when it the dropdown is visible */
     preventPositionChangeWhenVisible?: boolean;
@@ -80,17 +81,17 @@ export interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFact
     opened?: boolean;
     /** Called with current state when dropdown opens or closes */
     onChange?: (opened: boolean) => void;
-    /** Determines whether dropdown should be closed on outside clicks @default `true` */
+    /** Determines whether dropdown should be closed on outside clicks @default true */
     closeOnClickOutside?: boolean;
     /** Events that trigger outside clicks */
     clickOutsideEvents?: string[];
-    /** Determines whether focus should be trapped within dropdown @default `false` */
+    /** Determines whether focus should be trapped within dropdown @default false */
     trapFocus?: boolean;
-    /** Determines whether dropdown should be closed when `Escape` key is pressed @default `true` */
+    /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */
     closeOnEscape?: boolean;
     /** Id base to create accessibility connections */
     id?: string;
-    /** Determines whether dropdown and target elements should have accessible roles @default `true` */
+    /** Determines whether dropdown and target elements should have accessible roles @default true */
     withRoles?: boolean;
 }
 export type PopoverFactory = Factory<{
@@ -101,16 +102,21 @@ export type PopoverFactory = Factory<{
 export declare function Popover(_props: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Popover {
     var Target: import("../..").MantineComponent<{
-        props: import(".").PopoverTargetProps;
+        props: PopoverTargetProps;
         ref: HTMLElement;
         compound: true;
     }>;
     var Dropdown: import("../..").MantineComponent<{
-        props: import(".").PopoverDropdownProps;
+        props: PopoverDropdownProps;
         ref: HTMLDivElement;
         stylesNames: PopoverStylesNames;
         compound: true;
     }>;
+    var varsResolver: import("../..").VarsResolver<{
+        props: PopoverProps;
+        stylesNames: PopoverStylesNames;
+        vars: PopoverCssVariables;
+    }>;
     var displayName: string;
     var extend: (input: ExtendComponent<PopoverFactory>) => import("../../core/factory/factory").ExtendsRootComponent<{
         props: PopoverProps;
@@ -118,3 +124,19 @@ export declare namespace Popover {
         vars: PopoverCssVariables;
     }>;
 }
+export declare namespace Popover {
+    type Props = PopoverProps;
+    type __Props = __PopoverProps;
+    type Factory = PopoverFactory;
+    type StylesNames = PopoverStylesNames;
+    type TargetProps = PopoverTargetProps;
+    type DropdownProps = PopoverDropdownProps;
+    type Width = PopoverWidth;
+    type ContextValue = PopoverContextValue;
+    namespace Target {
+        type Props = PopoverTargetProps;
+    }
+    namespace Dropdown {
+        type Props = PopoverDropdownProps;
+    }
+}

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

@@ -4,7 +4,7 @@ export interface PopoverTargetProps {
     children: React.ReactNode;
     /** Key of the prop that should be used to access element ref */
     refProp?: string;
-    /** Popup accessible type @default `'dialog'` */
+    /** Popup accessible type @default 'dialog' */
     popupType?: string;
 }
 export type PopoverTargetFactory = Factory<{

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

@@ -1,7 +1,10 @@
+import type { __PopoverProps, PopoverFactory, PopoverProps, PopoverStylesNames } from './Popover';
+import type { PopoverContextValue } from './Popover.context';
+import type { PopoverWidth } from './Popover.types';
+import type { PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';
+import type { PopoverTargetProps } from './PopoverTarget/PopoverTarget';
 export { Popover } from './Popover';
 export { PopoverDropdown } from './PopoverDropdown/PopoverDropdown';
 export { PopoverTarget } from './PopoverTarget/PopoverTarget';
-export type { PopoverFactory, PopoverProps, __PopoverProps, PopoverStylesNames } from './Popover';
-export type { PopoverTargetProps } from './PopoverTarget/PopoverTarget';
-export type { PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';
-export type { PopoverWidth } from './Popover.types';
+export { usePopoverContext } from './Popover.context';
+export type { PopoverProps, __PopoverProps, PopoverFactory, PopoverStylesNames, PopoverTargetProps, PopoverDropdownProps, PopoverWidth, PopoverContextValue, };

package/lib/components/Popover/use-popover.d.ts

@@ -3,7 +3,6 @@ import { PopoverMiddlewares, PopoverWidth } from './Popover.types';
 interface UsePopoverOptions {
     offset: number | FloatingAxesOffsets;
     position: FloatingPosition;
-    positionDependencies: any[] | undefined;
     onPositionChange?: (position: FloatingPosition) => void;
     opened: boolean | undefined;
     defaultOpened: boolean | undefined;

package/lib/components/Portal/OptionalPortal.d.ts

@@ -1,7 +1,14 @@
 import { Factory } from '../../core';
 import { PortalProps } from './Portal';
 export interface OptionalPortalProps extends PortalProps {
-    /** Determines whether children should be rendered inside `<Portal />` */
+    /**
+     * Determines whether children should be rendered inside Portal.
+     * When false, children are rendered as regular React children.
+     *
+     * Note: In test environment, Portal is always disabled regardless of this value.
+     *
+     * @default true
+     */
     withinPortal?: boolean;
 }
 export type OptionalPortalFactory = Factory<{

package/lib/components/Portal/Portal.d.ts

@@ -1,12 +1,27 @@
 import { Factory } from '../../core';
-export interface BasePortalProps extends React.ComponentPropsWithoutRef<'div'> {
-    /** Element inside which portal should be created, by default a new div element is created and appended to the `document.body` */
+export interface BasePortalProps extends React.ComponentProps<'div'> {
+    /**
+     * Target element where portal should be rendered. Accepts:
+     * - HTMLElement: Renders portal inside this element
+     * - string: CSS selector - renders inside first matching element
+     * - undefined: Uses shared portal node or creates new one based on `reuseTargetNode`
+     *
+     * Note: If selector doesn't match any element, portal will not render
+     */
     target?: HTMLElement | string;
-    /** If set, all portals are rendered in the same DOM node @default `true` */
+    /**
+     * When true and target is not specified, all Portal instances share a single
+     * container node appended to document.body. When false, each Portal creates
+     * its own container node.
+     *
+     * Has no effect when target is specified.
+     *
+     * @default true
+     */
     reuseTargetNode?: boolean;
 }
 export interface PortalProps extends BasePortalProps {
-    /** Portal children, for example, custom modal or popover */
+    /** Content to render inside the portal */
     children: React.ReactNode;
 }
 export type PortalFactory = Factory<{

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

@@ -1,4 +1,11 @@
+import type { OptionalPortalProps } from './OptionalPortal';
+import type { BasePortalProps, PortalProps } from './Portal';
 export { Portal } from './Portal';
 export { OptionalPortal } from './OptionalPortal';
-export type { PortalProps, BasePortalProps } from './Portal';
-export type { OptionalPortalProps } from './OptionalPortal';
+export type { PortalProps, BasePortalProps, OptionalPortalProps };
+export declare namespace Portal {
+    type Props = PortalProps;
+}
+export declare namespace OptionalPortal {
+    type Props = OptionalPortalProps;
+}

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

@@ -1,11 +1,7 @@
 import { GetStylesApi } from '../../core';
 import type { ProgressRootFactory } from './ProgressRoot/ProgressRoot';
-interface ProgressContextValue {
+export interface ProgressContextValue {
     getStyles: GetStylesApi<ProgressRootFactory>;
     autoContrast: boolean | undefined;
 }
-export declare const ProgressProvider: ({ children, value }: {
-    value: ProgressContextValue;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useProgressContext: () => ProgressContextValue;
-export {};
+export declare const ProgressProvider: import("react").Context<ProgressContextValue | null>, useProgressContext: () => ProgressContextValue;

package/lib/components/Progress/Progress.d.ts

@@ -6,11 +6,11 @@ export type ProgressStylesNames = ProgressRootStylesNames;
 export interface ProgressProps extends __ProgressRootProps, StylesApiProps<ProgressFactory> {
     /** Value of the progress */
     value: number;
-    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */
     color?: MantineColor;
-    /** If set, the section has stripes @default `false` */
+    /** If set, the section has stripes @default false */
     striped?: boolean;
-    /** If set, the sections stripes are animated, `striped` prop is ignored @default `false` */
+    /** If set, the sections stripes are animated (automatically enables striped) @default false */
     animated?: boolean;
 }
 export type ProgressFactory = Factory<{

package/lib/components/Progress/ProgressRoot/ProgressRoot.d.ts

@@ -4,15 +4,15 @@ export type ProgressRootCssVariables = {
     root: '--progress-size' | '--progress-radius' | '--progress-transition-duration';
 };
 export interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {
-    /** Controls track height @default `'md'` */
+    /** Controls track height @default 'md' */
     size?: MantineSize | (string & {}) | number;
-    /** 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;
-    /** If set, adjusts text color based on background color for `filled` variant */
+    /** If set, adjusts label text color based on section background color for readability */
     autoContrast?: boolean;
-    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    /** Controls sections width transition duration, value is specified in ms @default 100 */
     transitionDuration?: number;
-    /** Controls orientation @default `'horizontal'` */
+    /** Controls orientation @default 'horizontal' */
     orientation?: 'horizontal' | 'vertical';
 }
 export interface ProgressRootProps extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {

package/lib/components/Progress/ProgressSection/ProgressSection.d.ts

@@ -3,13 +3,13 @@ export type ProgressSectionStylesNames = 'section';
 export interface ProgressSectionProps extends BoxProps, CompoundStylesApiProps<ProgressSectionFactory>, ElementProps<'div'> {
     /** Value of the section in 0–100 range */
     value: number;
-    /** Determines whether `aria-*` props should be added to the root element @default `true` */
+    /** Determines whether `aria-*` props should be added to the root element @default true */
     withAria?: boolean;
-    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */
     color?: MantineColor;
-    /** If set, the section has stripes @default `false` */
+    /** If set, the section has stripes @default false */
     striped?: boolean;
-    /** If set, the sections stripes are animated, `striped` prop is ignored @default `false` */
+    /** If set, the sections stripes are animated, `striped` prop is ignored @default false */
     animated?: boolean;
 }
 export type ProgressSectionFactory = Factory<{

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

@@ -1,8 +1,26 @@
+import type { ProgressFactory, ProgressProps, ProgressStylesNames } from './Progress';
+import type { ProgressContextValue } from './Progress.context';
+import type { ProgressLabelProps } from './ProgressLabel/ProgressLabel';
+import type { ProgressRootProps } from './ProgressRoot/ProgressRoot';
+import type { ProgressSectionProps } from './ProgressSection/ProgressSection';
 export { Progress } from './Progress';
 export { ProgressLabel } from './ProgressLabel/ProgressLabel';
 export { ProgressRoot } from './ProgressRoot/ProgressRoot';
 export { ProgressSection } from './ProgressSection/ProgressSection';
-export type { ProgressFactory, ProgressProps, ProgressStylesNames } from './Progress';
-export type { ProgressLabelProps } from './ProgressLabel/ProgressLabel';
-export type { ProgressRootProps } from './ProgressRoot/ProgressRoot';
-export type { ProgressSectionProps } from './ProgressSection/ProgressSection';
+export { useProgressContext } from './Progress.context';
+export type { ProgressProps, ProgressFactory, ProgressStylesNames, ProgressLabelProps, ProgressRootProps, ProgressSectionProps, ProgressContextValue, };
+export declare namespace Progress {
+    type Props = ProgressProps;
+    type Factory = ProgressFactory;
+    type StylesNames = ProgressStylesNames;
+    type ContextValue = ProgressContextValue;
+    namespace Label {
+        type Props = ProgressLabelProps;
+    }
+    namespace Root {
+        type Props = ProgressRootProps;
+    }
+    namespace Section {
+        type Props = ProgressSectionProps;
+    }
+}

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

@@ -12,28 +12,30 @@ export type RadioCssVariables = {
 export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {
     /** Content of the `label` associated with the radio */
     label?: React.ReactNode;
-    /** Key of `theme.colors` or any valid CSS color to set input color in checked state @default `theme.primaryColor` */
+    /** Key of theme.colors or any valid CSS color to set radio 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 & {});
-    /** A component that replaces default check icon */
+    /** A component that replaces the default radio icon (centered dot) */
     icon?: React.FC<RadioIconProps>;
     /** 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?: React.ReactNode;
     /** Error displayed below the label */
     error?: React.ReactNode;
-    /** 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;
     /** Assigns ref of the root element */
-    rootRef?: React.ForwardedRef<HTMLDivElement>;
-    /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */
     iconColor?: MantineColor;
     /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;
+    /** If set, applies error styles to the radio when `error` prop is set @default true */
+    withErrorStyles?: boolean;
 }
 export type RadioFactory = Factory<{
     props: RadioProps;

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

@@ -1,4 +1,8 @@
 import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '../../../core';
+export interface RadioCardContextValue {
+    checked: boolean;
+}
+export declare const RadioCardContext: import("react").Context<RadioCardContextValue | null>;
 export type RadioCardStylesNames = 'card';
 export type RadioCardCssVariables = {
     card: '--card-radius';
@@ -8,9 +12,9 @@ export interface RadioCardProps extends BoxProps, StylesApiProps<RadioCardFactor
     checked?: boolean;
     /** 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 `Radio.Group` */
+    /** Value of the radio, used with Radio.Group */
     value?: string;
     /** Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` */
     name?: string;

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

@@ -1,18 +1,26 @@
 import { DataAttributes, Factory, MantineSize } from '../../../core';
 import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
+export interface RadioGroupContextValue<Value extends string = string> {
+    size: MantineSize | undefined;
+    value: Value | null;
+    onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;
+    name: string;
+    disabled: boolean | undefined;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue<string> | null>;
 export type RadioGroupStylesNames = InputWrapperStylesNames;
-export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange' | 'value' | 'defaultValue'> {
+export interface RadioGroupProps<Value extends string = string> extends Omit<InputWrapperProps, 'onChange' | 'value' | 'defaultValue'> {
     /** `Radio` components and any other elements */
     children: React.ReactNode;
     /** Controlled component value */
-    value?: string | null;
+    value?: Value | null;
     /** Uncontrolled component default value */
-    defaultValue?: string | null;
+    defaultValue?: Value | null;
     /** Called when value changes */
-    onChange?: (value: string) => void;
+    onChange?: (value: Value) => void;
     /** Props passed down to the `Input.Wrapper` */
-    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;
     /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */
     name?: string;
@@ -25,9 +33,23 @@ export type RadioGroupFactory = Factory<{
     props: RadioGroupProps;
     ref: HTMLDivElement;
     stylesNames: RadioGroupStylesNames;
+    signature: <Value extends string = string>(props: RadioGroupProps<Value>) => React.JSX.Element;
 }>;
-export declare const RadioGroup: import("../../..").MantineComponent<{
+export declare const RadioGroup: (<Value extends string = string>(props: RadioGroupProps<Value>) => React.JSX.Element) & import("../../../core/factory/factory").ThemeExtend<{
     props: RadioGroupProps;
     ref: HTMLDivElement;
     stylesNames: RadioGroupStylesNames;
-}>;
+    signature: <Value extends string = string>(props: RadioGroupProps<Value>) => React.JSX.Element;
+}> & import("../../../core/factory/factory").ComponentClasses<{
+    props: RadioGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: RadioGroupStylesNames;
+    signature: <Value extends string = string>(props: RadioGroupProps<Value>) => React.JSX.Element;
+}> & Record<string, never> & import("../../..").FactoryComponentWithProps<{
+    props: RadioGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: RadioGroupStylesNames;
+    signature: <Value extends string = string>(props: RadioGroupProps<Value>) => React.JSX.Element;
+}> & {
+    displayName?: string;
+};

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

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

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

@@ -6,17 +6,17 @@ export type RadioIndicatorCssVariables = {
     indicator: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color' | '--radio-icon-size';
 };
 export interface RadioIndicatorProps extends BoxProps, StylesApiProps<RadioIndicatorFactory>, 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 indicator 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` */
+    /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */
     iconColor?: MantineColor;
     /** If set, adjusts text color based on background color for `filled` variant */
     autoContrast?: boolean;
-    /** A component that replaces default check icon */
+    /** A component that replaces the default radio icon (centered dot) */
     icon?: React.FC<RadioIconProps>;
     /** Checked state */
     checked?: boolean;