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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, PolymorphicFactory, MantineRadius } from '../../core';
+export type OverlayStylesNames = 'root';
+export type OverlayCssVariables = {
+    root: '--overlay-bg' | '--overlay-filter' | '--overlay-radius' | '--overlay-z-index';
+};
+export interface OverlayProps extends BoxProps, StylesApiProps<OverlayFactory> {
+    /** Controls overlay `background-color` opacity 0–1, disregarded when `gradient` prop is set, `0.6` by default */
+    backgroundOpacity?: number;
+    /** Overlay `background-color`, `#000` by default */
+    color?: React.CSSProperties['backgroundColor'];
+    /** Overlay background blur, `0` by default */
+    blur?: number | string;
+    /** Changes overlay to gradient. If set, `color` prop is ignored */
+    gradient?: string;
+    /** Overlay z-index, `200` by default */
+    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 */
+    children?: React.ReactNode;
+    /** Determines whether content inside overlay should be vertically and horizontally centered, `false` by default */
+    center?: boolean;
+    /** Determines whether overlay should have fixed position instead of absolute, `false` by default */
+    fixed?: boolean;
+}
+export type OverlayFactory = PolymorphicFactory<{
+    props: OverlayProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: OverlayStylesNames;
+    vars: OverlayCssVariables;
+}>;
+export declare const Overlay: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, OverlayProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(OverlayProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof OverlayProps> & {
+    ref?: any;
+}) | (OverlayProps & {
+    component: React.ElementType<any>;
+})>, never> & import("../../core/factory/factory").ThemeExtend<{
+    props: OverlayProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: OverlayStylesNames;
+    vars: OverlayCssVariables;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: OverlayProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: OverlayStylesNames;
+    vars: OverlayCssVariables;
+}> & Record<string, never>;

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

