@cyber-harbour/ui 1.0.53 → 1.0.55

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 (25) hide show
  1. package/dist/index.d.mts +53 -3
  2. package/dist/index.d.ts +53 -3
  3. package/dist/index.js +280 -190
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +276 -186
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -1
  8. package/src/Core/Box/Box.tsx +22 -7
  9. package/src/Core/Drawer/Drawer.tsx +84 -0
  10. package/src/Core/Drawer/index.ts +1 -0
  11. package/src/Core/IconComponents/FolderAlertIcon.tsx +32 -0
  12. package/src/Core/IconComponents/RelationIcon.tsx +28 -0
  13. package/src/Core/IconComponents/index.ts +2 -0
  14. package/src/Core/Input/Input.tsx +46 -56
  15. package/src/Core/Label/Label.tsx +6 -4
  16. package/src/Core/LinerProgress/LinerProgress.tsx +53 -0
  17. package/src/Core/LinerProgress/index.ts +1 -0
  18. package/src/Core/Switch/Switch.tsx +71 -0
  19. package/src/Core/Switch/index.ts +1 -0
  20. package/src/Core/index.ts +3 -0
  21. package/src/Theme/index.ts +1 -0
  22. package/src/Theme/themes/dark.ts +186 -1
  23. package/src/Theme/themes/light.ts +186 -1
  24. package/src/Theme/types.ts +18 -1
  25. package/src/Theme/useTheme.tsx +7 -0
package/src/Theme/themes/dark.ts CHANGED
@@ -36,7 +36,7 @@ export const darkThemePx: Theme = {
36
36
  },
37
37
  disable: '#080A0C',
38
38
  success: '#27AE60',
39
- error: '#FF3B30',
39
+ error: '#C93939',
40
40
  warning: '#F2994A',
41
41
  info: '#2F80ED',
42
42
  },
@@ -160,6 +160,60 @@ export const darkThemePx: Theme = {
160
160
  boxShadow: 'none',
161
161
  },
162
162
  },
163
+ soft: {
164
+ // колір default
165
+ default: {
166
+ background: '#80A0F5',
167
+ text: '#FFFFFF',
168
+ border: '#80A0F5',
169
+ boxShadow: 'none',
170
+ },
171
+ hover: {
172
+ background: '#10253A',
173
+ text: '#FFFFFF',
174
+ border: '#10253A',
175
+ boxShadow: 'none',
176
+ },
177
+ active: {
178
+ background: '#10253A',
179
+ text: '#FFFFFF',
180
+ border: '#10253A',
181
+ boxShadow: 'none',
182
+ },
183
+ disabled: {
184
+ background: '#EBEBEB',
185
+ text: '#99989C',
186
+ border: ' #EBEBEB',
187
+ boxShadow: 'none',
188
+ },
189
+ },
190
+ light: {
191
+ // колір default
192
+ default: {
193
+ background: '#535353',
194
+ text: '#FFFFFF',
195
+ border: '#535353',
196
+ boxShadow: 'none',
197
+ },
198
+ hover: {
199
+ background: '#99989C',
200
+ text: '#FFFFFF',
201
+ border: '#99989C',
202
+ boxShadow: 'none',
203
+ },
204
+ active: {
205
+ background: '#99989C',
206
+ text: '#FFFFFF',
207
+ border: '#99989C',
208
+ boxShadow: 'none',
209
+ },
210
+ disabled: {
211
+ background: '#EBEBEB',
212
+ text: '#99989C',
213
+ border: ' #EBEBEB',
214
+ boxShadow: 'none',
215
+ },
216
+ },
163
217
  },
