react-native-mantine 0.1.11 → 0.1.15

package/lib/typescript/commonjs/src/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/typescript/commonjs/src/theme/theme-provider.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import type { TTheme } from './default-theme';
+import type { MantineTheme } from './default-theme';
 type ThemeProps = {
     children: ReactNode;
-    theme?: Partial<TTheme>;
+    theme?: Partial<MantineTheme>;
     forceMode?: 'light' | 'dark';
 };
 export declare const ThemeContext: React.Context<any>;
 export declare const ThemeProvider: ({ children, theme, forceMode, }: {
     children: React.ReactNode;
-    theme: TTheme;
+    theme: MantineTheme;
     forceMode?: "light" | "dark";
 }) => React.ReactElement;
-export declare const useTheme: () => TTheme;
+export declare const useTheme: () => MantineTheme;
 export declare const Theme: ({ children, theme: themeOverwrite, forceMode, }: ThemeProps) => React.ReactElement;
 export declare function useComponentDefaultProps<T extends Record<string, any>, U extends Partial<T> = {}>(component: string, defaultProps: U, props: T): T & {
     [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>;

package/lib/typescript/commonjs/src/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAM9C,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,oBAA2B,CAAC;AAErD,eAAO,MAAM,aAAa,oCAIvB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,KAAG,KAAK,CAAC,YAkDT,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,MAAkC,CAAC;AAE/D,eAAO,MAAM,KAAK,oDAIf,UAAU,KAAG,KAAK,CAAC,YAerB,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAEzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,CAAC,GACP,CAAC,GAAG;KACJ,GAAG,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;CACnE,CASA"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,oBAA2B,CAAC;AAErD,eAAO,MAAM,aAAa,oCAIvB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,KAAG,KAAK,CAAC,YAkDT,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,YAAwC,CAAC;AAErE,eAAO,MAAM,KAAK,oDAIf,UAAU,KAAG,KAAK,CAAC,YAerB,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAEzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,CAAC,GACP,CAAC,GAAG;KACJ,GAAG,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;CACnE,CASA"}

package/lib/typescript/commonjs/src/theme/types/DefaultProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultProps.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/types/DefaultProps.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,GAAG,CAAA;AACpB,MAAM,MAAM,UAAU,CAAC,WAAW,SAAS,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;AAC1F,MAAM,MAAM,MAAM,CAAC,WAAW,SAAS,MAAM,EAAE,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,IAC3F,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,GACvC,CAAC,CACC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,GAAG,KACT,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC;CACb"}
+{"version":3,"file":"DefaultProps.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/types/DefaultProps.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,GAAG,CAAC;AACrB,MAAM,MAAM,UAAU,CAAC,WAAW,SAAS,MAAM,IAAI,OAAO,CAC1D,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAC5B,CAAC;AACF,MAAM,MAAM,MAAM,CAChB,WAAW,SAAS,MAAM,EAC1B,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,IAE9C,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,GACvC,CAAC,CACC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,GAAG,KACT,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC;CACb"}

package/lib/typescript/commonjs/src/theme/utils/rem.d.ts

@@ -0,0 +1,3 @@
+export declare const rem: (px: unknown) => string;
+export declare const em: (px: unknown) => string;
+//# sourceMappingURL=rem.d.ts.map

package/lib/typescript/commonjs/src/theme/utils/rem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rem.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/rem.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,GAAG,OAhBF,OAAO,WAgBoB,CAAC;AAC1C,eAAO,MAAM,EAAE,OAjBD,OAAO,WAiBkB,CAAC"}

package/lib/typescript/module/src/components/ActionIcon/ActionIcon.d.ts

@@ -4,7 +4,7 @@ export type ActionIconProps = {
     icon: React.ReactNode;
     minWidth?: number;
     style?: any;
-    size: any;
+    size?: any;
 };
 export declare const ActionIcon: ({ onPress, children, icon, minWidth, style, size, }: ActionIconProps) => React.ReactElement;
 export declare const sizes: {

package/lib/typescript/module/src/components/ActionIcon/ActionIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ActionIcon/ActionIcon.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,UAAU,wDAOpB,eAAe,KAAG,KAAK,CAAC,YAa1B,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC"}
+{"version":3,"file":"ActionIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ActionIcon/ActionIcon.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,UAAU,wDAOpB,eAAe,KAAG,KAAK,CAAC,YAa1B,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC"}

package/lib/typescript/module/src/components/Button/Button.styles.d.ts

@@ -0,0 +1,26 @@
+import type { MantineColor, MantineNumberSize } from '../../theme/types';
+export declare const BUTTON_VARIANTS: string[];
+export interface ButtonStylesParams {
+    color: MantineColor;
+    radius: MantineNumberSize;
+    fullWidth: boolean;
+    compact: boolean;
+    withRightIcon: boolean;
+    withLeftIcon: boolean;
+}
+export declare const sizes: any;
+declare const useStyles: (params?: any, variations?: any) => {
+    styles: {
+        root: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+        icon: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+        leftIcon: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+        rightIcon: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+        centerLoader: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+        inner: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+        label: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
+    };
+    theme: import("../../theme/default-theme").MantineTheme;
+    sx: (...args: any) => any;
+};
+export default useStyles;
+//# sourceMappingURL=Button.styles.d.ts.map

package/lib/typescript/module/src/components/Button/Button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAIzE,eAAO,MAAM,eAAe,UAQ3B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,EAuBb,GAAG,CAAC;AA6ET,QAAA,MAAM,SAAS;;;;;;;;;;;;CA0Gd,CAAC;AACF,eAAe,SAAS,CAAC"}

package/lib/typescript/module/src/components/Button/index.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { DefaultProps, MantineColor, MantineNumberSize, MantineSize, Variants } from '../../theme/types';
+import type { MantineGradient } from '../../theme/theme';
+import type { LoaderProps } from '../Loader';
+export type ButtonStylesNames = any;
+export interface ButtonProps extends DefaultProps {
+    /** Predefined button size */
+    size?: MantineSize;
+    /** Button type attribute */
+    type?: 'submit' | 'button' | 'reset';
+    /** Button color from theme */
+    color?: MantineColor;
+    /** Adds icon before button label  */
+    leftIcon?: React.ReactNode;
+    /** Adds icon after button label  */
+    rightIcon?: React.ReactNode;
+    /** Sets button width to 100% of parent element */
+    fullWidth?: boolean;
+    /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */
+    radius?: MantineNumberSize;
+    /** Controls button appearance */
+    variant?: Variants<'filled' | 'outline' | 'light' | 'white' | 'default' | 'subtle' | 'gradient'>;
+    /** Controls gradient settings in gradient variant only */
+    gradient?: MantineGradient;
+    /** Set text-transform to uppercase */
+    uppercase?: boolean;
+    /** Reduces vertical and horizontal spacing */
+    compact?: boolean;
+    /** Indicate loading state */
+    loading?: boolean;
+    /** Props spread to Loader component */
+    loaderProps?: LoaderProps;
+    /** Loader position relative to button label */
+    loaderPosition?: 'left' | 'right' | 'center';
+    /** Button label */
+    children?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    style?: any;
+}
+export declare const _Button: any;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAM7C,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAEpC,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAErC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sGAAsG;IACtG,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,iCAAiC;IACjC,OAAO,CAAC,EAAE,QAAQ,CAChB,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAC7E,CAAC;IAEF,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,uCAAuC;IACvC,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE7C,mBAAmB;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AASD,eAAO,MAAM,OAAO,EA+Ff,GAAG,CAAC"}

package/lib/typescript/module/src/components/Input/Input.styles.d.ts

@@ -0,0 +1,20 @@
+import type { MantineNumberSize } from '../../theme/types';
+export interface InputStylesParams {
+    radius: MantineNumberSize;
+    multiline: boolean;
+    invalid: boolean;
+    rightSectionWidth: string | number;
+    withRightSection: boolean;
+    iconWidth: string | number;
+    offsetBottom: boolean;
+    offsetTop: boolean;
+    pointer: boolean;
+}
+export declare const sizes: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+//# sourceMappingURL=Input.styles.d.ts.map

package/lib/typescript/module/src/components/Input/Input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC"}

package/lib/typescript/module/src/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { sizes as INPUT_SIZES } from './Input.styles';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/typescript/module/src/components/UnstyledButton/UnstyledButton.styles.d.ts

@@ -1,8 +1,8 @@
-declare const _default: (params?: any) => {
+declare const _default: (params?: any, variations?: any) => {
     styles: {
         root: import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle;
     };
-    theme: import("../../theme/default-theme").TTheme;
+    theme: import("../../theme/default-theme").MantineTheme;
     sx: (...args: any) => any;
 };
 export default _default;

package/lib/typescript/module/src/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './BoxView';
 export * from './Group';
 export * from './Stack';
 export * from './Text';
+export * from './Button';
 export * from './UnstyledButton';
 export * from './ActionIcon';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/lib/typescript/module/src/theme/create-styles.d.ts

@@ -1,11 +1,15 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import type { TTheme } from './default-theme';
+import type { MantineTheme } from './default-theme';
 type NamedStyles<T> = {
     [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
 };
-export declare function createStyles<T = any>(input: (theme: TTheme, params: any) => NamedStyles<T>): (params?: any) => {
+type Variations = {
+    variant?: string;
+    size: string | number;
+} | any;
+export declare function createStyles<T = any>(input: (theme: MantineTheme, params: any, variations?: Variations) => NamedStyles<T>): (params?: any, variations?: Variations) => {
     styles: NamedStyles<T>;
-    theme: TTheme;
+    theme: MantineTheme;
     sx: (...args: any) => any;
 };
 export {};

package/lib/typescript/module/src/theme/create-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-styles.d.ts","sourceRoot":"","sources":["../../../../../src/theme/create-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,KAAK,WAAW,CAAC,CAAC,IAAI;KACnB,CAAC,IAAI,MAAM,CAAC,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU;CACnD,CAAC;AAEF,wBAAgB,YAAY,CAAC,CAAC,GAAG,GAAG,EAClC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,aAGzB,GAAG;;;kBAGR,GAAG;EAW3B"}
+{"version":3,"file":"create-styles.d.ts","sourceRoot":"","sources":["../../../../../src/theme/create-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,KAAK,WAAW,CAAC,CAAC,IAAI;KACnB,CAAC,IAAI,MAAM,CAAC,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU;CACnD,CAAC;AAEF,KAAK,UAAU,GACX;IACE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,GACD,GAAG,CAAC;AAER,wBAAgB,YAAY,CAAC,CAAC,GAAG,GAAG,EAClC,KAAK,EAAE,CACL,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,GAAG,EACX,UAAU,CAAC,EAAE,UAAU,KACpB,WAAW,CAAC,CAAC,CAAC,aAGS,GAAG,eAAe,UAAU;;;kBAGjC,GAAG;EAW3B"}

package/lib/typescript/module/src/theme/create-theme.d.ts

@@ -0,0 +1,3 @@
+import type { MantineTheme } from './default-theme';
+export declare const createTheme: (theme?: Partial<MantineTheme>) => MantineTheme;
+//# sourceMappingURL=create-theme.d.ts.map

package/lib/typescript/module/src/theme/create-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../../../../src/theme/create-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,WAAW,WAAY,OAAO,CAAC,YAAY,CAAC,KAAG,YAiB3D,CAAC"}

package/lib/typescript/module/src/theme/default-theme.d.ts

@@ -2,7 +2,7 @@ import type { Palette } from './theme';
 export declare const DEFAULT_COLORS: {
     [key: string]: Palette;
 };
-export declare const _DEFAULT_THEME: TTheme;
+export declare const _DEFAULT_THEME: MantineTheme;
 export declare const DEFAULT_THEME: any;
 type ColorScheme = {
     text: string;
@@ -21,7 +21,7 @@ export type ThemeSize = {
     xl: number;
 };
 export type themeMode = 'dark' | 'light';
-export type TTheme = {
+export type MantineTheme = {
     fontFamily: string;
     fontFamilyBold: string;
     localColor: string;

package/lib/typescript/module/src/theme/default-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../../../../../src/theme/default-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,cAAc,EAAE;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CA+MxB,CAAC;AAKF,eAAO,MAAM,cAAc,EAAE,MAiF5B,CAAC;AAEF,eAAO,MAAM,aAAa,KAAkC,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,MAAM,GAAG;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IAEvB,UAAU,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IAEzB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAElB,KAAK,EAAE;QACL,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,OAAO,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IAEzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,SAAS,CAAC,EAAE,GAAG,CAAC;IAEhB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC"}
+{"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../../../../../src/theme/default-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,cAAc,EAAE;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CA+MxB,CAAC;AAKF,eAAO,MAAM,cAAc,EAAE,YAiF5B,CAAC;AAEF,eAAO,MAAM,aAAa,KAAkC,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IAEvB,UAAU,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IAEzB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAElB,KAAK,EAAE;QACL,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,OAAO,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IAEzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,SAAS,CAAC,EAAE,GAAG,CAAC;IAEhB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC"}

package/lib/typescript/module/src/theme/index.d.ts

@@ -2,4 +2,5 @@ export { ThemeProvider, useTheme, Theme } from './theme-provider';
 export { createStyles } from './create-styles';
 export { filterProps } from './filter-props';
 export { getSize } from './get-size';
+export { createTheme } from './create-theme';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/typescript/module/src/theme/theme-provider.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import type { TTheme } from './default-theme';
+import type { MantineTheme } from './default-theme';
 type ThemeProps = {
     children: ReactNode;
-    theme?: Partial<TTheme>;
+    theme?: Partial<MantineTheme>;
     forceMode?: 'light' | 'dark';
 };
 export declare const ThemeContext: React.Context<any>;
 export declare const ThemeProvider: ({ children, theme, forceMode, }: {
     children: React.ReactNode;
-    theme: TTheme;
+    theme: MantineTheme;
     forceMode?: "light" | "dark";
 }) => React.ReactElement;
-export declare const useTheme: () => TTheme;
+export declare const useTheme: () => MantineTheme;
 export declare const Theme: ({ children, theme: themeOverwrite, forceMode, }: ThemeProps) => React.ReactElement;
 export declare function useComponentDefaultProps<T extends Record<string, any>, U extends Partial<T> = {}>(component: string, defaultProps: U, props: T): T & {
     [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>;

package/lib/typescript/module/src/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAM9C,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,oBAA2B,CAAC;AAErD,eAAO,MAAM,aAAa,oCAIvB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,KAAG,KAAK,CAAC,YAkDT,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,MAAkC,CAAC;AAE/D,eAAO,MAAM,KAAK,oDAIf,UAAU,KAAG,KAAK,CAAC,YAerB,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAEzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,CAAC,GACP,CAAC,GAAG;KACJ,GAAG,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;CACnE,CASA"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,oBAA2B,CAAC;AAErD,eAAO,MAAM,aAAa,oCAIvB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,KAAG,KAAK,CAAC,YAkDT,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,YAAwC,CAAC;AAErE,eAAO,MAAM,KAAK,oDAIf,UAAU,KAAG,KAAK,CAAC,YAerB,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAEzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,CAAC,GACP,CAAC,GAAG;KACJ,GAAG,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;CACnE,CASA"}

package/lib/typescript/module/src/theme/types/DefaultProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultProps.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/types/DefaultProps.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,GAAG,CAAA;AACpB,MAAM,MAAM,UAAU,CAAC,WAAW,SAAS,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;AAC1F,MAAM,MAAM,MAAM,CAAC,WAAW,SAAS,MAAM,EAAE,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,IAC3F,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,GACvC,CAAC,CACC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,GAAG,KACT,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC;CACb"}
+{"version":3,"file":"DefaultProps.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/types/DefaultProps.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,GAAG,CAAC;AACrB,MAAM,MAAM,UAAU,CAAC,WAAW,SAAS,MAAM,IAAI,OAAO,CAC1D,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAC5B,CAAC;AACF,MAAM,MAAM,MAAM,CAChB,WAAW,SAAS,MAAM,EAC1B,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,IAE9C,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,GACvC,CAAC,CACC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,GAAG,KACT,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC;CACb"}

package/lib/typescript/module/src/theme/utils/rem.d.ts

@@ -0,0 +1,3 @@
+export declare const rem: (px: unknown) => string;
+export declare const em: (px: unknown) => string;
+//# sourceMappingURL=rem.d.ts.map

package/lib/typescript/module/src/theme/utils/rem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rem.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/rem.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,GAAG,OAhBF,OAAO,WAgBoB,CAAC;AAC1C,eAAO,MAAM,EAAE,OAjBD,OAAO,WAiBkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mantine",
-  "version": "0.1.11",
+  "version": "0.1.15",
   "description": "Make Mantine Accessable on React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/ActionIcon/ActionIcon.tsx

@@ -10,7 +10,7 @@ export type ActionIconProps = {
   icon: React.ReactNode;
   minWidth?: number;
   style?: any;
-  size: any;
+  size?: any;
 };
 
 export const ActionIcon = ({

package/src/components/Button/Button.styles.ts

@@ -0,0 +1,232 @@
+import { createStyles, getSize } from '../../theme';
+import type { MantineColor, MantineNumberSize } from '../../theme/types';
+import { rem } from '../../theme/utils/rem';
+import { INPUT_SIZES } from '../Input';
+
+export const BUTTON_VARIANTS = [
+  'filled',
+  'outline',
+  'light',
+  'white',
+  'default',
+  'subtle',
+  'gradient',
+];
+
+export interface ButtonStylesParams {
+  color: MantineColor;
+  radius: MantineNumberSize;
+  fullWidth: boolean;
+  compact: boolean;
+  withRightIcon: boolean;
+  withLeftIcon: boolean;
+}
+
+export const sizes = {
+  'xs': { height: INPUT_SIZES.xs, paddingLeft: rem(14), paddingRight: rem(14) },
+  'sm': { height: INPUT_SIZES.sm, paddingLeft: rem(18), paddingRight: rem(18) },
+  'md': { height: INPUT_SIZES.md, paddingLeft: rem(22), paddingRight: rem(22) },
+  'lg': { height: INPUT_SIZES.lg, paddingLeft: rem(26), paddingRight: rem(26) },
+  'xl': { height: INPUT_SIZES.xl, paddingLeft: rem(32), paddingRight: rem(32) },
+  'compact-xs': { height: rem(22), paddingLeft: rem(7), paddingRight: rem(7) },
+  'compact-sm': { height: rem(26), paddingLeft: rem(8), paddingRight: rem(8) },
+  'compact-md': {
+    height: rem(30),
+    paddingLeft: rem(10),
+    paddingRight: rem(10),
+  },
+  'compact-lg': {
+    height: rem(34),
+    paddingLeft: rem(12),
+    paddingRight: rem(12),
+  },
+  'compact-xl': {
+    height: rem(40),
+    paddingLeft: rem(14),
+    paddingRight: rem(14),
+  },
+} as any;
+
+interface GetSizeStyles {
+  compact: boolean;
+  size: string | number;
+  withLeftIcon: boolean;
+  withRightIcon: boolean;
+}
+
+function getSizeStyles({
+  // compact,
+  size,
+  withLeftIcon,
+  withRightIcon,
+}: GetSizeStyles): any {
+  // if (compact) {
+  //   return sizes[`compact-${size}`];
+  // }
+
+  const _sizes: (typeof sizes)[keyof typeof sizes] = sizes[size];
+
+  if (!_sizes) {
+    return {};
+  }
+
+  return {
+    ..._sizes,
+    paddingLeft: withLeftIcon
+      ? `calc(${_sizes.paddingLeft}  / 1.5)`
+      : _sizes.paddingLeft,
+    paddingRight: withRightIcon
+      ? `calc(${_sizes.paddingRight}  / 1.5)`
+      : _sizes.paddingRight,
+  };
+}
+
+const getWidthStyles = (fullWidth: boolean) => ({
+  display: fullWidth ? 'block' : 'inline-block',
+  width: fullWidth ? '100%' : 'auto',
+});
+
+// interface GetVariantStyles {
+//   theme: MantineTheme;
+//   color: MantineColor;
+//   variant: string;
+//   gradient: MantineGradient;
+// }
+
+// function getVariantStyles({
+//   variant,
+//   theme,
+//   color,
+//   gradient,
+// }: GetVariantStyles) {
+//   if (!BUTTON_VARIANTS.includes(variant)) {
+//     return null;
+//   }
+
+//   const colors = theme.fn.variant({ color, variant, gradient });
+
+//   if (variant === 'gradient') {
+//     return {
+//       border: 0,
+//       backgroundImage: colors.background,
+//       color: colors.color,
+//       ...theme.fn.hover({ backgroundSize: '200%' }),
+//     };
+//   }
+
+//   return {
+//     border: `${rem(1)} solid ${colors.border}`,
+//     backgroundColor: colors.background,
+//     color: colors.color,
+//     ...theme.fn.hover({ backgroundColor: colors.hover }),
+//   };
+// }
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      radius,
+      fullWidth,
+      compact,
+      withLeftIcon,
+      withRightIcon,
+      // color,
+      // gradient,
+    }: ButtonStylesParams,
+    {
+      // variant,
+      size,
+    }
+  ) => {
+    return {
+      root: {
+        ...getSizeStyles({ compact, size, withLeftIcon, withRightIcon }),
+        ...theme.fn.fontStyles(),
+        ...theme.fn.focusStyles(),
+        ...getWidthStyles(fullWidth),
+        'borderRadius': theme.fn.radius(radius),
+        'fontWeight': 600,
+        'position': 'relative',
+        'lineHeight': 1,
+        'fontSize': getSize({ size, sizes: theme.fontSizes }),
+        'userSelect': 'none',
+        'cursor': 'pointer',
+        // ...getVariantStyles({ variant, theme, color, gradient }),
+
+        '&:active': theme.activeStyles,
+
+        '&:disabled, &[data-disabled]': {
+          'borderColor': 'transparent',
+          // 'backgroundColor':
+          //   theme.colorScheme === 'dark'
+          //     ? theme.colors.dark[4]
+          //     : theme.colors.gray[2],
+          // 'color':
+          //   theme.colorScheme === 'dark'
+          //     ? theme.colors.dark[6]
+          //     : theme.colors.gray[5],
+          'cursor': 'not-allowed',
+          'backgroundImage': 'none',
+          'pointerEvents': 'none',
+
+          '&:active': {
+            transform: 'none',
+          },
+        },
+
+        '&[data-loading]': {
+          'pointerEvents': 'none',
+
+          '&::before': {
+            content: '""',
+            ...theme.fn.cover(rem(-1)),
+            // backgroundColor:
+            //   theme.colorScheme === 'dark'
+            //     ? theme.fn.rgba(theme.colors.dark[7], 0.5)
+            //     : 'rgba(255, 255, 255, .5)',
+            borderRadius: theme.fn.radius(radius),
+            cursor: 'not-allowed',
+          },
+        },
+      },
+
+      icon: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+
+      leftIcon: {
+        marginRight: theme.spacing.xs,
+      },
+
+      rightIcon: {
+        marginLeft: theme.spacing.xs,
+      },
+
+      centerLoader: {
+        position: 'absolute',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        opacity: 0.5,
+      },
+
+      inner: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        overflow: 'visible',
+      },
+
+      label: {
+        whiteSpace: 'nowrap',
+        height: '100%',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+      },
+    };
+  }
+);
+export default useStyles;