@mantine/core - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

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

@@ -15,2 +15,4 @@ import React from 'react';
     size?: MantineNumberSize;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLButtonElement>;
 }
@@ -24,4 +26,7 @@ export declare const ACTION_ICON_SIZES: {
 };
-export declare const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps & React.RefAttributes<HTMLButtonElement>>;
+export declare function ActionIcon({ className, color, children, radius, size, variant, themeOverride, elementRef, ...others }: ActionIconProps): JSX.Element;
+export declare namespace ActionIcon {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=ActionIcon.d.ts.map

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

@@ -17,5 +17,10 @@ import React from 'react';
     size?: MantineNumberSize;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLButtonElement>;
 }
-export declare const Burger: React.ForwardRefExoticComponent<BurgerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare function Burger({ className, opened, color, size, themeOverride, elementRef, ...others }: BurgerProps): JSX.Element;
+export declare namespace Burger {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=Burger.d.ts.map

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

@@ -27,5 +27,10 @@ import React from 'react';
     id?: string;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLInputElement>;
 }
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare function Checkbox({ className, checked, onChange, color, themeOverride, label, disabled, intermediate, id, size, wrapperProps, style, inputStyle, inputClassName, elementRef, ...others }: CheckboxProps): JSX.Element;
+export declare namespace Checkbox {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=Checkbox.d.ts.map

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

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+import { MantineTransition } from '../Transition/Transition';
+export declare const DRAWER_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: string;
+};
 interface DrawerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    size?: MantineNumberSize;
-    trapFocus?: boolean;
-    lockScroll?: boolean;
+    /** If true drawer is mounted to the dom */
+    opened: boolean;
+    /** Called when drawer is closed (Escape key and click outside, depending on options) */
+    onClose(): void;
+    /** Drawer body position */
+    position?: 'top' | 'left' | 'bottom' | 'right';
+    /** Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width */
+    size?: string | number;
+    /** Drawer body shadow from theme or any css shadow value */
+    shadow?: string;
+    /** Drawer body padding from theme or number for padding in px */
+    padding?: MantineNumberSize;
+    /** Drawer z-index property */
+    zIndex?: number;
+    /** Disables focus trap */
+    noFocusTrap?: boolean;
+    /** Disables scroll lock */
+    noScrollScroll?: boolean;
+    /** Disable onClock trigger for outside events */
+    noCloseOnClickOutside?: boolean;
+    /** Drawer appear and disappear transition, see Transition component for full documentation */
+    transition?: MantineTransition;
+    /** Transition duration in ms */
+    transitionDuration?: number;
+    /** Drawer transitionTimingFunction css property */
+    transitionTimingFunction?: string;
+    /** Removes overlay entirely */
+    noOverlay?: boolean;
+    /** Sets overlay opacity */
+    overlayOpacity?: number;
+    /** Sets overlay color, defaults to theme.black */
+    overlayColor?: string;
 }
-export declare function Drawer({ className, themeOverride, position, size, ...others }: DrawerProps): JSX.Element;
+export declare function Drawer({ opened, onClose, className, themeOverride, position, size, noFocusTrap, noScrollScroll, noCloseOnClickOutside, transition, transitionDuration, transitionTimingFunction, zIndex, overlayColor, overlayOpacity, children, noOverlay, shadow, padding, ...others }: DrawerProps): JSX.Element;
 export declare namespace Drawer {
@@ -11,0 +48,0 @@ var displayName: string;

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

@@ -1,3 +0,12 @@
-declare const _default: (data?: unknown) => Record<"drawer", string>;
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: string;
+};
+export declare type Position = 'top' | 'bottom' | 'left' | 'right';
+declare const _default: (data?: unknown) => Record<"wrapper" | "noOverlay" | "drawer", string>;
 export default _default;
 //# sourceMappingURL=Drawer.styles.d.ts.map

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

@@ -13,2 +13,3 @@ export { ActionIcon, ACTION_ICON_SIZES } from './ActionIcon/ActionIcon';
 export { Container, CONTAINER_SIZES } from './Container/Container';
+export { Drawer, DRAWER_SIZES } from './Drawer/Drawer';
 export { ElementsGroup } from './ElementsGroup/ElementsGroup';
