@gataca/design-system 0.2.16 → 0.2.17
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/index.native.d.ts +1 -0
- package/dist/components/index.web.d.ts +1 -0
- package/dist/components/native/Buttons/ButtonIcon/ButtonIcon.config.native.d.ts +52 -0
- package/dist/components/native/Buttons/ButtonIcon/ButtonIcon.types.native.d.ts +1 -1
- package/dist/components/native/Indicator/Indicator/index.native.d.ts +2 -0
- package/dist/components/native/Indicator/Indicator/indicator.native.d.ts +4 -0
- package/dist/components/native/Indicator/Indicator/indicator_styles.native.d.ts +15 -0
- package/dist/components/native/Indicator/Indicator/indicator_types.native.d.ts +27 -0
- package/dist/components/web/Buttons/ButtonIcon/ButtonIcon.config.web.d.ts +52 -0
- package/dist/components/web/Buttons/ButtonIcon/ButtonIcon.types.web.d.ts +1 -1
- package/dist/components/web/Indicator/Indicator/index.web.d.ts +2 -0
- package/dist/components/web/Indicator/Indicator/indicator.web.d.ts +4 -0
- package/dist/components/web/Indicator/Indicator/indicator_styles.web.d.ts +4 -0
- package/dist/components/web/Indicator/Indicator/indicator_types.web.d.ts +27 -0
- package/dist/index.native.js +1 -1
- package/dist/index.native.js.map +1 -1
- package/dist/index.web.js +1 -1
- package/dist/index.web.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ export { default as RoundedButton } from './native/Buttons/RoundedButton/index.n
|
|
|
9
9
|
export { default as ButtonIcon } from './native/Buttons/ButtonIcon/index.native';
|
|
10
10
|
export { default as BrandButton } from './native/Buttons/BrandButton/index.native';
|
|
11
11
|
export { default as SegmentedButton } from './native/Buttons/SegmentedButton/index.native';
|
|
12
|
+
export { default as Indicator } from './native/Indicator/Indicator/index.native';
|
|
12
13
|
export { default as CheckIcon } from './native/Icons/icons/check';
|
|
13
14
|
export { default as InfoIcon } from './native/Icons/icons/info';
|
|
14
15
|
export { default as ChevronDownIcon } from './native/Icons/icons/chevronDown';
|
|
@@ -8,6 +8,7 @@ export { default as RoundedButton } from './web/Buttons/RoundedButton/index.web'
|
|
|
8
8
|
export { default as ButtonIcon } from './web/Buttons/ButtonIcon/index.web';
|
|
9
9
|
export { default as BrandButton } from './web/Buttons/BrandButton/index.web';
|
|
10
10
|
export { default as SegmentedButton } from './web/Buttons/SegmentedButton/index.web';
|
|
11
|
+
export { default as Indicator } from './web/Indicator/Indicator/index.web';
|
|
11
12
|
export { default as CheckIcon } from './web/Icons/icons/check';
|
|
12
13
|
export { default as InfoIcon } from './web/Icons/icons/info';
|
|
13
14
|
export { default as ChevronDownIcon } from './web/Icons/icons/chevronDown';
|
|
@@ -5,6 +5,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
5
5
|
backgroundColor: string;
|
|
6
6
|
iconColor: string;
|
|
7
7
|
};
|
|
8
|
+
hover: {
|
|
9
|
+
backgroundColor: string;
|
|
10
|
+
iconColor: string;
|
|
11
|
+
};
|
|
8
12
|
disable: {
|
|
9
13
|
backgroundColor: string;
|
|
10
14
|
iconColor: string;
|
|
@@ -15,6 +19,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
15
19
|
backgroundColor: string;
|
|
16
20
|
iconColor: string;
|
|
17
21
|
};
|
|
22
|
+
hover: {
|
|
23
|
+
backgroundColor: string;
|
|
24
|
+
iconColor: string;
|
|
25
|
+
};
|
|
18
26
|
disable: {
|
|
19
27
|
backgroundColor: string;
|
|
20
28
|
iconColor: string;
|
|
@@ -25,6 +33,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
25
33
|
backgroundColor: string;
|
|
26
34
|
iconColor: string;
|
|
27
35
|
};
|
|
36
|
+
hover: {
|
|
37
|
+
backgroundColor: string;
|
|
38
|
+
iconColor: string;
|
|
39
|
+
};
|
|
28
40
|
disable: {
|
|
29
41
|
backgroundColor: string;
|
|
30
42
|
iconColor: string;
|
|
@@ -35,6 +47,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
35
47
|
backgroundColor: string;
|
|
36
48
|
iconColor: string;
|
|
37
49
|
};
|
|
50
|
+
hover: {
|
|
51
|
+
backgroundColor: string;
|
|
52
|
+
iconColor: string;
|
|
53
|
+
};
|
|
38
54
|
disable: {
|
|
39
55
|
backgroundColor: string;
|
|
40
56
|
iconColor: string;
|
|
@@ -45,6 +61,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
45
61
|
backgroundColor: string;
|
|
46
62
|
iconColor: string;
|
|
47
63
|
};
|
|
64
|
+
hover: {
|
|
65
|
+
backgroundColor: string;
|
|
66
|
+
iconColor: string;
|
|
67
|
+
};
|
|
48
68
|
disable: {
|
|
49
69
|
backgroundColor: string;
|
|
50
70
|
iconColor: string;
|
|
@@ -55,6 +75,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
55
75
|
backgroundColor: string;
|
|
56
76
|
iconColor: string;
|
|
57
77
|
};
|
|
78
|
+
hover: {
|
|
79
|
+
backgroundColor: string;
|
|
80
|
+
iconColor: string;
|
|
81
|
+
};
|
|
58
82
|
disable: {
|
|
59
83
|
backgroundColor: string;
|
|
60
84
|
iconColor: string;
|
|
@@ -65,6 +89,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
65
89
|
backgroundColor: string;
|
|
66
90
|
iconColor: string;
|
|
67
91
|
};
|
|
92
|
+
hover: {
|
|
93
|
+
backgroundColor: string;
|
|
94
|
+
iconColor: string;
|
|
95
|
+
};
|
|
68
96
|
disable: {
|
|
69
97
|
backgroundColor: string;
|
|
70
98
|
iconColor: string;
|
|
@@ -75,6 +103,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
75
103
|
backgroundColor: string;
|
|
76
104
|
iconColor: string;
|
|
77
105
|
};
|
|
106
|
+
hover: {
|
|
107
|
+
backgroundColor: string;
|
|
108
|
+
iconColor: string;
|
|
109
|
+
};
|
|
78
110
|
disable: {
|
|
79
111
|
backgroundColor: string;
|
|
80
112
|
iconColor: string;
|
|
@@ -85,6 +117,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
85
117
|
backgroundColor: string;
|
|
86
118
|
iconColor: string;
|
|
87
119
|
};
|
|
120
|
+
hover: {
|
|
121
|
+
backgroundColor: string;
|
|
122
|
+
iconColor: string;
|
|
123
|
+
};
|
|
88
124
|
disable: {
|
|
89
125
|
backgroundColor: string;
|
|
90
126
|
iconColor: string;
|
|
@@ -95,6 +131,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
95
131
|
backgroundColor: string;
|
|
96
132
|
iconColor: string;
|
|
97
133
|
};
|
|
134
|
+
hover: {
|
|
135
|
+
backgroundColor: string;
|
|
136
|
+
iconColor: string;
|
|
137
|
+
};
|
|
98
138
|
disable: {
|
|
99
139
|
backgroundColor: string;
|
|
100
140
|
iconColor: string;
|
|
@@ -105,6 +145,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
105
145
|
backgroundColor: string;
|
|
106
146
|
iconColor: string;
|
|
107
147
|
};
|
|
148
|
+
hover: {
|
|
149
|
+
backgroundColor: string;
|
|
150
|
+
iconColor: string;
|
|
151
|
+
};
|
|
108
152
|
disable: {
|
|
109
153
|
backgroundColor: string;
|
|
110
154
|
iconColor: string;
|
|
@@ -115,6 +159,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
115
159
|
backgroundColor: string;
|
|
116
160
|
iconColor: string;
|
|
117
161
|
};
|
|
162
|
+
hover: {
|
|
163
|
+
backgroundColor: string;
|
|
164
|
+
iconColor: string;
|
|
165
|
+
};
|
|
118
166
|
disable: {
|
|
119
167
|
backgroundColor: string;
|
|
120
168
|
iconColor: string;
|
|
@@ -125,6 +173,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
125
173
|
backgroundColor: string;
|
|
126
174
|
iconColor: string;
|
|
127
175
|
};
|
|
176
|
+
hover: {
|
|
177
|
+
backgroundColor: string;
|
|
178
|
+
iconColor: string;
|
|
179
|
+
};
|
|
128
180
|
disable: {
|
|
129
181
|
backgroundColor: string;
|
|
130
182
|
iconColor: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconSize, IconStyle } from '../../Icons/icon_types';
|
|
2
2
|
export type ButtonIconColor = 'yellow' | 'red' | 'grey' | 'white' | 'purple' | 'lightPurple' | 'green' | 'blue' | 'teal' | 'lightTeal' | 'pink' | 'lightPink';
|
|
3
|
-
export type ButtonIconState = 'enable' | 'disable';
|
|
3
|
+
export type ButtonIconState = 'enable' | 'hover' | 'disable';
|
|
4
4
|
export type ButtonIconStyle = 'square' | 'round';
|
|
5
5
|
export type Size = 'large' | 'medium' | 'small';
|
|
6
6
|
export type ButtonIconForm = 'square' | 'round';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
indicatorContainer: {
|
|
3
|
+
display: "flex";
|
|
4
|
+
justifyContent: "center";
|
|
5
|
+
alignItems: "center";
|
|
6
|
+
gap: number;
|
|
7
|
+
flexShrink: number;
|
|
8
|
+
};
|
|
9
|
+
indicatorText: {
|
|
10
|
+
minWidth: "100%";
|
|
11
|
+
textAlign: "center";
|
|
12
|
+
alignSelf: "center";
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { StyleType } from '../../../../styles';
|
|
2
|
+
import { ColorsType } from '../../../../styles/Colors';
|
|
3
|
+
export type IndicatorColor = 'purple' | 'green' | 'red' | 'blue';
|
|
4
|
+
export type IndicatorSize = '28' | '16' | '14' | '10' | '8' | '5' | '4';
|
|
5
|
+
export type IndicatorType = 'quantity' | 'status';
|
|
6
|
+
export interface IndicatorProps {
|
|
7
|
+
size: IndicatorSize;
|
|
8
|
+
color: IndicatorColor;
|
|
9
|
+
type: IndicatorType;
|
|
10
|
+
quantity?: number;
|
|
11
|
+
}
|
|
12
|
+
export declare const IndicatorBorderWidthySize: Record<string, number>;
|
|
13
|
+
export declare const createBgColorMap: (Colors: ColorsType) => {
|
|
14
|
+
purple: string;
|
|
15
|
+
red: string;
|
|
16
|
+
green: string;
|
|
17
|
+
blue: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const fontMap: (fontStyles: StyleType) => {
|
|
20
|
+
'28': import("../../../../styles").FontsStyle;
|
|
21
|
+
'16': import("../../../../styles").FontsStyle;
|
|
22
|
+
'14': import("../../../../styles").FontsStyle;
|
|
23
|
+
'10': import("../../../../styles").FontsStyle;
|
|
24
|
+
'8': import("../../../../styles").FontsStyle;
|
|
25
|
+
'5': import("../../../../styles").FontsStyle;
|
|
26
|
+
'4': import("../../../../styles").FontsStyle;
|
|
27
|
+
};
|
|
@@ -5,6 +5,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
5
5
|
backgroundColor: string;
|
|
6
6
|
iconColor: string;
|
|
7
7
|
};
|
|
8
|
+
hover: {
|
|
9
|
+
backgroundColor: string;
|
|
10
|
+
iconColor: string;
|
|
11
|
+
};
|
|
8
12
|
disable: {
|
|
9
13
|
backgroundColor: string;
|
|
10
14
|
iconColor: string;
|
|
@@ -15,6 +19,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
15
19
|
backgroundColor: string;
|
|
16
20
|
iconColor: string;
|
|
17
21
|
};
|
|
22
|
+
hover: {
|
|
23
|
+
backgroundColor: string;
|
|
24
|
+
iconColor: string;
|
|
25
|
+
};
|
|
18
26
|
disable: {
|
|
19
27
|
backgroundColor: string;
|
|
20
28
|
iconColor: string;
|
|
@@ -25,6 +33,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
25
33
|
backgroundColor: string;
|
|
26
34
|
iconColor: string;
|
|
27
35
|
};
|
|
36
|
+
hover: {
|
|
37
|
+
backgroundColor: string;
|
|
38
|
+
iconColor: string;
|
|
39
|
+
};
|
|
28
40
|
disable: {
|
|
29
41
|
backgroundColor: string;
|
|
30
42
|
iconColor: string;
|
|
@@ -35,6 +47,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
35
47
|
backgroundColor: string;
|
|
36
48
|
iconColor: string;
|
|
37
49
|
};
|
|
50
|
+
hover: {
|
|
51
|
+
backgroundColor: string;
|
|
52
|
+
iconColor: string;
|
|
53
|
+
};
|
|
38
54
|
disable: {
|
|
39
55
|
backgroundColor: string;
|
|
40
56
|
iconColor: string;
|
|
@@ -45,6 +61,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
45
61
|
backgroundColor: string;
|
|
46
62
|
iconColor: string;
|
|
47
63
|
};
|
|
64
|
+
hover: {
|
|
65
|
+
backgroundColor: string;
|
|
66
|
+
iconColor: string;
|
|
67
|
+
};
|
|
48
68
|
disable: {
|
|
49
69
|
backgroundColor: string;
|
|
50
70
|
iconColor: string;
|
|
@@ -55,6 +75,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
55
75
|
backgroundColor: string;
|
|
56
76
|
iconColor: string;
|
|
57
77
|
};
|
|
78
|
+
hover: {
|
|
79
|
+
backgroundColor: string;
|
|
80
|
+
iconColor: string;
|
|
81
|
+
};
|
|
58
82
|
disable: {
|
|
59
83
|
backgroundColor: string;
|
|
60
84
|
iconColor: string;
|
|
@@ -65,6 +89,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
65
89
|
backgroundColor: string;
|
|
66
90
|
iconColor: string;
|
|
67
91
|
};
|
|
92
|
+
hover: {
|
|
93
|
+
backgroundColor: string;
|
|
94
|
+
iconColor: string;
|
|
95
|
+
};
|
|
68
96
|
disable: {
|
|
69
97
|
backgroundColor: string;
|
|
70
98
|
iconColor: string;
|
|
@@ -75,6 +103,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
75
103
|
backgroundColor: string;
|
|
76
104
|
iconColor: string;
|
|
77
105
|
};
|
|
106
|
+
hover: {
|
|
107
|
+
backgroundColor: string;
|
|
108
|
+
iconColor: string;
|
|
109
|
+
};
|
|
78
110
|
disable: {
|
|
79
111
|
backgroundColor: string;
|
|
80
112
|
iconColor: string;
|
|
@@ -85,6 +117,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
85
117
|
backgroundColor: string;
|
|
86
118
|
iconColor: string;
|
|
87
119
|
};
|
|
120
|
+
hover: {
|
|
121
|
+
backgroundColor: string;
|
|
122
|
+
iconColor: string;
|
|
123
|
+
};
|
|
88
124
|
disable: {
|
|
89
125
|
backgroundColor: string;
|
|
90
126
|
iconColor: string;
|
|
@@ -95,6 +131,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
95
131
|
backgroundColor: string;
|
|
96
132
|
iconColor: string;
|
|
97
133
|
};
|
|
134
|
+
hover: {
|
|
135
|
+
backgroundColor: string;
|
|
136
|
+
iconColor: string;
|
|
137
|
+
};
|
|
98
138
|
disable: {
|
|
99
139
|
backgroundColor: string;
|
|
100
140
|
iconColor: string;
|
|
@@ -105,6 +145,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
105
145
|
backgroundColor: string;
|
|
106
146
|
iconColor: string;
|
|
107
147
|
};
|
|
148
|
+
hover: {
|
|
149
|
+
backgroundColor: string;
|
|
150
|
+
iconColor: string;
|
|
151
|
+
};
|
|
108
152
|
disable: {
|
|
109
153
|
backgroundColor: string;
|
|
110
154
|
iconColor: string;
|
|
@@ -115,6 +159,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
115
159
|
backgroundColor: string;
|
|
116
160
|
iconColor: string;
|
|
117
161
|
};
|
|
162
|
+
hover: {
|
|
163
|
+
backgroundColor: string;
|
|
164
|
+
iconColor: string;
|
|
165
|
+
};
|
|
118
166
|
disable: {
|
|
119
167
|
backgroundColor: string;
|
|
120
168
|
iconColor: string;
|
|
@@ -125,6 +173,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
125
173
|
backgroundColor: string;
|
|
126
174
|
iconColor: string;
|
|
127
175
|
};
|
|
176
|
+
hover: {
|
|
177
|
+
backgroundColor: string;
|
|
178
|
+
iconColor: string;
|
|
179
|
+
};
|
|
128
180
|
disable: {
|
|
129
181
|
backgroundColor: string;
|
|
130
182
|
iconColor: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconSize, IconStyle } from '../../Icons/icon_types';
|
|
2
2
|
export type ButtonIconColor = 'yellow' | 'red' | 'grey' | 'white' | 'purple' | 'lightPurple' | 'green' | 'blue' | 'teal' | 'lightTeal' | 'pink' | 'lightPink';
|
|
3
|
-
export type ButtonIconState = 'enable' | 'disable';
|
|
3
|
+
export type ButtonIconState = 'enable' | 'hover' | 'disable';
|
|
4
4
|
export type ButtonIconStyle = 'square' | 'round';
|
|
5
5
|
export type Size = 'large' | 'medium' | 'small';
|
|
6
6
|
export type ButtonIconForm = 'square' | 'round';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { StyleType } from '../../../../styles';
|
|
2
|
+
import { ColorsType } from '../../../../styles/Colors';
|
|
3
|
+
export type IndicatorColor = 'purple' | 'green' | 'red' | 'blue';
|
|
4
|
+
export type IndicatorSize = '28' | '16' | '14' | '10' | '8' | '5' | '4';
|
|
5
|
+
export type IndicatorType = 'quantity' | 'status';
|
|
6
|
+
export interface IndicatorProps {
|
|
7
|
+
size: IndicatorSize;
|
|
8
|
+
color: IndicatorColor;
|
|
9
|
+
type: IndicatorType;
|
|
10
|
+
quantity?: number;
|
|
11
|
+
}
|
|
12
|
+
export declare const IndicatorBorderWidthySize: Record<string, number>;
|
|
13
|
+
export declare const createBgColorMap: (Colors: ColorsType) => {
|
|
14
|
+
purple: string;
|
|
15
|
+
red: string;
|
|
16
|
+
green: string;
|
|
17
|
+
blue: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const fontMap: (fontStyles: StyleType) => {
|
|
20
|
+
'28': import("../../../../styles").FontsStyle;
|
|
21
|
+
'16': import("../../../../styles").FontsStyle;
|
|
22
|
+
'14': import("../../../../styles").FontsStyle;
|
|
23
|
+
'10': import("../../../../styles").FontsStyle;
|
|
24
|
+
'8': import("../../../../styles").FontsStyle;
|
|
25
|
+
'5': import("../../../../styles").FontsStyle;
|
|
26
|
+
'4': import("../../../../styles").FontsStyle;
|
|
27
|
+
};
|