@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/input.module.scss CHANGED
@@ -1,89 +1,89 @@
1
- @use 'base/variables' as *;
2
- @use 'base/color' as *;
3
-
4
- .field {
5
- display: flex;
6
- flex-direction: column;
7
- gap: 0.375rem;
8
- font-family: $font-sans;
9
- }
10
-
11
- .fullWidth { width: 100%; }
12
-
13
- .label {
14
- font-size: $text-sm;
15
- font-weight: 500;
16
- color: $color-text-primary;
17
- }
18
-
19
- .inputWrapper {
20
- display: flex;
21
- align-items: center;
22
- background-color: $color-surface;
23
- border: 1px solid $color-border;
24
- border-radius: $radius-sm;
25
- transition: border-color $transition-fast, box-shadow $transition-fast;
26
-
27
- &:focus-within {
28
- border-color: $evo-primary-color;
29
- box-shadow: 0 0 0 3px color-mix(in srgb, $evo-primary-color 18%, transparent);
30
- }
31
-
32
- &.hasError {
33
- border-color: $evo-danger-color;
34
-
35
- &:focus-within {
36
- border-color: $evo-danger-color;
37
- box-shadow: 0 0 0 3px color-mix(in srgb, $evo-danger-color 18%, transparent);
38
- }
39
- }
40
- }
41
-
42
- .sm { padding: 0.25rem 0.5rem; }
43
- .md { padding: 0.5rem 0.75rem; }
44
- .lg { padding: 0.625rem 1rem; }
45
-
46
- .input {
47
- flex: 1;
48
- background: transparent;
49
- border: none;
50
- outline: none;
51
- font-size: $text-sm;
52
- color: $color-text-primary;
53
- font-family: $font-sans;
54
- width: 100%;
55
- min-width: 0;
56
-
57
- &::placeholder { color: $color-text-muted; }
58
-
59
- &:disabled {
60
- opacity: 0.5;
61
- cursor: not-allowed;
62
- }
63
- }
64
-
65
- .adornment {
66
- display: flex;
67
- align-items: center;
68
- color: $color-text-muted;
69
- font-size: $text-sm;
70
- flex-shrink: 0;
71
- padding-right: 0.375rem;
72
- }
73
-
74
- .trailingAdornment {
75
- padding-right: 0;
76
- padding-left: 0.375rem;
77
- }
78
-
79
- .errorText {
80
- font-size: $text-xs;
81
- color: $evo-danger-color;
82
- margin: 0;
83
- }
84
-
85
- .helperText {
86
- font-size: $text-xs;
87
- color: $color-text-muted;
88
- margin: 0;
89
- }
1
+ @use 'base/variables' as *;
2
+ @use 'base/color' as *;
3
+
4
+ .field {
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: 0.375rem;
8
+ font-family: $font-sans;
9
+ }
10
+
11
+ .fullWidth { width: 100%; }
12
+
13
+ .label {
14
+ font-size: $text-sm;
15
+ font-weight: 500;
16
+ color: $color-text-primary;
17
+ }
18
+
19
+ .inputWrapper {
20
+ display: flex;
21
+ align-items: center;
22
+ background-color: $color-surface;
23
+ border: 1px solid $color-border;
24
+ border-radius: $radius-sm;
25
+ transition: border-color $transition-fast, box-shadow $transition-fast;
26
+
27
+ &:focus-within {
28
+ border-color: $evo-primary-color;
29
+ box-shadow: 0 0 0 3px color-mix(in srgb, $evo-primary-color 18%, transparent);
30
+ }
31
+
32
+ &.hasError {
33
+ border-color: $evo-danger-color;
34
+
35
+ &:focus-within {
36
+ border-color: $evo-danger-color;
37
+ box-shadow: 0 0 0 3px color-mix(in srgb, $evo-danger-color 18%, transparent);
38
+ }
39
+ }
40
+ }
41
+
42
+ .sm { padding: 0.25rem 0.5rem; }
43
+ .md { padding: 0.5rem 0.75rem; }
44
+ .lg { padding: 0.625rem 1rem; }
45
+
46
+ .input {
47
+ flex: 1;
48
+ background: transparent;
49
+ border: none;
50
+ outline: none;
51
+ font-size: $text-sm;
52
+ color: $color-text-primary;
53
+ font-family: $font-sans;
54
+ width: 100%;
55
+ min-width: 0;
56
+
57
+ &::placeholder { color: $color-text-muted; }
58
+
59
+ &:disabled {
60
+ opacity: 0.5;
61
+ cursor: not-allowed;
62
+ }
63
+ }
64
+
65
+ .adornment {
66
+ display: flex;
67
+ align-items: center;
68
+ color: $color-text-muted;
69
+ font-size: $text-sm;
70
+ flex-shrink: 0;
71
+ padding-right: 0.375rem;
72
+ }
73
+
74
+ .trailingAdornment {
75
+ padding-right: 0;
76
+ padding-left: 0.375rem;
77
+ }
78
+
79
+ .errorText {
80
+ font-size: $text-xs;
81
+ color: $evo-danger-color;
82
+ margin: 0;
83
+ }
84
+
85
+ .helperText {
86
+ font-size: $text-xs;
87
+ color: $color-text-muted;
88
+ margin: 0;
89
+ }
package/src/css/modal.module.scss CHANGED
@@ -1,105 +1,105 @@
1
- @use 'base/variables' as *;
2
- @use 'base/color' as *;
3
-
4
- @keyframes overlayFadeIn {
5
- from { opacity: 0; }
6
- to { opacity: 1; }
7
- }
8
-
9
- @keyframes dialogSlideUp {
10
- from { opacity: 0; transform: translateY(20px) scale(0.97); }
11
- to { opacity: 1; transform: translateY(0) scale(1); }
12
- }
13
-
14
- .overlay {
15
- position: fixed;
16
- inset: 0;
17
- background-color: $color-backdrop;
18
- backdrop-filter: blur(4px);
19
- display: flex;
20
- align-items: center;
21
- justify-content: center;
22
- z-index: 9999;
23
- padding: 1rem;
24
- animation: overlayFadeIn 150ms ease;
25
- }
26
-
27
- .dialog {
28
- position: relative;
29
- background-color: $color-surface-elevated;
30
- border: 1px solid $color-border;
31
- border-radius: $radius-lg;
32
- box-shadow: 0 25px 60px -12px rgb(0 0 0 / 0.45);
33
- display: flex;
34
- flex-direction: column;
35
- max-height: 90vh;
36
- overflow: hidden;
37
- animation: dialogSlideUp 200ms ease;
38
-
39
- // Mobile-first: dialog stays comfortable on narrow screens.
40
- width: 100%;
41
-
42
- &.sm { max-width: 400px; }
43
- &.md { max-width: 560px; }
44
- &.lg { max-width: 768px; }
45
- &.fullscreen { height: 100%; max-width: none; border-radius: 0; }
46
- }
47
-
48
- .header {
49
- display: flex;
50
- align-items: center;
51
- justify-content: space-between;
52
- padding: 1.25rem 1.5rem;
53
- border-bottom: 1px solid $color-border;
54
- flex-shrink: 0;
55
- gap: 1rem;
56
- }
57
-
58
- .headerContent {
59
- flex: 1;
60
- font-size: $text-lg;
61
- font-weight: 600;
62
- color: $color-text-primary;
63
- font-family: $font-sans;
64
- }
65
-
66
- .closeBtn {
67
- display: inline-flex;
68
- align-items: center;
69
- justify-content: center;
70
- width: 1.75rem;
71
- height: 1.75rem;
72
- background: transparent;
73
- border: none;
74
- border-radius: $radius-sm;
75
- color: $color-text-muted;
76
- cursor: pointer;
77
- font-size: $text-sm;
78
- transition: background-color $transition-fast, color $transition-fast;
79
- flex-shrink: 0;
80
-
81
- &:hover {
82
- background-color: $color-surface-hover;
83
- color: $color-text-primary;
84
- }
85
- }
86
-
87
- .body {
88
- padding: 1.5rem;
89
- overflow-y: auto;
90
- flex: 1;
91
- font-family: $font-sans;
92
- color: $color-text-secondary;
93
- font-size: $text-sm;
94
- line-height: 1.7;
95
- }
96
-
97
- .footer {
98
- display: flex;
99
- align-items: center;
100
- justify-content: flex-end;
101
- gap: 0.5rem;
102
- padding: 1rem 1.5rem;
103
- border-top: 1px solid $color-border;
104
- flex-shrink: 0;
105
- }
1
+ @use 'base/variables' as *;
2
+ @use 'base/color' as *;
3
+
4
+ @keyframes overlayFadeIn {
5
+ from { opacity: 0; }
6
+ to { opacity: 1; }
7
+ }
8
+
9
+ @keyframes dialogSlideUp {
10
+ from { opacity: 0; transform: translateY(20px) scale(0.97); }
11
+ to { opacity: 1; transform: translateY(0) scale(1); }
12
+ }
13
+
14
+ .overlay {
15
+ position: fixed;
16
+ inset: 0;
17
+ background-color: $color-backdrop;
18
+ backdrop-filter: blur(4px);
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ z-index: 9999;
23
+ padding: 1rem;
24
+ animation: overlayFadeIn 150ms ease;
25
+ }
26
+
27
+ .dialog {
28
+ position: relative;
29
+ background-color: $color-surface-elevated;
30
+ border: 1px solid $color-border;
31
+ border-radius: $radius-lg;
32
+ box-shadow: 0 25px 60px -12px rgb(0 0 0 / 0.45);
33
+ display: flex;
34
+ flex-direction: column;
35
+ max-height: 90vh;
36
+ overflow: hidden;
37
+ animation: dialogSlideUp 200ms ease;
38
+
39
+ // Mobile-first: dialog stays comfortable on narrow screens.
40
+ width: 100%;
41
+
42
+ &.sm { max-width: 400px; }
43
+ &.md { max-width: 560px; }
44
+ &.lg { max-width: 768px; }
45
+ &.fullscreen { height: 100%; max-width: none; border-radius: 0; }
46
+ }
47
+
48
+ .header {
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
52
+ padding: 1.25rem 1.5rem;
53
+ border-bottom: 1px solid $color-border;
54
+ flex-shrink: 0;
55
+ gap: 1rem;
56
+ }
57
+
58
+ .headerContent {
59
+ flex: 1;
60
+ font-size: $text-lg;
61
+ font-weight: 600;
62
+ color: $color-text-primary;
63
+ font-family: $font-sans;
64
+ }
65
+
66
+ .closeBtn {
67
+ display: inline-flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ width: 1.75rem;
71
+ height: 1.75rem;
72
+ background: transparent;
73
+ border: none;
74
+ border-radius: $radius-sm;
75
+ color: $color-text-muted;
76
+ cursor: pointer;
77
+ font-size: $text-sm;
78
+ transition: background-color $transition-fast, color $transition-fast;
79
+ flex-shrink: 0;
80
+
81
+ &:hover {
82
+ background-color: $color-surface-hover;
83
+ color: $color-text-primary;
84
+ }
85
+ }
86
+
87
+ .body {
88
+ padding: 1.5rem;
89
+ overflow-y: auto;
90
+ flex: 1;
91
+ font-family: $font-sans;
92
+ color: $color-text-secondary;
93
+ font-size: $text-sm;
94
+ line-height: 1.7;
95
+ }
96
+
97
+ .footer {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: flex-end;
101
+ gap: 0.5rem;
102
+ padding: 1rem 1.5rem;
103
+ border-top: 1px solid $color-border;
104
+ flex-shrink: 0;
105
+ }