@@ -25,2 +26,3 @@ export { Highlight } from './Highlight/Highlight';
 export { Modal, MODAL_SIZES } from './Modal/Modal';
+export { Notification } from './Notification/Notification';
 export { Overlay } from './Overlay/Overlay';
@@ -34,3 +36,3 @@ export { Paper } from './Paper/Paper';
 export { Spoiler } from './Spoiler/Spoiler';
-export { Switch } from './Switch/Switch';
+export { Switch, SWITCH_SIZES } from './Switch/Switch';
 export { Table } from './Table/Table';
@@ -37,0 +39,0 @@ export { Tabs, Tab } from './Tabs/Tabs';

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

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

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

@@ -14,5 +14,8 @@ import React from 'react';
 interface InputWrapperProps extends DefaultProps, InputWrapperBaseProps, React.ComponentPropsWithoutRef<'div'> {
+    /** Input that should be wrapped */
+    children: React.ReactNode;
+    /** htmlFor label prop */
     id?: string;
+    /** Render label as label with htmlFor or as div */
     labelElement?: 'label' | 'div';
-    children: React.ReactChild;
 }
@@ -19,0 +22,0 @@ export declare function InputWrapper({ className, label, children, required, id, error, description, themeOverride, labelElement, ...others }: InputWrapperProps): JSX.Element;

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

@@ -53,4 +53,8 @@ import React from 'react';
     controlRefProp?: string;
+    /** Menu body z-index */
+    zIndex?: number;
+    /** Get control ref */
+    elementRef?: React.ForwardedRef<HTMLButtonElement>;
 }
-export declare function Menu({ control, children, onClose, onOpen, opened, themeOverride, menuPosition, style, menuId, menuBodyProps, closeOnItemClick, transitionDuration, size, shadow, transition, transitionTimingFunction, menuButtonLabel, controlRefProp, ...others }: MenuProps): JSX.Element;
+export declare function Menu({ control, children, onClose, onOpen, opened, themeOverride, menuPosition, style, menuId, menuBodyProps, closeOnItemClick, transitionDuration, size, shadow, transition, transitionTimingFunction, menuButtonLabel, controlRefProp, zIndex, elementRef, ...others }: MenuProps): JSX.Element;
 export declare namespace Menu {
@@ -57,0 +61,0 @@ var displayName: string;

dist/src/mantine-core/src/Menu/MenuBody/MenuBody.d.ts

@@ -25,4 +25,6 @@ import React from 'react';
     closeOnItemClick?: boolean;
+    /** Menu body z-index */
+    zIndex?: number;
 }
-export declare function MenuBody({ className, themeOverride, opened, onClose, transition, transitionDuration, transitionTimingFunction, style, children, size, shadow, closeOnClickOutside, closeOnItemClick, ...others }: MenuBodyProps): JSX.Element;
+export declare function MenuBody({ className, themeOverride, opened, onClose, transition, transitionDuration, transitionTimingFunction, style, children, size, shadow, closeOnClickOutside, closeOnItemClick, zIndex, ...others }: MenuBodyProps): JSX.Element;
 export declare namespace MenuBody {
@@ -29,0 +31,0 @@ var displayName: string;

dist/src/mantine-core/src/Menu/MenuButton/MenuButton.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 }
-export declare function MenuButton({ children, onHover, hovered, themeOverride, elementRef, icon, color, disabled, cmd, className, ...others }: MenuButtonProps): JSX.Element;
+export declare function MenuButton({ children, onHover, hovered, themeOverride, elementRef, icon, color, disabled, rightSection, className, ...others }: MenuButtonProps): JSX.Element;
 export declare namespace MenuButton {
@@ -13,0 +13,0 @@ var displayName: string;

dist/src/mantine-core/src/Menu/MenuItem/MenuItem.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
     color?: string;
-    cmd?: React.ReactNode;
+    rightSection?: React.ReactNode;
 }
@@ -9,0 +9,0 @@ export interface MenuItemType {

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

@@ -10,5 +10,10 @@ import React from 'react';
     radius?: MantineNumberSize;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLDivElement>;
 }