164
218
  outlined: {
165
219
  default: {
@@ -270,6 +324,60 @@ export const darkThemePx: Theme = {
270
324
  boxShadow: 'none',
271
325
  },
272
326
  },
327
+ soft: {
328
+ // колір default
329
+ default: {
330
+ background: 'transparent',
331
+ text: '#80A0F5',
332
+ border: '#80A0F5',
333
+ boxShadow: 'none',
334
+ },
335
+ hover: {
336
+ background: '#10253A',
337
+ text: '#80A0F5',
338
+ border: '#1E2226',
339
+ boxShadow: 'none',
340
+ },
341
+ active: {
342
+ background: '#10253A',
343
+ text: '#80A0F5',
344
+ border: '#1E2226',
345
+ boxShadow: 'none',
346
+ },
347
+ disabled: {
348
+ background: 'transparent',
349
+ text: '#99989C',
350
+ border: ' #EBEBEB',
351
+ boxShadow: 'none',
352
+ },
353
+ },
354
+ light: {
355
+ // колір default
356
+ default: {
357
+ background: 'transparent',
358
+ text: '#99989C',
359
+ border: '#535353',
360
+ boxShadow: 'none',
361
+ },
362
+ hover: {
363
+ background: '#1E2226',
364
+ text: '#99989C',
365
+ border: '#1E2226',
366
+ boxShadow: 'none',
367
+ },
368
+ active: {
369
+ background: '#535353',
370
+ text: '#99989C',
371
+ border: '#535353',
372
+ boxShadow: 'none',
373
+ },
374
+ disabled: {
375
+ background: 'transparent',
376
+ text: '#99989C',
377
+ border: ' #EBEBEB',
378
+ boxShadow: 'none',
379
+ },
380
+ },
273
381
  },
274
382
  empty: {
275
383
  default: {
@@ -397,6 +505,60 @@ export const darkThemePx: Theme = {
397
505
  boxShadow: 'none',
398
506
  },
399
507
  },
508
+ soft: {
509
+ // колір default
510
+ default: {
511
+ background: 'transparent',
512
+ text: '#80A0F5',
513
+ border: 'transparent',
514
+ boxShadow: 'none',
515
+ },
516
+ hover: {
517
+ background: 'transparent',
518
+ text: '#E5ECFD',
519
+ border: 'transparent',
520
+ boxShadow: 'none',
521
+ },
522
+ active: {
523
+ background: 'transparent',
524
+ text: '#E5ECFD',
525
+ border: 'transparent',
526
+ boxShadow: 'none',
527
+ },
528
+ disabled: {
529
+ background: 'transparent',
530
+ text: '#99989C',
531
+ border: 'transparent',
532
+ boxShadow: 'none',
533
+ },
534
+ },
535
+ light: {
536
+ // колір default
537
+ default: {
538
+ background: 'transparent',
539
+ text: '#535353',
540
+ border: 'transparent',
541
+ boxShadow: 'none',
542
+ },
543
+ hover: {
544
+ background: 'transparent',
545
+ text: '#EEEEEE',
546
+ border: 'transparent',
547
+ boxShadow: 'none',
548
+ },
549
+ active: {
550
+ background: 'transparent',
551
+ text: '#EEEEEE',
552
+ border: 'transparent',
553
+ boxShadow: 'none',
554
+ },
555
+ disabled: {
556
+ background: 'transparent',
557
+ text: '#99989C',
558
+ border: 'transparent',
559
+ boxShadow: 'none',
560
+ },
561
+ },
400
562
  },
401
563
  // Розміри кнопок
402
564
  sizes: {
@@ -776,6 +938,29 @@ export const darkThemePx: Theme = {
776
938
  color: '#ffffff',
777
939
  helpTextColor: '#535353',
778
940
  },
941
+ leanerProgress: {
942
+ background: '#1E2226',
943
+ progressColor: '#158EFF',
944
+ },
945
+ switch: {
946
+ default: {
947
+ background: '#34404C',
948
+ color: '#0F1317',
949
+ },
950
+ checked: {
951
+ background: '#158EFF',
952
+ color: '#0F1317',
953
+ },
954
+ disabled: {
955
+ background: '#1E2226',
956
+ color: '#0F1317',
957
+ },
958
+ },
959
+ drawer: {
960
+ padding: 20,
961
+ width: 573,
962
+ shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
963
+ },
779
964
  };
780
965
 
781
966
  export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;
package/src/Theme/themes/light.ts CHANGED
@@ -35,7 +35,7 @@ export const lightThemePx: Theme = {
35
35
  },
36
36
  disable: '#FAFAFA',
