@mantine/core 8.3.13 → 9.0.0-alpha.0

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

@@ -1,11 +1,12 @@
 import { BoxProps, DataAttributes, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 import { InputClearButton } from './InputClearButton/InputClearButton';
+import { ClearSectionMode } from './InputClearSection/InputClearSection';
 import { InputDescription } from './InputDescription/InputDescription';
 import { InputError } from './InputError/InputError';
 import { InputLabel } from './InputLabel/InputLabel';
 import { InputPlaceholder } from './InputPlaceholder/InputPlaceholder';
 import { __InputWrapperProps, InputWrapper, InputWrapperStylesNames } from './InputWrapper/InputWrapper';
-type WrapperProps = React.ComponentPropsWithoutRef<'div'> & DataAttributes;
+type WrapperProps = React.ComponentProps<'div'> & DataAttributes;
 export interface __BaseInputProps extends __InputWrapperProps, __InputProps {
     /** Props passed down to the root element */
     wrapperProps?: WrapperProps;
@@ -26,37 +27,43 @@ export interface __InputProps {
     /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */
     leftSectionWidth?: React.CSSProperties['width'];
     /** Props passed down to the `leftSection` element */
-    leftSectionProps?: React.ComponentPropsWithoutRef<'div'>;
-    /** Sets `pointer-events` styles on the `leftSection` element @default `'none'` */
+    leftSectionProps?: React.ComponentProps<'div'>;
+    /** Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */
     leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];
     /** Content section displayed on the right side of the input */
     rightSection?: React.ReactNode;
     /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */
     rightSectionWidth?: React.CSSProperties['width'];
     /** Props passed down to the `rightSection` element */
-    rightSectionProps?: React.ComponentPropsWithoutRef<'div'>;
-    /** Sets `pointer-events` styles on the `rightSection` element @default `'none'` */
+    rightSectionProps?: React.ComponentProps<'div'>;
+    /** Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */
     rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];
     /** Sets `required` attribute on the `input` element */
     required?: 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;
     /** Sets `disabled` attribute on the `input` element */
     disabled?: boolean;
-    /** Controls input `height` and horizontal `padding` @default `'sm'` */
+    /** Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' */
     size?: MantineSize | (string & {});
-    /** Determines whether the input should have `cursor: pointer` style @default `false` */
+    /** Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). @default false */
     pointer?: boolean;
-    /** Determines whether the input should have red border and red text color when the `error` prop is set @default `true` */
+    /** Determines whether the input should have red border and red text color when the `error` prop is set @default true */
     withErrorStyles?: boolean;
-    /** `size` attribute passed down to the input element */
+    /** HTML `size` attribute for the input element (number of visible characters) */
     inputSize?: string;
     /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */
     __clearSection?: React.ReactNode;
     /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */
     __clearable?: boolean;
+    /** Determines how the clear button and rightSection are rendered @default 'both' */
+    __clearSectionMode?: ClearSectionMode;
     /** Right section displayed when both `__clearSection` and `rightSection` are not defined */
     __defaultRightSection?: React.ReactNode;
+    /** Displays loading indicator in the left or right section @default false */
+    loading?: boolean;
+    /** Position of the loading indicator @default 'right' */
+    loadingPosition?: 'left' | 'right';
 }
 export interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {
     __staticSelector?: string;
@@ -64,11 +71,11 @@ export interface InputProps extends BoxProps, __InputProps, StylesApiProps<Input
     __stylesApiProps?: Record<string, any>;
     /** Determines whether the input should have error styles and `aria-invalid` attribute */
     error?: React.ReactNode;
-    /** Determines whether the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    /** Adjusts padding and sizing calculations for multiline inputs (use with `component="textarea"`). Does not make the input multiline by itself. @default false */
     multiline?: boolean;
     /** Input element id */
     id?: string;
-    /** Determines whether `aria-` and other accessibility attributes should be added to the input @default `true` */
+    /** Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true */
     withAria?: boolean;
     /** Props passed down to the root element of the `Input` component */
     wrapperProps?: WrapperProps;
@@ -92,7 +99,7 @@ export type InputFactory = PolymorphicFactory<{
 }>;
 export declare const Input: (<C = "input">(props: import("../..").PolymorphicComponentProps<C, InputProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(InputProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof InputProps> & {
+} & Omit<any, "component" | keyof InputProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (InputProps & {
@@ -130,7 +137,25 @@ export declare const Input: (<C = "input">(props: import("../..").PolymorphicCom
         Wrapper: typeof InputWrapper;
         ClearButton: typeof InputClearButton;
     };
-}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+}> & {
+    varsResolver: import("../..").VarsResolver<{
+        props: InputProps;
+        defaultRef: HTMLInputElement;
+        defaultComponent: "input";
+        stylesNames: InputStylesNames;
+        variant: InputVariant;
+        vars: InputCssVariables;
+        ctx: InputStylesCtx;
+        staticComponents: {
+            Label: typeof InputLabel;
+            Error: typeof InputError;
+            Description: typeof InputDescription;
+            Placeholder: typeof InputPlaceholder;
+            Wrapper: typeof InputWrapper;
+            ClearButton: typeof InputClearButton;
+        };
+    }>;
+} & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
     props: InputProps;
     defaultRef: HTMLInputElement;
     defaultComponent: "input";

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

@@ -1,9 +1,11 @@
 import { MantineSize } from '../../../core';
+export type ClearSectionMode = 'both' | 'rightSection' | 'clear';
 export interface InputClearSectionProps {
     __clearable: boolean | undefined;
     __clearSection: React.ReactNode;
     rightSection: React.ReactNode;
     __defaultRightSection: React.ReactNode;
     size: MantineSize | string | undefined;
+    __clearSectionMode: ClearSectionMode | undefined;
 }
-export declare function InputClearSection({ __clearable, __clearSection, rightSection, __defaultRightSection, size, }: InputClearSectionProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function InputClearSection({ __clearable, __clearSection, rightSection, __defaultRightSection, size, __clearSectionMode, }: InputClearSectionProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -6,7 +6,7 @@ export type InputDescriptionCssVariables = {
 export interface InputDescriptionProps extends BoxProps, StylesApiProps<InputDescriptionFactory>, ElementProps<'div'> {
     __staticSelector?: string;
     __inheritStyles?: boolean;
-    /** Controls description `font-size` @default `'sm'` */
+    /** Controls description `font-size` @default 'sm' */
     size?: MantineFontSize;
 }
 export type InputDescriptionFactory = Factory<{

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

@@ -6,7 +6,7 @@ export type InputErrorCssVariables = {
 export interface InputErrorProps extends BoxProps, StylesApiProps<InputErrorFactory>, ElementProps<'div'> {
     __staticSelector?: string;
     __inheritStyles?: boolean;
-    /** Controls error `font-size` @default `'sm'` */
+    /** Controls error `font-size` @default 'sm' */
     size?: MantineFontSize;
 }
 export type InputErrorFactory = Factory<{

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

@@ -7,9 +7,9 @@ export interface InputLabelProps extends BoxProps, StylesApiProps<InputLabelFact
     __staticSelector?: string;
     /** If set, the required asterisk is displayed next to the label */
     required?: boolean;
-    /** Controls label `font-size` @default `'sm'` */
+    /** Controls label `font-size` @default 'sm' */
     size?: MantineFontSize;
-    /** Root element of the label @default `'label'` */
+    /** Root element of the label @default 'label' */
     labelElement?: 'label' | 'div';
 }
 export type InputLabelFactory = Factory<{

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

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

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

@@ -11,9 +11,9 @@ export interface __InputWrapperProps {
     description?: React.ReactNode;
     /** Contents of `Input.Error` component. If not set, error is not displayed. */
     error?: React.ReactNode;
-    /** Adds required attribute to the input and a red asterisk on the right side of label @default `false` */
+    /** Adds required attribute to the input and a red asterisk on the right side of label @default false */
     required?: boolean;
-    /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default `false` */
+    /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */
     withAsterisk?: boolean;
     /** Props passed down to the `Input.Label` component */
     labelProps?: InputLabelProps & DataAttributes;
@@ -21,9 +21,9 @@ export interface __InputWrapperProps {
     descriptionProps?: InputDescriptionProps & DataAttributes;
     /** Props passed down to the `Input.Error` component */
     errorProps?: InputErrorProps & DataAttributes;
-    /** Input container component @default `React.Fragment` */
+    /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */
     inputContainer?: (children: React.ReactNode) => React.ReactNode;
-    /** Controls order of the elements @default `['label', 'description', 'input', 'error']` */
+    /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */
     inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];
 }
 export interface InputWrapperProps extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {
@@ -34,7 +34,7 @@ export interface InputWrapperProps extends __InputWrapperProps, BoxProps, Styles
     id?: string;
     /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */
     size?: MantineFontSize;
-    /** `Input.Label` root element, `'label'` by default */
+    /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */
     labelElement?: 'label' | 'div';
 }
 export type InputWrapperFactory = Factory<{

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

@@ -8,8 +8,5 @@ interface InputWrapperContextValue {
     labelId: string | undefined;
     getStyles: GetStylesApi<InputWrapperFactory> | null;
 }
-export declare const InputWrapperProvider: ({ children, value }: {
-    value: InputWrapperContextValue;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useInputWrapperContext: () => InputWrapperContextValue | null;
+export declare const InputWrapperContext: import("react").Context<InputWrapperContextValue>;
 export {};

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

@@ -1,3 +1,11 @@
+import type { __BaseInputProps, __InputProps, __InputStylesNames, InputCssVariables, InputFactory, InputProps, InputStylesNames, InputVariant } from './Input';
+import type { InputClearButtonFactory, InputClearButtonProps } from './InputClearButton/InputClearButton';
+import type { ClearSectionMode, InputClearSectionProps } from './InputClearSection/InputClearSection';
+import type { InputDescriptionCssVariables, InputDescriptionFactory, InputDescriptionProps, InputDescriptionStylesNames } from './InputDescription/InputDescription';
+import type { InputErrorCssVariables, InputErrorFactory, InputErrorProps, InputErrorStylesNames } from './InputError/InputError';
+import type { InputLabelCssVariables, InputLabelFactory, InputLabelProps, InputLabelStylesNames } from './InputLabel/InputLabel';
+import type { InputPlaceholderFactory, InputPlaceholderProps, InputPlaceholderStylesNames } from './InputPlaceholder/InputPlaceholder';
+import type { __InputWrapperProps, InputWrapperFactory, InputWrapperProps, InputWrapperStylesNames } from './InputWrapper/InputWrapper';
 export { Input } from './Input';
 export { InputWrapper } from './InputWrapper/InputWrapper';
 export { InputDescription } from './InputDescription/InputDescription';
@@ -5,12 +13,49 @@ export { InputError } from './InputError/InputError';
 export { InputLabel } from './InputLabel/InputLabel';
 export { InputPlaceholder } from './InputPlaceholder/InputPlaceholder';
 export { InputClearButton } from './InputClearButton/InputClearButton';
+export { InputClearSection } from './InputClearSection/InputClearSection';
 export { useInputProps } from './use-input-props';
-export { useInputWrapperContext } from './InputWrapper.context';
-export type { __InputProps, __BaseInputProps, __InputStylesNames, InputCssVariables, InputFactory, InputProps, InputStylesNames, InputVariant, } from './Input';
-export type { __InputWrapperProps, InputWrapperFactory, InputWrapperProps, InputWrapperStylesNames, } from './InputWrapper/InputWrapper';
-export type { InputDescriptionCssVariables, InputDescriptionFactory, InputDescriptionProps, InputDescriptionStylesNames, } from './InputDescription/InputDescription';
-export type { InputErrorCssVariables, InputErrorFactory, InputErrorProps, InputErrorStylesNames, } from './InputError/InputError';
-export type { InputLabelCssVariables, InputLabelFactory, InputLabelProps, InputLabelStylesNames, } from './InputLabel/InputLabel';
-export type { InputPlaceholderFactory, InputPlaceholderProps, InputPlaceholderStylesNames, } from './InputPlaceholder/InputPlaceholder';
-export type { InputClearButtonFactory, InputClearButtonProps, } from './InputClearButton/InputClearButton';
+export { InputWrapperContext } from './InputWrapper.context';
+export type { InputProps, __InputProps, __BaseInputProps, InputStylesNames, __InputStylesNames, InputVariant, InputCssVariables, InputFactory, InputWrapperProps, __InputWrapperProps, InputWrapperStylesNames, InputWrapperFactory, InputDescriptionProps, InputDescriptionCssVariables, InputDescriptionStylesNames, InputDescriptionFactory, InputErrorProps, InputErrorCssVariables, InputErrorStylesNames, InputErrorFactory, InputLabelProps, InputLabelCssVariables, InputLabelStylesNames, InputLabelFactory, InputPlaceholderProps, InputPlaceholderStylesNames, InputPlaceholderFactory, InputClearButtonProps, InputClearButtonFactory, InputClearSectionProps, ClearSectionMode, };
+export declare namespace Input {
+    type Props = InputProps;
+    type StylesNames = InputStylesNames;
+    type CssVariables = InputCssVariables;
+    type Factory = InputFactory;
+    namespace Wrapper {
+        type Props = InputWrapperProps;
+        type StylesNames = InputWrapperStylesNames;
+        type Factory = InputWrapperFactory;
+    }
+    namespace Description {
+        type Props = InputDescriptionProps;
+        type StylesNames = InputDescriptionStylesNames;
+        type CssVariables = InputDescriptionCssVariables;
+        type Factory = InputDescriptionFactory;
+    }
+    namespace Error {
+        type Props = InputErrorProps;
+        type StylesNames = InputErrorStylesNames;
+        type CssVariables = InputErrorCssVariables;
+        type Factory = InputErrorFactory;
+    }
+    namespace Label {
+        type Props = InputLabelProps;
+        type StylesNames = InputLabelStylesNames;
+        type CssVariables = InputLabelCssVariables;
+        type Factory = InputLabelFactory;
+    }
+    namespace Placeholder {
+        type Props = InputPlaceholderProps;
+        type StylesNames = InputPlaceholderStylesNames;
+        type Factory = InputPlaceholderFactory;
+    }
+    namespace ClearButton {
+        type Props = InputClearButtonProps;
+        type Factory = InputClearButtonFactory;
+    }
+    namespace ClearSection {
+        type Props = InputClearSectionProps;
+        type Mode = ClearSectionMode;
+    }
+}

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

@@ -8,22 +8,12 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     __stylesApiProps?: Record<string, any>;
     id?: string;
 }
-export declare function useInputProps<T extends BaseProps, U extends Partial<T> | null>(component: string, defaultProps: U, _props: T): Omit<T & (U extends null | undefined ? {} : { [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>; }), "label" | "style" | "size" | "styles" | "className" | "id" | "vars" | "variant" | "unstyled" | "attributes" | "classNames" | "mod" | "error" | "description" | "__staticSelector" | "required" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
+export declare function useInputProps<T extends BaseProps, U extends Partial<T> | null>(component: string, defaultProps: U, _props: T): Omit<T & (U extends null | undefined ? {} : { [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>; }), "vars" | "variant" | "className" | "style" | "unstyled" | "classNames" | "styles" | "attributes" | "size" | "label" | "id" | "mod" | "__staticSelector" | "required" | "description" | "error" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
     classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
     styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
     wrapperProps: {
-        children?: import("react").ReactNode | undefined;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        dir?: string | undefined;
-        slot?: string | undefined;
-        style: import("react").CSSProperties | ((theme: import("../..").MantineTheme) => import("../..").CSSProperties) | import("../..").MantineStyleProp[] | undefined;
-        title?: string | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
-        hidden?: boolean | undefined;
-        color?: string | undefined;
-        content?: string | undefined;
-        translate?: "yes" | "no" | undefined;
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -35,16 +25,23 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         className: string | undefined;
         contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
+        dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
         id: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
+        slot?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
+        style: import("react").CSSProperties | ((theme: import("../..").MantineTheme) => import("../..").CSSProperties) | import("../..").MantineStyleProp[] | undefined;
         tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: import("react").AriaRole | undefined;
         about?: string | undefined;
+        content?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
         prefix?: string | undefined;
@@ -56,6 +53,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         vocab?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
+        color?: string | undefined;
         itemProp?: string | undefined;
         itemScope?: boolean | undefined;
         itemType?: string | undefined;
@@ -64,6 +62,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;
@@ -124,6 +123,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
+        children?: import("react").ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -159,6 +159,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
         onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
         onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
         onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
@@ -308,7 +309,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
         size: (string & {}) | import("../..").MantineSize | undefined;
         inputContainer: ((children: React.ReactNode) => React.ReactNode) | undefined;
-        inputWrapperOrder: ("input" | "label" | "error" | "description")[] | undefined;
+        inputWrapperOrder: ("input" | "label" | "description" | "error")[] | undefined;
         withAsterisk: boolean | undefined;
         variant: string | undefined;
         mod: import("../..").BoxMod | undefined;

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

@@ -4,10 +4,10 @@ export interface InputBaseProps extends BoxProps, __BaseInputProps, StylesApiPro
     __staticSelector?: string;
     __stylesApiProps?: Record<string, any>;
     /** Props passed down to the root element (`Input.Wrapper` component) */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
-    /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    wrapperProps?: React.ComponentProps<'div'> & DataAttributes;
+    /** If set, the input can have multiple lines, for example when `component="textarea"` @default false */
     multiline?: boolean;
-    /** If set, `aria-` and other accessibility attributes are added to the input @default `true` */
+    /** If set, `aria-` and other accessibility attributes are added to the input @default true */
     withAria?: boolean;
 }
 export type InputBaseFactory = PolymorphicFactory<{
@@ -19,7 +19,7 @@ export type InputBaseFactory = PolymorphicFactory<{
 }>;
 export declare const InputBase: (<C = "input">(props: import("../..").PolymorphicComponentProps<C, InputBaseProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(InputBaseProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof InputBaseProps> & {
+} & Omit<any, "component" | keyof InputBaseProps> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (InputBaseProps & {

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

@@ -1,2 +1,7 @@
+import type { InputBaseFactory, InputBaseProps } from './InputBase';
 export { InputBase } from './InputBase';
-export type { InputBaseFactory, InputBaseProps } from './InputBase';
+export type { InputBaseProps, InputBaseFactory };
+export declare namespace InputBase {
+    type Props = InputBaseProps;
+    type Factory = InputBaseFactory;
+}

package/lib/components/JsonInput/JsonInput.d.ts

@@ -8,14 +8,16 @@ export interface JsonInputProps extends Omit<TextareaProps, 'onChange'> {
     defaultValue?: string;
     /** Called when value changes */
     onChange?: (value: string) => void;
-    /** Determines whether the value should be formatted on blur @default `false` */
+    /** Determines whether the value should be formatted on blur @default false */
     formatOnBlur?: boolean;
-    /** Error message displayed when value is not valid JSON */
+    /** Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails. */
     validationError?: React.ReactNode;
-    /** Function to serialize value into a string, used for value formatting @default `JSON.stringify` */
+    /** Function to serialize value into a string for formatting. Called with (value, null, 2) where 2 is the indentation level. @default JSON.stringify */
     serialize?: typeof JSON.stringify;
-    /** Function to deserialize string value, used for value formatting and input JSON validation, must throw error if string cannot be processed @default `JSON.parse` */
+    /** Function to deserialize string value for formatting and validation. Must throw an error if the string is invalid JSON. @default JSON.parse */
     deserialize?: typeof JSON.parse;
+    /** Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function. @default 2 */
+    indentSpaces?: number;
 }
 export type JsonInputFactory = Factory<{
     props: JsonInputProps;

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

@@ -1,2 +1,7 @@
+import type { JsonInputFactory, JsonInputProps } from './JsonInput';
 export { JsonInput } from './JsonInput';
-export type { JsonInputFactory, JsonInputProps } from './JsonInput';
+export type { JsonInputProps, JsonInputFactory };
+export declare namespace JsonInput {
+    type Props = JsonInputProps;
+    type Factory = JsonInputFactory;
+}

package/lib/components/Kbd/Kbd.d.ts

@@ -4,7 +4,7 @@ export type KbdCssVariables = {
     root: '--kbd-fz';
 };
 export interface KbdProps extends BoxProps, StylesApiProps<KbdFactory>, ElementProps<'kbd'> {
-    /** Controls `font-size` and `padding` @default `'sm'` */
+    /** Controls `font-size` and `padding` @default 'sm' */
     size?: MantineSize | number | (string & {});
 }
 export type KbdFactory = Factory<{

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

@@ -1,2 +1,9 @@
+import type { KbdCssVariables, KbdFactory, KbdProps, KbdStylesNames } from './Kbd';
 export { Kbd } from './Kbd';
-export type { KbdCssVariables, KbdFactory, KbdProps, KbdStylesNames } from './Kbd';
+export type { KbdProps, KbdStylesNames, KbdCssVariables, KbdFactory };
+export declare namespace Kbd {
+    type Props = KbdProps;
+    type StylesNames = KbdStylesNames;
+    type CssVariables = KbdCssVariables;
+    type Factory = KbdFactory;
+}

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

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

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

@@ -7,20 +7,24 @@ export type ListCssVariables = {
 export interface ListProps extends BoxProps, StylesApiProps<ListFactory>, ElementProps<'ol', 'type'> {
     /** `List.Item` components */
     children?: React.ReactNode;
-    /** List type @default `'unordered'` */
+    /** List type @default 'unordered' */
     type?: 'ordered' | 'unordered';
-    /** Determines whether list items should be offset with padding @default `false` */
+    /** Adds extra horizontal padding to the list, useful for nested lists @default false */
     withPadding?: boolean;
-    /** Controls `font-size` and `line-height` @default `'md'` */
+    /** Controls `font-size` and `line-height` @default 'md' */
     size?: MantineSize;
-    /** Icon to replace list item dot */
+    /** Icon to replace default list markers. Applied to all items unless overridden on individual List.Item components */
     icon?: React.ReactNode;
-    /** Key of `theme.spacing` or any valid CSS value to set spacing between items @default `0` */
+    /** Key of `theme.spacing` or any valid CSS value to set spacing between items @default 0 */
     spacing?: MantineSpacing;
-    /** Determines whether items must be centered with their icon @default `false` */
+    /** Vertically centers list items with their icons @default false */
     center?: boolean;
-    /** Controls `list-style-type`, by default inferred from `type` */
+    /** Controls CSS `list-style-type` property. Overrides the default list marker style based on list type */
     listStyleType?: React.CSSProperties['listStyleType'];
+    /** Starting value for ordered list numbering (only works with type="ordered") */
+    start?: number;
+    /** Reverses the order of list items (only works with type="ordered") */
+    reversed?: boolean;
 }
 export type ListFactory = Factory<{
     props: ListProps;

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

@@ -1,4 +1,18 @@
+import type { ListCssVariables, ListFactory, ListProps, ListStylesNames } from './List';
+import type { ListContextValue } from './List.context';
+import type { ListItemFactory, ListItemProps, ListItemStylesNames } from './ListItem/ListItem';
 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';
+export { useListContext } from './List.context';
+export type { ListProps, ListStylesNames, ListCssVariables, ListFactory, ListItemProps, ListItemStylesNames, ListItemFactory, ListContextValue, };
+export declare namespace List {
+    type Props = ListProps;
+    type StylesNames = ListStylesNames;
+    type CssVariables = ListCssVariables;
+    type Factory = ListFactory;
+    namespace Item {
+        type Props = ListItemProps;
+        type StylesNames = ListItemStylesNames;
+        type Factory = ListItemFactory;
+    }
+}

package/lib/components/Loader/Loader.d.ts

@@ -1,15 +1,15 @@
-import { BoxProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
 import type { MantineLoader, MantineLoadersRecord } from './Loader.types';
 export type LoaderStylesNames = 'root';
 export type LoaderCssVariables = {
     root: '--loader-size' | '--loader-color';
 };
-export interface LoaderProps extends BoxProps, StylesApiProps<LoaderFactory>, Omit<React.ComponentPropsWithoutRef<'svg'>, keyof BoxProps> {
-    /** Controls `width` and `height` of the loader. `Loader` has predefined `xs`-`xl` values. Numbers are converted to rem. @default `'md'` */
+export interface LoaderProps extends BoxProps, StylesApiProps<LoaderFactory>, ElementProps<'svg', 'display' | 'opacity'> {
+    /** Controls `width` and `height` of the loader. `Loader` has predefined `xs`-`xl` values. Numbers are converted to rem. @default 'md' */
     size?: MantineSize | (string & {}) | number;
-    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
+    /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */
     color?: MantineColor;
-    /** Loader type, key of `loaders` prop @default `'oval'` */
+    /** Loader type, key of `loaders` prop @default 'oval' */
     type?: MantineLoader;
     /** Object of loaders components, can be customized via default props or inline. */
     loaders?: MantineLoadersRecord;
@@ -18,7 +18,7 @@ export interface LoaderProps extends BoxProps, StylesApiProps<LoaderFactory>, Om
 }
 export type LoaderFactory = Factory<{
     props: LoaderProps;
-    ref: HTMLSpanElement;
+    ref: SVGSVGElement;
     stylesNames: LoaderStylesNames;
     vars: LoaderCssVariables;
     staticComponents: {
@@ -28,7 +28,7 @@ export type LoaderFactory = Factory<{
 export declare const defaultLoaders: MantineLoadersRecord;
 export declare const Loader: import("../..").MantineComponent<{
     props: LoaderProps;
-    ref: HTMLSpanElement;
+    ref: SVGSVGElement;
     stylesNames: LoaderStylesNames;
     vars: LoaderCssVariables;
     staticComponents: {

package/lib/components/Loader/Loader.types.d.ts

@@ -1,5 +1,5 @@
-export interface SvgLoaderProps extends React.ComponentPropsWithoutRef<any> {
+export interface SvgLoaderProps extends React.ComponentProps<any> {
 }
-export type MantineLoaderComponent = React.ForwardRefExoticComponent<React.HTMLAttributes<any> & React.RefAttributes<any>>;
+export type MantineLoaderComponent = React.FC<React.HTMLAttributes<any> & React.RefAttributes<any>>;
 export type MantineLoadersRecord = Partial<Record<'bars' | 'dots' | 'oval' | (string & {}), MantineLoaderComponent>>;
 export type MantineLoader = keyof MantineLoadersRecord;

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

@@ -1,3 +1,10 @@
+import type { LoaderCssVariables, LoaderFactory, LoaderProps, LoaderStylesNames } from './Loader';
+import type { MantineLoader, MantineLoaderComponent, MantineLoadersRecord, SvgLoaderProps } from './Loader.types';
 export { Loader, defaultLoaders } from './Loader';
-export type { MantineLoader, SvgLoaderProps, MantineLoadersRecord, MantineLoaderComponent, } from './Loader.types';
-export type { LoaderProps, LoaderStylesNames, LoaderCssVariables, LoaderFactory } from './Loader';
+export type { LoaderProps, LoaderStylesNames, LoaderCssVariables, LoaderFactory, MantineLoader, SvgLoaderProps, MantineLoadersRecord, MantineLoaderComponent, };
+export declare namespace Loader {
+    type Props = LoaderProps;
+    type StylesNames = LoaderStylesNames;
+    type CssVariables = LoaderCssVariables;
+    type Factory = LoaderFactory;
+}