@mantine/core - npm Package Compare versions

Comparing version 0.4.12 to 0.5.0

dist/src/mantine-core/src/ActionIcon/ActionIcon.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+import { ActionIconVariant } from './ActionIcon.styles';
 interface ActionIconProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
+    /** Icon rendered inside button */
+    children: React.ReactNode;
+    /** Controls appearance */
+    variant?: ActionIconVariant;
+    /** Button hover, active and icon colors from theme */
     color?: string;
+    /** Button border-radius from theme or number to set border-radius in px */
     radius?: MantineNumberSize;
+    /** Predefined icon size or number to set width and height in px */
     size?: MantineNumberSize;
 }
+export declare const ACTION_ICON_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 export declare const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps & React.RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=ActionIcon.d.ts.map

dist/src/mantine-core/src/ActionIcon/ActionIcon.styles.d.ts

@@ -0,3 +1,11 @@
+export declare type ActionIconVariant = 'transparent' | 'hover' | 'filled';
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 declare const _default: (data?: unknown) => Record<"actionIcon", string>;
 export default _default;
 //# sourceMappingURL=ActionIcon.styles.d.ts.map

dist/src/mantine-core/src/Alert/Alert.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
 interface AlertProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    /** Alert title */
     title?: React.ReactNode;
+    /** Alert title and body colors from theme */
     color?: string;
@@ -6,0 +8,0 @@ /** Alert body content */

dist/src/mantine-core/src/Avatar/Avatar.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+export declare const AVATAR_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 interface AvatarProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Image link */
-    src: string;
+    src?: string;
     /** Image alt text */
@@ -12,4 +19,6 @@ alt?: string;
     radius?: MantineNumberSize;
+    /** Color from theme used for letter and icon variant */
+    color?: string;
 }
-export declare function Avatar({ className, size, src, alt, radius, themeOverride, ...others }: AvatarProps): JSX.Element;
+export declare function Avatar({ className, size, src, alt, radius, children, color, themeOverride, ...others }: AvatarProps): JSX.Element;
 export declare namespace Avatar {
@@ -16,0 +25,0 @@ var displayName: string;

dist/src/mantine-core/src/Avatar/Avatar.styles.d.ts

@@ -0,3 +1,10 @@
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 declare const _default: (data?: unknown) => Record<"image" | "placeholder" | "avatar" | "placeholderIcon", string>;
 export default _default;
 //# sourceMappingURL=Avatar.styles.d.ts.map

dist/src/mantine-core/src/Badge/Badge.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
+import { ComponentPassThrough } from "../../../mantine-types/src";
 import { BadgeVariant } from './Badge.styles';
-interface BadgeProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+interface BadgeProps extends DefaultProps {
+    /** Badge color from theme */
     color?: string;
+    /** Controls badge background, color and border styles */
     variant?: BadgeVariant;
-    /** Sets badge width to 100% of parent element */
+    /** Sets badge width to 100% of parent element, hides overflow text with text-overflow: ellipsis */
     fullWidth?: boolean;
 }
-export declare function Badge({ className, color, variant, fullWidth, children, themeOverride, ...others }: BadgeProps): JSX.Element;
+export declare function Badge<T extends React.ElementType = 'div'>({ component: Component, className, color, variant, fullWidth, children, themeOverride, ...others }: ComponentPassThrough<T, BadgeProps>): JSX.Element;
 export declare namespace Badge {
@@ -12,0 +15,0 @@ var displayName: string;

dist/src/mantine-core/src/Badge/Badge.styles.d.ts

@@ -1,4 +0,4 @@
-export declare type BadgeVariant = 'badge' | 'pill' | 'outline';
+export declare type BadgeVariant = 'light' | 'filled' | 'outline';
 declare const _default: (data?: unknown) => Record<"badge", string>;
 export default _default;
 //# sourceMappingURL=Badge.styles.d.ts.map

dist/src/mantine-core/src/Breadcrumbs/Breadcrumbs.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
 interface BreadcrumbsProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+    /** Separator between breadcrumbs */
     separator?: React.ReactNode;
+    /** React nodes that should be separated */
     children: React.ReactNode;
@@ -6,0 +8,0 @@ }

dist/src/mantine-core/src/Burger/Burger.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+export declare const BURGER_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 interface BurgerProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
+    /** Burger state: true for cross, false for burger */
+    opened: boolean;
+    /** Burger color from theme */
     color?: string;
+    /** Predefined burger size or number to set width and height in px */
     size?: MantineNumberSize;
-    /** Burger state: true for cross, false for burger */
-    opened: boolean;
 }
-export declare function Burger({ className, opened, color, size, themeOverride, ...others }: BurgerProps): JSX.Element;
-export declare namespace Burger {
-    var displayName: string;
-}
+export declare const Burger: React.ForwardRefExoticComponent<BurgerProps & React.RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=Burger.d.ts.map

dist/src/mantine-core/src/Burger/Burger.styles.d.ts

@@ -0,3 +1,10 @@
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 declare const _default: (data?: unknown) => Record<"opened" | "wrapper" | "burger", string>;
 export default _default;
 //# sourceMappingURL=Burger.styles.d.ts.map

dist/src/mantine-core/src/Button/Button.d.ts

@@ -5,5 +5,9 @@ import React from 'react';
 import { ButtonVariant } from './Button.styles';
+export declare const BUTTON_SIZES: Record<MantineSize, number>;
 interface ButtonBaseProps extends DefaultProps {
+    /** Predefined button size */
     size?: MantineSize;
+    /** Button type attribute */
     type?: 'submit' | 'button' | 'reset';
+    /** Button color from theme */
     color?: string;
@@ -16,19 +20,14 @@ /** Adds icon before button label  */
     fullWidth?: boolean;
+    /** Button border-radius from theme or number to set border-radius in px */
     radius?: MantineNumberSize;
+    /** Controls button appearance */
     variant?: ButtonVariant;
 }
-declare type _ButtonProps<T extends React.ElementType, U extends HTMLElement> = ComponentPassThrough<T, ButtonBaseProps> & {
+export declare function Button<T extends React.ElementType = 'button', U extends HTMLElement = HTMLButtonElement>({ className, size, color, type, disabled, children, leftIcon, rightIcon, fullWidth, variant, radius, component: Element, elementRef, themeOverride, ...others }: ComponentPassThrough<T, ButtonBaseProps> & {
     elementRef?: React.ForwardedRef<U>;
-};
-export declare function MantineButton<T extends React.ElementType = 'button', U extends HTMLElement = HTMLButtonElement>({ className, size, color, type, disabled, children, leftIcon, rightIcon, fullWidth, variant, radius, component: Element, elementRef, themeOverride, ...others }: _ButtonProps<T, U>): JSX.Element;
-export declare namespace MantineButton {
+}): JSX.Element;
+export declare namespace Button {
     var displayName: string;
 }
-export declare const Button: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | "slot" | "style" | "title" | "color" | "value" | "children" | "translate" | "hidden" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & {
-    component?: "button";
-} & ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const LinkButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "slot" | "style" | "title" | "color" | "children" | "translate" | "hidden" | "key" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy"> & {
-    component?: "a";
-} & ButtonBaseProps & React.RefAttributes<HTMLAnchorElement>>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

dist/src/mantine-core/src/Button/Button.styles.d.ts

@@ -0,4 +1,6 @@
+import { MantineSize } from "../../../mantine-theme/src";
 export declare type ButtonVariant = 'link' | 'filled' | 'outline';
-declare const _default: (data?: unknown) => Record<"label" | "link" | "outline" | "filled" | "icon" | "leftIcon" | "rightIcon" | "inner" | "shared", string>;
+export declare const heights: Record<MantineSize, number>;
+declare const _default: (data?: unknown) => Record<"label" | "link" | "icon" | "outline" | "inner" | "filled" | "leftIcon" | "rightIcon" | "shared", string>;
 export default _default;
 //# sourceMappingURL=Button.styles.d.ts.map

dist/src/mantine-core/src/Checkbox/Checkbox.d.ts

 import React from 'react';
-import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+import { DefaultProps, MantineSize } from "../../../mantine-theme/src";
+export declare const CHECKBOX_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 interface CheckboxProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
+    /** Checkbox checked and intermediate state color from theme, defaults to theme.primaryColor */
     color?: string;
-    size?: MantineNumberSize;
+    /** Predefined label font-size and checkbox width and height in px */
+    size?: MantineSize;
+    /** Checkbox label */
     label?: React.ReactNode;
-    disabled?: boolean;
     /** Intermediate state of checkbox, overwrites checked */
@@ -15,4 +24,4 @@ intermediate?: boolean;
     /** Props spread to wrapper element */
-    wrapperProps?: Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'>;
-    /** id is used to bind input and label, if not passed unique id will be generated for each input */
+    wrapperProps?: Record<string, any>;
+    /** Id is used to bind input and label, if not passed unique id will be generated for each input */
     id?: string;
@@ -19,0 +28,0 @@ }

dist/src/mantine-core/src/Checkbox/Checkbox.styles.d.ts

@@ -1,3 +0,10 @@
-declare const _default: (data?: unknown) => Record<"label" | "wrapper" | "icon" | "checkbox" | "checkboxWrapper", string>;
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+declare const _default: (data?: unknown) => Record<"label" | "icon" | "wrapper" | "checkbox" | "checkboxWrapper", string>;
 export default _default;
 //# sourceMappingURL=Checkbox.styles.d.ts.map

dist/src/mantine-core/src/Code/Code.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
 interface CodeProps extends DefaultProps, React.ComponentPropsWithoutRef<'code'> {
+    /** Code content */
     children: React.ReactNode;
+    /** Code color and background from theme */
+    color?: string;
+    /** True for code block, false for inline code */
+    block?: boolean;
 }
-export declare function Code({ children, themeOverride, className, ...others }: CodeProps): JSX.Element;
+export declare function Code({ children, themeOverride, block, className, color, ...others }: CodeProps): JSX.Element;
 export declare namespace Code {
@@ -8,0 +13,0 @@ var displayName: string;

dist/src/mantine-core/src/Code/Code.styles.d.ts

@@ -1,3 +0,3 @@
-declare const _default: (data?: unknown) => Record<"code", string>;
+declare const _default: (data?: unknown) => Record<"code" | "pre", string>;
 export default _default;
 //# sourceMappingURL=Code.styles.d.ts.map

dist/src/mantine-core/src/ColorSwatch/ColorSwatch.d.ts

 import React from 'react';
-import { DefaultProps } from "../../../mantine-theme/src";
+import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
 interface ColorSwatchProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+    /** Swatch color value in any css valid format (hex, rgb, etc.) */
     color: string;
     /** Width, height and border-radius in px */
     size?: number;
+    /** Swatch border-radius predefined from theme or number for px value */
+    radius?: MantineNumberSize;
 }
-export declare function ColorSwatch({ color, size, style, ...others }: ColorSwatchProps): JSX.Element;
+export declare function ColorSwatch({ color, size, style, radius, className, ...others }: ColorSwatchProps): JSX.Element;
 export declare namespace ColorSwatch {
@@ -10,0 +13,0 @@ var displayName: string;

dist/src/mantine-core/src/Container/Container.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+export declare const CONTAINER_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 interface ContainerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+    /** Predefined container max-width or number for max-width in px */
     size?: MantineNumberSize;
+    /** Horizontal padding defined in theme.spacing, or number value for padding in px */
+    padding?: MantineNumberSize;
     /** If fluid is set to true, size prop is ignored and Container always take 100% of width */
     fluid?: boolean;
 }