37
37
  success: '#27AE60',
38
- error: '#FF3B30',
38
+ error: '#C93939',
39
39
  warning: '#F2994A',
40
40
  info: '#2F80ED',
41
41
  },
@@ -159,6 +159,60 @@ export const lightThemePx: Theme = {
159
159
  boxShadow: 'none',
160
160
  },
161
161
  },
162
+ soft: {
163
+ // колір default
164
+ default: {
165
+ background: '#80A0F5',
166
+ text: '#FFFFFF',
167
+ border: '#80A0F5',
168
+ boxShadow: 'none',
169
+ },
170
+ hover: {
171
+ background: '#0042EC',
172
+ text: '#FFFFFF',
173
+ border: '#0042EC',
174
+ boxShadow: 'none',
175
+ },
176
+ active: {
177
+ background: '#0042EC',
178
+ text: '#FFFFFF',
179
+ border: '#0042EC',
180
+ boxShadow: 'none',
181
+ },
182
+ disabled: {
183
+ background: '#EBEBEB',
184
+ text: '#99989C',
185
+ border: ' #EBEBEB',
186
+ boxShadow: 'none',
187
+ },
188
+ },
189
+ light: {
190
+ // колір default
191
+ default: {
192
+ background: '#535353',
193
+ text: '#FFFFFF',
194
+ border: '#535353',
195
+ boxShadow: 'none',
196
+ },
197
+ hover: {
198
+ background: '#99989C',
199
+ text: '#FFFFFF',
200
+ border: '#99989C',
201
+ boxShadow: 'none',
202
+ },
203
+ active: {
204
+ background: '#99989C',
205
+ text: '#FFFFFF',
206
+ border: '#99989C',
207
+ boxShadow: 'none',
208
+ },
209
+ disabled: {
210
+ background: '#EBEBEB',
211
+ text: '#99989C',
212
+ border: ' #EBEBEB',
213
+ boxShadow: 'none',
214
+ },
215
+ },
162
216
  },
163
217
  outlined: {
164
218
  default: {
@@ -269,6 +323,60 @@ export const lightThemePx: Theme = {
269
323
  boxShadow: 'none',
270
324
  },
271
325
  },
326
+ soft: {
327
+ // колір default
328
+ default: {
329
+ background: 'transparent',
330
+ text: '#80A0F5',
331
+ border: '#80A0F5',
332
+ boxShadow: 'none',
333
+ },
334
+ hover: {
335
+ background: '#E5ECFD',
336
+ text: '#80A0F5',
337
+ border: '#80A0F5',
338
+ boxShadow: 'none',
339
+ },
340
+ active: {
341
+ background: '#E5ECFD',
342
+ text: '#80A0F5',
343
+ border: '#80A0F5',
344
+ boxShadow: 'none',
345
+ },
346
+ disabled: {
347
+ background: 'transparent',
348
+ text: '#99989C',
349
+ border: ' #EBEBEB',
350
+ boxShadow: 'none',
351
+ },
352
+ },
353
+ light: {
354
+ // колір default
355
+ default: {
356
+ background: 'transparent',
357
+ text: '#535353',
358
+ border: '#EBEBEB',
359
+ boxShadow: 'none',
360
+ },
361
+ hover: {
362
+ background: '#EEEEEE',
363
+ text: '#535353',
364
+ border: '#EBEBEB',
365
+ boxShadow: 'none',
366
+ },
367
+ active: {
368
+ background: '#EEEEEE',
369
+ text: '#535353',
370
+ border: '#EBEBEB',
371
+ boxShadow: 'none',
372
+ },
373
+ disabled: {
374
+ background: 'transparent',
375
+ text: '#99989C',
376
+ border: ' #EBEBEB',
377
+ boxShadow: 'none',
378
+ },
379
+ },
272
380
  },