-export declare const Paper: React.ForwardRefExoticComponent<PaperProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Paper({ className, children, padding, radius, shadow, themeOverride, elementRef, ...others }: PaperProps): JSX.Element;
+export declare namespace Paper {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=Paper.d.ts.map

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

@@ -8,5 +8,10 @@ import React from 'react';
     hidePasswordLabel?: string;
+    /** Focus input when toggle button is pressed */
+    focusInputOnToggle?: boolean;
 }
-export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare function PasswordInput({ radius, disabled, hidePasswordLabel, showPasswordLabel, themeOverride, focusInputOnToggle, elementRef, ...others }: PasswordInputProps): JSX.Element;
+export declare namespace PasswordInput {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=PasswordInput.d.ts.map

dist/src/mantine-core/src/RadioGroup/Radio/Radio.d.ts

@@ -8,6 +8,10 @@ import React from 'react';
     value: string;
+    /** Active radio color */
+    color?: string;
     /** Predefined label fontSize, radio width, height and border-radius */
     size?: MantineSize;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLInputElement>;
 }
-export declare function Radio({ className, themeOverride, id, children, style, size, ...others }: RadioProps): JSX.Element;
+export declare function Radio({ className, themeOverride, id, children, style, size, elementRef, title, disabled, color, ...others }: RadioProps): JSX.Element;
 export declare namespace Radio {
@@ -14,0 +18,0 @@ var displayName: string;

dist/src/mantine-core/src/RadioGroup/Radio/Radio.styles.d.ts

@@ -8,4 +8,4 @@ export declare const sizes: {
 };
-declare const _default: (data?: unknown) => Record<"label" | "wrapper" | "radio", string>;
+declare const _default: (data?: unknown) => Record<"label" | "wrapper" | "radio" | "labelDisabled", string>;
 export default _default;
 //# sourceMappingURL=Radio.styles.d.ts.map

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

 import React from 'react';
-import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
+import { DefaultProps, MantineNumberSize, MantineSize } from "../../../mantine-theme/src";
 import { InputWrapperBaseProps } from '../InputWrapper/InputWrapper';
@@ -28,4 +28,8 @@ import { Radio } from './Radio/Radio';
     spacing?: MantineNumberSize;
+    /** Active radio color */
+    color?: string;
+    /** Predefined label fontSize, radio width, height and border-radius */
+    size?: MantineSize;
 }
-export declare function RadioGroup({ className, themeOverride, name, children, value, defaultValue, onChange, variant, spacing, ...others }: RadioGroupProps): JSX.Element;
+export declare function RadioGroup({ className, themeOverride, name, children, value, defaultValue, onChange, variant, spacing, color, size, ...others }: RadioGroupProps): JSX.Element;
 export declare namespace RadioGroup {
@@ -32,0 +36,0 @@ var displayName: string;

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

@@ -10,3 +10,3 @@ import React from 'react';
 }
-interface SelectProps extends DefaultProps, InputWrapperBaseProps, InputProps, React.ComponentPropsWithoutRef<'select'> {
+interface SelectProps extends DefaultProps, InputWrapperBaseProps, Omit<InputProps, 'rightSection' | 'rightSectionWidth' | 'rightSectionProps'>, React.ComponentPropsWithoutRef<'select'> {
     /** id is used to bind input and label, if not passed unique id will be generated for each input */
@@ -22,5 +22,10 @@ id?: string;
     wrapperProps?: Record<string, any>;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLSelectElement>;
 }
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export declare function Select({ id, className, required, label, error, style, data, placeholder, themeOverride, wrapperProps, inputStyle, description, elementRef, ...others }: SelectProps): JSX.Element;
+export declare namespace Select {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=Select.d.ts.map

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

@@ -11,3 +11,3 @@ import React from 'react';
     /** Get ref of spoiler toggle button */
-    controlRef?: React.MutableRefObject<HTMLButtonElement> | React.RefCallback<HTMLButtonElement>;
+    controlRef?: React.ForwardedRef<HTMLButtonElement>;
     /** Spoiler reveal transition duration in ms, 0 or null to turn off animation */
@@ -14,0 +14,0 @@ transitionDuration?: number;

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

 import React from 'react';
 import { DefaultProps, MantineNumberSize, MantineSize } from "../../../mantine-theme/src";
+export declare const SWITCH_SIZES: Record<MantineSize, {
+    width: number;
+    height: number;
+}>;
 interface SwitchProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
@@ -20,5 +24,10 @@ /** Id is used to bind input and label, if not passed unique id will be generated for each input */
     wrapperProps?: Record<string, any>;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLInputElement>;
 }
-export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export declare function Switch({ className, color, label, id, style, size, radius, themeOverride, wrapperProps, inputStyle, inputClassName, elementRef, ...others }: SwitchProps): JSX.Element;
+export declare namespace Switch {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=Switch.d.ts.map

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

@@ -0,3 +1,8 @@
+import { MantineSize } from "../../../mantine-theme/src";
+export declare const sizes: Record<MantineSize, {
+    width: number;
+    height: number;
+}>;
 declare const _default: (data?: unknown) => Record<"label" | "switch" | "wrapper", string>;
 export default _default;
 //# sourceMappingURL=Switch.styles.d.ts.map

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

@@ -6,2 +6,3 @@ import React from 'react';
     children?: React.ReactNode;
+    elementRef?: React.ForwardedRef<HTMLButtonElement>;
 }
@@ -11,3 +12,2 @@ export interface TabType {
     props: TabProps;
-    ref?: React.RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement) => void);
 }
