@justin_evo/evo-ui 1.1.0 → 1.2.1

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 (80) hide show
  1. package/README.md +3 -3
  2. package/dist/TopNav/TopNav.d.ts +19 -0
  3. package/dist/declarations.d.ts +6 -6
  4. package/dist/evo-ui.css +1 -1
  5. package/dist/index.cjs.js +1 -1
  6. package/dist/index.es.js +3301 -3197
  7. package/package.json +52 -52
  8. package/src/Alert/Alert.tsx +49 -49
  9. package/src/AutoComplete/AutoComplete.tsx +810 -810
  10. package/src/Badge/Badge.tsx +53 -53
  11. package/src/Breadcrumb/Breadcrumb.tsx +53 -53
  12. package/src/Button/Button.tsx +125 -125
  13. package/src/Card/Card.tsx +257 -257
  14. package/src/Checkbox/Checkbox.tsx +59 -59
  15. package/src/CommandPalette/CommandPalette.tsx +185 -185
  16. package/src/Container/Container.tsx +31 -31
  17. package/src/Divider/Divider.tsx +31 -31
  18. package/src/Form/Form.tsx +185 -185
  19. package/src/Grid/Grid.tsx +66 -66
  20. package/src/ImageCropper/ImageCropper.tsx +911 -911
  21. package/src/Input/Input.tsx +74 -74
  22. package/src/Modal/Modal.tsx +77 -77
  23. package/src/Nav/Nav.tsx +708 -708
  24. package/src/Notification/Notification.tsx +1503 -1503
  25. package/src/Pagination/Pagination.tsx +76 -76
  26. package/src/Radio/Radio.tsx +69 -69
  27. package/src/RichTextArea/RichTextArea.tsx +886 -869
  28. package/src/Select/Select.tsx +515 -515
  29. package/src/Skeleton/Skeleton.tsx +70 -70
  30. package/src/Stack/Stack.tsx +52 -52
  31. package/src/Table/Table.tsx +335 -335
  32. package/src/Tabs/Tabs.tsx +90 -90
  33. package/src/Theme/ThemeProvider.tsx +253 -253
  34. package/src/Theme/ThemeToggle.tsx +79 -79
  35. package/src/Toggle/Toggle.tsx +48 -48
  36. package/src/Tooltip/Tooltip.tsx +38 -38
  37. package/src/TopNav/TopNav.tsx +1163 -994
  38. package/src/TreeSelect/TreeSelect.tsx +825 -825
  39. package/src/css/alert.module.scss +93 -93
  40. package/src/css/autocomplete.module.scss +416 -416
  41. package/src/css/badge.module.scss +82 -82
  42. package/src/css/base/_color.scss +159 -159
  43. package/src/css/base/_theme.scss +237 -237
  44. package/src/css/base/_variables.scss +161 -161
  45. package/src/css/breadcrumb.module.scss +50 -50
  46. package/src/css/button.module.scss +385 -385
  47. package/src/css/card.module.scss +217 -217
  48. package/src/css/checkbox.module.scss +123 -120
  49. package/src/css/commandpalette.module.scss +211 -211
  50. package/src/css/container.module.scss +18 -18
  51. package/src/css/divider.module.scss +41 -41
  52. package/src/css/form.module.scss +245 -245
  53. package/src/css/imagecropper.module.scss +397 -397
  54. package/src/css/input.module.scss +89 -89
  55. package/src/css/modal.module.scss +105 -105
  56. package/src/css/nav.module.scss +494 -494
  57. package/src/css/notification.module.scss +691 -691
  58. package/src/css/pagination.module.scss +63 -63
  59. package/src/css/radio.module.scss +89 -89
  60. package/src/css/richtextarea.module.scss +307 -307
  61. package/src/css/select.module.scss +525 -525
  62. package/src/css/skeleton.module.scss +30 -30
  63. package/src/css/table.module.scss +386 -386
  64. package/src/css/tabs.module.scss +63 -63
  65. package/src/css/theme-toggle.module.scss +83 -83
  66. package/src/css/toggle.module.scss +54 -54
  67. package/src/css/tooltip.module.scss +97 -97
  68. package/src/css/topnav.module.scss +568 -396
  69. package/src/css/treeselect.module.scss +558 -558
  70. package/src/css/utilities/_borders.scss +111 -111
  71. package/src/css/utilities/_colors.scss +66 -66
  72. package/src/css/utilities/_effects.scss +216 -216
  73. package/src/css/utilities/_layout.scss +181 -181
  74. package/src/css/utilities/_position.scss +75 -75
  75. package/src/css/utilities/_sizing.scss +138 -138
  76. package/src/css/utilities/_spacing.scss +99 -99
  77. package/src/css/utilities/_typography.scss +121 -121
  78. package/src/css/utilities/index.scss +24 -24
  79. package/src/declarations.d.ts +6 -6
  80. package/src/index.ts +60 -60