@@ -0,0 +1,2 @@
+export { Overlay } from './Overlay';
+export type { OverlayCssVariables, OverlayFactory, OverlayProps, OverlayStylesNames, } from './Overlay';

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { GetStylesApi } from '../../core';
+import type { PaginationRootFactory } from './PaginationRoot/PaginationRoot';
+interface PaginationContext {
+    total: number;
+    range: (number | 'dots')[];
+    active: number;
+    disabled: boolean | undefined;
+    getItemProps?(page: number): Record<string, any>;
+    onChange(page: number): void;
+    onNext(): void;
+    onPrevious(): void;
+    onFirst(): void;
+    onLast(): void;
+    getStyles: GetStylesApi<PaginationRootFactory>;
+}
+export declare const PaginationProvider: ({ children, value }: {
+    value: PaginationContext;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, usePaginationContext: () => PaginationContext;
+export {};

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,61 @@
+import { Factory, MantineSize } from '../../core';
+import { PaginationRoot, PaginationRootCssVariables, PaginationRootProps, PaginationRootStylesNames } from './PaginationRoot/PaginationRoot';
+import { PaginationControl } from './PaginationControl/PaginationControl';
+import { PaginationDots } from './PaginationDots/PaginationDots';
+import { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious } from './PaginationEdges/PaginationEdges';
+import { PaginationItems } from './PaginationItems/PaginationItems';
+import { PaginationIcon } from './Pagination.icons';
+export type PaginationStylesNames = PaginationRootStylesNames;
+export type PaginationCssVariables = PaginationRootCssVariables;
+export interface PaginationProps extends PaginationRootProps {
+    /** Determines whether first/last controls should be rendered, false by default */
+    withEdges?: boolean;
+    /** Determines whether next/previous controls should be rendered, true by default */
+    withControls?: boolean;
+    /** Adds props to next/previous/first/last controls */
+    getControlProps?(control: 'first' | 'previous' | 'last' | 'next'): Record<string, any>;
+    /** Next control icon component */
+    nextIcon?: PaginationIcon;
+    /** Previous control icon component */
+    previousIcon?: PaginationIcon;
+    /** Last control icon component */
+    lastIcon?: PaginationIcon;
+    /** First control icon component */
+    firstIcon?: PaginationIcon;
+    /** Dots icon component */
+    dotsIcon?: PaginationIcon;
+    /** Key of `theme.spacing`, gap between controls, `8` by default */
+    gap?: MantineSize | (string & {}) | number;
+}
+export type PaginationFactory = Factory<{
+    props: PaginationProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationStylesNames;
+    vars: PaginationCssVariables;
+    staticComponents: {
+        Root: typeof PaginationRoot;
+        Control: typeof PaginationControl;
+        Dots: typeof PaginationDots;
+        First: typeof PaginationFirst;
+        Last: typeof PaginationLast;
+        Next: typeof PaginationNext;
+        Previous: typeof PaginationPrevious;
+        Items: typeof PaginationItems;
+    };
+}>;
+export declare const Pagination: import("../../core").MantineComponent<{
+    props: PaginationProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationStylesNames;
+    vars: PaginationCssVariables;
+    staticComponents: {
+        Root: typeof PaginationRoot;
+        Control: typeof PaginationControl;
+        Dots: typeof PaginationDots;
+        First: typeof PaginationFirst;
+        Last: typeof PaginationLast;
+        Next: typeof PaginationNext;
+        Previous: typeof PaginationPrevious;
+        Items: typeof PaginationItems;
+    };
+}>;

package/lib/components/Pagination/Pagination.icons.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface _PaginationIconProps extends React.ComponentPropsWithoutRef<'svg'> {
+    path: string;
+}
+export type PaginationIconProps = Omit<_PaginationIconProps, 'path'>;
+export type PaginationIcon = React.FC<PaginationIconProps>;
+export declare const PaginationNextIcon: (props: PaginationIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationPreviousIcon: (props: PaginationIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationFirstIcon: (props: PaginationIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationLastIcon: (props: PaginationIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationDotsIcon: (props: PaginationIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Pagination/PaginationControl/PaginationControl.d.ts

@@ -0,0 +1,20 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+export type PaginationControlStylesNames = 'control';
+export interface PaginationControlProps extends BoxProps, StylesApiProps<PaginationControlFactory>, ElementProps<'button'> {
+    /** Determines whether control should have active styles */
+    active?: boolean;
+    /** Determines whether control should have padding, true by default */
+    withPadding?: boolean;
+}
+export type PaginationControlFactory = Factory<{
+    props: PaginationControlProps;
+    ref: HTMLButtonElement;
+    stylesNames: PaginationControlStylesNames;
+    compound: true;
+}>;
+export declare const PaginationControl: import("../../../core").MantineComponent<{
+    props: PaginationControlProps;
+    ref: HTMLButtonElement;
+    stylesNames: PaginationControlStylesNames;
+    compound: true;
+}>;

package/lib/components/Pagination/PaginationDots/PaginationDots.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+import { PaginationIconProps } from '../Pagination.icons';
+export type PaginationDotsStylesNames = 'dots';
+export interface PaginationDotsProps extends BoxProps, StylesApiProps<PaginationDotsFactory>, ElementProps<'div'> {
+    /** Custom dots icon component, must accept svg element props and size prop */
+    icon?: React.FC<PaginationIconProps>;
+}
+export type PaginationDotsFactory = Factory<{
+    props: PaginationDotsProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationDotsStylesNames;
+    compound: true;
+}>;
+export declare const PaginationDots: import("../../../core").MantineComponent<{
+    props: PaginationDotsProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationDotsStylesNames;
+    compound: true;
+}>;

package/lib/components/Pagination/PaginationEdges/PaginationEdges.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { BoxProps } from '../../../core';
+import { PaginationIconProps } from '../Pagination.icons';
+export interface CreateEdgeComponent {
+    icon: React.FC<PaginationIconProps>;
+    name: string;
+    action: 'onNext' | 'onPrevious' | 'onFirst' | 'onLast';
+    type: 'next' | 'previous';
+}
+export interface PaginationEdgeProps extends BoxProps {
+    icon?: React.FC<PaginationIconProps>;
+}
+export declare function createEdgeComponent({ icon, name, action, type }: CreateEdgeComponent): (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
+    ref?: any;
+}) | (PaginationEdgeProps & {
+    component: React.ElementType<any>;
+})>, never> & Record<string, never>;
+export declare const PaginationNext: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
+    ref?: any;
+}) | (PaginationEdgeProps & {
+    component: React.ElementType<any>;
+})>, never> & Record<string, never>;
+export declare const PaginationPrevious: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
+    ref?: any;
+}) | (PaginationEdgeProps & {
+    component: React.ElementType<any>;
+})>, never> & Record<string, never>;
+export declare const PaginationFirst: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
+    ref?: any;
+}) | (PaginationEdgeProps & {
+    component: React.ElementType<any>;
+})>, never> & Record<string, never>;
+export declare const PaginationLast: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
+    ref?: any;
+}) | (PaginationEdgeProps & {
+    component: React.ElementType<any>;
+})>, never> & Record<string, never>;