@@ -14,0 +14,0 @@ export declare function Tab(props: TabProps): any;

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

@@ -18,5 +18,10 @@ import React from 'react';
     wrapperProps?: Record<string, any>;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLTextAreaElement>;
 }
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export declare function Textarea({ autosize, maxRows, minRows, label, error, description, id, className, required, themeOverride, style, wrapperProps, inputStyle, elementRef, ...others }: TextareaProps): JSX.Element;
+export declare namespace Textarea {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=Textarea.d.ts.map

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

@@ -14,5 +14,10 @@ import React from 'react';
     wrapperProps?: Record<string, any>;
+    /** Get element ref */
+    elementRef?: React.ForwardedRef<HTMLInputElement>;
 }
-export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare function TextInput({ className, id, label, error, required, type, style, icon, description, themeOverride, wrapperProps, elementRef, ...others }: TextInputProps): JSX.Element;
+export declare namespace TextInput {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=TextInput.d.ts.map

dist/src/mantine-core/src/Transition/transitions.d.ts

@@ -8,5 +8,5 @@ import React from 'react';
 }
-export declare type MantineTransitionName = 'fade' | 'skew-up' | 'slide-down';
+export declare type MantineTransitionName = 'fade' | 'skew-up' | 'skew-down' | 'rotate-up' | 'rotate-down' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left';
 export declare type MantineTransition = MantineTransitionName | MantineTransitionStyles;
 export declare const transitions: Record<MantineTransitionName, MantineTransitionStyles>;
 //# sourceMappingURL=transitions.d.ts.map

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

 export { AuthenticationForm } from './AuthenticationForm/AuthenticationForm';
