norma-library 0.5.129 → 0.5.131

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.
Files changed (161) hide show
  1. package/.babelrc.json +18 -18
  2. package/.prettierignore +10 -10
  3. package/.prettierrc.json +20 -20
  4. package/.storybook/main.ts +20 -20
  5. package/.storybook/preview.ts +15 -15
  6. package/README.md +43 -43
  7. package/commitlint.config.js +1 -1
  8. package/dist/esm/components/ProgressBar.js +1 -1
  9. package/dist/esm/components/ProgressBar.js.map +1 -1
  10. package/dist/esm/components/RadioGroup.js +1 -1
  11. package/dist/esm/components/RadioGroup.js.map +1 -1
  12. package/docs/index.md +118 -118
  13. package/package.json +136 -136
  14. package/src/components/Accordion.tsx +39 -39
  15. package/src/components/Avatar.tsx +17 -17
  16. package/src/components/Badge.tsx +14 -14
  17. package/src/components/Box/index.tsx +12 -12
  18. package/src/components/Box/interfaces.ts +3 -3
  19. package/src/components/Box/styles.tsx +22 -22
  20. package/src/components/Breadcrumb/index.tsx +27 -27
  21. package/src/components/Breadcrumb/interface.ts +8 -8
  22. package/src/components/Breadcrumb/styles.tsx +32 -32
  23. package/src/components/Button.tsx +26 -26
  24. package/src/components/Card.tsx +37 -37
  25. package/src/components/ChatMessage.tsx +87 -87
  26. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  27. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  28. package/src/components/CheckBox.tsx +21 -21
  29. package/src/components/DateInput/index.tsx +34 -34
  30. package/src/components/DateInput/interface.ts +13 -13
  31. package/src/components/DateInput/styles.tsx +27 -27
  32. package/src/components/DatePicker.tsx +67 -67
  33. package/src/components/DropDown.tsx +24 -24
  34. package/src/components/IconButton.tsx +37 -37
  35. package/src/components/Icons.tsx +82 -82
  36. package/src/components/Modal.tsx +113 -113
  37. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  38. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  39. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  40. package/src/components/MultiSelectInput/index.tsx +60 -60
  41. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  42. package/src/components/MultiSelectInput/styles.tsx +43 -43
  43. package/src/components/Paper.tsx +12 -12
  44. package/src/components/ProgressBar.tsx +50 -51
  45. package/src/components/RadioGroup.tsx +43 -43
  46. package/src/components/RangerSlider.tsx +65 -65
  47. package/src/components/Select.tsx +74 -74
  48. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  49. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  50. package/src/components/SelectInput/index.tsx +45 -45
  51. package/src/components/SelectInput/interfaces.ts +15 -15
  52. package/src/components/SelectInput/styles.tsx +31 -31
  53. package/src/components/Svgs.tsx +506 -506
  54. package/src/components/Table/components/header/index.tsx +86 -86
  55. package/src/components/Table/components/header/styles.tsx +59 -59
  56. package/src/components/Table/components/index.tsx +8 -8
  57. package/src/components/Table/components/pagination/index.tsx +39 -39
  58. package/src/components/Table/components/pagination/styles.tsx +28 -28
  59. package/src/components/Table/components/tbody/index.tsx +30 -30
  60. package/src/components/Table/components/tbody/styles.tsx +4 -4
  61. package/src/components/Table/index.tsx +317 -317
  62. package/src/components/Table/interface.ts +23 -23
  63. package/src/components/Table/styles.tsx +117 -117
  64. package/src/components/Tabs.tsx +105 -105
  65. package/src/components/Tag.tsx +33 -33
  66. package/src/components/TextField.tsx +19 -19
  67. package/src/components/TextInput/index.tsx +37 -37
  68. package/src/components/TextInput/interface.ts +9 -9
  69. package/src/components/TextInput/styles.tsx +23 -23
  70. package/src/components/TimeLine.tsx +89 -89
  71. package/src/components/TimePicker.tsx +78 -78
  72. package/src/components/Typography/Text/index.tsx +20 -20
  73. package/src/components/Typography/Text/interfaces.ts +5 -5
  74. package/src/components/Typography/Text/styles.tsx +40 -40
  75. package/src/components/Typography/Title/index.tsx +22 -22
  76. package/src/components/Typography/Title/interfaces.ts +6 -6
  77. package/src/components/Typography/Title/styles.tsx +40 -40
  78. package/src/components/Typography/index.tsx +6 -6
  79. package/src/components/UncontrolledTable/components/header/index.tsx +63 -63
  80. package/src/components/UncontrolledTable/components/header/styles.tsx +59 -59
  81. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  82. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  83. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  84. package/src/components/UncontrolledTable/components/tbody/index.tsx +30 -30
  85. package/src/components/UncontrolledTable/components/tbody/styles.tsx +4 -4
  86. package/src/components/UncontrolledTable/index.tsx +226 -226
  87. package/src/components/UncontrolledTable/interface.ts +42 -42
  88. package/src/components/UncontrolledTable/styles.tsx +120 -120
  89. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +51 -51
  90. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +68 -68
  91. package/src/components/index.ts +24 -24
  92. package/src/helpers/alignments.ts +14 -14
  93. package/src/helpers/borders.ts +18 -18
  94. package/src/helpers/colors.ts +206 -206
  95. package/src/helpers/index.ts +5 -5
  96. package/src/helpers/radios.ts +24 -24
  97. package/src/helpers/sizes.ts +72 -72
  98. package/src/index.ts +66 -66
  99. package/src/interfaces/Accordion.ts +12 -12
  100. package/src/interfaces/Avatar.tsx +15 -15
  101. package/src/interfaces/Badge.ts +19 -19
  102. package/src/interfaces/Button.ts +22 -22
  103. package/src/interfaces/Card.ts +11 -11
  104. package/src/interfaces/ChatMessage.ts +12 -12
  105. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  106. package/src/interfaces/CheckBox.ts +27 -27
  107. package/src/interfaces/DatePicker.ts +13 -13
  108. package/src/interfaces/DropDown.ts +14 -14
  109. package/src/interfaces/IconButton.ts +22 -22
  110. package/src/interfaces/Icons.ts +17 -17
  111. package/src/interfaces/Modal.ts +16 -16
  112. package/src/interfaces/Paper.ts +12 -12
  113. package/src/interfaces/ProgressBar.ts +19 -19
  114. package/src/interfaces/RadioGroup.ts +23 -23
  115. package/src/interfaces/RangerSlider.ts +21 -21
  116. package/src/interfaces/Select.ts +17 -17
  117. package/src/interfaces/Tabs.ts +19 -19
  118. package/src/interfaces/Tag.ts +17 -17
  119. package/src/interfaces/TextField.ts +44 -44
  120. package/src/interfaces/TimeLine.ts +11 -11
  121. package/src/interfaces/TimePicker.ts +13 -13
  122. package/src/interfaces/index.ts +23 -23
  123. package/src/providers/NormaProvider.tsx +13 -13
  124. package/src/sample-data-2.json +178 -178
  125. package/src/sample-data.json +177 -177
  126. package/src/stories/Accordion.stories.tsx +65 -65
  127. package/src/stories/Avatar.stories.tsx +123 -123
  128. package/src/stories/Badge.stories.tsx +39 -39
  129. package/src/stories/Box.stories.tsx +35 -35
  130. package/src/stories/Breadcrumb.stories.tsx +44 -44
  131. package/src/stories/Button.stories.tsx +93 -93
  132. package/src/stories/Card.stories.tsx +39 -39
  133. package/src/stories/ChatMessage.stories.tsx +84 -84
  134. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  135. package/src/stories/CheckBox.stories.tsx +88 -88
  136. package/src/stories/DateInput.stories.tsx +51 -51
  137. package/src/stories/DatePicker.stories.tsx +50 -50
  138. package/src/stories/DropDown.stories.tsx +57 -57
  139. package/src/stories/IconButton.stories.tsx +78 -78
  140. package/src/stories/Modal.stories.tsx +195 -195
  141. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  142. package/src/stories/Paper.stories.tsx +53 -53
  143. package/src/stories/ProgressBar.stories.tsx +95 -95
  144. package/src/stories/RadioGroup.stories.tsx +87 -87
  145. package/src/stories/RangerSlider.stories.tsx +58 -58
  146. package/src/stories/Select.stories.tsx +100 -100
  147. package/src/stories/SelectInput.stories.tsx +78 -78
  148. package/src/stories/Table.stories.tsx +372 -372
  149. package/src/stories/Tabs.stories.tsx +61 -61
  150. package/src/stories/Tag.stories.tsx +56 -56
  151. package/src/stories/Text.stories.tsx +37 -37
  152. package/src/stories/TextField.stories.tsx +310 -310
  153. package/src/stories/TextInput.stories.tsx +52 -52
  154. package/src/stories/TimeLine.stories.tsx +35 -35
  155. package/src/stories/TimePicker.stories.tsx +87 -87
  156. package/src/stories/Title.stories.tsx +43 -43
  157. package/src/stories/UncontrolledTable.stories.tsx +337 -337
  158. package/src/stories/UncontrolledTabs.stories.tsx +63 -63
  159. package/src/styles/globals.scss +17 -17
  160. package/src/types/index.ts +204 -204
  161. package/vite.config.ts +15 -15