package/src/css/alert.module.scss CHANGED
@@ -1,93 +1,93 @@
1
- @use 'base/variables' as *;
2
- @use 'base/color' as *;
3
-
4
- .alert {
5
- display: flex;
6
- align-items: flex-start;
7
- gap: 0.75rem;
8
- padding: 1rem;
9
- border-radius: $radius-md;
10
- border: 1px solid transparent;
11
- font-family: $font-sans;
12
-
13
- &.success {
14
- background-color: color-mix(in srgb, $evo-success-color 10%, transparent);
15
- border-color: color-mix(in srgb, $evo-success-color 28%, transparent);
16
-
17
- .alertIcon { background-color: $evo-success-color; }
18
- .alertTitle { color: $evo-success-color; }
19
- }
20
-
21
- &.error {
22
- background-color: color-mix(in srgb, $evo-danger-color 10%, transparent);
23
- border-color: color-mix(in srgb, $evo-danger-color 28%, transparent);
24
-
25
- .alertIcon { background-color: $evo-danger-color; }
26
- .alertTitle { color: $evo-danger-color; }
27
- }
28
-
29
- &.warning {
30
- background-color: color-mix(in srgb, $evo-warning-color 10%, transparent);
31
- border-color: color-mix(in srgb, $evo-warning-color 28%, transparent);
32
-
33
- .alertIcon { background-color: $evo-warning-color; }
34
- .alertTitle { color: $evo-warning-color; }
35
- }
36
-
37
- &.info {
38
- background-color: color-mix(in srgb, $evo-info-color 10%, transparent);
39
- border-color: color-mix(in srgb, $evo-info-color 28%, transparent);
40
-
41
- .alertIcon { background-color: $evo-info-color; }
42
- .alertTitle { color: $evo-info-color; }
43
- }
44
- }
45
-
46
- .alertIcon {
47
- display: inline-flex;
48
- align-items: center;
49
- justify-content: center;
50
- width: 1.25rem;
51
- height: 1.25rem;
52
- border-radius: 50%;
53
- color: #fff;
54
- font-size: $text-xs;
55
- font-weight: 700;
56
- flex-shrink: 0;
57
- margin-top: 0.0625rem;
58
- }
59
-
60
- .alertContent {
61
- flex: 1;
62
- min-width: 0;
63
- }
64
-
65
- .alertTitle {
66
- font-size: $text-sm;
67
- font-weight: 600;
68
- margin: 0 0 0.25rem;
69
- }
70
-
71
- .alertDescription {
72
- font-size: $text-sm;
73
- color: $color-text-secondary;
74
- margin: 0;
75
- line-height: 1.5;
76
- }
77
-
78
- .dismissBtn {
79
- display: inline-flex;
80
- align-items: center;
81
- justify-content: center;
82
- background: transparent;
83
- border: none;
84
- cursor: pointer;
85
- color: $color-text-muted;
86
- font-size: $text-xs;
87
- padding: 0.125rem;
88
- border-radius: $radius-sm;
89
- transition: color $transition-fast;
90
- flex-shrink: 0;
91
-
92
- &:hover { color: $color-text-primary; }
93
- }
1
+ @use 'base/variables' as *;
2
+ @use 'base/color' as *;
3
+
4
+ .alert {
5
+ display: flex;
6
+ align-items: flex-start;
7
+ gap: 0.75rem;
8
+ padding: 1rem;
9
+ border-radius: $radius-md;
10
+ border: 1px solid transparent;
11
+ font-family: $font-sans;
12
+
13
+ &.success {
14
+ background-color: color-mix(in srgb, $evo-success-color 10%, transparent);
15
+ border-color: color-mix(in srgb, $evo-success-color 28%, transparent);
16
+
17
+ .alertIcon { background-color: $evo-success-color; }
18
+ .alertTitle { color: $evo-success-color; }
19
+ }
20
+
21
+ &.error {
22
+ background-color: color-mix(in srgb, $evo-danger-color 10%, transparent);
23
+ border-color: color-mix(in srgb, $evo-danger-color 28%, transparent);
24
+
25
+ .alertIcon { background-color: $evo-danger-color; }
26
+ .alertTitle { color: $evo-danger-color; }
27
+ }
28
+
29
+ &.warning {
30
+ background-color: color-mix(in srgb, $evo-warning-color 10%, transparent);
31
+ border-color: color-mix(in srgb, $evo-warning-color 28%, transparent);
32
+
33
+ .alertIcon { background-color: $evo-warning-color; }
34
+ .alertTitle { color: $evo-warning-color; }
35
+ }
36
+
37
+ &.info {
38
+ background-color: color-mix(in srgb, $evo-info-color 10%, transparent);
39
+ border-color: color-mix(in srgb, $evo-info-color 28%, transparent);
40
+
41
+ .alertIcon { background-color: $evo-info-color; }
42
+ .alertTitle { color: $evo-info-color; }
43
+ }
44
+ }
45
+
46
+ .alertIcon {
47
+ display: inline-flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ width: 1.25rem;
51
+ height: 1.25rem;
52
+ border-radius: 50%;
53
+ color: #fff;
54
+ font-size: $text-xs;
55
+ font-weight: 700;
56
+ flex-shrink: 0;
57
+ margin-top: 0.0625rem;
58
+ }
59
+
60
+ .alertContent {
61
+ flex: 1;
62
+ min-width: 0;
63
+ }
64
+
65
+ .alertTitle {
66
+ font-size: $text-sm;
67
+ font-weight: 600;
68
+ margin: 0 0 0.25rem;
69
+ }
70
+
71
+ .alertDescription {
72
+ font-size: $text-sm;
73
+ color: $color-text-secondary;
74
+ margin: 0;
75
+ line-height: 1.5;
76
+ }
77
+
78
+ .dismissBtn {
79
+ display: inline-flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ background: transparent;
83
+ border: none;
84
+ cursor: pointer;
85
+ color: $color-text-muted;
86
+ font-size: $text-xs;
87
+ padding: 0.125rem;
88
+ border-radius: $radius-sm;
89
+ transition: color $transition-fast;
90
+ flex-shrink: 0;
91
+
92
+ &:hover { color: $color-text-primary; }
93
+ }