-export declare function Container({ className, fluid, size, themeOverride, ...others }: ContainerProps): JSX.Element;
+export declare function Container({ className, padding, fluid, size, themeOverride, ...others }: ContainerProps): JSX.Element;
 export declare namespace Container {
@@ -10,0 +20,0 @@ var displayName: string;

dist/src/mantine-core/src/Container/Container.styles.d.ts

@@ -0,3 +1,10 @@
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 declare const _default: (data?: unknown) => Record<"container", string>;
 export default _default;
 //# sourceMappingURL=Container.styles.d.ts.map

dist/src/mantine-core/src/ElementsGroup/ElementsGroup.d.ts

@@ -14,2 +14,3 @@ import React from 'react';
 }
+export type { ElementsGroupPosition };
 export declare function ElementsGroup({ className, position, children, noWrap, grow, spacing, themeOverride, ...others }: ElementsGroupProps): JSX.Element;
@@ -19,3 +20,2 @@ export declare namespace ElementsGroup {
 }
-export {};
 //# sourceMappingURL=ElementsGroup.d.ts.map

dist/src/mantine-core/src/Highlight/Highlight.d.ts

@@ -13,5 +13,8 @@ import React from 'react';
     highlight: string;
+    /** Color from theme that is used for highlighting */
+    highlightColor?: string;
+    /** Full string part of which will be highlighted */
     children: string;
 }