273
381
  empty: {
274
382
  default: {
@@ -396,6 +504,60 @@ export const lightThemePx: Theme = {
396
504
  boxShadow: 'none',
397
505
  },
398
506
  },
507
+ soft: {
508
+ // колір default
509
+ default: {
510
+ background: 'transparent',
511
+ text: '#80A0F5',
512
+ border: 'transparent',
513
+ boxShadow: 'none',
514
+ },
515
+ hover: {
516
+ background: 'transparent',
517
+ text: '#E5ECFD',
518
+ border: 'transparent',
519
+ boxShadow: 'none',
520
+ },
521
+ active: {
522
+ background: 'transparent',
523
+ text: '#E5ECFD',
524
+ border: 'transparent',
525
+ boxShadow: 'none',
526
+ },
527
+ disabled: {
528
+ background: 'transparent',
529
+ text: '#99989C',
530
+ border: 'transparent',
531
+ boxShadow: 'none',
532
+ },
533
+ },
534
+ light: {
535
+ // колір default
536
+ default: {
537
+ background: 'transparent',
538
+ text: '#535353',
539
+ border: 'transparent',
540
+ boxShadow: 'none',
541
+ },
542
+ hover: {
543
+ background: 'transparent',
544
+ text: '#EEEEEE',
545
+ border: 'transparent',
546
+ boxShadow: 'none',
547
+ },
548
+ active: {
549
+ background: 'transparent',
550
+ text: '#EEEEEE',
551
+ border: 'transparent',
552
+ boxShadow: 'none',
553
+ },
554
+ disabled: {
555
+ background: 'transparent',
556
+ text: '#99989C',
557
+ border: 'transparent',
558
+ boxShadow: 'none',
559
+ },
560
+ },
399
561
  },
400
562
  // Розміри кнопок
401
563
  sizes: {
@@ -775,6 +937,29 @@ export const lightThemePx: Theme = {
775
937
  color: '#101010',
776
938
  helpTextColor: '#99989C',
777
939
  },
940
+ leanerProgress: {
941
+ background: '#EBEBEB',
942
+ progressColor: '#0042EC',
943
+ },
944
+ switch: {
945
+ default: {
946
+ background: '#C7C5C5',
947
+ color: '#FFFFFF',
948
+ },
949
+ checked: {
950
+ background: '#0042EC',
951
+ color: '#FFFFFF',
952
+ },
953
+ disabled: {
954
+ background: '#EBEBEB',
955
+ color: '#FFFFFF',
956
+ },
957
+ },
958
+ drawer: {
959
+ padding: 20,
960
+ width: 573,
961
+ shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
962
+ },
778
963
  };
779
964
 
780
965
  export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;
package/src/Theme/types.ts CHANGED
@@ -2,7 +2,7 @@ import { CSSProperties } from 'styled-components';
2
2
 
3
3
  // Типи для компонентної палітри
4
4
  export type ButtonVariant = 'fill' | 'outlined' | 'empty';
5
- export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
5
+ export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error' | 'soft' | 'light';
6
6
  export type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
7
7
  export type ButtonSize = 'small' | 'medium';
8
8
 
@@ -30,6 +30,7 @@ export type LabelSizeStyle = {
30
30
  helpText: { fontSize: number | string; marginTop: number | string };
31
31
  };
32
32
 
33
+ export type SwitchState = 'default' | 'checked' | 'disabled';
33
34
  // Типи для spacing та breakpoints
34
35
  export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
35
36
 
@@ -287,6 +288,22 @@ export type Theme = {
287
288
  color: string;
288
289
  helpTextColor: string;
289
290
  };
291
+ leanerProgress: {
292
+ background: string;
293
+ progressColor: string;
294
+ };
295
+ switch: Record<
296
+ SwitchState,
297
+ {
298
+ background: string;
299
+ color: string;
300
+ }
301
+ >;
302
+ drawer: {
303
+ padding: string | number;
304
+ width: number;
305
+ shadow: string;
306
+ };
290
307
  };
291
308
 
292
309
  //TODO check and refactoring
package/src/Theme/useTheme.tsx ADDED
@@ -0,0 +1,7 @@
1
+ import { useTheme as useStyledTheme } from 'styled-components';
2
+ import { Theme } from './types';
3
+ export const useTheme = () => {
4
+ const theme: Theme = useStyledTheme();
5
+
6
+ return theme;
7
+ };