@taiv/ui 1.8.9 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Inputs/Buttons/Button/Button.d.ts +2 -2
- package/dist/components/Inputs/Buttons/Button/Button.d.ts.map +1 -1
- package/dist/components/Inputs/Buttons/Button/Button.js +2 -2
- package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Inputs/Buttons/Button/Button.stories.js +1 -1
- package/dist/components/Inputs/Buttons/IconButton/IconButton.d.ts +18 -0
- package/dist/components/Inputs/Buttons/IconButton/IconButton.d.ts.map +1 -0
- package/dist/components/Inputs/Buttons/IconButton/IconButton.js +34 -0
- package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.d.ts +14 -0
- package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.d.ts.map +1 -0
- package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.js +180 -0
- package/dist/components/Inputs/Buttons/IconButton/sizes.d.ts +19 -0
- package/dist/components/Inputs/Buttons/IconButton/sizes.d.ts.map +1 -0
- package/dist/components/Inputs/Buttons/IconButton/sizes.js +6 -0
- package/dist/components/Inputs/Buttons/shared/variants.d.ts +382 -0
- package/dist/components/Inputs/Buttons/shared/variants.d.ts.map +1 -0
- package/dist/components/Inputs/Buttons/{Button → shared}/variants.js +58 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/package.json +1 -1
- package/dist/components/Inputs/Buttons/Button/variants.d.ts +0 -191
- package/dist/components/Inputs/Buttons/Button/variants.d.ts.map +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ButtonProps as MantineButtonProps } from '@mantine/core';
|
|
2
2
|
import { componentSizes } from './sizes';
|
|
3
|
-
import {
|
|
3
|
+
import { buttonVariants } from '../shared/variants';
|
|
4
4
|
export interface ButtonProps extends MantineButtonProps {
|
|
5
5
|
onClick?: () => void;
|
|
6
6
|
size?: keyof typeof componentSizes;
|
|
7
|
-
variant?: keyof typeof
|
|
7
|
+
variant?: keyof typeof buttonVariants;
|
|
8
8
|
fullWidth?: boolean;
|
|
9
9
|
toggled?: boolean;
|
|
10
10
|
shadow?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,GAAI,0EAAqH,WAAW,4CAmCtJ,CAAC"}
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Button as MantineButton } from '@mantine/core';
|
|
3
3
|
import { fontBase, fontWeight } from '../../../../constants/font';
|
|
4
4
|
import { componentSizes } from './sizes';
|
|
5
|
-
import {
|
|
5
|
+
import { buttonVariants } from '../shared/variants';
|
|
6
6
|
export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, shadow = false, styles, ...props }) => {
|
|
7
|
-
const selectedVariant =
|
|
7
|
+
const selectedVariant = buttonVariants[variant];
|
|
8
8
|
const selectedSize = componentSizes[size];
|
|
9
9
|
// Apply active styles for nav variant when isActive is true
|
|
10
10
|
const getVariantStyles = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAmG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAmG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}
|
|
@@ -123,7 +123,7 @@ export const Sizes = {
|
|
|
123
123
|
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })),
|
|
124
124
|
};
|
|
125
125
|
export const States = {
|
|
126
|
-
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" })] })),
|
|
126
|
+
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" }), _jsx(Button, { shadow: true, children: "Shadow" })] })),
|
|
127
127
|
};
|
|
128
128
|
export const CustomStyles = {
|
|
129
129
|
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { styles: {
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { ButtonProps as MantineButtonProps } from '@mantine/core';
|
|
3
|
+
import { componentSizes } from './sizes';
|
|
4
|
+
import { buttonVariants, subtleVariants } from '../shared/variants';
|
|
5
|
+
export interface IconButtonProps extends Omit<MantineButtonProps, 'leftIcon' | 'rightIcon'> {
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
size?: keyof typeof componentSizes;
|
|
8
|
+
variant?: keyof typeof buttonVariants | keyof typeof subtleVariants;
|
|
9
|
+
toggled?: boolean;
|
|
10
|
+
shadow?: boolean;
|
|
11
|
+
subtle?: boolean;
|
|
12
|
+
tooltip?: string;
|
|
13
|
+
children?: ReactElement<{
|
|
14
|
+
size?: number;
|
|
15
|
+
}>;
|
|
16
|
+
}
|
|
17
|
+
export declare const IconButton: ({ onClick, size, variant, toggled, shadow, subtle, tooltip, styles, children, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,0FAA0I,eAAe,4CA0CnL,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button as MantineButton } from '@mantine/core';
|
|
3
|
+
import { componentSizes } from './sizes';
|
|
4
|
+
import { buttonVariants, subtleVariants } from '../shared/variants';
|
|
5
|
+
import { neutral } from '../../../../constants/colors';
|
|
6
|
+
import { Tooltip } from '../../../Info/Tooltips/Tooltip/Tooltip';
|
|
7
|
+
export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled = false, shadow = false, subtle = false, tooltip = '', styles, children, ...props }) => {
|
|
8
|
+
const selectedVariant = subtle && !props.loading ? subtleVariants[variant] : buttonVariants[variant];
|
|
9
|
+
const selectedSize = componentSizes[size];
|
|
10
|
+
// Apply active styles for nav variant when isActive is true
|
|
11
|
+
const getVariantStyles = () => {
|
|
12
|
+
if (toggled) {
|
|
13
|
+
return {
|
|
14
|
+
...selectedVariant,
|
|
15
|
+
...selectedVariant['&:toggled'],
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
return selectedVariant;
|
|
19
|
+
};
|
|
20
|
+
const style = {
|
|
21
|
+
root: {
|
|
22
|
+
borderRadius: '8px',
|
|
23
|
+
border: subtle ? `1px solid ${neutral[50]}` : '1px solid white',
|
|
24
|
+
height: `${selectedSize.borderLength}rem`,
|
|
25
|
+
padding: selectedSize.padding,
|
|
26
|
+
width: `${selectedSize.borderLength}rem`,
|
|
27
|
+
boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
|
|
28
|
+
...getVariantStyles(),
|
|
29
|
+
},
|
|
30
|
+
...styles,
|
|
31
|
+
};
|
|
32
|
+
const Button = (_jsx(MantineButton, { styles: style, size: size, onClick: onClick, loaderPosition: "center", loaderProps: { size: selectedSize.iconSize }, ...props, children: props.loading ? _jsx(_Fragment, {}) : children }));
|
|
33
|
+
return tooltip ? _jsx(Tooltip, { text: tooltip, children: Button }) : Button;
|
|
34
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { IconButton } from './IconButton';
|
|
3
|
+
declare const meta: Meta<typeof IconButton>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Variants: Story;
|
|
8
|
+
export declare const Subtle: Story;
|
|
9
|
+
export declare const Tooltip: Story;
|
|
10
|
+
export declare const Sizes: Story;
|
|
11
|
+
export declare const States: Story;
|
|
12
|
+
export declare const SubtleStates: Story;
|
|
13
|
+
export declare const CustomStyles: Story;
|
|
14
|
+
//# sourceMappingURL=IconButton.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { IconButton } from './IconButton';
|
|
3
|
+
import { Icon12Hours, Icon24Hours, Icon360View, IconAdjustments, IconAlertCircle, IconArrowLeft, IconArrowRight, IconArrowsMaximize, IconCaretDown, IconCheck, IconClock, IconClock2, IconHistory, IconLoader2 } from '@tabler/icons-react';
|
|
4
|
+
import { Group } from '../../../Layout/Group/Group';
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Components/Inputs/Buttons/IconButton',
|
|
7
|
+
component: IconButton,
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
docs: {
|
|
11
|
+
description: {
|
|
12
|
+
component: "[View Mantine Docs](https://v6.mantine.dev/core/button/)\n\nThe IconButton component is a customizable wrapper around Mantine's Button component that provides consistent styling and behavior across your application. It extends Mantine v6's ButtonProps while adding custom variants and sizing options.",
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
argTypes: {
|
|
17
|
+
size: {
|
|
18
|
+
control: { type: 'select' },
|
|
19
|
+
options: ['sm', 'md', 'lg'],
|
|
20
|
+
description: "Controls the button's height and padding. These values are square sizes.",
|
|
21
|
+
table: {
|
|
22
|
+
type: { summary: "'sm' | 'md' | 'lg'" },
|
|
23
|
+
defaultValue: { summary: "'md'" },
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
variant: {
|
|
27
|
+
control: { type: 'select' },
|
|
28
|
+
options: ['primary', 'secondary', 'cancel', 'success', 'warning', 'text', 'nav'],
|
|
29
|
+
description: "Defines the button's visual style and color scheme",
|
|
30
|
+
table: {
|
|
31
|
+
type: { summary: "'primary' | 'secondary' | 'cancel' | 'success' | 'warning' | 'text' | 'nav'" },
|
|
32
|
+
defaultValue: { summary: "'primary'" },
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
children: {
|
|
36
|
+
control: { type: 'object' },
|
|
37
|
+
description: 'Icon to be displayed in the button',
|
|
38
|
+
table: {
|
|
39
|
+
type: { summary: 'ReactNode' },
|
|
40
|
+
defaultValue: { summary: '<IconHistory />' },
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
styles: {
|
|
44
|
+
control: { type: 'object' },
|
|
45
|
+
description: 'Custom styles object',
|
|
46
|
+
table: {
|
|
47
|
+
type: { summary: 'MantineStylesObject' },
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
disabled: {
|
|
51
|
+
control: { type: 'boolean' },
|
|
52
|
+
description: 'Disabled state',
|
|
53
|
+
table: {
|
|
54
|
+
type: { summary: 'boolean' },
|
|
55
|
+
defaultValue: { summary: 'false' },
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
loading: {
|
|
59
|
+
control: { type: 'boolean' },
|
|
60
|
+
description: 'Indicate loading state',
|
|
61
|
+
table: {
|
|
62
|
+
type: { summary: 'boolean' },
|
|
63
|
+
defaultValue: { summary: 'false' },
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
onClick: {
|
|
67
|
+
action: 'clicked',
|
|
68
|
+
description: 'Click handler function',
|
|
69
|
+
table: {
|
|
70
|
+
type: { summary: '() => void' },
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
shadow: {
|
|
74
|
+
control: { type: 'boolean' },
|
|
75
|
+
description: 'Adds shadow to the button',
|
|
76
|
+
table: {
|
|
77
|
+
type: { summary: 'boolean' },
|
|
78
|
+
defaultValue: { summary: 'false' },
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
subtle: {
|
|
82
|
+
control: { type: 'boolean' },
|
|
83
|
+
description: 'Colors the icon instead of the background and reverses the color based on the variant',
|
|
84
|
+
table: {
|
|
85
|
+
type: { summary: 'boolean' },
|
|
86
|
+
defaultValue: { summary: 'false' },
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
};
|
|
91
|
+
export default meta;
|
|
92
|
+
export const Default = {
|
|
93
|
+
args: {
|
|
94
|
+
children: _jsx(IconHistory, {}),
|
|
95
|
+
size: 'md',
|
|
96
|
+
variant: 'primary',
|
|
97
|
+
disabled: false,
|
|
98
|
+
loading: false,
|
|
99
|
+
shadow: false,
|
|
100
|
+
subtle: false,
|
|
101
|
+
styles: {},
|
|
102
|
+
onClick: () => { },
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
export const Variants = {
|
|
106
|
+
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { variant: "primary", children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: "secondary", children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: "cancel", children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: "success", children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: "warning", children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: "text", children: _jsx(IconClock2, {}) })] })),
|
|
107
|
+
};
|
|
108
|
+
export const Subtle = {
|
|
109
|
+
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { variant: "primary", subtle: true, children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: "secondary", subtle: true, children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: "cancel", subtle: true, children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: "success", subtle: true, children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: "warning", subtle: true, children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: "text", subtle: true, children: _jsx(IconClock2, {}) })] })),
|
|
110
|
+
};
|
|
111
|
+
export const Tooltip = {
|
|
112
|
+
render: () => (_jsx(Group, { gap: "1.6rem", children: _jsx(IconButton, { tooltip: "Tooltip", children: _jsx(Icon12Hours, {}) }) })),
|
|
113
|
+
};
|
|
114
|
+
export const Sizes = {
|
|
115
|
+
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { size: "sm", children: _jsx(Icon360View, {}) }), _jsx(IconButton, { size: "md", children: _jsx(IconAdjustments, {}) }), _jsx(IconButton, { size: "lg", children: _jsx(IconArrowsMaximize, {}) })] })),
|
|
116
|
+
};
|
|
117
|
+
export const States = {
|
|
118
|
+
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { disabled: true, children: _jsx(IconCaretDown, {}) }), _jsx(IconButton, { loading: true, children: _jsx(IconLoader2, {}) }), _jsx(IconButton, { shadow: true, children: _jsx(IconArrowLeft, {}) })] })),
|
|
119
|
+
};
|
|
120
|
+
export const SubtleStates = {
|
|
121
|
+
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { subtle: true, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { subtle: true, disabled: true, children: _jsx(IconCaretDown, {}) }), _jsx(IconButton, { subtle: true, loading: true, children: _jsx(IconLoader2, {}) }), _jsx(IconButton, { subtle: true, shadow: true, children: _jsx(IconArrowLeft, {}) })] })),
|
|
122
|
+
};
|
|
123
|
+
export const CustomStyles = {
|
|
124
|
+
render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { styles: {
|
|
125
|
+
root: {
|
|
126
|
+
borderRadius: '20px',
|
|
127
|
+
background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
|
|
128
|
+
'&:hover': {
|
|
129
|
+
background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
|
|
130
|
+
},
|
|
131
|
+
},
|
|
132
|
+
}, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { styles: {
|
|
133
|
+
root: {
|
|
134
|
+
borderRadius: '0px',
|
|
135
|
+
background: 'black',
|
|
136
|
+
color: 'white',
|
|
137
|
+
border: '2px solid white',
|
|
138
|
+
'&:hover': {
|
|
139
|
+
background: 'white',
|
|
140
|
+
color: 'black',
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
}, children: _jsx(IconArrowRight, {}) })] })),
|
|
144
|
+
parameters: {
|
|
145
|
+
docs: {
|
|
146
|
+
source: {
|
|
147
|
+
code: `<IconButton
|
|
148
|
+
styles={{
|
|
149
|
+
root: {
|
|
150
|
+
borderRadius: '20px',
|
|
151
|
+
background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
|
|
152
|
+
'&:hover': {
|
|
153
|
+
background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
}}
|
|
157
|
+
>
|
|
158
|
+
<IconArrowLeft />
|
|
159
|
+
</IconButton>
|
|
160
|
+
|
|
161
|
+
<IconButton
|
|
162
|
+
styles={{
|
|
163
|
+
root: {
|
|
164
|
+
borderRadius: '0px',
|
|
165
|
+
background: 'black',
|
|
166
|
+
color: 'white',
|
|
167
|
+
border: '2px solid white',
|
|
168
|
+
'&:hover': {
|
|
169
|
+
background: 'white',
|
|
170
|
+
color: 'black',
|
|
171
|
+
},
|
|
172
|
+
},
|
|
173
|
+
}}
|
|
174
|
+
>
|
|
175
|
+
<IconArrowRight />
|
|
176
|
+
</IconButton>`,
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
},
|
|
180
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
declare const componentSizes: {
|
|
2
|
+
sm: {
|
|
3
|
+
borderLength: number;
|
|
4
|
+
padding: string;
|
|
5
|
+
iconSize: number;
|
|
6
|
+
};
|
|
7
|
+
md: {
|
|
8
|
+
borderLength: number;
|
|
9
|
+
padding: string;
|
|
10
|
+
iconSize: number;
|
|
11
|
+
};
|
|
12
|
+
lg: {
|
|
13
|
+
borderLength: number;
|
|
14
|
+
padding: string;
|
|
15
|
+
iconSize: number;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export { componentSizes };
|
|
19
|
+
//# sourceMappingURL=sizes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/sizes.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;CAInB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,382 @@
|
|
|
1
|
+
export declare const buttonVariants: {
|
|
2
|
+
readonly primary: {
|
|
3
|
+
readonly background: "linear-gradient(to right, #0081CE, #00A6F4)";
|
|
4
|
+
readonly color: "white";
|
|
5
|
+
readonly '&:hover': {
|
|
6
|
+
readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
|
|
7
|
+
readonly transition: "background 0.3s ease-in-out";
|
|
8
|
+
};
|
|
9
|
+
readonly '&:active': {
|
|
10
|
+
readonly background: "white";
|
|
11
|
+
readonly border: "1px solid #00A6F4";
|
|
12
|
+
readonly color: "#00A6F4";
|
|
13
|
+
};
|
|
14
|
+
readonly '&:toggled': {
|
|
15
|
+
readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
|
|
16
|
+
readonly color: "white";
|
|
17
|
+
};
|
|
18
|
+
readonly '&:disabled': {
|
|
19
|
+
readonly background: "#EDEDED";
|
|
20
|
+
readonly color: "#D9D9D9";
|
|
21
|
+
};
|
|
22
|
+
readonly '&[data-loading]': {
|
|
23
|
+
readonly '& .mantine-Button-icon svg': {
|
|
24
|
+
readonly stroke: "white";
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
readonly secondary: {
|
|
29
|
+
readonly background: "white";
|
|
30
|
+
readonly color: "#6D6D6D";
|
|
31
|
+
readonly border: "1px solid #6D6D6D";
|
|
32
|
+
readonly '&:hover': {
|
|
33
|
+
readonly background: "#D9D9D9";
|
|
34
|
+
readonly border: "1px solid #D9D9D9";
|
|
35
|
+
readonly color: "white";
|
|
36
|
+
};
|
|
37
|
+
readonly '&:active': {
|
|
38
|
+
readonly background: "#D9D9D9";
|
|
39
|
+
readonly border: "1px solid #6D6D6D";
|
|
40
|
+
readonly color: "#6D6D6D";
|
|
41
|
+
};
|
|
42
|
+
readonly '&:toggled': {
|
|
43
|
+
readonly background: "#D9D9D9";
|
|
44
|
+
readonly color: "neutral[200]";
|
|
45
|
+
};
|
|
46
|
+
readonly '&:disabled': {
|
|
47
|
+
readonly background: "#EDEDED";
|
|
48
|
+
readonly border: "1px solid #EDEDED";
|
|
49
|
+
readonly color: "#D9D9D9";
|
|
50
|
+
};
|
|
51
|
+
readonly '&[data-loading]': {
|
|
52
|
+
readonly '& .mantine-Button-icon svg': {
|
|
53
|
+
readonly stroke: "#6D6D6D";
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
readonly cancel: {
|
|
58
|
+
readonly background: "#C10007";
|
|
59
|
+
readonly color: "white";
|
|
60
|
+
readonly '&:hover': {
|
|
61
|
+
readonly background: "#FB2C36";
|
|
62
|
+
};
|
|
63
|
+
readonly '&:active': {
|
|
64
|
+
readonly background: "white";
|
|
65
|
+
readonly border: "1px solid #C10007";
|
|
66
|
+
readonly color: "#C10007";
|
|
67
|
+
};
|
|
68
|
+
readonly '&:toggled': {
|
|
69
|
+
readonly background: "#FB2C36";
|
|
70
|
+
readonly color: "white";
|
|
71
|
+
};
|
|
72
|
+
readonly '&:disabled': {
|
|
73
|
+
readonly background: "#FFD7D9";
|
|
74
|
+
readonly border: "1px solid #FFD7D9";
|
|
75
|
+
readonly color: "white";
|
|
76
|
+
};
|
|
77
|
+
readonly '&[data-loading]': {
|
|
78
|
+
readonly '& .mantine-Button-icon svg': {
|
|
79
|
+
readonly stroke: "white";
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
readonly success: {
|
|
84
|
+
readonly background: "#00A63E";
|
|
85
|
+
readonly color: "white";
|
|
86
|
+
readonly '&:hover': {
|
|
87
|
+
readonly background: "#00C951";
|
|
88
|
+
};
|
|
89
|
+
readonly '&:active': {
|
|
90
|
+
readonly background: "white";
|
|
91
|
+
readonly border: "1px solid #00A63E";
|
|
92
|
+
readonly color: "#00A63E";
|
|
93
|
+
};
|
|
94
|
+
readonly '&:toggled': {
|
|
95
|
+
readonly background: "#00C951";
|
|
96
|
+
};
|
|
97
|
+
readonly '&:disabled': {
|
|
98
|
+
readonly background: "#E6F4E7";
|
|
99
|
+
readonly border: "1px solid #E6F4E7";
|
|
100
|
+
readonly color: "white";
|
|
101
|
+
};
|
|
102
|
+
readonly '&[data-loading]': {
|
|
103
|
+
readonly '& .mantine-Button-icon svg': {
|
|
104
|
+
readonly stroke: "white";
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
readonly warning: {
|
|
109
|
+
readonly background: "#E17100";
|
|
110
|
+
readonly color: "white";
|
|
111
|
+
readonly '&:hover': {
|
|
112
|
+
readonly background: "#FE9A00";
|
|
113
|
+
};
|
|
114
|
+
readonly '&:active': {
|
|
115
|
+
readonly background: "white";
|
|
116
|
+
readonly border: "1px solid #E17100";
|
|
117
|
+
readonly color: "#E17100";
|
|
118
|
+
};
|
|
119
|
+
readonly '&:toggled': {
|
|
120
|
+
readonly background: "#FE9A00";
|
|
121
|
+
};
|
|
122
|
+
readonly '&:disabled': {
|
|
123
|
+
readonly background: "#FFE5B4";
|
|
124
|
+
readonly border: "1px solid #FFE5B4";
|
|
125
|
+
readonly color: "white";
|
|
126
|
+
};
|
|
127
|
+
readonly '&[data-loading]': {
|
|
128
|
+
readonly '& .mantine-Button-icon svg': {
|
|
129
|
+
readonly stroke: "white";
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
};
|
|
133
|
+
readonly text: {
|
|
134
|
+
readonly background: "transparent";
|
|
135
|
+
readonly color: "#6D6D6D";
|
|
136
|
+
readonly border: "none";
|
|
137
|
+
readonly padding: "0";
|
|
138
|
+
readonly height: "auto";
|
|
139
|
+
readonly minWidth: "unset";
|
|
140
|
+
readonly '&:hover': {
|
|
141
|
+
readonly background: "transparent";
|
|
142
|
+
readonly color: "#0081CE";
|
|
143
|
+
};
|
|
144
|
+
readonly '&:active': {
|
|
145
|
+
readonly background: "transparent";
|
|
146
|
+
readonly color: "#00A6F4";
|
|
147
|
+
};
|
|
148
|
+
readonly '&:toggled': {
|
|
149
|
+
readonly background: "transparent";
|
|
150
|
+
readonly color: "#0081CE";
|
|
151
|
+
};
|
|
152
|
+
readonly '&:disabled': {
|
|
153
|
+
readonly background: "transparent";
|
|
154
|
+
readonly color: "#D9D9D9";
|
|
155
|
+
};
|
|
156
|
+
readonly '&[data-loading]': {
|
|
157
|
+
readonly '& .mantine-Button-icon svg': {
|
|
158
|
+
readonly stroke: "#6D6D6D";
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
};
|
|
162
|
+
readonly nav: {
|
|
163
|
+
readonly background: "white";
|
|
164
|
+
readonly paddingLeft: "0.8rem";
|
|
165
|
+
readonly color: "#6D6D6D";
|
|
166
|
+
readonly '& .mantine-Button-inner': {
|
|
167
|
+
readonly justifyContent: "flex-start";
|
|
168
|
+
};
|
|
169
|
+
readonly '&:hover': {
|
|
170
|
+
readonly background: "#EDEDED";
|
|
171
|
+
};
|
|
172
|
+
readonly '&:active': {
|
|
173
|
+
readonly background: "#D9D9D9";
|
|
174
|
+
readonly color: "#6D6D6D";
|
|
175
|
+
};
|
|
176
|
+
readonly '&:toggled': {
|
|
177
|
+
readonly background: "#EDEDED";
|
|
178
|
+
readonly color: "#6D6D6D";
|
|
179
|
+
};
|
|
180
|
+
readonly '&:disabled': {
|
|
181
|
+
readonly background: "#EDEDED";
|
|
182
|
+
readonly color: "#D9D9D9";
|
|
183
|
+
};
|
|
184
|
+
readonly '&[data-loading]': {
|
|
185
|
+
readonly '& .mantine-Button-icon svg': {
|
|
186
|
+
readonly stroke: "#6D6D6D";
|
|
187
|
+
};
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
};
|
|
191
|
+
export declare const subtleVariants: {
|
|
192
|
+
readonly primary: {
|
|
193
|
+
readonly background: "white";
|
|
194
|
+
readonly color: "#00A6F4";
|
|
195
|
+
readonly '&:hover': {
|
|
196
|
+
readonly background: "#74D4FF";
|
|
197
|
+
readonly transition: "background 0.3s ease-in-out";
|
|
198
|
+
};
|
|
199
|
+
readonly '&:active': {
|
|
200
|
+
readonly background: "white";
|
|
201
|
+
readonly border: "1px solid #00A6F4";
|
|
202
|
+
readonly color: "#00A6F4";
|
|
203
|
+
};
|
|
204
|
+
readonly '&:toggled': {
|
|
205
|
+
readonly background: "#0081CE";
|
|
206
|
+
readonly color: "white";
|
|
207
|
+
};
|
|
208
|
+
readonly '&:disabled': {
|
|
209
|
+
readonly background: "#EDEDED";
|
|
210
|
+
readonly color: "#D9D9D9";
|
|
211
|
+
};
|
|
212
|
+
readonly '&[data-loading]': {
|
|
213
|
+
readonly '& .mantine-Button-icon svg': {
|
|
214
|
+
readonly stroke: "white";
|
|
215
|
+
};
|
|
216
|
+
};
|
|
217
|
+
};
|
|
218
|
+
readonly secondary: {
|
|
219
|
+
readonly background: "white";
|
|
220
|
+
readonly color: "#6D6D6D";
|
|
221
|
+
readonly border: "1px solid #EDEDED";
|
|
222
|
+
readonly '&:hover': {
|
|
223
|
+
readonly background: "#D9D9D9";
|
|
224
|
+
readonly border: "1px solid #D9D9D9";
|
|
225
|
+
readonly color: "white";
|
|
226
|
+
};
|
|
227
|
+
readonly '&:active': {
|
|
228
|
+
readonly background: "#D9D9D9";
|
|
229
|
+
readonly border: "1px solid #6D6D6D";
|
|
230
|
+
readonly color: "#6D6D6D";
|
|
231
|
+
};
|
|
232
|
+
readonly '&:toggled': {
|
|
233
|
+
readonly background: "#D9D9D9";
|
|
234
|
+
readonly color: "neutral[200]";
|
|
235
|
+
};
|
|
236
|
+
readonly '&:disabled': {
|
|
237
|
+
readonly background: "#EDEDED";
|
|
238
|
+
readonly border: "1px solid #EDEDED";
|
|
239
|
+
readonly color: "#D9D9D9";
|
|
240
|
+
};
|
|
241
|
+
readonly '&[data-loading]': {
|
|
242
|
+
readonly '& .mantine-Button-icon svg': {
|
|
243
|
+
readonly stroke: "#6D6D6D";
|
|
244
|
+
};
|
|
245
|
+
};
|
|
246
|
+
};
|
|
247
|
+
readonly cancel: {
|
|
248
|
+
readonly background: "white";
|
|
249
|
+
readonly color: "#C10007";
|
|
250
|
+
readonly '&:hover': {
|
|
251
|
+
readonly background: "#FB2C36";
|
|
252
|
+
};
|
|
253
|
+
readonly '&:active': {
|
|
254
|
+
readonly background: "white";
|
|
255
|
+
readonly border: "1px solid #C10007";
|
|
256
|
+
readonly color: "#C10007";
|
|
257
|
+
};
|
|
258
|
+
readonly '&:toggled': {
|
|
259
|
+
readonly background: "#FB2C36";
|
|
260
|
+
readonly color: "white";
|
|
261
|
+
};
|
|
262
|
+
readonly '&:disabled': {
|
|
263
|
+
readonly background: "#FFD7D9";
|
|
264
|
+
readonly border: "1px solid #FFD7D9";
|
|
265
|
+
readonly color: "white";
|
|
266
|
+
};
|
|
267
|
+
readonly '&[data-loading]': {
|
|
268
|
+
readonly '& .mantine-Button-icon svg': {
|
|
269
|
+
readonly stroke: "white";
|
|
270
|
+
};
|
|
271
|
+
};
|
|
272
|
+
};
|
|
273
|
+
readonly success: {
|
|
274
|
+
readonly background: "white";
|
|
275
|
+
readonly color: "#00A63E";
|
|
276
|
+
readonly '&:hover': {
|
|
277
|
+
readonly background: "#00C951";
|
|
278
|
+
};
|
|
279
|
+
readonly '&:active': {
|
|
280
|
+
readonly background: "white";
|
|
281
|
+
readonly border: "1px solid #00A63E";
|
|
282
|
+
readonly color: "#00A63E";
|
|
283
|
+
};
|
|
284
|
+
readonly '&:toggled': {
|
|
285
|
+
readonly background: "#00C951";
|
|
286
|
+
};
|
|
287
|
+
readonly '&:disabled': {
|
|
288
|
+
readonly background: "#E6F4E7";
|
|
289
|
+
readonly border: "1px solid #E6F4E7";
|
|
290
|
+
readonly color: "white";
|
|
291
|
+
};
|
|
292
|
+
readonly '&[data-loading]': {
|
|
293
|
+
readonly '& .mantine-Button-icon svg': {
|
|
294
|
+
readonly stroke: "white";
|
|
295
|
+
};
|
|
296
|
+
};
|
|
297
|
+
};
|
|
298
|
+
readonly warning: {
|
|
299
|
+
readonly background: "white";
|
|
300
|
+
readonly color: "#E17100";
|
|
301
|
+
readonly '&:hover': {
|
|
302
|
+
readonly background: "#FE9A00";
|
|
303
|
+
};
|
|
304
|
+
readonly '&:active': {
|
|
305
|
+
readonly background: "white";
|
|
306
|
+
readonly border: "1px solid #E17100";
|
|
307
|
+
readonly color: "#E17100";
|
|
308
|
+
};
|
|
309
|
+
readonly '&:toggled': {
|
|
310
|
+
readonly background: "#FE9A00";
|
|
311
|
+
};
|
|
312
|
+
readonly '&:disabled': {
|
|
313
|
+
readonly background: "#FFE5B4";
|
|
314
|
+
readonly border: "1px solid #FFE5B4";
|
|
315
|
+
readonly color: "white";
|
|
316
|
+
};
|
|
317
|
+
readonly '&[data-loading]': {
|
|
318
|
+
readonly '& .mantine-Button-icon svg': {
|
|
319
|
+
readonly stroke: "white";
|
|
320
|
+
};
|
|
321
|
+
};
|
|
322
|
+
};
|
|
323
|
+
readonly text: {
|
|
324
|
+
readonly background: "transparent";
|
|
325
|
+
readonly color: "#6D6D6D";
|
|
326
|
+
readonly border: "none";
|
|
327
|
+
readonly padding: "0";
|
|
328
|
+
readonly height: "auto";
|
|
329
|
+
readonly minWidth: "unset";
|
|
330
|
+
readonly '&:hover': {
|
|
331
|
+
readonly background: "transparent";
|
|
332
|
+
readonly color: "#0081CE";
|
|
333
|
+
};
|
|
334
|
+
readonly '&:active': {
|
|
335
|
+
readonly background: "transparent";
|
|
336
|
+
readonly color: "#00A6F4";
|
|
337
|
+
};
|
|
338
|
+
readonly '&:toggled': {
|
|
339
|
+
readonly background: "transparent";
|
|
340
|
+
readonly color: "#0081CE";
|
|
341
|
+
};
|
|
342
|
+
readonly '&:disabled': {
|
|
343
|
+
readonly background: "transparent";
|
|
344
|
+
readonly color: "#D9D9D9";
|
|
345
|
+
};
|
|
346
|
+
readonly '&[data-loading]': {
|
|
347
|
+
readonly '& .mantine-Button-icon svg': {
|
|
348
|
+
readonly stroke: "#6D6D6D";
|
|
349
|
+
};
|
|
350
|
+
};
|
|
351
|
+
};
|
|
352
|
+
readonly nav: {
|
|
353
|
+
readonly background: "white";
|
|
354
|
+
readonly paddingLeft: "0.8rem";
|
|
355
|
+
readonly color: "#6D6D6D";
|
|
356
|
+
readonly border: "none";
|
|
357
|
+
readonly '& .mantine-Button-inner': {
|
|
358
|
+
readonly justifyContent: "flex-start";
|
|
359
|
+
};
|
|
360
|
+
readonly '&:hover': {
|
|
361
|
+
readonly background: "#EDEDED";
|
|
362
|
+
};
|
|
363
|
+
readonly '&:active': {
|
|
364
|
+
readonly background: "#D9D9D9";
|
|
365
|
+
readonly color: "#6D6D6D";
|
|
366
|
+
};
|
|
367
|
+
readonly '&:toggled': {
|
|
368
|
+
readonly background: "#EDEDED";
|
|
369
|
+
readonly color: "#6D6D6D";
|
|
370
|
+
};
|
|
371
|
+
readonly '&:disabled': {
|
|
372
|
+
readonly background: "#EDEDED";
|
|
373
|
+
readonly color: "#D9D9D9";
|
|
374
|
+
};
|
|
375
|
+
readonly '&[data-loading]': {
|
|
376
|
+
readonly '& .mantine-Button-icon svg': {
|
|
377
|
+
readonly stroke: "#6D6D6D";
|
|
378
|
+
};
|
|
379
|
+
};
|
|
380
|
+
};
|
|
381
|
+
};
|
|
382
|
+
//# sourceMappingURL=variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/shared/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LjB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDjB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { primary, neutral, error, success, warning } from '../../../../constants/colors';
|
|
2
|
-
export const
|
|
2
|
+
export const buttonVariants = {
|
|
3
3
|
primary: {
|
|
4
4
|
background: `linear-gradient(to right, ${primary[300]}, ${primary[200]})`,
|
|
5
5
|
color: 'white',
|
|
@@ -189,3 +189,60 @@ export const componentVariants = {
|
|
|
189
189
|
},
|
|
190
190
|
},
|
|
191
191
|
};
|
|
192
|
+
export const subtleVariants = {
|
|
193
|
+
primary: {
|
|
194
|
+
...buttonVariants.primary,
|
|
195
|
+
background: 'white',
|
|
196
|
+
color: primary[200],
|
|
197
|
+
'&:hover': {
|
|
198
|
+
background: primary[100],
|
|
199
|
+
transition: 'background 0.3s ease-in-out',
|
|
200
|
+
},
|
|
201
|
+
'&:active': {
|
|
202
|
+
background: 'white',
|
|
203
|
+
border: `1px solid ${primary[200]}`,
|
|
204
|
+
color: primary[200],
|
|
205
|
+
},
|
|
206
|
+
'&:toggled': {
|
|
207
|
+
background: primary[300],
|
|
208
|
+
color: 'white',
|
|
209
|
+
},
|
|
210
|
+
},
|
|
211
|
+
secondary: {
|
|
212
|
+
...buttonVariants.secondary,
|
|
213
|
+
background: 'white',
|
|
214
|
+
color: neutral[200],
|
|
215
|
+
border: `1px solid ${neutral[50]}`,
|
|
216
|
+
},
|
|
217
|
+
cancel: {
|
|
218
|
+
...buttonVariants.cancel,
|
|
219
|
+
background: 'white',
|
|
220
|
+
color: error[200],
|
|
221
|
+
},
|
|
222
|
+
success: {
|
|
223
|
+
...buttonVariants.success,
|
|
224
|
+
background: 'white',
|
|
225
|
+
color: success[200],
|
|
226
|
+
},
|
|
227
|
+
warning: {
|
|
228
|
+
...buttonVariants.warning,
|
|
229
|
+
background: 'white',
|
|
230
|
+
color: warning[200],
|
|
231
|
+
},
|
|
232
|
+
text: {
|
|
233
|
+
...buttonVariants.text,
|
|
234
|
+
background: 'transparent',
|
|
235
|
+
color: neutral[200],
|
|
236
|
+
border: 'none',
|
|
237
|
+
padding: '0',
|
|
238
|
+
height: 'auto',
|
|
239
|
+
minWidth: 'unset',
|
|
240
|
+
},
|
|
241
|
+
nav: {
|
|
242
|
+
...buttonVariants.nav,
|
|
243
|
+
background: 'white',
|
|
244
|
+
paddingLeft: '0.8rem',
|
|
245
|
+
color: neutral[200],
|
|
246
|
+
border: 'none',
|
|
247
|
+
},
|
|
248
|
+
};
|
|
@@ -16,6 +16,7 @@ export { FormulaTooltip } from './Info/Tooltips/FormulaTooltip/FormulaTooltip';
|
|
|
16
16
|
export { InfoCard } from './Info/InfoCard/InfoCard';
|
|
17
17
|
export { AutoComplete } from './Inputs/TextInputs/AutoComplete/AutoComplete';
|
|
18
18
|
export { Button } from './Inputs/Buttons/Button/Button';
|
|
19
|
+
export { IconButton } from './Inputs/Buttons/IconButton/IconButton';
|
|
19
20
|
export { UnstyledButton } from './Inputs/Buttons/UnstyledButton/UnstyledButton';
|
|
20
21
|
export { Checkbox } from './Inputs/Controls/Checkbox/Checkbox';
|
|
21
22
|
export { Radio } from './Inputs/Controls/Radio/Radio';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -19,6 +19,7 @@ export { InfoCard } from './Info/InfoCard/InfoCard';
|
|
|
19
19
|
//Inputs
|
|
20
20
|
export { AutoComplete } from './Inputs/TextInputs/AutoComplete/AutoComplete';
|
|
21
21
|
export { Button } from './Inputs/Buttons/Button/Button';
|
|
22
|
+
export { IconButton } from './Inputs/Buttons/IconButton/IconButton';
|
|
22
23
|
export { UnstyledButton } from './Inputs/Buttons/UnstyledButton/UnstyledButton';
|
|
23
24
|
export { Checkbox } from './Inputs/Controls/Checkbox/Checkbox';
|
|
24
25
|
export { Radio } from './Inputs/Controls/Radio/Radio';
|
package/package.json
CHANGED
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
export declare const componentVariants: {
|
|
2
|
-
readonly primary: {
|
|
3
|
-
readonly background: "linear-gradient(to right, #0081CE, #00A6F4)";
|
|
4
|
-
readonly color: "white";
|
|
5
|
-
readonly '&:hover': {
|
|
6
|
-
readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
|
|
7
|
-
readonly transition: "background 0.3s ease-in-out";
|
|
8
|
-
};
|
|
9
|
-
readonly '&:active': {
|
|
10
|
-
readonly background: "white";
|
|
11
|
-
readonly border: "1px solid #00A6F4";
|
|
12
|
-
readonly color: "#00A6F4";
|
|
13
|
-
};
|
|
14
|
-
readonly '&:toggled': {
|
|
15
|
-
readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
|
|
16
|
-
readonly color: "white";
|
|
17
|
-
};
|
|
18
|
-
readonly '&:disabled': {
|
|
19
|
-
readonly background: "#EDEDED";
|
|
20
|
-
readonly color: "#D9D9D9";
|
|
21
|
-
};
|
|
22
|
-
readonly '&[data-loading]': {
|
|
23
|
-
readonly '& .mantine-Button-icon svg': {
|
|
24
|
-
readonly stroke: "white";
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
readonly secondary: {
|
|
29
|
-
readonly background: "white";
|
|
30
|
-
readonly color: "#6D6D6D";
|
|
31
|
-
readonly border: "1px solid #6D6D6D";
|
|
32
|
-
readonly '&:hover': {
|
|
33
|
-
readonly background: "#D9D9D9";
|
|
34
|
-
readonly border: "1px solid #D9D9D9";
|
|
35
|
-
readonly color: "white";
|
|
36
|
-
};
|
|
37
|
-
readonly '&:active': {
|
|
38
|
-
readonly background: "#D9D9D9";
|
|
39
|
-
readonly border: "1px solid #6D6D6D";
|
|
40
|
-
readonly color: "#6D6D6D";
|
|
41
|
-
};
|
|
42
|
-
readonly '&:toggled': {
|
|
43
|
-
readonly background: "#D9D9D9";
|
|
44
|
-
readonly color: "neutral[200]";
|
|
45
|
-
};
|
|
46
|
-
readonly '&:disabled': {
|
|
47
|
-
readonly background: "#EDEDED";
|
|
48
|
-
readonly border: "1px solid #EDEDED";
|
|
49
|
-
readonly color: "#D9D9D9";
|
|
50
|
-
};
|
|
51
|
-
readonly '&[data-loading]': {
|
|
52
|
-
readonly '& .mantine-Button-icon svg': {
|
|
53
|
-
readonly stroke: "#6D6D6D";
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
};
|
|
57
|
-
readonly cancel: {
|
|
58
|
-
readonly background: "#C10007";
|
|
59
|
-
readonly color: "white";
|
|
60
|
-
readonly '&:hover': {
|
|
61
|
-
readonly background: "#FB2C36";
|
|
62
|
-
};
|
|
63
|
-
readonly '&:active': {
|
|
64
|
-
readonly background: "white";
|
|
65
|
-
readonly border: "1px solid #C10007";
|
|
66
|
-
readonly color: "#C10007";
|
|
67
|
-
};
|
|
68
|
-
readonly '&:toggled': {
|
|
69
|
-
readonly background: "#FB2C36";
|
|
70
|
-
readonly color: "white";
|
|
71
|
-
};
|
|
72
|
-
readonly '&:disabled': {
|
|
73
|
-
readonly background: "#FFD7D9";
|
|
74
|
-
readonly border: "1px solid #FFD7D9";
|
|
75
|
-
readonly color: "white";
|
|
76
|
-
};
|
|
77
|
-
readonly '&[data-loading]': {
|
|
78
|
-
readonly '& .mantine-Button-icon svg': {
|
|
79
|
-
readonly stroke: "white";
|
|
80
|
-
};
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
|
-
readonly success: {
|
|
84
|
-
readonly background: "#00A63E";
|
|
85
|
-
readonly color: "white";
|
|
86
|
-
readonly '&:hover': {
|
|
87
|
-
readonly background: "#00C951";
|
|
88
|
-
};
|
|
89
|
-
readonly '&:active': {
|
|
90
|
-
readonly background: "white";
|
|
91
|
-
readonly border: "1px solid #00A63E";
|
|
92
|
-
readonly color: "#00A63E";
|
|
93
|
-
};
|
|
94
|
-
readonly '&:toggled': {
|
|
95
|
-
readonly background: "#00C951";
|
|
96
|
-
};
|
|
97
|
-
readonly '&:disabled': {
|
|
98
|
-
readonly background: "#E6F4E7";
|
|
99
|
-
readonly border: "1px solid #E6F4E7";
|
|
100
|
-
readonly color: "white";
|
|
101
|
-
};
|
|
102
|
-
readonly '&[data-loading]': {
|
|
103
|
-
readonly '& .mantine-Button-icon svg': {
|
|
104
|
-
readonly stroke: "white";
|
|
105
|
-
};
|
|
106
|
-
};
|
|
107
|
-
};
|
|
108
|
-
readonly warning: {
|
|
109
|
-
readonly background: "#E17100";
|
|
110
|
-
readonly color: "white";
|
|
111
|
-
readonly '&:hover': {
|
|
112
|
-
readonly background: "#FE9A00";
|
|
113
|
-
};
|
|
114
|
-
readonly '&:active': {
|
|
115
|
-
readonly background: "white";
|
|
116
|
-
readonly border: "1px solid #E17100";
|
|
117
|
-
readonly color: "#E17100";
|
|
118
|
-
};
|
|
119
|
-
readonly '&:toggled': {
|
|
120
|
-
readonly background: "#FE9A00";
|
|
121
|
-
};
|
|
122
|
-
readonly '&:disabled': {
|
|
123
|
-
readonly background: "#FFE5B4";
|
|
124
|
-
readonly border: "1px solid #FFE5B4";
|
|
125
|
-
readonly color: "white";
|
|
126
|
-
};
|
|
127
|
-
readonly '&[data-loading]': {
|
|
128
|
-
readonly '& .mantine-Button-icon svg': {
|
|
129
|
-
readonly stroke: "white";
|
|
130
|
-
};
|
|
131
|
-
};
|
|
132
|
-
};
|
|
133
|
-
readonly text: {
|
|
134
|
-
readonly background: "transparent";
|
|
135
|
-
readonly color: "#6D6D6D";
|
|
136
|
-
readonly border: "none";
|
|
137
|
-
readonly padding: "0";
|
|
138
|
-
readonly height: "auto";
|
|
139
|
-
readonly minWidth: "unset";
|
|
140
|
-
readonly '&:hover': {
|
|
141
|
-
readonly background: "transparent";
|
|
142
|
-
readonly color: "#0081CE";
|
|
143
|
-
};
|
|
144
|
-
readonly '&:active': {
|
|
145
|
-
readonly background: "transparent";
|
|
146
|
-
readonly color: "#00A6F4";
|
|
147
|
-
};
|
|
148
|
-
readonly '&:toggled': {
|
|
149
|
-
readonly background: "transparent";
|
|
150
|
-
readonly color: "#0081CE";
|
|
151
|
-
};
|
|
152
|
-
readonly '&:disabled': {
|
|
153
|
-
readonly background: "transparent";
|
|
154
|
-
readonly color: "#D9D9D9";
|
|
155
|
-
};
|
|
156
|
-
readonly '&[data-loading]': {
|
|
157
|
-
readonly '& .mantine-Button-icon svg': {
|
|
158
|
-
readonly stroke: "#6D6D6D";
|
|
159
|
-
};
|
|
160
|
-
};
|
|
161
|
-
};
|
|
162
|
-
readonly nav: {
|
|
163
|
-
readonly background: "white";
|
|
164
|
-
readonly paddingLeft: "0.8rem";
|
|
165
|
-
readonly color: "#6D6D6D";
|
|
166
|
-
readonly '& .mantine-Button-inner': {
|
|
167
|
-
readonly justifyContent: "flex-start";
|
|
168
|
-
};
|
|
169
|
-
readonly '&:hover': {
|
|
170
|
-
readonly background: "#EDEDED";
|
|
171
|
-
};
|
|
172
|
-
readonly '&:active': {
|
|
173
|
-
readonly background: "#D9D9D9";
|
|
174
|
-
readonly color: "#6D6D6D";
|
|
175
|
-
};
|
|
176
|
-
readonly '&:toggled': {
|
|
177
|
-
readonly background: "#EDEDED";
|
|
178
|
-
readonly color: "#6D6D6D";
|
|
179
|
-
};
|
|
180
|
-
readonly '&:disabled': {
|
|
181
|
-
readonly background: "#EDEDED";
|
|
182
|
-
readonly color: "#D9D9D9";
|
|
183
|
-
};
|
|
184
|
-
readonly '&[data-loading]': {
|
|
185
|
-
readonly '& .mantine-Button-icon svg': {
|
|
186
|
-
readonly stroke: "#6D6D6D";
|
|
187
|
-
};
|
|
188
|
-
};
|
|
189
|
-
};
|
|
190
|
-
};
|
|
191
|
-
//# sourceMappingURL=variants.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LpB,CAAC"}
|