package/lib/components/Pagination/PaginationItems/PaginationItems.d.ts

@@ -0,0 +1,9 @@
+import { PaginationIcon } from '../Pagination.icons';
+export interface PaginationItemsProps {
+    /** Dots icon component */
+    dotsIcon?: PaginationIcon;
+}
+export declare function PaginationItems({ dotsIcon }: PaginationItemsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PaginationItems {
+    var displayName: string;
+}

package/lib/components/Pagination/PaginationRoot/PaginationRoot.d.ts

@@ -0,0 +1,49 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineColor, MantineRadius } from '../../../core';
+export type PaginationRootStylesNames = 'root' | 'control' | 'dots';
+export type PaginationRootCssVariables = {
+    root: '--pagination-control-size' | '--pagination-control-radius' | '--pagination-control-fz' | '--pagination-active-bg';
+};
+export interface PaginationRootProps extends BoxProps, StylesApiProps<PaginationRootFactory>, ElementProps<'div', 'value' | 'onChange'> {
+    /** `height` and `min-width` of controls, `'md'` by default */
+    size?: MantineSize | (string & {}) | number;
+    /** Total number of pages, must be an integer */
+    total: number;
+    /** Active page for controlled component, must be an integer in [0, total] interval */
+    value?: number;
+    /** Active page for uncontrolled component, must be an integer in [0, total] interval */
+    defaultValue?: number;
+    /** Called when page changes */
+    onChange?(value: number): void;
+    /** Determines whether all controls should be disabled, `false` by default */
+    disabled?: boolean;
+    /** Number of siblings displayed on the left/right side of the selected page, `1` by default */
+    siblings?: number;
+    /** Number of elements visible on the left/right edges, `1` by default */
+    boundaries?: number;
+    /** Key of `theme.colors`, active item color, `theme.primaryColor` by default */
+    color?: MantineColor;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default */
+    radius?: MantineRadius | (string & {}) | number;
+    /** Called when next page control is clicked */
+    onNextPage?(): void;
+    /** Called when previous page control is clicked */
+    onPreviousPage?(): void;
+    /** Called when first page control is clicked */
+    onFirstPage?(): void;
+    /** Called when last page control is clicked */
+    onLastPage?(): void;
+    /** Additional props passed down to controls */
+    getItemProps?(page: number): Record<string, any>;
+}
+export type PaginationRootFactory = Factory<{
+    props: PaginationRootProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationRootStylesNames;
+    vars: PaginationRootCssVariables;
+}>;
+export declare const PaginationRoot: import("../../../core").MantineComponent<{
+    props: PaginationRootProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationRootStylesNames;
+    vars: PaginationRootCssVariables;
+}>;

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

@@ -0,0 +1,12 @@
+export { Pagination } from './Pagination';
+export { PaginationControl } from './PaginationControl/PaginationControl';
+export { PaginationDots } from './PaginationDots/PaginationDots';
+export { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious, } from './PaginationEdges/PaginationEdges';
+export { PaginationItems } from './PaginationItems/PaginationItems';
+export { PaginationRoot } from './PaginationRoot/PaginationRoot';
+export type { PaginationCssVariables, PaginationFactory, PaginationProps, PaginationStylesNames, } from './Pagination';
+export type { PaginationRootProps } from './PaginationRoot/PaginationRoot';
+export type { PaginationControlProps } from './PaginationControl/PaginationControl';
+export type { PaginationDotsProps } from './PaginationDots/PaginationDots';
+export type { PaginationEdgeProps } from './PaginationEdges/PaginationEdges';
+export type { PaginationItemsProps } from './PaginationItems/PaginationItems';

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, MantineShadow, MantineRadius, PolymorphicFactory } from '../../core';
 export type PaperStylesNames = 'root';