+export { IntermediateCheckbox } from './IntermediateCheckbox/IntermediateCheckbox';
+export { PasswordStrength } from './PasswordStrength/PasswordStrength';
 export { TodoList } from './TodoList/TodoList';
 export { TransactionsTable } from './TransactionsTable/TransactionsTable';
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@mantine/core",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "main": "dist/lib.js",
@@ -10,5 +10,4 @@ "license": "MIT",
   "peerDependencies": {
-    "@mantine/hooks": "0.5.2",
-    "@mantine/theme": "0.5.2",
-    "@modulz/radix-icons": "^4.0.0",
+    "@mantine/hooks": "0.5.3",
+    "@mantine/theme": "0.5.3",
     "react": ">=16.8.0",
@@ -20,2 +19,3 @@ "react-dom": ">=16.8.0",
     "@charlietango/use-focus-trap": "^1.3.0",
+    "@modulz/radix-icons": "^4.0.0",
     "clsx": "^1.1.1",
@@ -22,0 +22,0 @@ "open-color": "^1.8.0",

src/Checkbox/Checkbox.styles.ts

@@ -39,3 +39,3 @@ import { createUseStyles } from 'react-jss';
     ...getFontStyles(theme),
-    marginLeft: theme.spacing.sm,
+    paddingLeft: theme.spacing.sm,
     fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
@@ -55,3 +55,2 @@ lineHeight: `${getSizeValue({ size, sizes })}px`,
     outline: 0,
-    cursor: 'pointer',
     display: 'block',
@@ -58,0 +57,0 @@ margin: 0,

src/Drawer/Drawer.styles.ts

 import { createUseStyles } from 'react-jss';
+import { MantineTheme, getSizeValue } from '@mantine/theme';
+import React from 'react';
 
+export const sizes = {
+  xs: 180,
+  sm: 240,
+  md: 320,
+  lg: 360,
+  xl: 500,
+  full: '100%',
+};
+
+export type Position = 'top' | 'bottom' | 'left' | 'right';
+
+interface DrawerStylesProps {
+  theme: MantineTheme;
+  position: Position;
+  size: number | string;
+}
+
+function getPositionStyles({
+  position,
+  size,
+}: {
+  position: Position;
+  size: number | string;
+}): Partial<Record<keyof React.CSSProperties, any>> {
+  switch (position) {
+    case 'top':
+      return { top: 0, left: 0, right: 0, height: getSizeValue({ size, sizes }) };
+
+    case 'bottom':
+      return { bottom: 0, left: 0, right: 0, height: getSizeValue({ size, sizes }) };
+
+    case 'right':
+      return { bottom: 0, top: 0, right: 0, width: getSizeValue({ size, sizes }) };
+
+    case 'left':
+      return { bottom: 0, top: 0, left: 0, width: getSizeValue({ size, sizes }) };
+
+    default:
+      return null;
+  }
+}
+
 export default createUseStyles({
-  drawer: {},
+  noOverlay: {},
+
+  wrapper: {
+    '&:not($noOverlay)': {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+  },
+
+  drawer: ({ size, position }: DrawerStylesProps) => ({
+    ...getPositionStyles({ position, size }),
+    maxWidth: '100%',
+    maxHeight: '100vh',
+    position: 'fixed',
+    outline: 0,
+  }),
 });

src/ElementsGroup/ElementsGroup.styles.ts

@@ -35,3 +35,3 @@ import { createUseStyles } from 'react-jss';
 
-      '& [data-mantine-composable]': {
+      '& > [data-mantine-composable]': {
         margin: spacing,
@@ -38,0 +38,0 @@ flexGrow: props.grow ? 1 : 0,

src/index.ts

@@ -13,2 +13,3 @@ export { ActionIcon, ACTION_ICON_SIZES } from './ActionIcon/ActionIcon';
 export { Container, CONTAINER_SIZES } from './Container/Container';
+export { Drawer, DRAWER_SIZES } from './Drawer/Drawer';
 export { ElementsGroup } from './ElementsGroup/ElementsGroup';
@@ -25,2 +26,3 @@ export { Highlight } from './Highlight/Highlight';
 export { Modal, MODAL_SIZES } from './Modal/Modal';
+export { Notification } from './Notification/Notification';
 export { Overlay } from './Overlay/Overlay';
@@ -34,3 +36,3 @@ export { Paper } from './Paper/Paper';
 export { Spoiler } from './Spoiler/Spoiler';
-export { Switch } from './Switch/Switch';
+export { Switch, SWITCH_SIZES } from './Switch/Switch';
 export { Table } from './Table/Table';
@@ -37,0 +39,0 @@ export { Tabs, Tab } from './Tabs/Tabs';

src/Input/Input.styles.ts

@@ -22,2 +22,3 @@ import { createUseStyles } from 'react-jss';
     '& $input': {
+      backgroundColor: theme.white,
       minHeight: 36,
@@ -62,3 +63,3 @@ paddingLeft: 15,
         outline: 'none',
-        borderColor: theme.colors[theme.primaryColor][6],
+        borderColor: `${theme.colors[theme.primaryColor][6]} !important`,
         boxShadow: `0 0 4px ${theme.colors.gray[3]}`,
@@ -79,2 +80,3 @@ },
     '&$invalid $input': {
+      borderColor: 'transparent',
       backgroundColor: theme.colors.red[0],
@@ -95,2 +97,3 @@ },
     '& $input': {
+      backgroundColor: 'transparent',
       height: 28,
@@ -126,2 +129,3 @@ border: 0,
     display: 'block',
+    textAlign: 'left',
 
@@ -128,0 +132,0 @@ '&:disabled': {

src/RadioGroup/Radio/Radio.styles.ts

@@ -8,2 +8,3 @@ import { createUseStyles } from 'react-jss';
   getFocusStyles,
+  getThemeColor,
 } from '@mantine/theme';
@@ -14,2 +15,3 @@
   size: MantineSize;
+  color: string;
 }
@@ -26,2 +28,4 @@
 export default createUseStyles({
+  labelDisabled: {},
+
   wrapper: {
@@ -32,3 +36,3 @@ display: 'flex',
 
-  radio: ({ theme, size }: RadioStylesProps) => ({
+  radio: ({ theme, size, color }: RadioStylesProps) => ({
     ...getFocusStyles(theme),
@@ -50,4 +54,4 @@ backgroundColor: theme.colors.gray[0],
     '&:checked': {
-      background: theme.colors[theme.primaryColor][5],
-      borderColor: theme.colors[theme.primaryColor][5],
+      background: getThemeColor({ theme, color, shade: 5 }),
+      borderColor: getThemeColor({ theme, color, shade: 5 }),
 
@@ -71,6 +75,2 @@ '&::before': {
       },
-
-      '& + $label': {
-        color: theme.colors.gray[5],
-      },
     },
@@ -81,6 +81,11 @@ }),
     ...getFontStyles(theme),
-    display: 'block',
+    display: 'flex',
+    alignItems: 'center',
     fontSize: theme.fontSizes[size] || theme.fontSizes.md,
     lineHeight: `${getSizeValue({ sizes, size })}px`,
+
+    '&$labelDisabled': {
+      color: theme.colors.gray[5],
+    },
   }),
 });

src/RadioGroup/RadioGroup.styles.ts

@@ -14,13 +14,16 @@ import { createUseStyles } from 'react-jss';
     flexWrap: 'wrap',
-    flexDirection: variant === 'vertical' ? 'column' : 'horizontal',
+    flexDirection: variant === 'vertical' ? 'column' : 'row',
+    margin: (getSizeValue({ sizes: theme.spacing, size: spacing }) / 2) * -1,
     marginTop:
-      variant === 'vertical' ? 0 : (getSizeValue({ sizes: theme.spacing, size: spacing }) / 4) * -1,
-    margin: (getSizeValue({ sizes: theme.spacing, size: spacing }) / 2) * -1,
+      (getSizeValue({ sizes: theme.spacing, size: spacing }) / 4) *
+      (variant === 'vertical' ? 1 : -1),
 
     '& [data-mantine-radio]': {
       margin: getSizeValue({ sizes: theme.spacing, size: spacing }) / 2,
-      marginTop: variant === 'vertical' && theme.spacing.xs / 4,
-      marginBottom: variant === 'vertical' && theme.spacing.xs / 4,
+      marginTop:
+        variant === 'vertical' && getSizeValue({ sizes: theme.spacing, size: spacing }) / 4,
+      marginBottom:
+        variant === 'vertical' && getSizeValue({ sizes: theme.spacing, size: spacing }) / 4,
     },
   }),
 });

src/Switch/Switch.styles.ts

@@ -44,2 +44,7 @@ import { createUseStyles } from 'react-jss';
 
+export const sizes = Object.keys(switchHeight).reduce((acc, size) => {
+  acc[size] = { width: switchWidth[size], height: switchHeight[size] };
+  return acc;
+}, {} as Record<MantineSize, { width: number; height: number }>);
+
 export default createUseStyles({
@@ -66,3 +71,2 @@ wrapper: {
       margin: 0,
-      cursor: 'pointer',
       transitionProperty: 'background-color, border-color',
@@ -115,8 +119,8 @@ transitionTimingFunction: theme.transitionTimingFunction,
 
-  label: ({ theme }: SwitchStylesProps) => ({
+  label: ({ theme, size }: SwitchStylesProps) => ({
     ...getFontStyles(theme),
+    fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
     fontFamily: theme.fontFamily,
-    marginLeft: theme.spacing.sm,
-    fontSize: theme.fontSizes.sm,
+    paddingLeft: theme.spacing.sm,
   }),
 });

src/Transition/get-transition-styles/get-transition-styles.ts

@@ -22,7 +22,15 @@ import { TransitionStatus } from 'react-transition-group';
 }): React.CSSProperties {
+  const shared = {
+    transitionDuration: `${duration}ms`,
+    transitionTimingFunction: timingFunction,
+  };
+
   if (typeof transition === 'string') {
+    if (!(transition in transitions)) {
+      return null;
+    }
+
     return {
-      transitionDuration: `${duration}ms`,
-      transitionTimingFunction: timingFunction,
       transitionProperty: transitions[transition].transitionProperty,
+      ...shared,
       ...transitions[transition].common,
@@ -34,5 +42,4 @@ ...transitions[transition][transitionStatuses[state]],
   return {
-    transitionDuration: `${duration}ms`,
-    transitionTimingFunction: timingFunction,
     transitionProperty: transition.transitionProperty,
+    ...shared,
     ...transition.common,
@@ -39,0 +46,0 @@ ...transition[transitionStatuses[state]],

src/Transition/transitions.ts

@@ -10,3 +10,12 @@ import React from 'react';
 
-export type MantineTransitionName = 'fade' | 'skew-up' | 'slide-down';
+export type MantineTransitionName =
+  | 'fade'
+  | 'skew-up'
+  | 'skew-down'
+  | 'rotate-up'
+  | 'rotate-down'
+  | 'slide-down'
+  | 'slide-up'
+  | 'slide-right'
+  | 'slide-left';
 
@@ -29,8 +38,50 @@ export type MantineTransition = MantineTransitionName | MantineTransitionStyles;
 
+  'skew-down': {
+    in: { opacity: 1, transform: 'translateY(0) skew(0deg, 0deg)' },
+    out: { opacity: 0, transform: 'translateY(20px) skew(-10deg, -5deg)' },
+    common: { transformOrigin: 'bottom' },
+    transitionProperty: 'transform, opacity',
+  },
+
+  'rotate-down': {
+    in: { opacity: 1, transform: 'translateY(0) rotate(0deg)' },
+    out: { opacity: 0, transform: 'translateY(20px) rotate(-5deg)' },
+    common: { transformOrigin: 'bottom' },
+    transitionProperty: 'transform, opacity',
+  },
+
+  'rotate-up': {
+    in: { opacity: 1, transform: 'translateY(0) rotate(0deg)' },
+    out: { opacity: 0, transform: 'translateY(20px) rotate(5deg)' },
+    common: { transformOrigin: 'top' },
+    transitionProperty: 'transform, opacity',
+  },
+
   'slide-down': {
     in: { opacity: 1, transform: 'translateY(0)' },
-    out: { opacity: 0, transform: 'translateY(-200px)' },
+    out: { opacity: 0, transform: 'translateY(-100%)' },
     common: { transformOrigin: 'top' },
     transitionProperty: 'transform, opacity',
   },
+
+  'slide-up': {
+    in: { opacity: 1, transform: 'translateY(0)' },
+    out: { opacity: 0, transform: 'translateY(100%)' },
+    common: { transformOrigin: 'bottom' },
+    transitionProperty: 'transform, opacity',
+  },
+
+  'slide-left': {
+    in: { opacity: 1, transform: 'translateX(0)' },
+    out: { opacity: 0, transform: 'translateX(100%)' },
+    common: { transformOrigin: 'left' },
+    transitionProperty: 'transform, opacity',
+  },
+
+  'slide-right': {
+    in: { opacity: 1, transform: 'translateX(0)' },
+    out: { opacity: 0, transform: 'translateX(-100%)' },
+    common: { transformOrigin: 'right' },
+    transitionProperty: 'transform, opacity',
+  },
 };

No alert changes

Improved metrics

Total package byte prevSize

1106238

increased by7.58%

Number of package files

643

increased by4.55%

Lines of code

11761

increased by10.68%

Dependency changes

• + Added@modulz/radix-icons@^4.0.0

• + Added@mantine/hooks@0.5.3(transitive)

• + Added@mantine/theme@0.5.3(transitive)

• - Removed@mantine/hooks@0.5.2(transitive)

• - Removed@mantine/theme@0.5.2(transitive)