-export declare function Highlight<T extends React.ElementType = 'div'>({ children, highlight, className, component, themeOverride, ...others }: ComponentPassThrough<T, HighlightProps>): JSX.Element;
+export declare function Highlight<T extends React.ElementType = 'div'>({ children, highlight, className, component, themeOverride, highlightColor, ...others }: ComponentPassThrough<T, HighlightProps>): JSX.Element;
 export declare namespace Highlight {
@@ -18,0 +21,0 @@ var displayName: string;

dist/src/mantine-core/src/Hr/Hr.d.ts

 import React from 'react';
-import { DefaultProps } from "../../../mantine-theme/src";
+import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+export declare const HR_SIZES: {
+    xs: number;
+    sm: number;
+    md: number; /** Hr height */
+    lg: number;
+    xl: number;
+};
 interface HrProps extends DefaultProps, React.ComponentPropsWithoutRef<'hr'> {
+    /** Hr borderStyle */
     variant?: 'solid' | 'dashed' | 'dotted';
+    /** Hr height */
+    size?: MantineNumberSize;
+    /** Hr color */
+    color?: string;
 }
-export declare function Hr({ className, variant, style, themeOverride, ...others }: HrProps): JSX.Element;
+export declare function Hr({ size, className, variant, themeOverride, color, ...others }: HrProps): JSX.Element;
 export declare namespace Hr {
@@ -8,0 +20,0 @@ var displayName: string;

dist/src/mantine-core/src/Hr/Hr.styles.d.ts

@@ -0,3 +1,10 @@
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 declare const _default: (data?: unknown) => Record<"hr", string>;
 export default _default;
 //# sourceMappingURL=Hr.styles.d.ts.map

dist/src/mantine-core/src/index.d.ts

@@ -1,26 +0,30 @@
-export * from "../../mantine-theme/src";
-export { ActionIcon } from './ActionIcon/ActionIcon';
+export { ActionIcon, ACTION_ICON_SIZES } from './ActionIcon/ActionIcon';
 export { Alert } from './Alert/Alert';
-export { Avatar } from './Avatar/Avatar';
+export { Avatar, AVATAR_SIZES } from './Avatar/Avatar';
 export { Badge } from './Badge/Badge';
+export { Blockquote } from './Blockquote/Blockquote';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
-export { Burger } from './Burger/Burger';
-export { Button, LinkButton, MantineButton } from './Button/Button';
-export { Checkbox } from './Checkbox/Checkbox';
+export { Burger, BURGER_SIZES } from './Burger/Burger';
+export { Button, BUTTON_SIZES } from './Button/Button';
+export { Checkbox, CHECKBOX_SIZES } from './Checkbox/Checkbox';
 export { Code } from './Code/Code';
 export { ColorSwatch } from './ColorSwatch/ColorSwatch';
-export { Container } from './Container/Container';
+export { Container, CONTAINER_SIZES } from './Container/Container';
 export { ElementsGroup } from './ElementsGroup/ElementsGroup';
 export { Highlight } from './Highlight/Highlight';
-export { Hr } from './Hr/Hr';
+export { Hr, HR_SIZES } from './Hr/Hr';
+export { InnerHtml } from './InnerHtml/InnerHtml';
 export { Input } from './Input/Input';
 export { InputWrapper } from './InputWrapper/InputWrapper';
-export { Loader } from './Loader/Loader';
+export { Kbd } from './Kbd/Kbd';
+export { Loader, LOADER_SIZES } from './Loader/Loader';
 export { LoadingOverlay } from './LoadingOverlay/LoadingOverlay';
-export { Modal } from './Modal/Modal';
-export { Month } from './Month/Month';
+export { Menu, MenuItem, MenuBody, MENU_SIZES } from './Menu/Menu';
+export { Modal, MODAL_SIZES } from './Modal/Modal';
 export { Overlay } from './Overlay/Overlay';
 export { Paper } from './Paper/Paper';
 export { PasswordInput } from './PasswordInput/PasswordInput';
-export { Progress } from './Progress/Progress';
+export { Portal } from './Portal/Portal';
+export { Progress, PROGRESS_SIZES } from './Progress/Progress';
+export { RadioGroup, Radio, RADIO_SIZES } from './RadioGroup/RadioGroup';
 export { Select } from './Select/Select';
@@ -31,7 +35,8 @@ export { Spoiler } from './Spoiler/Spoiler';
 export { Tabs, Tab } from './Tabs/Tabs';
-export { Anchor, Text } from './Text/Text';
+export { Text } from './Text/Text';
 export { Textarea } from './Textarea/Textarea';
 export { TextInput } from './TextInput/TextInput';
-export { ThemeIcon } from './ThemeIcon/ThemeIcon';
+export { ThemeIcon, THEME_ICON_SIZES } from './ThemeIcon/ThemeIcon';
 export { Title } from './Title/Title';
+export { Transition, GroupedTransition } from './Transition/Transition';
 //# sourceMappingURL=index.d.ts.map

dist/src/mantine-core/src/Input/Input.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-interface InputProps extends DefaultProps, React.ComponentPropsWithoutRef<'input'> {
+import { ComponentPassThrough } from "../../../mantine-types/src";
+export interface InputProps extends DefaultProps {
+    /** Sets border color to red */
     invalid?: boolean;
     /** Adds icon on the left side of input */
     icon?: React.ReactNode;
+    /** Right section of input, similar to icon but on the right */
+    rightSection?: React.ReactNode;
+    /** Width of right section, is used to calculate input padding-right */
+    rightSectionWidth?: number;
+    /** Props spread to rightSection div element */
+    rightSectionProps?: Record<string, any>;
+    /** Add className to input element */
     inputClassName?: string;
     /** Properties spread to root element */
-    wrapperProps?: Omit<React.ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children'>;
+    wrapperProps?: Record<string, any>;
+    /** Adds style to input element */
     inputStyle?: React.CSSProperties;
-    disabled?: boolean;
+    /** Sets aria-required=true on input element */
     required?: boolean;
+    /** Input border-radius from theme or number to set border-radius in px */
     radius?: MantineNumberSize;
+    /** Defines input appearance */
     variant?: 'default' | 'filled' | 'unstyled';
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+export declare function Input<T extends React.ElementType = 'input', U extends HTMLElement = HTMLInputElement>({ component: Element, className, invalid, required, variant, icon, style, rightSectionWidth, rightSection, rightSectionProps, radius, inputClassName, inputStyle, themeOverride, wrapperProps, elementRef, ...others }: ComponentPassThrough<T, InputProps> & {
+    elementRef?: React.ForwardedRef<U>;
+}): JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}
 //# sourceMappingURL=Input.d.ts.map

dist/src/mantine-core/src/Input/Input.styles.d.ts

@@ -1,3 +0,3 @@
-declare const _default: (data?: unknown) => Record<"input" | "invalid" | "icon" | "withIcon" | "inputWrapper" | "defaultVariant" | "filledVariant" | "unstyledVariant", string>;
+declare const _default: (data?: unknown) => Record<"input" | "icon" | "invalid" | "withIcon" | "inputWrapper" | "defaultVariant" | "filledVariant" | "unstyledVariant" | "rightSection", string>;
 export default _default;
 //# sourceMappingURL=Input.styles.d.ts.map

dist/src/mantine-core/src/InputWrapper/InputWrapper.d.ts

@@ -14,6 +14,7 @@ import React from 'react';
 interface InputWrapperProps extends DefaultProps, InputWrapperBaseProps, React.ComponentPropsWithoutRef<'div'> {
-    id: string;
+    id?: string;
+    labelElement?: 'label' | 'div';
     children: React.ReactChild;
 }
-export declare function InputWrapper({ className, label, children, required, id, error, description, themeOverride, ...others }: InputWrapperProps): JSX.Element;
+export declare function InputWrapper({ className, label, children, required, id, error, description, themeOverride, labelElement, ...others }: InputWrapperProps): JSX.Element;
 export declare namespace InputWrapper {
@@ -20,0 +21,0 @@ var displayName: string;

dist/src/mantine-core/src/Loader/Loader.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-interface LoaderProps extends DefaultProps, React.ComponentPropsWithoutRef<'svg'> {
+export declare const LOADER_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export interface LoaderProps extends DefaultProps, React.ComponentPropsWithoutRef<'svg'> {
     /** Defines width of loader */
     size?: MantineNumberSize;
+    /** Loader color from theme */
     color?: string;
@@ -12,3 +20,2 @@ }
 }
-export {};
 //# sourceMappingURL=Loader.d.ts.map

dist/src/mantine-core/src/LoadingOverlay/LoadingOverlay.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
+import { LoaderProps } from '../Loader/Loader';
 interface LoadingOverlayProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
-    /** Defines width of loader */
-    loaderSize?: number;
+    /** Loader component props */
+    loaderProps?: LoaderProps;
     /** Sets overlay opacity */
@@ -10,2 +11,4 @@ overlayOpacity?: number;
     overlayColor?: string;
+    /** Loading overlay z-index */
+    zIndex?: number;
     /** If visible overlay will take 100% width and height of first parent with relative position and overlay all of its content */
@@ -16,3 +19,3 @@ visible: boolean;
 }
-export declare function LoadingOverlay({ className, visible, loaderSize, overlayOpacity, overlayColor, themeOverride, transitionDuration, style, ...others }: LoadingOverlayProps): JSX.Element;
+export declare function LoadingOverlay({ className, visible, loaderProps, overlayOpacity, overlayColor, themeOverride, transitionDuration, zIndex, style, ...others }: LoadingOverlayProps): JSX.Element;
 export declare namespace LoadingOverlay {
@@ -19,0 +22,0 @@ var displayName: string;

dist/src/mantine-core/src/LoadingOverlay/LoadingOverlay.styles.d.ts

@@ -1,3 +0,3 @@
-declare const _default: (data?: unknown) => Record<"loadingOverlay" | "loader", string>;
+declare const _default: (data?: unknown) => Record<"loadingOverlay", string>;
 export default _default;
 //# sourceMappingURL=LoadingOverlay.styles.d.ts.map

dist/src/mantine-core/src/Modal/Modal.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
+export declare const MODAL_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: string;
+};
 interface ModalProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
-    /** Modal title, displayed in header before close button */
-    title?: React.ReactNode;
     /** Mounts modal if true */
     opened: boolean;
+    /** Called when close button clicked and when escape key is pressed */
     onClose(): void;
+    /** Modal title, displayed in header before close button */
+    title?: React.ReactNode;
+    /** Modal z-index property */
+    zIndex?: number;
+    /** Control vertical overflow behavior */
+    overflow?: 'outside' | 'inside';
     /** Hides close button, modal still can be closed with escape key and by clicking outside */
     hideCloseButton?: boolean;
-    overlayOpacity?: number;
-    overlayColor?: string;
-    modalWidth?: number;
+    /** Overlay below modal opacity */
+    overlayOpacity?: React.CSSProperties['opacity'];
+    /** Overlay below modal color */
+    overlayColor?: React.CSSProperties['color'];
+    /** Modal body width */
+    size?: string | number;
     /** Duration in ms of modal mount and unmount animations */
     transitionDuration?: number;
-    /** Close button aria-label attribute */
+    /** Close button aria-label and title attributes */
     closeButtonLabel?: string;
 }
-export declare function Modal({ className, opened, themeOverride, title, onClose, children, hideCloseButton, overlayOpacity, modalWidth, transitionDuration, closeButtonLabel, overlayColor, ...others }: ModalProps): JSX.Element;
+export declare function Modal({ className, opened, themeOverride, title, onClose, children, hideCloseButton, overlayOpacity, size, transitionDuration, closeButtonLabel, overlayColor, zIndex, overflow, ...others }: ModalProps): JSX.Element;
 export declare namespace Modal {
@@ -21,0 +37,0 @@ var displayName: string;

dist/src/mantine-core/src/Modal/Modal.styles.d.ts

@@ -1,3 +0,11 @@
-declare const _default: (data?: unknown) => Record<"header" | "title" | "wrapper" | "inner" | "modal", string>;
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: string;
+};
+declare const _default: (data?: unknown) => Record<"body" | "header" | "title" | "inner" | "wrapper" | "modal", string>;
 export default _default;
 //# sourceMappingURL=Modal.styles.d.ts.map

dist/src/mantine-core/src/Overlay/Overlay.d.ts

 import React from 'react';
-interface OverlayProps extends React.ComponentPropsWithoutRef<'div'> {
-    opacity?: number;
-    color?: string;
+import { ComponentPassThrough } from "../../../mantine-types/src";
+interface OverlayProps {
+    /** Overlay opacity */
+    opacity?: React.CSSProperties['opacity'];
+    /** Overlay background-color */
+    color?: React.CSSProperties['backgroundColor'];
+    /** Overlay z-index */
+    zIndex?: React.CSSProperties['zIndex'];
 }
-export declare function Overlay({ opacity, color, style, ...others }: OverlayProps): JSX.Element;
+export declare function Overlay<T extends React.ElementType = 'div'>({ opacity, color, zIndex, style, component: Element, ...others }: ComponentPassThrough<T, OverlayProps>): JSX.Element;
 export declare namespace Overlay {
@@ -8,0 +13,0 @@ var displayName: string;

dist/src/mantine-core/src/Paper/Paper.d.ts

 import React from 'react';
-import { DefaultProps, MantineSize, MantineNumberSize } from "../../../mantine-theme/src";
+import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
 interface PaperProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
-    children: React.ReactNode;
+    /** Predefined padding value from theme.spacing or number for padding in px */
     padding?: MantineNumberSize;
-    shadow?: MantineSize;
+    /** Predefined box-shadow from theme.shadows */
+    shadow?: string;
+    /** Predefined border-radius value from theme.radius or number for border-radius in px */
     radius?: MantineNumberSize;
@@ -8,0 +10,0 @@ }

dist/src/mantine-core/src/PasswordInput/PasswordInput.d.ts

 import React from 'react';
-import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-import { Subtract } from "../../../mantine-types/src";
-import { InputWrapperBaseProps, InputWrapper } from '../InputWrapper/InputWrapper';
-interface PasswordInputProps extends DefaultProps, InputWrapperBaseProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange'> {
-    value?: string;
-    onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
-    /** id is used to bind input and label, if not passed unique id will be generated for each input */
-    id?: string;
-    /** Adds icon on the left side of input */
-    icon?: React.ReactNode;
-    radius?: MantineNumberSize;
+import { TextInput } from '../TextInput/TextInput';
+interface PasswordInputProps extends React.ComponentPropsWithoutRef<typeof TextInput> {
     /** Title for visibility toggle button in hidden state */
@@ -17,8 +8,2 @@ showPasswordLabel?: string;
     hidePasswordLabel?: string;
-    /** Style properties added to input element */
-    inputStyle?: React.CSSProperties;
-    /** Class name added to input element */
-    inputClassName?: string;
-    /** Props passed to root element (InputWrapper component) */
-    wrapperProps?: Partial<Subtract<React.ComponentPropsWithoutRef<typeof InputWrapper>, InputWrapperBaseProps & DefaultProps>>;
 }
@@ -25,0 +10,0 @@ export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

dist/src/mantine-core/src/Progress/Progress.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+export declare const PROGRESS_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 interface ProgressProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Percent of filled bar (0-100) */
     value: number;
+    /** Progress color from theme */
     color?: string;
+    /** Predefined progress height or number for height in px */
     size?: MantineNumberSize;
+    /** Predefined progress radius from theme.radius or number for height in px */
     radius?: MantineNumberSize;
+    /** Adds stripes */
+    striped?: boolean;
 }
-export declare function Progress({ className, value, color, size, radius, themeOverride, ...others }: ProgressProps): JSX.Element;
+export declare function Progress({ className, value, color, size, radius, striped, themeOverride, ...others }: ProgressProps): JSX.Element;
 export declare namespace Progress {
@@ -12,0 +24,0 @@ var displayName: string;

dist/src/mantine-core/src/Progress/Progress.styles.d.ts

@@ -0,3 +1,10 @@
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 declare const _default: (data?: unknown) => Record<"progress" | "bar", string>;
 export default _default;
 //# sourceMappingURL=Progress.styles.d.ts.map

dist/src/mantine-core/src/Select/Select.d.ts

 import React from 'react';
-import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-import { Subtract } from "../../../mantine-types/src";
-import { InputWrapperBaseProps, InputWrapper } from '../InputWrapper/InputWrapper';
+import { DefaultProps } from "../../../mantine-theme/src";
+import { InputWrapperBaseProps } from '../InputWrapper/InputWrapper';
+import { InputProps } from '../Input/Input';
 interface SelectItem {
@@ -9,21 +9,13 @@ value: string;
 }
-interface SelectProps extends DefaultProps, InputWrapperBaseProps, Omit<React.ComponentPropsWithoutRef<'select'>, 'onChange'> {
+interface SelectProps extends DefaultProps, InputWrapperBaseProps, InputProps, React.ComponentPropsWithoutRef<'select'> {
     /** id is used to bind input and label, if not passed unique id will be generated for each input */
     id?: string;
-    value?: string;
     /** Adds hidden option to select and sets it as selected if value is not present */
     placeholder?: string;
-    onChange?(event: React.ChangeEvent<HTMLSelectElement>): void;
     /** Data used to render options */
     data: SelectItem[];
-    disabled?: boolean;
-    radius?: MantineNumberSize;
-    /** Adds icon on the left side of input */
-    icon?: React.ReactNode;
-    /** Class name added to select element */
-    inputClassName?: string;
     /** Style properties added to select element */
     inputStyle?: React.CSSProperties;
     /** Props passed to root element (InputWrapper component) */
-    wrapperProps?: Partial<Subtract<React.ComponentPropsWithoutRef<typeof InputWrapper>, InputWrapperBaseProps & DefaultProps>>;
+    wrapperProps?: Record<string, any>;
 }
@@ -30,0 +22,0 @@ export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

dist/src/mantine-core/src/Switch/Switch.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize, MantineSize } from "../../../mantine-theme/src";
 interface SwitchProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
-    /** id is used to bind input and label, if not passed unique id will be generated for each input */
+    /** Id is used to bind input and label, if not passed unique id will be generated for each input */
     id?: string;
-    checked?: boolean;
-    onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
+    /** Switch label */
     label?: React.ReactNode;
-    disabled?: boolean;
+    /** Switch checked state color from theme, defaults to theme.primaryColor */
     color?: string;
+    /** Predefined size value */
     size?: MantineSize;
+    /** Predefined border-radius value from theme.radius or number for border-radius in px */
     radius?: MantineNumberSize;
@@ -18,3 +19,3 @@ /** Style properties added to input element */
     /** Props spread to wrapper element */
-    wrapperProps?: Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'>;
+    wrapperProps?: Record<string, any>;
 }
@@ -21,0 +22,0 @@ export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

dist/src/mantine-core/src/Table/Table.d.ts

@@ -6,6 +6,8 @@ import React from 'react';
     striped?: boolean;
-    /** if true row will have hover color */
-    highlighOnHover?: boolean;
+    /** If true row will have hover color */
+    highlightOnHover?: boolean;
+    /** Table caption position */
+    captionSide?: 'top' | 'bottom';
 }
-export declare function Table({ className, children, striped, highlighOnHover, themeOverride, ...others }: TableProps): JSX.Element;
+export declare function Table({ className, children, striped, highlightOnHover, themeOverride, captionSide, ...others }: TableProps): JSX.Element;
 export declare namespace Table {
@@ -12,0 +14,0 @@ var displayName: string;

dist/src/mantine-core/src/Table/Table.styles.d.ts

@@ -1,3 +0,3 @@
-declare const _default: (data?: unknown) => Record<"table" | "striped" | "hover", string>;
+declare const _default: (data?: unknown) => Record<"table" | "hover" | "striped", string>;
 export default _default;
 //# sourceMappingURL=Table.styles.d.ts.map

dist/src/mantine-core/src/Tabs/Tab/Tab.d.ts

 import React from 'react';
-export interface TabProps extends React.ComponentPropsWithoutRef<'button'> {
+export interface TabProps extends React.ComponentProps<'button'> {
     label?: React.ReactNode;
@@ -10,2 +10,3 @@ icon?: React.ReactNode;
     props: TabProps;
+    ref?: React.RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement) => void);
 }
@@ -12,0 +13,0 @@ export declare function Tab(props: TabProps): any;

dist/src/mantine-core/src/Tabs/Tabs.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
+import { ElementsGroupPosition } from '../ElementsGroup/ElementsGroup';
 import { Tab } from './Tab/Tab';
 export { Tab };
 interface TabsProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+    /** <Tab /> components only */
     children: React.ReactNode;
+    /** index of initial tab */
     initialTab?: number;
+    /** index of active tab, overrides internal state */
     active?: number;
+    /** active tab color from theme */
     color?: string;
+    /** true if tabs should take all available space */
+    grow?: boolean;
+    /** tab controls position */
+    position?: ElementsGroupPosition;
+    /** called when tab control is clicked with tab index */
     onTabChange?(tabIndex: number): void;
 }