-export type PaperVariant = string;
 export type PaperCssVariables = {
     root: '--paper-radius' | '--paper-shadow';
 };
 export interface PaperProps extends BoxProps, StylesApiProps<PaperFactory> {
-    /** Key of `theme.shadows` or any valid CSS value to set box-shadow, `none` by default */
+    /** 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 (1rem = 16px), `theme.defaultRadius` by default */
+    /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default */
     radius?: MantineRadius | number | (string & {});
     /** Determines whether the paper should have border, border color depends on color scheme, `false` by default */
     withBorder?: boolean;
@@ -32,4 +31,10 @@ export declare const Paper: (<C = "div">(props: import("../../core/factory/creat
     defaultRef: HTMLDivElement;
     stylesNames: PaperStylesNames;
     vars: PaperCssVariables;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: PaperProps;
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: PaperStylesNames;
+    vars: PaperCssVariables;
 }> & Record<string, never>;

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

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

package/lib/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { StylesApiProps, ElementProps, Factory } from '../../core';
+import { InputBaseProps } from '../InputBase';
+import { InputVariant } from '../Input';
+export type PasswordInputStylesNames = 'root' | 'visibilityToggle' | 'innerInput';
+export type PasswordInputCssVariables = {
+    root: '--psi-icon-size' | '--psi-button-size';
+};
+export interface PasswordInputProps extends Omit<InputBaseProps, 'classNames' | 'styles' | 'vars'>, StylesApiProps<PasswordInputFactory>, ElementProps<'input', 'size'> {
+    /** Custom visibility toggle icon */
+    visibilityToggleIcon?: React.FC<{
+        reveal: boolean;
+    }>;
+    /** Props passed down to the visibility toggle button */
+    visibilityToggleButtonProps?: Record<string, any>;
+    /** Determines whether input content should be visible (controlled) */
+    visible?: boolean;
+    /** Determines whether input content should be visible (uncontrolled) */
+    defaultVisible?: boolean;
+    /** Called when visibility changes */
+    onVisibilityChange?(visible: boolean): void;
+}
+export type PasswordInputFactory = Factory<{
+    props: PasswordInputProps;
+    ref: HTMLInputElement;
+    stylesNames: PasswordInputStylesNames;
+    vars: PasswordInputCssVariables;
+    variant: InputVariant;
+}>;
+export declare const PasswordInput: import("../../core").MantineComponent<{
+    props: PasswordInputProps;
+    ref: HTMLInputElement;
+    stylesNames: PasswordInputStylesNames;
+    vars: PasswordInputCssVariables;
+    variant: InputVariant;
+}>;

package/lib/components/PasswordInput/PasswordToggleIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PasswordToggleIconProps {
+    reveal: boolean;
+}
+export type PasswordInputVisibilityToggleIcon = React.FC<PasswordToggleIconProps>;
+export declare const PasswordToggleIcon: PasswordInputVisibilityToggleIcon;

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

@@ -0,0 +1,2 @@
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputCssVariables, PasswordInputFactory, PasswordInputProps, PasswordInputStylesNames, } from './PasswordInput';

package/lib/components/Pill/Pill.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineRadius } from '../../core';
+import { PillGroup } from './PillGroup/PillGroup';
+export type PillStylesNames = 'root' | 'label' | 'remove';
+export type PillVariant = 'default' | 'contrast';
+export type PillCssVariables = {
+    root: '--pill-fz' | '--pill-radius' | '--pill-height';
+};
+export interface PillProps extends BoxProps, StylesApiProps<PillFactory>, ElementProps<'div'> {
+    /** Controls pill `font-size` and `padding`, `'sm'` by default */
+    size?: MantineSize;
+    /** Determines whether the remove button should be displayed, `false` by default */
+    withRemoveButton?: boolean;
+    /** Called when the remove button is clicked */
+    onRemove?(): void;
+    /** Props passed down to the remove button */
+    removeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `'xl'` by default. */
+    radius?: MantineRadius | (string & {}) | number;
+    /** If pill is disabled it has higher contrast to be visible on the disabled input background and the remove button is hidden */
+    disabled?: boolean;
+}
+export type PillFactory = Factory<{
+    props: PillProps;
+    ref: HTMLDivElement;
+    stylesNames: PillStylesNames;
+    vars: PillCssVariables;
+    variant: PillVariant;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+    staticComponents: {
+        Group: typeof PillGroup;
+    };
+}>;
+export declare const Pill: import("../../core").MantineComponent<{
+    props: PillProps;
+    ref: HTMLDivElement;
+    stylesNames: PillStylesNames;
+    vars: PillCssVariables;
+    variant: PillVariant;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+    staticComponents: {
+        Group: typeof PillGroup;
+    };
+}>;

package/lib/components/Pill/PillGroup/PillGroup.d.ts

@@ -0,0 +1,31 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../../core';
+export type PillGroupStylesNames = 'group';
+export type PillGroupCssVariables = {
+    group: '--pg-gap';
+};
+export interface PillGroupProps extends BoxProps, StylesApiProps<PillGroupFactory>, ElementProps<'div'> {
+    /** Controls spacing between pills, by default controlled by `size` */
+    gap?: MantineSize | (string & {}) | number;
+    /** Controls size of the child `Pill` components and gap between them, `'sm'` by default */
+    size?: MantineSize | (string & {});
+    /** Determines whether child `Pill` components should be disabled */
+    disabled?: boolean;
+}
+export type PillGroupFactory = Factory<{
+    props: PillGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: PillGroupStylesNames;
+    vars: PillGroupCssVariables;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;
+export declare const PillGroup: import("../../../core").MantineComponent<{
+    props: PillGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: PillGroupStylesNames;
+    vars: PillGroupCssVariables;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;

package/lib/components/Pill/PillGroup.context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MantineSize } from '../../core';
+export interface PillGroupContextValue {
+    size: MantineSize | (string & {}) | undefined;
+    disabled: boolean | undefined;
+}
+export declare const PillGroupProvider: ({ children, value }: {
+    value: PillGroupContextValue;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, usePillGroupContext: () => PillGroupContextValue | null;

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

@@ -0,0 +1,4 @@
+export { Pill } from './Pill';
+export { PillGroup } from './PillGroup/PillGroup';
+export type { PillCssVariables, PillFactory, PillProps, PillStylesNames, PillVariant, } from './Pill';
+export type { PillGroupCssVariables, PillGroupFactory, PillGroupProps, PillGroupStylesNames, } from './PillGroup/PillGroup';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MantineSize } from '../../core';
+import { InputVariant } from '../Input';
+export interface PillsInputContextValue {
+    fieldRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    size: MantineSize | (string & {});
+    disabled: boolean | undefined;
+    hasError: boolean | undefined;
+    variant: InputVariant | (string & {}) | undefined;
+}
+export declare const PillsInputProvider: ({ children, value }: {
+    value: PillsInputContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, usePillsInputContext: () => PillsInputContextValue | null;

package/lib/components/PillsInput/PillsInput.d.ts

@@ -0,0 +1,22 @@
+import { ElementProps, Factory } from '../../core';
+import { __InputStylesNames } from '../Input';
+import { InputBaseProps } from '../InputBase';
+import { PillsInputField } from './PillsInputField/PillsInputField';
+export interface PillsInputProps extends InputBaseProps, ElementProps<'div', 'size'> {
+}
+export type PillsInputFactory = Factory<{
+    props: PillsInputProps;
+    ref: HTMLInputElement;
+    stylesNames: __InputStylesNames;
+    staticComponents: {
+        Field: typeof PillsInputField;
+    };
+}>;
+export declare const PillsInput: import("../../core").MantineComponent<{
+    props: PillsInputProps;
+    ref: HTMLInputElement;
+    stylesNames: __InputStylesNames;
+    staticComponents: {
+        Field: typeof PillsInputField;
+    };
+}>;