@@ -1,206 +1,206 @@
1
- import { createTheme } from '@mui/material/styles';
2
-
3
- export const getPalette = () => {
4
- return {
5
- primary: 'rgb(219, 102, 25)',
6
- primaryLight: '#FFDB9F',
7
- primaryMedium: '#FFA84C',
8
- primaryDark: '#B74608',
9
- inherit: 'rgb(102, 102, 102)',
10
- secondary: 'rgb(67, 187, 242)',
11
- error: 'rgb(214, 54, 67)',
12
- warning: 'rgb(255, 195, 0)',
13
- info: 'rgb(113, 213, 247)',
14
- success: 'rgb(107, 194, 53)',
15
- white: '#ffffff',
16
- black: 'rgb(0, 0, 0)',
17
- helper: 'rgb(90, 42, 121)',
18
- secondaryLight: '#D9FCFE',
19
- secondaryMedium: '#71D5F7',
20
- secondaryDark: '#154F8C',
21
- inheritLight: '#A3A3A3',
22
- inheritMedium: '#666666',
23
- inheritDark: '#292929',
24
- whiteLight: '#F5F5F5',
25
- whiteMedium: '#E0E0E0',
26
- whiteDark: '#CCCCCC',
27
- successLight: '#D9F8B0',
28
- successMedium: '#B9EC85',
29
- successDark: '#247010',
30
- errorLight: '#FABEAF',
31
- errorMedium: '#F29085',
32
- errorDark: '#F29085',
33
- warningLight: '#FFF7CC',
34
- warningMedium: '#FFE266',
35
- warningDark: '#936600',
36
- helperLight: '#F3D7F8',
37
- helperMedium: '#BF82D6',
38
- helperDark: '#250D46',
39
- };
40
- };
41
-
42
- export const palette = getPalette();
43
-
44
- export const textColors = {
45
- inherit: palette.inherit,
46
- primary: palette.primary,
47
- secondary: palette.secondary,
48
- error: palette.error,
49
- warning: palette.warning,
50
- info: palette.info,
51
- success: palette.success,
52
- white: palette.white,
53
- black: palette.black,
54
- helper: palette.helper,
55
- primaryLight: palette.primaryLight,
56
- primaryMedium: palette.primaryMedium,
57
- primaryDark: palette.primaryDark,
58
- secondaryLight: palette.secondaryLight,
59
- secondaryMedium: palette.secondaryMedium,
60
- secondaryDark: palette.secondaryDark,
61
- inheritLight: palette.inheritLight,
62
- inheritMedium: palette.inheritMedium,
63
- inheritDark: palette.inheritDark,
64
- whiteLight: palette.whiteLight,
65
- whiteMedium: palette.whiteMedium,
66
- whiteDark: palette.whiteDark,
67
- successLight: palette.successLight,
68
- successMedium: palette.successMedium,
69
- successDark: palette.successDark,
70
- errorLight: palette.errorLight,
71
- errorMedium: palette.errorMedium,
72
- errorDark: palette.errorDark,
73
- warningLight: palette.warningLight,
74
- warningMedium: palette.warningMedium,
75
- warningDark: palette.warningDark,
76
- helperLight: palette.helperLight,
77
- helperMedium: palette.helperMedium,
78
- helperDark: palette.helperDark,
79
- };
80
-
81
- export const backgroundColors = {
82
- inherit: palette.inherit,
83
- primary: palette.primary,
84
- secondary: palette.secondary,
85
- error: palette.error,
86
- warning: palette.warning,
87
- info: palette.info,
88
- success: palette.success,
89
- white: palette.white,
90
- black: palette.black,
91
- primaryLight: palette.primaryLight,
92
- primaryMedium: palette.primaryMedium,
93
- primaryDark: palette.primaryDark,
94
- secondaryLight: palette.secondaryLight,
95
- secondaryMedium: palette.secondaryMedium,
96
- secondaryDark: palette.secondaryDark,
97
- inheritLight: palette.inheritLight,
98
- inheritMedium: palette.inheritMedium,
99
- inheritDark: palette.inheritDark,
100
- whiteLight: palette.whiteLight,
101
- whiteMedium: palette.whiteMedium,
102
- whiteDark: palette.whiteDark,
103
- successLight: palette.successLight,
104
- successMedium: palette.successMedium,
105
- successDark: palette.successDark,
106
- errorLight: palette.errorLight,
107
- errorMedium: palette.errorMedium,
108
- errorDark: palette.errorDark,
109
- warningLight: palette.warningLight,
110
- warningMedium: palette.warningMedium,
111
- warningDark: palette.warningDark,
112
- helperLight: palette.helperLight,
113
- helperMedium: palette.helperMedium,
114
- helperDark: palette.helperDark,
115
- };
116
-
117
- export const olosPalette = {
118
- primary: {
119
- main: palette.primary,
120
- },
121
- secondary: {
122
- main: palette.secondary,
123
- },
124
- error: {
125
- main: palette.error,
126
- },
127
- warning: {
128
- main: palette.warning,
129
- },
130
- info: {
131
- main: palette.info,
132
- },
133
- success: {
134
- main: palette.success,
135
- },
136
- };
137
-
138
- export const lightTheme = createTheme({
139
- palette: {
140
- mode: 'light',
141
- ...olosPalette,
142
- },
143
- });
144
-
145
- export const darkTheme = createTheme({
146
- palette: {
147
- mode: 'dark',
148
- ...olosPalette,
149
- background: {
150
- default: palette.inheritLight,
151
- paper: palette.inheritDark,
152
- },
153
- },
154
- });
155
-
156
- export const themes = {
157
- light: lightTheme,
158
- dark: darkTheme,
159
- };
160
-
161
- type PaletteKey = keyof typeof getPalette;
162
-
163
- const getColor = (key: PaletteKey) => {
164
- const palette = getPalette();
165
- if (palette.hasOwnProperty(key)) {
166
- return palette[key];
167
- } else {
168
- return '#CCC';
169
- }
170
- };
171
-
172
- const extractRGB = (rgbString: string) => {
173
- if (typeof rgbString === 'string') {
174
- const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
175
-
176
- if (match) {
177
- const r = match[1];
178
- const g = match[2];
179
- const b = match[3];
180
- return `${r},${g},${b}`;
181
- }
182
- }
183
- return null;
184
- };
185
-
186
- const lightenRGB = (rgbString: string, amount = 20) => {
187
- console.log('RGB ==> ', rgbString);
188
- if (typeof rgbString === 'string') {
189
- const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
190
-
191
- if (match) {
192
- const r = parseInt(match[1]);
193
- const g = parseInt(match[2]);
194
- const b = parseInt(match[3]);
195
-
196
- const newR = Math.min(255, r + amount);
197
- const newG = Math.min(255, g + amount);
198
- const newB = Math.min(255, b + amount);
199
-
200
- return `rgb(${newR},${newG},${newB})`;
201
- }
202
- }
203
- return null;
204
- };
205
-
206
- export { getColor, extractRGB, lightenRGB };
1
+ import { createTheme } from '@mui/material/styles';
2
+
3
+ export const getPalette = () => {
4
+ return {
5
+ primary: 'rgb(219, 102, 25)',
6
+ primaryLight: '#FFDB9F',
7
+ primaryMedium: '#FFA84C',
8
+ primaryDark: '#B74608',
9
+ inherit: 'rgb(102, 102, 102)',
10
+ secondary: 'rgb(67, 187, 242)',
11
+ error: 'rgb(214, 54, 67)',
12
+ warning: 'rgb(255, 195, 0)',
13
+ info: 'rgb(113, 213, 247)',
14
+ success: 'rgb(107, 194, 53)',
15
+ white: '#ffffff',
16
+ black: 'rgb(0, 0, 0)',
17
+ helper: 'rgb(90, 42, 121)',
18
+ secondaryLight: '#D9FCFE',
19
+ secondaryMedium: '#71D5F7',
20
+ secondaryDark: '#154F8C',
21
+ inheritLight: '#A3A3A3',
22
+ inheritMedium: '#666666',
23
+ inheritDark: '#292929',
24
+ whiteLight: '#F5F5F5',
25
+ whiteMedium: '#E0E0E0',
26
+ whiteDark: '#CCCCCC',
27
+ successLight: '#D9F8B0',
28
+ successMedium: '#B9EC85',
29
+ successDark: '#247010',
30
+ errorLight: '#FABEAF',
31
+ errorMedium: '#F29085',
32
+ errorDark: '#F29085',
33
+ warningLight: '#FFF7CC',
34
+ warningMedium: '#FFE266',
35
+ warningDark: '#936600',
36
+ helperLight: '#F3D7F8',
37
+ helperMedium: '#BF82D6',
38
+ helperDark: '#250D46',
39
+ };
40
+ };
41
+
42
+ export const palette = getPalette();
43
+
44
+ export const textColors = {
45
+ inherit: palette.inherit,
46
+ primary: palette.primary,
47
+ secondary: palette.secondary,
48
+ error: palette.error,
49
+ warning: palette.warning,
50
+ info: palette.info,
51
+ success: palette.success,
52
+ white: palette.white,
53
+ black: palette.black,
54
+ helper: palette.helper,
55
+ primaryLight: palette.primaryLight,
56
+ primaryMedium: palette.primaryMedium,
57
+ primaryDark: palette.primaryDark,
58
+ secondaryLight: palette.secondaryLight,
59
+ secondaryMedium: palette.secondaryMedium,
60
+ secondaryDark: palette.secondaryDark,
61
+ inheritLight: palette.inheritLight,
62
+ inheritMedium: palette.inheritMedium,
63
+ inheritDark: palette.inheritDark,
64
+ whiteLight: palette.whiteLight,
65
+ whiteMedium: palette.whiteMedium,
66
+ whiteDark: palette.whiteDark,
67
+ successLight: palette.successLight,
68
+ successMedium: palette.successMedium,
69
+ successDark: palette.successDark,
70
+ errorLight: palette.errorLight,
71
+ errorMedium: palette.errorMedium,
72
+ errorDark: palette.errorDark,
73
+ warningLight: palette.warningLight,
74
+ warningMedium: palette.warningMedium,
75
+ warningDark: palette.warningDark,
76
+ helperLight: palette.helperLight,
77
+ helperMedium: palette.helperMedium,
78
+ helperDark: palette.helperDark,
79
+ };
80
+
81
+ export const backgroundColors = {
82
+ inherit: palette.inherit,
83
+ primary: palette.primary,
84
+ secondary: palette.secondary,
85
+ error: palette.error,
86
+ warning: palette.warning,
87
+ info: palette.info,
88
+ success: palette.success,
89
+ white: palette.white,
90
+ black: palette.black,
91
+ primaryLight: palette.primaryLight,
92
+ primaryMedium: palette.primaryMedium,
93
+ primaryDark: palette.primaryDark,
94
+ secondaryLight: palette.secondaryLight,
95
+ secondaryMedium: palette.secondaryMedium,
96
+ secondaryDark: palette.secondaryDark,
97
+ inheritLight: palette.inheritLight,
98
+ inheritMedium: palette.inheritMedium,
99
+ inheritDark: palette.inheritDark,
100
+ whiteLight: palette.whiteLight,
101
+ whiteMedium: palette.whiteMedium,
102
+ whiteDark: palette.whiteDark,
103
+ successLight: palette.successLight,
104
+ successMedium: palette.successMedium,
105
+ successDark: palette.successDark,
106
+ errorLight: palette.errorLight,
107
+ errorMedium: palette.errorMedium,
108
+ errorDark: palette.errorDark,
109
+ warningLight: palette.warningLight,
110
+ warningMedium: palette.warningMedium,
111
+ warningDark: palette.warningDark,
112
+ helperLight: palette.helperLight,
113
+ helperMedium: palette.helperMedium,
114
+ helperDark: palette.helperDark,
115
+ };
116
+
117
+ export const olosPalette = {
118
+ primary: {
119
+ main: palette.primary,
120
+ },
121
+ secondary: {
122
+ main: palette.secondary,
123
+ },
124
+ error: {
125
+ main: palette.error,
126
+ },
127
+ warning: {
128
+ main: palette.warning,
129
+ },
130
+ info: {
131
+ main: palette.info,
132
+ },
133
+ success: {
134
+ main: palette.success,
135
+ },
136
+ };
137
+
138
+ export const lightTheme = createTheme({
139
+ palette: {
140
+ mode: 'light',
141
+ ...olosPalette,
142
+ },
143
+ });
144
+
145
+ export const darkTheme = createTheme({
146
+ palette: {
147
+ mode: 'dark',
148
+ ...olosPalette,
149
+ background: {
150
+ default: palette.inheritLight,
151
+ paper: palette.inheritDark,
152
+ },
153
+ },
154
+ });
155
+
156
+ export const themes = {
157
+ light: lightTheme,
158
+ dark: darkTheme,
159
+ };
160
+
161
+ type PaletteKey = keyof typeof getPalette;
162
+
163
+ const getColor = (key: PaletteKey) => {
164
+ const palette = getPalette();
165
+ if (palette.hasOwnProperty(key)) {
166
+ return palette[key];
167
+ } else {
168
+ return '#CCC';
169
+ }
170
+ };
171
+
172
+ const extractRGB = (rgbString: string) => {
173
+ if (typeof rgbString === 'string') {
174
+ const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
175
+
176
+ if (match) {
177
+ const r = match[1];
178
+ const g = match[2];
179
+ const b = match[3];
180
+ return `${r},${g},${b}`;
181
+ }
182
+ }
183
+ return null;
184
+ };
185
+
186
+ const lightenRGB = (rgbString: string, amount = 20) => {
187
+ console.log('RGB ==> ', rgbString);
188
+ if (typeof rgbString === 'string') {
189
+ const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
190
+
191
+ if (match) {
192
+ const r = parseInt(match[1]);
193
+ const g = parseInt(match[2]);
194
+ const b = parseInt(match[3]);
195
+
196
+ const newR = Math.min(255, r + amount);
197
+ const newG = Math.min(255, g + amount);
198
+ const newB = Math.min(255, b + amount);
199
+
200
+ return `rgb(${newR},${newG},${newB})`;
201
+ }
202
+ }
203
+ return null;
204
+ };
205
+
206
+ export { getColor, extractRGB, lightenRGB };
@@ -1,5 +1,5 @@
1
- export * from './borders';
2
- export * from './colors';
3
- export * from './sizes';
4
- export * from './radios';
5
- export * from './alignments';
1
+ export * from './borders';
2
+ export * from './colors';
3
+ export * from './sizes';
4
+ export * from './radios';
5
+ export * from './alignments';
@@ -1,24 +1,24 @@
1
- function getRadioSize(radio: string) {
2
- switch (radio) {
3
- case 'none':
4
- return 'rounded-none';
5
- case 'xs':
6
- return 'rounded-xs';
7
- case 'sm':
8
- return 'rounded-sm';
9
- case 'md':
10
- return 'rounded-md';
11
- case 'lg':
12
- return 'rounded-lg';
13
- case 'xl':
14
- return 'rounded-xl';
15
- case 'xll':
16
- return 'rounded-2xl';
17
- case 'full':
18
- return 'rounded-full';
19
- default:
20
- return 'rounded-none';
21
- }
22
- }
23
-
24
- export { getRadioSize };
1
+ function getRadioSize(radio: string) {
2
+ switch (radio) {
3
+ case 'none':
4
+ return 'rounded-none';
5
+ case 'xs':
6
+ return 'rounded-xs';
7
+ case 'sm':
8
+ return 'rounded-sm';
9
+ case 'md':
10
+ return 'rounded-md';
11
+ case 'lg':
12
+ return 'rounded-lg';
13
+ case 'xl':
14
+ return 'rounded-xl';
15
+ case 'xll':
16
+ return 'rounded-2xl';
17
+ case 'full':
18
+ return 'rounded-full';
19
+ default:
20
+ return 'rounded-none';
21
+ }
22
+ }
23
+
24
+ export { getRadioSize };
@@ -1,72 +1,72 @@
1
- function getSize(size: string) {
2
- switch (size) {
3
- case 'small':
4
- return 'text-sm';
5
- case 'medium':
6
- return 'text-lg';
7
- case 'large':
8
- return 'text-xl';
9
- default:
10
- return 'text-base';
11
- }
12
- }
13
-
14
- function getBtnSize(size: string) {
15
- switch (size) {
16
- case 'small':
17
- return 'px-3 py-2 text-xs font-medium';
18
- case 'medium':
19
- return 'px-5 py-2.5 text-sm font-medium ';
20
- case 'large':
21
- return 'px-6 py-3.5 text-base font-medium font-semibold';
22
- default:
23
- return 'h-10 py-2 px-4 text-lg';
24
- }
25
- }
26
-
27
- function getPaddingSize(size: string) {
28
- switch (size) {
29
- case 'small':
30
- return 'px-4 py-2.5';
31
- case 'medium':
32
- return 'px-5 py-2.5';
33
- case 'large':
34
- return 'px-6 py-3';
35
- default:
36
- return 'px-5 py-2.5';
37
- }
38
- }
39
-
40
- function getHeightSize(size: string) {
41
- switch (size) {
42
- case 'small':
43
- return 'h-6';
44
- case 'medium':
45
- return 'h-10';
46
- case 'large':
47
- return '10';
48
- default:
49
- return 'h-12';
50
- }
51
- }
52
-
53
- function getIconSize(size: string) {
54
- switch (size) {
55
- case 'small':
56
- return 'px-1.5 py-0 h-6 w-6';
57
- case 'medium':
58
- return 'px-1.5 py-0 h-8 w-8';
59
- case 'large':
60
- return 'px-1.5 py-0 h-10 w-10';
61
- default:
62
- return 'px-1.5 py-0 h-8 w-8';
63
- }
64
- }
65
-
66
- const sizes = {
67
- small: 'small',
68
- medium: 'medium',
69
- large: 'large',
70
- };
71
-
72
- export { sizes, getBtnSize, getSize, getPaddingSize, getHeightSize, getIconSize };
1
+ function getSize(size: string) {
2
+ switch (size) {
3
+ case 'small':
4
+ return 'text-sm';
5
+ case 'medium':
6
+ return 'text-lg';
7
+ case 'large':
8
+ return 'text-xl';
9
+ default:
10
+ return 'text-base';
11
+ }
12
+ }
13
+
14
+ function getBtnSize(size: string) {
15
+ switch (size) {
16
+ case 'small':
17
+ return 'px-3 py-2 text-xs font-medium';
18
+ case 'medium':
19
+ return 'px-5 py-2.5 text-sm font-medium ';
20
+ case 'large':
21
+ return 'px-6 py-3.5 text-base font-medium font-semibold';
22
+ default:
23
+ return 'h-10 py-2 px-4 text-lg';
24
+ }
25
+ }
26
+
27
+ function getPaddingSize(size: string) {
28
+ switch (size) {
29
+ case 'small':
30
+ return 'px-4 py-2.5';
31
+ case 'medium':
32
+ return 'px-5 py-2.5';
33
+ case 'large':
34
+ return 'px-6 py-3';
35
+ default:
36
+ return 'px-5 py-2.5';
37
+ }
38
+ }
39
+
40
+ function getHeightSize(size: string) {
41
+ switch (size) {
42
+ case 'small':
43
+ return 'h-6';
44
+ case 'medium':
45
+ return 'h-10';
46
+ case 'large':
47
+ return '10';
48
+ default:
49
+ return 'h-12';
50
+ }
51
+ }
52
+
53
+ function getIconSize(size: string) {
54
+ switch (size) {
55
+ case 'small':
56
+ return 'px-1.5 py-0 h-6 w-6';
57
+ case 'medium':
58
+ return 'px-1.5 py-0 h-8 w-8';
59
+ case 'large':
60
+ return 'px-1.5 py-0 h-10 w-10';
61
+ default:
62
+ return 'px-1.5 py-0 h-8 w-8';
63
+ }
64
+ }
65
+
66
+ const sizes = {
67
+ small: 'small',
68
+ medium: 'medium',
69
+ large: 'large',
70
+ };
71
+
72
+ export { sizes, getBtnSize, getSize, getPaddingSize, getHeightSize, getIconSize };