-export declare function Tabs({ children, initialTab, themeOverride, active, onTabChange, color, ...others }: TabsProps): JSX.Element;
+export declare function Tabs({ children, initialTab, themeOverride, active, position, grow, onTabChange, color, ...others }: TabsProps): JSX.Element;
 export declare namespace Tabs {
@@ -14,0 +24,0 @@ var displayName: string;

dist/src/mantine-core/src/Tabs/Tabs.styles.d.ts

@@ -1,3 +0,3 @@
-declare const _default: (data?: unknown) => Record<"body" | "tabs", string>;
+declare const _default: (data?: unknown) => Record<"body" | "tabs" | "tabsInner", string>;
 export default _default;
 //# sourceMappingURL=Tabs.styles.d.ts.map

dist/src/mantine-core/src/Text/Text.d.ts

@@ -6,4 +6,7 @@ import React from 'react';
 export interface TextProps extends DefaultProps {
+    /** Text itself */
     children?: React.ReactNode;
+    /** Predefined font-size from theme.fontSizes */
     size?: MantineSize;
+    /** Text color from theme */
     color?: string;
@@ -13,13 +16,12 @@ /** Sets font-weight css property */
     /** Sets text-transform css property */
-    transform?: React.CSSProperties['textTransform'];
+    transform?: 'capitalize' | 'uppercase' | 'lowercase';
+    /** Sets text-align css property */
+    align?: 'left' | 'center' | 'right';
+    /** Link or text variant */
     variant?: TextVariant;
 }
-export declare function Text<T extends React.ElementType = 'div'>({ className, component, children, size, weight, transform, style, color, variant, themeOverride, ...others }: ComponentPassThrough<T, TextProps>): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare function Text<T extends React.ElementType = 'div'>({ className, component, children, size, weight, transform, style, color, align, variant, themeOverride, ...others }: ComponentPassThrough<T, TextProps>): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare namespace Text {
     var displayName: string;
 }
-export declare function Anchor(props: TextProps & React.ComponentPropsWithoutRef<'a'>): JSX.Element;
-export declare namespace Anchor {
-    var displayName: string;
-}
 //# sourceMappingURL=Text.d.ts.map

dist/src/mantine-core/src/Textarea/Textarea.d.ts

 import React from 'react';
-import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-import { Subtract } from "../../../mantine-types/src";
-import { InputWrapperBaseProps, InputWrapper } from '../InputWrapper/InputWrapper';
-interface TextareaProps extends DefaultProps, InputWrapperBaseProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, 'onChange'> {
-    /** id is used to bind input and label, if not passed unique id will be generated for each input */
+import { DefaultProps } from "../../../mantine-theme/src";
+import { InputWrapperBaseProps } from '../InputWrapper/InputWrapper';
+import { InputProps } from '../Input/Input';
+interface TextareaProps extends DefaultProps, InputWrapperBaseProps, InputProps, React.ComponentPropsWithoutRef<'textarea'> {
+    /** Id is used to bind input and label, if not passed unique id will be generated for each input */
     id?: string;
     /** If true textarea will grow with content until maxRows are reached  */
     autosize?: boolean;
-    placeholder?: string;
     /** Defines maxRows in autosize variant, not applicable to regular variant */
@@ -15,11 +14,6 @@ maxRows?: number;
     minRows?: number;
-    radius?: MantineNumberSize;
-    value?: string;
-    onChange?(event: React.ChangeEvent<HTMLTextAreaElement>): void;
     /** Style properties added to input element */
     inputStyle?: React.CSSProperties;
-    /** Class name added to input element */
-    inputClassName?: string;
     /** Props passed to root element (InputWrapper component) */
-    wrapperProps?: Partial<Subtract<React.ComponentPropsWithoutRef<typeof InputWrapper>, InputWrapperBaseProps & DefaultProps>>;
+    wrapperProps?: Record<string, any>;
 }
@@ -26,0 +20,0 @@ export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

dist/src/mantine-core/src/TextInput/TextInput.d.ts

 import React from 'react';
-import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-import { Subtract } from "../../../mantine-types/src";
-import { InputWrapperBaseProps, InputWrapper } from '../InputWrapper/InputWrapper';
-interface TextInputProps extends DefaultProps, InputWrapperBaseProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange'> {
+import { DefaultProps } from "../../../mantine-theme/src";
+import { InputProps } from '../Input/Input';
+import { InputWrapperBaseProps } from '../InputWrapper/InputWrapper';
+interface TextInputProps extends DefaultProps, InputProps, InputWrapperBaseProps, React.ComponentPropsWithoutRef<'input'> {
     /** id is used to bind input and label, if not passed unique id will be generated for each input */
@@ -10,8 +10,6 @@ id?: string;
     icon?: React.ReactNode;
+    /** Input element type */
     type?: 'text' | 'password' | 'email' | 'search' | 'tel' | 'url' | 'number';
-    value?: string;
-    onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
-    radius?: MantineNumberSize;
     /** Props passed to root element (InputWrapper component) */
-    wrapperProps?: Partial<Subtract<React.ComponentPropsWithoutRef<typeof InputWrapper>, InputWrapperBaseProps & DefaultProps>>;
+    wrapperProps?: Record<string, any>;
 }
@@ -18,0 +16,0 @@ export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

dist/src/mantine-core/src/ThemeIcon/ThemeIcon.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-import { ThemeIconVariant } from './ThemeIcon.styles';
+export declare const THEME_ICON_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 interface ThemeIconProps extends DefaultProps, React.ComponentProps<'div'> {
+    /** Icon */
+    children: React.ReactNode;
+    /** Predefined width and height or number for width and height in px */
     size?: MantineNumberSize;
+    /** Predefined border-radius from theme.radius or number for border-radius in px */
     radius?: MantineNumberSize;
+    /** Icon color from theme */
     color?: string;
-    children: React.ReactNode;
-    variant?: ThemeIconVariant;
+    /** Controls appearance */
+    variant?: 'filled' | 'light';
 }
@@ -11,0 +22,0 @@ export declare function ThemeIcon({ className, size, radius, variant, color, children, themeOverride, ...others }: ThemeIconProps): JSX.Element;

dist/src/mantine-core/src/ThemeIcon/ThemeIcon.styles.d.ts

@@ -1,4 +0,10 @@
-export declare type ThemeIconVariant = 'filled' | 'light' | 'gradient';
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
 declare const _default: (data?: unknown) => Record<"themeIcon", string>;
 export default _default;
 //# sourceMappingURL=ThemeIcon.styles.d.ts.map

dist/src/mantine-core/src/Title/Title.d.ts

@@ -11,6 +11,3 @@ import React from 'react';
     title?: string;
-    color?: string;
-    translate?: "yes" | "no";
-    hidden?: boolean;
-    key?: string | number;
+    key?: React.ReactText;
     defaultChecked?: boolean;
@@ -25,2 +22,3 @@ defaultValue?: string | number | readonly string[];
     draggable?: boolean | "true" | "false";
+    hidden?: boolean;
     id?: string;
@@ -31,2 +29,3 @@ lang?: string;
     tabIndex?: number;
+    translate?: "yes" | "no";
     radioGroup?: string;
@@ -45,2 +44,3 @@ role?: string;
     autoSave?: string;
+    color?: string;
     itemProp?: string;
@@ -54,3 +54,3 @@ itemScope?: boolean;
     unselectable?: "on" | "off";
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    inputMode?: "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
     is?: string;
@@ -57,0 +57,0 @@ 'aria-activedescendant'?: string;

dist/src/mantine-demos/src/AuthenticationForm/AuthenticationForm.d.ts

@@ -1,8 +0,8 @@
-/// <reference types="react" />
 interface AuthenticationFormProps {
     noShadow?: boolean;
     noPadding?: boolean;
+    noSubmit?: boolean;
 }
-export default function AuthenticationForm({ noShadow, noPadding }: AuthenticationFormProps): JSX.Element;
+export declare function AuthenticationForm({ noShadow, noPadding, noSubmit }: AuthenticationFormProps): JSX.Element;
 export {};
 //# sourceMappingURL=AuthenticationForm.d.ts.map

dist/src/mantine-demos/src/index.d.ts

@@ -1,3 +0,4 @@
-export { default as AuthenticationForm } from './AuthenticationForm/AuthenticationForm';
-export { default as TransactionsTable } from './TransactionsTable/TransactionsTable';
+export { AuthenticationForm } from './AuthenticationForm/AuthenticationForm';
+export { TodoList } from './TodoList/TodoList';
+export { TransactionsTable } from './TransactionsTable/TransactionsTable';
 //# sourceMappingURL=index.d.ts.map

dist/src/mantine-demos/src/TransactionsTable/TransactionsTable.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-export default function TransactionsTable(): JSX.Element;
+export declare function TransactionsTable(): JSX.Element;
 //# sourceMappingURL=TransactionsTable.d.ts.map

dist/src/mantine-hooks/src/index.d.ts

@@ -1,9 +0,12 @@
-export { useClickOutside } from './hooks/use-click-outside/use-click-outside';
-export { useClipboard } from './hooks/use-clipboard/use-clipboard';
-export { useDocumentTitle } from './hooks/use-document-title/use-document-title';
-export { useForm } from './hooks/use-form/use-form';
-export { useId } from './hooks/use-id/use-id';
-export { useListState } from './hooks/use-list-state/use-list-state';
-export { useMediaQuery } from './hooks/use-media-query/use-media-query';
-export { useReducedMotion } from './hooks/use-reduced-motion/use-reduced-motion';
+export { useClickOutside } from './use-click-outside/use-click-outside';
+export { useClipboard } from './use-clipboard/use-clipboard';
+export { useDocumentTitle } from './use-document-title/use-document-title';
+export { useForm } from './use-form/use-form';
+export { useId } from './use-id/use-id';
+export { useListState } from './use-list-state/use-list-state';
+export { useMediaQuery } from './use-media-query/use-media-query';
+export { useMergedRef } from './use-merged-ref/use-merged-ref';
+export { useQueue } from './use-queue/use-queue';
+export { useReducedMotion } from './use-reduced-motion/use-reduced-motion';
+export { useScrollLock } from './use-scroll-lock/use-scroll-lock';
 //# sourceMappingURL=index.d.ts.map

dist/src/mantine-tag-picker/src/TagBadge/TagBadge.d.ts

 import React from 'react';
-import { DefaultProps } from "../../../mantine-core/src";
+import { DefaultProps } from "../../../mantine-theme/src";
 import { TagPickerTag } from '../types';
@@ -4,0 +4,0 @@ interface TagBadgeProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {

dist/src/mantine-tag-picker/src/TagEdit/TagEdit.d.ts

 import React from 'react';
-import { MantineThemeOverride } from "../../../mantine-core/src";
+import { MantineThemeOverride } from "../../../mantine-theme/src";
 import { TagPickerColor, TagPickerTag } from '../types';
@@ -4,0 +4,0 @@ export interface TagEditProps {

dist/src/mantine-tag-picker/src/TagItem/TagItem.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-import { MantineThemeOverride } from "../../../mantine-core/src";
+import { MantineThemeOverride } from "../../../mantine-theme/src";
 import { TagPickerColor, TagPickerTag } from '../types';
@@ -4,0 +3,0 @@ interface TagItemProps {

dist/src/mantine-tag-picker/src/TagItem/TagItem.styles.d.ts

@@ -1,3 +0,3 @@
-declare const _default: (data?: unknown) => Record<"body" | "badge" | "control" | "item" | "controlInner" | "hovered", string>;
+declare const _default: (data?: unknown) => Record<"body" | "hovered" | "item" | "badge" | "control" | "controlInner", string>;
 export default _default;
 //# sourceMappingURL=TagItem.styles.d.ts.map

dist/src/mantine-tag-picker/src/TagsList/TagsList.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-import { MantineThemeOverride } from "../../../mantine-core/src";
+import { MantineThemeOverride } from "../../../mantine-theme/src";
 import { TagPickerColor, TagPickerTag } from '../types';
@@ -4,0 +3,0 @@ export interface TagsListProps {

dist/src/mantine-theme/src/index.d.ts

@@ -1,2 +0,2 @@
-export type { MantineTheme, MantineThemeOverride, MantineSize, MantineNumberSize, DefaultProps, } from './types';
+export type { MantineTheme, MantineThemeOverride, MantineSize, MantineNumberSize, DefaultProps, MantineSizes, } from './types';
 export { getThemeColor } from './utils/get-theme-color/get-theme-color';
@@ -3,0 +3,0 @@ export { getFocusStyles } from './utils/get-focus-styles/get-focus-styles';

dist/src/mantine-theme/src/types.d.ts

@@ -16,2 +16,3 @@ import type { CSSProperties } from 'react';
     readonly lineHeight: CSSProperties['lineHeight'];
+    readonly transitionTimingFunction: CSSProperties['transitionTimingFunction'];
     readonly fontFamilyMonospace: CSSProperties['fontFamily'];
@@ -18,0 +19,0 @@ readonly primaryColor: string;

dist/src/mantine-theme/src/utils/get-size-value/get-size-value.d.ts

@@ -1,7 +0,6 @@
-import { MantineNumberSize, MantineSizes, MantineSize } from '../../types';
 export declare function getSizeValue({ size, sizes, defaultSize, }: {
-    size: MantineNumberSize;
-    sizes: MantineSizes;
-    defaultSize?: MantineSize;
-}): number;
+    size: string | number;
+    sizes: Record<string, any>;
+    defaultSize?: string;
+}): any;
 //# sourceMappingURL=get-size-value.d.ts.map

dist/src/mantine-types/src/index.d.ts

@@ -10,6 +10,3 @@ /// <reference types="react" />
 export declare type Tuple<T, N extends number> = N extends N ? number extends N ? T[] : _TupleOf<T, N, []> : never;
-export declare type SetDifference<A, B> = A extends B ? never : A;
-export declare type SetComplement<A, A1 extends A> = SetDifference<A, A1>;
-export declare type Subtract<T extends T1, T1 extends object> = Pick<T, SetComplement<keyof T, keyof T1>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@mantine/core",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "main": "dist/lib.js",
@@ -10,3 +10,4 @@ "license": "MIT",
   "peerDependencies": {
-    "@mantine/hooks": "0.4.12",
+    "@mantine/hooks": "0.5.0",
+    "@mantine/theme": "0.5.0",
     "react": ">=16.8.0",
@@ -13,0 +14,0 @@ "react-dom": ">=16.8.0",

README.md

 # Mantine
 
-![Github banner](./github-banner.svg)
+![Github banner](https://github.com/mantinedev/mantine/raw/master/github-banner.svg)
 
@@ -5,0 +5,0 @@ Build better React applications. Mantine is a customizable component library with focus on accessibility and developer experience.

src/ActionIcon/ActionIcon.styles.ts

@@ -11,3 +11,13 @@ import { createUseStyles } from 'react-jss';
 
-const sizes = {
+export type ActionIconVariant = 'transparent' | 'hover' | 'filled';
+
+interface ActionIconStylesProps {
+  color: string;
+  size: MantineNumberSize;
+  radius: MantineNumberSize;
+  theme: MantineTheme;
+  variant: ActionIconVariant;
+}
+
+export const sizes = {
   xs: 18,
@@ -21,18 +31,10 @@ sm: 22,
 export default createUseStyles({
-  actionIcon: ({
-    color,
-    radius,
-    theme,
-    size,
-  }: {
-    color: string;
-    size: MantineNumberSize;
-    radius: MantineNumberSize;
-    theme: MantineTheme;
-  }) => ({
+  actionIcon: ({ color, radius, theme, size, variant }: ActionIconStylesProps) => ({
     ...getFocusStyles(theme),
     ...getFontStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
     border: '1px solid transparent',
     boxSizing: 'border-box',
-    backgroundColor: 'transparent',
+    backgroundColor:
+      variant === 'filled' ? getThemeColor({ theme, color, shade: 6 }) : 'transparent',
     height: getSizeValue({ size, sizes }),
@@ -48,12 +50,26 @@ width: getSizeValue({ size, sizes }),
     transition: 'color 100ms ease, background-color 100ms ease',
-    color: getThemeColor({ theme, color, shade: 6 }),
 
-    '&:hover': {
-      backgroundColor: getThemeColor({ theme, color, shade: 0 }),
+    '&:not(:disabled)': {
+      color: variant === 'filled' ? theme.white : getThemeColor({ theme, color, shade: 6 }),
+
+      '&:hover': {
+        backgroundColor:
+          variant === 'transparent'
+            ? 'transparent'
+            : getThemeColor({ theme, color, shade: variant === 'hover' ? 0 : 7 }),
+      },
+
+      '&:active': {
+        backgroundColor:
+          variant === 'transparent'
+            ? 'transparent'
+            : getThemeColor({ theme, color, shade: variant === 'hover' ? 1 : 8 }),
+      },
     },
 
-    '&:active': {
-      backgroundColor: getThemeColor({ theme, color, shade: 1 }),
+    '&:disabled': {
+      color: theme.colors.gray[5],
+      cursor: 'not-allowed',
     },
   }),
 });

src/Alert/Alert.styles.ts

 import { createUseStyles } from 'react-jss';
-import { MantineTheme, getThemeColor } from '@mantine/theme';
+import { MantineTheme, getThemeColor, getFontStyles } from '@mantine/theme';
 
+interface AlertStylesProps {
+  color: string;
+  theme: MantineTheme;
+}
+
 export default createUseStyles({
-  title: ({ color, theme }: { color: string; theme: MantineTheme }) => ({
-    backgroundColor: getThemeColor({ theme, color, shade: 6 }),
+  title: ({ color, theme }: AlertStylesProps) => ({
+    boxSizing: 'border-box',
+    textAlign: 'center',
+    backgroundColor: getThemeColor({ theme, color, shade: 7 }),
     color: theme.white,
-    textShadow: `1px 1px 0 ${getThemeColor({ theme, color, shade: 8 })}`,
-    textAlign: 'center',
-    height: 34,
-    lineHeight: '34px',
+    textShadow: `1px 1px 0 ${getThemeColor({ theme, color, shade: 9 })}`,
+    padding: [theme.spacing.xs, theme.spacing.md],
     borderTopRightRadius: theme.radius.sm,
     borderTopLeftRadius: theme.radius.sm,
     margin: 0,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
   }),
 
-  body: ({ color, theme }: { color: string; theme: MantineTheme }) => ({
+  body: ({ color, theme }: AlertStylesProps) => ({
+    ...getFontStyles(theme),
+    lineHeight: theme.lineHeight,
     backgroundColor: getThemeColor({ theme, color, shade: 0 }),
-    padding: theme.spacing.md,
+    padding: [theme.spacing.sm, theme.spacing.md],
     borderBottomLeftRadius: theme.radius.sm,
     borderBottomRightRadius: theme.radius.sm,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
 
@@ -23,0 +34,0 @@ '&:only-child': {

src/Avatar/Avatar.styles.ts

 import { createUseStyles } from 'react-jss';
-import { MantineTheme, getSizeValue, MantineNumberSize } from '@mantine/theme';
+import {
+  MantineTheme,
+  getSizeValue,
+  MantineNumberSize,
+  getFontStyles,
+  getThemeColor,
+} from '@mantine/theme';
 
-const sizes = {
-  xs: 14,
-  sm: 18,
-  md: 26,
-  lg: 36,
-  xl: 52,
+export const sizes = {
+  xs: 16,
+  sm: 26,
+  md: 38,
+  lg: 56,
+  xl: 84,
 };
 
+interface AvatarStylesProps {
+  size: MantineNumberSize;
+  radius: MantineNumberSize;
+  theme: MantineTheme;
+  color: string;
+}
+
 export default createUseStyles({
-  avatar: ({
-    size,
-    radius,
-    theme,
-  }: {
-    size: MantineNumberSize;
-    radius: MantineNumberSize;
-    theme: MantineTheme;
-  }) => ({
+  avatar: ({ size, radius, theme }: AvatarStylesProps) => ({
     boxSizing: 'border-box',
@@ -37,4 +42,8 @@ position: 'relative',
 
-  placeholder: ({ theme }: { theme: MantineTheme }) => ({
-    backgroundColor: theme.colors.gray[1],
+  placeholder: ({ theme, size, color }: AvatarStylesProps) => ({
+    ...getFontStyles(theme),
+    fontSize: getSizeValue({ size, sizes }) / 2.5,
+    color: getThemeColor({ theme, color, shade: 5 }),
+    fontWeight: 700,
+    backgroundColor: getThemeColor({ theme, color, shade: 1 }),
     display: 'flex',
@@ -45,9 +54,10 @@ alignItems: 'center',
     height: '100%',
+    userSelect: 'none',
   }),
 
-  placeholderIcon: ({ theme }: { theme: MantineTheme }) => ({
+  placeholderIcon: ({ theme, color }: AvatarStylesProps) => ({
     width: '70%',
     height: '70%',
-    color: theme.colors.gray[5],
+    color: getThemeColor({ theme, color, shade: 6 }),
   }),
 });

src/Badge/Badge.styles.ts

 import { createUseStyles } from 'react-jss';
-import { MantineTheme, getFontStyles } from '@mantine/theme';
+import { MantineTheme, getFontStyles, getThemeColor, getFocusStyles } from '@mantine/theme';
 
-export type BadgeVariant = 'badge' | 'pill' | 'outline';
+export type BadgeVariant = 'light' | 'filled' | 'outline';
 
-function getVariantStyle(variant: BadgeVariant, color: string, theme: MantineTheme) {
-  const colors = Array.isArray(theme.colors[color])
-    ? theme.colors[color]
-    : theme.colors[theme.primaryColor];
-
-  switch (variant) {
-    case 'badge':
-      return {
-        backgroundColor: colors[0],
-        color: colors[9],
-        lineHeight: '23px',
-        height: 22,
-        paddingLeft: 10,
-        paddingRight: 10,
-      };
-
-    case 'pill':
-      return {
-        backgroundColor: colors[6],
-        textShadow: `1px 1px 0 ${colors[8]}`,
-        color: theme.white,
-        paddingLeft: 8,
-        paddingRight: 8,
-        height: 19,
-        lineHeight: '19px',
-      };
-
-    case 'outline':
-      return {
-        borderColor: colors[6],
-        color: colors[6],
-        backgroundColor: 'transparent',
-        lineHeight: '22px',
-        height: 22,
-        paddingLeft: 10,
-        paddingRight: 10,
-        border: '1px solid transparent',
-      };
-
-    default:
-      return {};
-  }
+interface BadgeStylesProps {
+  variant: BadgeVariant;
+  color: string;
+  theme: MantineTheme;
+  fullWidth: boolean;
 }
 
 export default createUseStyles({
-  badge: ({
-    variant,
-    color,
-    theme,
-    fullWidth,
-  }: {
-    variant: BadgeVariant;
-    color: string;
-    theme: MantineTheme;
-    fullWidth: boolean;
-  }) => ({
+  badge: ({ theme, variant, fullWidth, color }: BadgeStylesProps) => ({
+    ...getFocusStyles(theme),
     ...getFontStyles(theme),
+    backgroundColor:
+      variant === 'outline'
+        ? 'transparent'
+        : getThemeColor({ theme, color, shade: variant === 'light' ? 0 : 6 }),
+    textShadow:
+      variant === 'filled' ? `1px 1px 0 ${getThemeColor({ theme, color, shade: 8 })}` : 'none',
+    color:
+      variant === 'filled'
+        ? theme.white
+        : getThemeColor({ theme, color, shade: variant === 'outline' ? 6 : 9 }),
+    border: `1px solid ${
+      variant === 'outline' ? getThemeColor({ theme, color, shade: 6 }) : 'transparent'
+    }`,
+    textDecoration: 'none',
+    textAlign: 'center',
+    padding: [3, theme.spacing.xs],
     boxSizing: 'border-box',
@@ -74,5 +44,3 @@ display: fullWidth ? 'block' : 'inline-block',
     textOverflow: 'ellipsis',
-
-    ...getVariantStyle(variant, color, theme),
   }),
 });

src/Breadcrumbs/Breadcrumbs.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme } from '@mantine/theme';
 
+interface BreadcrumbsStylesProps {
+  theme: MantineTheme;
+}
+
 export default createUseStyles({
@@ -12,5 +16,6 @@ breadcrumbs: {
     whiteSpace: 'nowrap',
+    WebkitTapHighlightColor: 'transparent',
   },
 
-  separator: ({ theme }: { theme: MantineTheme }) => ({
+  separator: ({ theme }: BreadcrumbsStylesProps) => ({
     marginLeft: theme.spacing.xs,
@@ -17,0 +22,0 @@ marginRight: theme.spacing.xs,

src/Burger/Burger.styles.ts

@@ -10,7 +10,12 @@ import { createUseStyles } from 'react-jss';
 
-const sizes = {
+interface BurgerStylesProps {
+  size: MantineNumberSize;
+  theme: MantineTheme;
+}
+
+export const sizes = {
   xs: 12,
   sm: 18,
   md: 24,
-  lg: 33,
+  lg: 34,
   xl: 42,
@@ -22,4 +27,5 @@ };
 
-  wrapper: ({ size, theme }: { size: MantineNumberSize; theme: MantineTheme }) => ({
+  wrapper: ({ size, theme }: BurgerStylesProps) => ({
     ...getFocusStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
     borderRadius: theme.radius.sm,
@@ -34,3 +40,3 @@ width: getSizeValue({ size, sizes }) + theme.spacing.xs,
 
-  burger: ({ size, theme }: { size: MantineNumberSize; theme: MantineTheme }) => {
+  burger: ({ size, theme }: BurgerStylesProps) => {
     const sizeValue = getSizeValue({ size, sizes });
@@ -37,0 +43,0 @@

src/Button/Button.styles.ts

@@ -10,2 +10,3 @@ import { createUseStyles } from 'react-jss';
   getThemeColor,
+  MantineSizes,
 } from '@mantine/theme';
@@ -55,2 +56,7 @@
 
+export const heights = Object.keys(sizes).reduce((acc, size) => {
+  acc[size] = sizes[size].height;
+  return acc;
+}, {} as MantineSizes);
+
 const getWidthStyles = (fullWidth: boolean) => ({
@@ -110,3 +116,3 @@ display: fullWidth ? 'block' : 'inline-block',
 
-    '&:active': {
+    '&:not(:disabled):active': {
       transform: 'translateY(1px)',
@@ -119,3 +125,3 @@ },
       color: theme.colors.gray[6],
-      pointerEvents: 'none',
+      cursor: 'not-allowed',
     },
@@ -129,3 +135,2 @@ }),
     fontWeight: 'bold',
-    lineHeight: 1,
     backgroundColor: getThemeColor({ theme, color, shade: 6 }),
@@ -139,3 +144,3 @@ textShadow: `1px 1px 0 ${getThemeColor({ theme, color, shade: 8 })}`,
 
-    '&:active': {
+    '&:not(:disabled):active': {
       transform: 'translateY(1px)',
@@ -150,3 +155,3 @@ backgroundColor: getThemeColor({ theme, color, shade: 7 }),
       textShadow: 'none',
-      pointerEvents: 'none',
+      cursor: 'not-allowed',
     },
@@ -153,0 +158,0 @@ }),

src/Checkbox/Checkbox.styles.ts

 import { createUseStyles } from 'react-jss';
 import {
   MantineTheme,
-  MantineNumberSize,
+  MantineSize,
   getFontStyles,
@@ -11,4 +11,4 @@ getSizeValue,
 
-const sizes = {
-  xs: 14,
+export const sizes = {
+  xs: 12,
   sm: 16,
@@ -20,2 +20,8 @@ md: 20,
 
+interface CheckboxStylesProps {
+  theme: MantineTheme;
+  size: MantineSize;
+  color: string;
+}
+
 export default createUseStyles({
@@ -27,3 +33,3 @@ wrapper: {
 
-  checkboxWrapper: ({ size }) => ({
+  checkboxWrapper: ({ size }: CheckboxStylesProps) => ({
     position: 'relative',
@@ -34,18 +40,10 @@ width: getSizeValue({ size, sizes }),
 
-  label: ({ theme }: { theme: MantineTheme }) => ({
+  label: ({ theme, size }: CheckboxStylesProps) => ({
     ...getFontStyles(theme),
     marginLeft: theme.spacing.sm,
-    fontSize: theme.fontSizes.sm,
-    lineHeight: theme.lineHeight,
+    fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
+    lineHeight: `${getSizeValue({ size, sizes })}px`,
   }),
 
-  checkbox: ({
-    size,
-    theme,
-    color,
-  }: {
-    size: MantineNumberSize;
-    theme: MantineTheme;
-    color: string;
-  }) => ({
+  checkbox: ({ size, theme, color }: CheckboxStylesProps) => ({
     ...getFocusStyles(theme),
@@ -64,7 +62,2 @@ appearance: 'none',
 
-    '&:disabled': {
-      backgroundColor: theme.colors.gray[2],
-      cursor: 'not-allowed',
-    },
-
     '&:checked': {
@@ -80,2 +73,13 @@ backgroundColor: getThemeColor({ theme, color, shade: 5 }),
     },
+
+    '&:disabled': {
+      backgroundColor: theme.colors.gray[2],
+      borderColor: theme.colors.gray[2],
+      cursor: 'not-allowed',
+
+      '& + $icon': {
+        color: theme.colors.gray[5],
+        filter: 'none',
+      },
+    },
   }),
@@ -82,0 +86,0 @@

src/Code/Code.styles.ts

 import { createUseStyles } from 'react-jss';
-import { MantineTheme } from '@mantine/theme';
+import { MantineTheme, getThemeColor, getFontStyles } from '@mantine/theme';
 
+interface CodeStylesProps {
+  theme: MantineTheme;
+  color: string;
+}
+
 export default createUseStyles({
-  code: ({ theme }: { theme: MantineTheme }) => ({
-    padding: [3, theme.spacing.xs / 2],
+  code: ({ theme, color }: CodeStylesProps) => ({
+    ...getFontStyles(theme),
+    lineHeight: theme.lineHeight,
+    padding: [1, theme.spacing.xs / 2],
     borderRadius: theme.radius.sm,
-    color: theme.black,
-    backgroundColor: theme.colors.gray[1],
+    color: getThemeColor({ theme, color, shade: 9 }),
+    backgroundColor: getThemeColor({ theme, color, shade: 0 }),
     fontFamily: theme.fontFamilyMonospace,
     fontSize: theme.fontSizes.xs,
+    border: `1px solid ${getThemeColor({ theme, color, shade: 3 })}`,
   }),
+
+  pre: ({ theme }: CodeStylesProps) => ({
+    padding: theme.spacing.xs,
+    margin: 0,
+    overflowX: 'auto',
+  }),
 });

src/Container/Container.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
 
-const sizes = {
+interface ContainerStylesProps {
+  fluid: boolean;
+  size: MantineNumberSize;
+  theme: MantineTheme;
+  padding: MantineNumberSize;
+}
+
+export const sizes = {
   xs: 570,
@@ -13,17 +20,9 @@ sm: 770,
 export default createUseStyles({
-  container: ({
-    fluid,
-    size,
-    theme,
-  }: {
-    fluid: boolean;
-    size: MantineNumberSize;
-    theme: MantineTheme;
-  }) => ({
+  container: ({ fluid, size, padding, theme }: ContainerStylesProps) => ({
     maxWidth: fluid ? '100%' : getSizeValue({ size, sizes }),
     marginLeft: 'auto',
     marginRight: 'auto',
-    paddingLeft: theme.spacing.md,
-    paddingRight: theme.spacing.md,
+    paddingLeft: getSizeValue({ size: padding, sizes: theme.spacing }),
+    paddingRight: getSizeValue({ size: padding, sizes: theme.spacing }),
   }),
 });

src/ElementsGroup/ElementsGroup.styles.ts

@@ -30,2 +30,3 @@ import { createUseStyles } from 'react-jss';
       display: 'flex',
+      alignItems: 'center',
       flexWrap: props.noWrap ? 'nowrap' : 'wrap',
@@ -32,0 +33,0 @@ justifyContent: JUSTIFY_CONTENT[props.position],

src/Hr/Hr.styles.ts

@@ -0,10 +1,28 @@
+import React from 'react';
 import { createUseStyles } from 'react-jss';
-import { MantineTheme } from '@mantine/theme';
+import { MantineNumberSize, MantineTheme, getSizeValue, getThemeColor } from '@mantine/theme';
 
+interface HrStylesProps {
+  theme: MantineTheme;
+  size: MantineNumberSize;
+  variant: React.CSSProperties['borderTopStyle'];
+  color: string;
+}
+
+export const sizes = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+};
+
 export default createUseStyles({
-  hr: ({ theme }: { theme: MantineTheme }) => ({
+  hr: ({ theme, size, variant, color }: HrStylesProps) => ({
     border: 0,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.gray[5],
+    borderTopWidth: getSizeValue({ size, sizes }),
+    borderTopColor: getThemeColor({ theme, color, shade: 6 }),
+    borderTopStyle: variant,
+    margin: 0,
   }),
 });

src/index.ts

@@ -1,27 +0,30 @@
-export * from '@mantine/theme';
-
-export { ActionIcon } from './ActionIcon/ActionIcon';
+export { ActionIcon, ACTION_ICON_SIZES } from './ActionIcon/ActionIcon';
 export { Alert } from './Alert/Alert';
-export { Avatar } from './Avatar/Avatar';
+export { Avatar, AVATAR_SIZES } from './Avatar/Avatar';
 export { Badge } from './Badge/Badge';
+export { Blockquote } from './Blockquote/Blockquote';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
-export { Burger } from './Burger/Burger';
-export { Button, LinkButton, MantineButton } from './Button/Button';
-export { Checkbox } from './Checkbox/Checkbox';
+export { Burger, BURGER_SIZES } from './Burger/Burger';
+export { Button, BUTTON_SIZES } from './Button/Button';
+export { Checkbox, CHECKBOX_SIZES } from './Checkbox/Checkbox';
 export { Code } from './Code/Code';
 export { ColorSwatch } from './ColorSwatch/ColorSwatch';
-export { Container } from './Container/Container';
+export { Container, CONTAINER_SIZES } from './Container/Container';
 export { ElementsGroup } from './ElementsGroup/ElementsGroup';
 export { Highlight } from './Highlight/Highlight';
-export { Hr } from './Hr/Hr';
+export { Hr, HR_SIZES } from './Hr/Hr';
+export { InnerHtml } from './InnerHtml/InnerHtml';
 export { Input } from './Input/Input';
 export { InputWrapper } from './InputWrapper/InputWrapper';
-export { Loader } from './Loader/Loader';
+export { Kbd } from './Kbd/Kbd';
+export { Loader, LOADER_SIZES } from './Loader/Loader';
 export { LoadingOverlay } from './LoadingOverlay/LoadingOverlay';
-export { Modal } from './Modal/Modal';
-export { Month } from './Month/Month';
+export { Menu, MenuItem, MenuBody, MENU_SIZES } from './Menu/Menu';
+export { Modal, MODAL_SIZES } from './Modal/Modal';
 export { Overlay } from './Overlay/Overlay';
 export { Paper } from './Paper/Paper';
 export { PasswordInput } from './PasswordInput/PasswordInput';
-export { Progress } from './Progress/Progress';
+export { Portal } from './Portal/Portal';
+export { Progress, PROGRESS_SIZES } from './Progress/Progress';
+export { RadioGroup, Radio, RADIO_SIZES } from './RadioGroup/RadioGroup';
 export { Select } from './Select/Select';
@@ -32,6 +35,7 @@ export { Spoiler } from './Spoiler/Spoiler';
 export { Tabs, Tab } from './Tabs/Tabs';
-export { Anchor, Text } from './Text/Text';
+export { Text } from './Text/Text';
 export { Textarea } from './Textarea/Textarea';
 export { TextInput } from './TextInput/TextInput';
-export { ThemeIcon } from './ThemeIcon/ThemeIcon';
+export { ThemeIcon, THEME_ICON_SIZES } from './ThemeIcon/ThemeIcon';
 export { Title } from './Title/Title';
+export { Transition, GroupedTransition } from './Transition/Transition';

src/Input/Input.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, MantineNumberSize, getFontStyles, getSizeValue } from '@mantine/theme';
 
+interface InputStylesProps {
+  theme: MantineTheme;
+  radius: MantineNumberSize;
+}
+
 export default createUseStyles({
   withIcon: {},
-  invalid: {},
 
-  inputWrapper: {
+  inputWrapper: ({ radius, theme }: InputStylesProps) => ({
     position: 'relative',
-  },
+    overflow: 'hidden',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
 
-  defaultVariant: ({ theme, radius }: { theme: MantineTheme; radius: MantineNumberSize }) => ({
+    '&, & *': { boxSizing: 'border-box' },
+  }),
+
+  defaultVariant: ({ theme, radius }: InputStylesProps) => ({
     '& $input': {
-      height: 36,
+      minHeight: 36,
       paddingLeft: 15,
@@ -37,3 +45,2 @@ paddingRight: 15,
     '& $icon': {
-      height: 36,
       width: 36,
@@ -43,7 +50,7 @@ },
 
-  filledVariant: ({ theme, radius }: { theme: MantineTheme; radius: MantineNumberSize }) => ({
+  filledVariant: ({ theme, radius }: InputStylesProps) => ({
     '& $input': {
-      height: 36,
-      paddingLeft: 15,
-      paddingRight: 15,
+      minHeight: 36,
+      paddingLeft: theme.spacing.md,
+      paddingRight: theme.spacing.md,
       borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
@@ -71,4 +78,4 @@ border: '1px solid transparent',
 
-    '& $invalid': {
-      borderColor: theme.colors.red[6],
+    '&$invalid $input': {
+      backgroundColor: theme.colors.red[0],
     },
@@ -81,3 +88,2 @@
     '& $icon': {
-      height: 36,
       width: 36,
@@ -93,6 +99,10 @@ color: theme.colors.gray[6],
       outline: 0,
+
+      '&:disabled': {
+        backgroundColor: 'transparent',
+        opacity: 0.6,
+      },
     },
 
     '& $icon': {
-      height: 28,
       width: 28,
@@ -106,7 +116,13 @@ },
 
-  input: ({ theme }: { theme: MantineTheme }) => ({
+  input: ({ theme }: InputStylesProps) => ({
     ...getFontStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
+    lineHeight: theme.lineHeight,
+    appearance: 'none',
+    resize: 'none',
     boxSizing: 'border-box',
     fontSize: 14,
     width: '100%',
+    color: theme.black,
+    display: 'block',
 
@@ -127,5 +143,8 @@ '&:disabled': {
 
-  icon: ({ theme }: { theme: MantineTheme }) => ({
+  icon: ({ theme }: InputStylesProps) => ({
     pointerEvents: 'none',
     position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
     color: theme.colors.gray[5],
@@ -136,2 +155,27 @@ display: 'flex',
   }),
+
+  invalid: ({ theme }: InputStylesProps) => ({
+    '& $input': {
+      color: theme.colors.red[6],
+      borderColor: theme.colors.red[6],
+
+      '&::placeholder': {
+        color: theme.colors.red[6],
+      },
+    },
+
+    '& $icon': {
+      color: theme.colors.red[6],
+    },
+  }),
+
+  rightSection: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });

src/InputWrapper/InputWrapper.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, getFontStyles } from '@mantine/theme';
 
+interface InputWrapperStylesProps {
+  theme: MantineTheme;
+}
+
 export default createUseStyles({
-  inputWrapper: ({ theme }: { theme: MantineTheme }) => getFontStyles(theme),
+  inputWrapper: ({ theme }: InputWrapperStylesProps) => ({
+    ...getFontStyles(theme),
+    lineHeight: theme.lineHeight,
+  }),
 
-  label: ({ theme }: { theme: MantineTheme }) => ({
+  label: ({ theme }: InputWrapperStylesProps) => ({
     display: 'block',
@@ -12,17 +19,20 @@ marginBottom: 5,
     fontWeight: 500,
-    color: theme.colors.gray[7],
+    color: theme.colors.gray[9],
+    wordBreak: 'break-word',
   }),
 
-  error: ({ theme }: { theme: MantineTheme }) => ({
+  error: ({ theme }: InputWrapperStylesProps) => ({
     marginTop: theme.spacing.xs / 2,
+    wordBreak: 'break-word',
   }),
 
-  description: ({ theme }: { theme: MantineTheme }) => ({
+  description: ({ theme }: InputWrapperStylesProps) => ({
     marginTop: theme.spacing.xs / 2,
     marginBottom: theme.spacing.xs / 2,
+    wordBreak: 'break-word',
   }),
 
-  required: ({ theme }: { theme: MantineTheme }) => ({
+  required: ({ theme }: InputWrapperStylesProps) => ({
     color: theme.colors.red[7],
   }),
 });

src/LoadingOverlay/LoadingOverlay.styles.ts

@@ -10,3 +10,2 @@ import { createUseStyles } from 'react-jss';
     bottom: 0,
-    zIndex: 1000,
     display: 'flex',
@@ -16,6 +15,2 @@ alignItems: 'center',
   },
-
-  loader: {
-    zIndex: 1000,
-  },
 });

src/Modal/Modal.styles.ts

 import { createUseStyles } from 'react-jss';
-import { MantineTheme } from '@mantine/theme';
+import { MantineTheme, getSizeValue } from '@mantine/theme';
 
+export const sizes = {
+  xs: 320,
+  sm: 380,
+  md: 440,
+  lg: 620,
+  xl: 780,
+  full: '100%',
+};
+
+interface ModalStylesProps {
+  theme: MantineTheme;
+  overflow: 'outside' | 'inside';
+  size: string | number;
+}
+
 export default createUseStyles({
@@ -13,5 +28,4 @@ wrapper: {
 
-  inner: ({ theme }: { theme: MantineTheme }) => ({
+  inner: ({ theme }: ModalStylesProps) => ({
     position: 'absolute',
-    zIndex: 1,
     top: 0,
@@ -26,17 +40,18 @@ left: 0,
     alignItems: 'flex-start',
-
-    '@media (max-width: 755px)': {
-      padding: theme.spacing.sm,
-    },
   }),
 
-  title: ({ theme }: { theme: MantineTheme }) => ({
+  title: ({ theme }: ModalStylesProps) => ({
     marginRight: theme.spacing.md,
+    textOverflow: 'ellipsis',
+    display: 'block',
+    wordBreak: 'break-word',
   }),
 
-  modal: ({ theme }: { theme: MantineTheme }) => ({
+  modal: ({ theme, size }: ModalStylesProps) => ({
+    width: getSizeValue({ sizes, size }),
     padding: theme.spacing.lg,
+    outline: 0,
   }),
 
-  header: ({ theme }: { theme: MantineTheme }) => ({
+  header: ({ theme }: ModalStylesProps) => ({
     display: 'flex',
@@ -47,2 +62,8 @@ alignItems: 'center',
   }),
+
+  body: ({ overflow }: ModalStylesProps) => ({
+    maxHeight: overflow === 'inside' && 'calc(100vh - 185px)',
+    overflowY: overflow === 'inside' && 'auto',
+    wordBreak: 'break-word',
+  }),
 });

src/Paper/Paper.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, MantineNumberSize, MantineSize, getSizeValue } from '@mantine/theme';
 
+interface PaperStylesProps {
+  theme: MantineTheme;
+  radius: MantineNumberSize;
+  shadow: MantineSize;
+  padding: MantineNumberSize;
+}
+
 export default createUseStyles({
-  paper: ({
-    theme,
-    radius,
-    shadow,
-    padding,
-  }: {
-    theme: MantineTheme;
-    radius: MantineNumberSize;
-    shadow: MantineSize;
-    padding: MantineNumberSize;
-  }) => ({
+  paper: ({ theme, radius, shadow, padding }: PaperStylesProps) => ({
     backgroundColor: theme.white,
     boxSizing: 'border-box',
     borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-    boxShadow: theme.shadows[shadow] || 'none',
+    boxShadow: theme.shadows[shadow] || shadow || 'none',
     padding: getSizeValue({ size: padding, sizes: theme.spacing }),
   }),
 });

src/Progress/Progress.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, MantineNumberSize, getThemeColor, getSizeValue } from '@mantine/theme';
 
-const sizes = {
+export const sizes = {
   xs: 3,
@@ -12,33 +12,29 @@ sm: 5,
 
+interface ProgressStylesProps {
+  theme: MantineTheme;
+  color: string;
+  radius: MantineNumberSize;
+  reduceMotion: boolean;
+  size: MantineNumberSize;
+  striped: boolean;
+}
+
 export default createUseStyles({
-  progress: ({
-    radius,
-    size,
-    theme,
-  }: {
-    radius: MantineNumberSize;
-    size: MantineNumberSize;
-    theme: MantineTheme;
-  }) => ({
+  progress: ({ radius, size, theme }: ProgressStylesProps) => ({
     height: getSizeValue({ size, sizes }),
     backgroundColor: theme.colors.gray[2],
     borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    overflow: 'hidden',
   }),
 
-  bar: ({
-    theme,
-    color,
-    radius,
-    reduceMotion,
-  }: {
-    theme: MantineTheme;
-    color: string;
-    radius: MantineNumberSize;
-    reduceMotion: boolean;
-  }) => ({
+  bar: ({ theme, color, radius, reduceMotion, striped }: ProgressStylesProps) => ({
     height: '100%',
     backgroundColor: getThemeColor({ theme, color, shade: 6 }),
     borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-    transition: reduceMotion ? 'none' : 'width 150ms ease',
+    transition: reduceMotion ? 'none' : `width 200ms ${theme.transitionTimingFunction}`,
+    backgroundSize: [theme.spacing.md, theme.spacing.md],
+    backgroundImage: striped
+      ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)'
+      : 'none',
   }),
 });

src/Spoiler/Spoiler.styles.ts

 import { createUseStyles } from 'react-jss';
+import { MantineTheme } from '@mantine/theme';
 
+interface SpoilerStylesProps {
+  theme: MantineTheme;
+  transitionDuration: number;
+}
+
 export default createUseStyles({
@@ -8,8 +14,8 @@ spoiler: {
 
-  content: ({ transitionDuration }: { transitionDuration: number }) => ({
+  content: ({ transitionDuration }: SpoilerStylesProps) => ({
     overflow: 'hidden',
     transitionProperty: 'max-height',
-    transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21)',
+    transitionTimingFunction: 'ease',
     transitionDuration: transitionDuration || 0,
   }),
 });

src/Switch/Switch.styles.ts

@@ -12,2 +12,10 @@ import { createUseStyles } from 'react-jss';
 
+interface SwitchStylesProps {
+  reduceMotion: boolean;
+  color: string;
+  size: MantineSize;
+  radius: MantineNumberSize;
+  theme: MantineTheme;
+}
+
 const switchHeight = {
@@ -43,15 +51,3 @@ xs: 14,
 
-  switch: ({
-    size,
-    radius,
-    theme,
-    reduceMotion,
-    color,
-  }: {
-    reduceMotion: boolean;
-    color: string;
-    size: MantineSize;
-    radius: MantineNumberSize;
-    theme: MantineTheme;
-  }) => {
+  switch: ({ size, radius, theme, reduceMotion, color }: SwitchStylesProps) => {
     const handleSize = getSizeValue({ size, sizes: handleSizes });
@@ -62,2 +58,3 @@ const borderRadius = getSizeValue({ size: radius, sizes: theme.radius });
       ...getFocusStyles(theme),
+      WebkitTapHighlightColor: 'transparent',
       position: 'relative',
@@ -73,3 +70,3 @@ borderRadius,
       transitionProperty: 'background-color, border-color',
-      transitionTimingFunction: 'ease',
+      transitionTimingFunction: theme.transitionTimingFunction,
       transitionDuration: reduceMotion ? '1ms' : '150ms',
@@ -90,9 +87,5 @@ boxSizing: 'border-box',
         border: `1px solid ${theme.colors.gray[3]}`,
-        transition: reduceMotion ? 'none' : 'transform 150ms ease',
+        transition: reduceMotion ? 'none' : `transform 150ms ${theme.transitionTimingFunction}`,
       },
 
-      '&:disabled::before': {
-        backgroundColor: theme.colors.gray[2],
-      },
-
       '&:checked': {
@@ -111,6 +104,17 @@ backgroundColor: getThemeColor({ theme, color, shade: 6 }),
       },
+
+      '&:disabled': {
+        backgroundColor: theme.colors.gray[2],
+        borderColor: theme.colors.gray[2],
+        cursor: 'not-allowed',
+
+        '&::before': {
+          borderColor: theme.colors.gray[2],
+          backgroundColor: theme.colors.gray[0],
+        },
+      },
     };
   },
 
-  label: ({ theme }: { theme: MantineTheme }) => ({
+  label: ({ theme }: SwitchStylesProps) => ({
     ...getFontStyles(theme),
@@ -117,0 +121,0 @@ fontFamily: theme.fontFamily,

src/Table/Table.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, getFontStyles } from '@mantine/theme';
 
+interface TableStylesProps {
+  theme: MantineTheme;
+  captionSide: 'top' | 'bottom';
+}
+
 export default createUseStyles({
@@ -8,8 +13,16 @@ striped: {},
 
-  table: ({ theme }: { theme: MantineTheme }) => ({
+  table: ({ theme, captionSide }: TableStylesProps) => ({
     ...getFontStyles(theme),
     width: '100%',
     borderCollapse: 'collapse',
+    captionSide,
 
-    '& > thead > tr > th': {
+    '& > caption': {
+      marginTop: captionSide === 'top' ? 0 : theme.spacing.xs,
+      marginBottom: captionSide === 'bottom' ? 0 : theme.spacing.xs,
+      fontSize: theme.fontSizes.sm,
+      color: theme.colors.gray[6],
+    },
+
+    '& > thead > tr > th, & > tfoot > tr > th': {
       textAlign: 'left',
@@ -20,5 +33,12 @@ fontWeight: 'bold',
       padding: [7, 10],
+    },
+
+    '& > thead > tr > th': {
       borderBottom: `1px solid ${theme.colors.gray[3]}`,
     },
 
+    '& > tfoot > tr > th': {
+      borderTop: `1px solid ${theme.colors.gray[3]}`,
+    },
+
     '& > tbody > tr > td': {
@@ -25,0 +45,0 @@ padding: [7, 10],

src/Tabs/TabControl/TabControl.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, getFontStyles, getFocusStyles, getThemeColor } from '@mantine/theme';
 
+interface TabControlStylesProps {
+  theme: MantineTheme;
+  reduceMotion: boolean;
+  color: string;
+}
+
 export default createUseStyles({
-  tab: ({ theme, reduceMotion }: { theme: MantineTheme; reduceMotion: boolean }) => ({
+  tab: ({ theme, reduceMotion }: TabControlStylesProps) => ({
     ...getFontStyles(theme),
     ...getFocusStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
     boxSizing: 'border-box',
@@ -14,3 +21,2 @@ display: 'block',
     borderBottom: '2px solid transparent',
-    marginBottom: -2,
     padding: [0, theme.spacing.md],
@@ -27,3 +33,3 @@ fontSize: theme.fontSizes.sm,
 
-  tabActive: ({ theme, color }: { theme: MantineTheme; color: string }) => ({
+  tabActive: ({ theme, color }: TabControlStylesProps) => ({
     color: getThemeColor({ theme, color, shade: 6 }),
@@ -37,2 +43,3 @@ borderBottomColor: getThemeColor({ theme, color, shade: 6 }),
     alignItems: 'center',
+    justifyContent: 'center',
     lineHeight: 1,
@@ -42,3 +49,3 @@ height: 40,
 
-  tabIcon: ({ theme }: { theme: MantineTheme }) => ({
+  tabIcon: ({ theme }: TabControlStylesProps) => ({
     '&:not(:only-child)': {
@@ -45,0 +52,0 @@ marginRight: theme.spacing.xs,

src/Tabs/Tabs.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme } from '@mantine/theme';
 
+interface TabsStylesProps {
+  theme: MantineTheme;
+}
+
 export default createUseStyles({
-  tabs: ({ theme }: { theme: MantineTheme }) => ({
-    display: 'flex',
+  tabs: ({ theme }: TabsStylesProps) => ({
     borderBottom: `2px solid ${theme.colors.gray[3]}`,
   }),
 
-  body: ({ theme }: { theme: MantineTheme }) => ({
+  tabsInner: {
+    marginBottom: -2,
+  },
+
+  body: ({ theme }: TabsStylesProps) => ({
     paddingTop: theme.spacing.sm,
   }),
 });

src/Text/Text.styles.ts

@@ -6,14 +6,11 @@ import { createUseStyles } from 'react-jss';
 
+interface TextStylesProps {
+  theme: MantineTheme;
+  color: string;
+  variant: TextVariant;
+  size: MantineSize;
+}
+
 export default createUseStyles({
-  text: ({
-    theme,
-    color,
-    variant,
-    size,
-  }: {
-    theme: MantineTheme;
-    color: string;
-    variant: TextVariant;
-    size: MantineSize;
-  }) => ({
+  text: ({ theme, color, variant, size }: TextStylesProps) => ({
     ...getFontStyles(theme),
@@ -30,2 +27,3 @@ ...getFocusStyles(theme),
     textDecoration: 'none',
+    WebkitTapHighlightColor: 'transparent',
 
@@ -32,0 +30,0 @@ '&:hover': {

src/ThemeIcon/ThemeIcon.styles.ts

 import { createUseStyles } from 'react-jss';
 import { MantineTheme, MantineNumberSize, getSizeValue, getThemeColor } from '@mantine/theme';
 
-export type ThemeIconVariant = 'filled' | 'light' | 'gradient';
+interface ThemeIconStylesProps {
+  theme: MantineTheme;
+  color: string;
+  size: MantineNumberSize;
+  radius: MantineNumberSize;
+  variant: 'filled' | 'light';
+}
 
-const sizes = {
+export const sizes = {
   xs: 16,
@@ -15,15 +21,3 @@ sm: 20,
 export default createUseStyles({
-  themeIcon: ({
-    theme,
-    color,
-    size,
-    radius,
-    variant,
-  }: {
-    theme: MantineTheme;
-    color: string;
-    size: MantineNumberSize;
-    radius: MantineNumberSize;
-    variant: ThemeIconVariant;
-  }) => {
+  themeIcon: ({ theme, color, size, radius, variant }: ThemeIconStylesProps) => {
     const iconSize = getSizeValue({ size, sizes });
@@ -37,34 +31,8 @@
       backgroundColor: getThemeColor({ theme, color, shade: variant === 'filled' ? 5 : 1 }),
-      backgroundImage:
-        variant === 'gradient'
-          ? `linear-gradient(135deg, ${getThemeColor({
-              theme,
-              color,
-              shade: 3,
-            })} 0%, ${getThemeColor({ theme, color, shade: 6 })} 60%, ${getThemeColor({
-              theme,
-              color,
-              shade: 8,
-            })} 100%)`
-          : undefined,
-      color:
-        variant === 'filled' || variant === 'gradient'
-          ? theme.white
-          : getThemeColor({ theme, color, shade: 7 }),
+      color: variant === 'filled' ? theme.white : getThemeColor({ theme, color, shade: 7 }),
       width: iconSize,
       height: iconSize,
       borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-
-      '& svg': {
-        filter:
-          variant === 'gradient'
-            ? `drop-shadow(1px 1px 0px ${getThemeColor({
-                theme,
-                color,
-                shade: 8,
-              })})`
-            : undefined,
-      },
     };
   },
 });

src/Title/Title.styles.ts

@@ -6,4 +6,9 @@ import { createUseStyles } from 'react-jss';
 
+interface TitleStylesProps {
+  theme: MantineTheme;
+  element: HeadingElement;
+}
+
 export default createUseStyles({
-  title: ({ theme, element }: { theme: MantineTheme; element: HeadingElement }) => ({
+  title: ({ theme, element }: TitleStylesProps) => ({
     ...getFontStyles(theme),
@@ -10,0 +15,0 @@ fontFamily: theme.headings.fontFamily,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1026424

increased by26.45%

Number of package files

615

increased by15.17%

Lines of code

10611

increased by33.25%

Worsened metrics

Dependency count

12

increased by9.09%

No dependency changes