@justin_evo/evo-ui 1.2.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 (77) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +70 -70
  3. package/dist/declarations.d.ts +6 -6
  4. package/package.json +52 -52
  5. package/src/Alert/Alert.tsx +49 -49
  6. package/src/AutoComplete/AutoComplete.tsx +810 -810
  7. package/src/Badge/Badge.tsx +53 -53
  8. package/src/Breadcrumb/Breadcrumb.tsx +53 -53
  9. package/src/Button/Button.tsx +125 -125
  10. package/src/Card/Card.tsx +257 -257
  11. package/src/Checkbox/Checkbox.tsx +59 -59
  12. package/src/CommandPalette/CommandPalette.tsx +185 -185
  13. package/src/Container/Container.tsx +31 -31
  14. package/src/Divider/Divider.tsx +31 -31
  15. package/src/Form/Form.tsx +185 -185
  16. package/src/Grid/Grid.tsx +66 -66
  17. package/src/ImageCropper/ImageCropper.tsx +911 -911
  18. package/src/Input/Input.tsx +74 -74
  19. package/src/Modal/Modal.tsx +77 -77
  20. package/src/Nav/Nav.tsx +708 -708
  21. package/src/Notification/Notification.tsx +1503 -1503
  22. package/src/Pagination/Pagination.tsx +76 -76
  23. package/src/Radio/Radio.tsx +69 -69
  24. package/src/RichTextArea/RichTextArea.tsx +886 -886
  25. package/src/Select/Select.tsx +515 -515
  26. package/src/Skeleton/Skeleton.tsx +70 -70
  27. package/src/Stack/Stack.tsx +52 -52
  28. package/src/Table/Table.tsx +335 -335
  29. package/src/Tabs/Tabs.tsx +90 -90
  30. package/src/Theme/ThemeProvider.tsx +253 -253
  31. package/src/Theme/ThemeToggle.tsx +79 -79
  32. package/src/Toggle/Toggle.tsx +48 -48
  33. package/src/Tooltip/Tooltip.tsx +38 -38
  34. package/src/TopNav/TopNav.tsx +1163 -1163
  35. package/src/TreeSelect/TreeSelect.tsx +825 -825
  36. package/src/css/alert.module.scss +93 -93
  37. package/src/css/autocomplete.module.scss +416 -416
  38. package/src/css/badge.module.scss +82 -82
  39. package/src/css/base/_color.scss +159 -159
  40. package/src/css/base/_theme.scss +237 -237
  41. package/src/css/base/_variables.scss +161 -161
  42. package/src/css/breadcrumb.module.scss +50 -50
  43. package/src/css/button.module.scss +385 -385
  44. package/src/css/card.module.scss +217 -217
  45. package/src/css/checkbox.module.scss +123 -123
  46. package/src/css/commandpalette.module.scss +211 -211
  47. package/src/css/container.module.scss +18 -18
  48. package/src/css/divider.module.scss +41 -41
  49. package/src/css/form.module.scss +245 -245
  50. package/src/css/imagecropper.module.scss +397 -397
  51. package/src/css/input.module.scss +89 -89
  52. package/src/css/modal.module.scss +105 -105
  53. package/src/css/nav.module.scss +494 -494
  54. package/src/css/notification.module.scss +691 -691
  55. package/src/css/pagination.module.scss +63 -63
  56. package/src/css/radio.module.scss +89 -89
  57. package/src/css/richtextarea.module.scss +307 -307
  58. package/src/css/select.module.scss +525 -525
  59. package/src/css/skeleton.module.scss +30 -30
  60. package/src/css/table.module.scss +386 -386
  61. package/src/css/tabs.module.scss +63 -63
  62. package/src/css/theme-toggle.module.scss +83 -83
  63. package/src/css/toggle.module.scss +54 -54
  64. package/src/css/tooltip.module.scss +97 -97
  65. package/src/css/topnav.module.scss +568 -568
  66. package/src/css/treeselect.module.scss +558 -558
  67. package/src/css/utilities/_borders.scss +111 -111
  68. package/src/css/utilities/_colors.scss +66 -66
  69. package/src/css/utilities/_effects.scss +216 -216
  70. package/src/css/utilities/_layout.scss +181 -181
  71. package/src/css/utilities/_position.scss +75 -75
  72. package/src/css/utilities/_sizing.scss +138 -138
  73. package/src/css/utilities/_spacing.scss +99 -99
  74. package/src/css/utilities/_typography.scss +121 -121
  75. package/src/css/utilities/index.scss +24 -24
  76. package/src/declarations.d.ts +6 -6
  77. package/src/index.ts +60 -60
package/src/css/base/_variables.scss CHANGED
@@ -1,161 +1,161 @@
1
- @use './color' as *;
2
-
3
- // ==========================================================
4
- // EVO-UI SCSS VARIABLES
5
- // ----------------------------------------------------------
6
- // Two kinds of variables live in this file:
7
- //
8
- // 1. SEMANTIC (theme-aware) — emit `var(--evo-*)` so the
9
- // same component code resolves to light or dark values
10
- // based on the current `data-theme`.
11
- //
12
- // 2. STATIC (sizes, radii, transitions, typography) — plain
13
- // SCSS literals. These don't change between themes.
14
- //
15
- // To override a theme color, set the CSS variable in your
16
- // app — never reassign these SCSS variables directly.
17
- // ==========================================================
18
-
19
- // ---------- Semantic colors (theme-aware) ----------
20
-
21
- // Primary
22
- $evo-primary-color: var(--evo-color-primary);
23
- $evo-primary-hover: var(--evo-color-primary-hover);
24
- $evo-primary-active: var(--evo-color-primary-active);
25
- $evo-primary-focus: var(--evo-color-primary-focus);
26
- $evo-primary-fg: var(--evo-color-primary-fg);
27
- $evo-primary-soft: var(--evo-color-primary-soft);
28
- $evo-primary-rgb: var(--evo-color-primary-rgb);
29
-
30
- // Secondary
31
- $evo-secondary-bg: var(--evo-color-secondary);
32
- $evo-secondary-color: var(--evo-color-secondary);
33
- $evo-secondary-border: var(--evo-color-secondary-border);
34
- $evo-secondary-hover: var(--evo-color-secondary-hover);
35
- $evo-secondary-active: var(--evo-color-secondary-active);
36
- $evo-secondary-text: var(--evo-color-secondary-fg);
37
- $evo-secondary-focus: var(--evo-color-secondary-border);
38
-
39
- // Danger
40
- $evo-danger-color: var(--evo-color-danger);
41
- $evo-danger-hover: var(--evo-color-danger-hover);
42
- $evo-danger-active: var(--evo-color-danger-active);
43
- $evo-danger-focus: var(--evo-color-danger-focus);
44
- $evo-danger-fg: var(--evo-color-danger-fg);
45
- $evo-danger-soft: var(--evo-color-danger-soft);
46
- $evo-danger-rgb: var(--evo-color-danger-rgb);
47
-
48
- // Warning
49
- $evo-warning-color: var(--evo-color-warning);
50
- $evo-warning-hover: var(--evo-color-warning-hover);
51
- $evo-warning-active: var(--evo-color-warning-active);
52
- $evo-warning-focus: var(--evo-color-warning-focus);
53
- $evo-warning-text: var(--evo-color-warning-fg);
54
- $evo-warning-soft: var(--evo-color-warning-soft);
55
-
56
- // Success
57
- $evo-success-color: var(--evo-color-success);
58
- $evo-success-hover: var(--evo-color-success-hover);
59
- $evo-success-active: var(--evo-color-success-active);
60
- $evo-success-focus: var(--evo-color-success-focus);
61
- $evo-success-fg: var(--evo-color-success-fg);
62
- $evo-success-soft: var(--evo-color-success-soft);
63
-
64
- // Info
65
- $evo-info-color: var(--evo-color-info);
66
- $evo-info-hover: var(--evo-color-info-hover);
67
- $evo-info-active: var(--evo-color-info-active);
68
- $evo-info-focus: var(--evo-color-info-focus);
69
- $evo-info-fg: var(--evo-color-info-fg);
70
- $evo-info-soft: var(--evo-color-info-soft);
71
-
72
- // Surfaces, borders, text — the semantic foundation
73
- $color-background: var(--evo-color-bg);
74
- $color-surface: var(--evo-color-surface);
75
- $color-surface-elevated: var(--evo-color-surface-elevated);
76
- $color-surface-sunken: var(--evo-color-surface-sunken);
77
- $color-surface-hover: var(--evo-color-surface-hover);
78
- $color-surface-active: var(--evo-color-surface-active);
79
- $color-border: var(--evo-color-border);
80
- $color-border-strong: var(--evo-color-border-strong);
81
- $color-border-subtle: var(--evo-color-border-subtle);
82
- $color-text-primary: var(--evo-color-text);
83
- $color-text-secondary: var(--evo-color-text-secondary);
84
- $color-text-muted: var(--evo-color-text-muted);
85
- $color-text-inverted: var(--evo-color-text-inverted);
86
- $color-overlay: var(--evo-color-overlay);
87
- $color-backdrop: var(--evo-color-backdrop);
88
-
89
- // Skeleton
90
- $color-skeleton-base: var(--evo-color-skeleton-base);
91
- $color-skeleton-highlight: var(--evo-color-skeleton-highlight);
92
-
93
- // ---------- Card defaults (theme-aware) ----------
94
- $evo-card-bg: $color-surface-elevated;
95
- $evo-card-border: $color-border;
96
- $evo-card-padding: 1rem 0.5rem;
97
-
98
- // ---------- Static design tokens (theme-independent) ----------
99
-
100
- // Button sizing
101
- $evo-btn-padding-y: 0.25rem;
102
- $evo-btn-padding-x: 0.63rem;
103
- $evo-btn-padding-y-sm: 0.13rem;
104
- $evo-btn-padding-x-sm: 0.38rem;
105
- $evo-btn-padding-y-lg: 0.37rem;
106
- $evo-btn-padding-x-lg: 0.88rem;
107
-
108
- $evo-btn-font-size: 0.875rem;
109
- $evo-btn-font-size-sm: 0.75rem;
110
- $evo-btn-font-size-lg: 1rem;
111
- $evo-btn-font-weight: 600;
112
- $evo-btn-line-height: 1.5;
113
-
114
- // Card sizing
115
- $card-width: 280px;
116
- $card-height: 380px;
117
- $card-padding: 1.25rem;
118
-
119
- // Border radius
120
- $radius-sm: 6px;
121
- $radius-md: 12px;
122
- $radius-lg: 16px;
123
- $radius-xl: 20px;
124
- $radius-full: 9999px;
125
-
126
- // Shadows — read `--evo-shadow-color` and `--evo-shadow-strength`
127
- // so they automatically deepen in dark mode.
128
- $shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
129
- $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
130
- $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
131
- $shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
132
- $shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
133
-
134
- // Transitions
135
- $transition-fast: 150ms ease;
136
- $transition-normal: 250ms ease;
137
- $transition-slow: 400ms ease;
138
- $transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
139
-
140
- // Typography
141
- $font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
142
- $font-display: 'Cal Sans', 'Inter', sans-serif;
143
-
144
- $text-xs: 0.75rem;
145
- $text-sm: 0.875rem;
146
- $text-base: 1rem;
147
- $text-lg: 1.125rem;
148
- $text-xl: 1.25rem;
149
- $text-2xl: 1.5rem;
150
- $text-3xl: 1.875rem;
151
-
152
- // Shape & motion
153
- $evo-border-radius: 8px;
154
- $evo-border-radius-sm: 4px;
155
- $evo-border-radius-lg: 12px;
156
- $evo-border-radius-pill: 9999px;
157
-
158
- $evo-btn-transition: 150ms ease;
159
- $evo-btn-disabled-opacity: 0.5;
160
- $evo-btn-outline-offset: 2px;
161
- $evo-btn-outline-width: 2px;
1
+ @use './color' as *;
2
+
3
+ // ==========================================================
4
+ // EVO-UI SCSS VARIABLES
5
+ // ----------------------------------------------------------
6
+ // Two kinds of variables live in this file:
7
+ //
8
+ // 1. SEMANTIC (theme-aware) — emit `var(--evo-*)` so the
9
+ // same component code resolves to light or dark values
10
+ // based on the current `data-theme`.
11
+ //
12
+ // 2. STATIC (sizes, radii, transitions, typography) — plain
13
+ // SCSS literals. These don't change between themes.
14
+ //
15
+ // To override a theme color, set the CSS variable in your
16
+ // app — never reassign these SCSS variables directly.
17
+ // ==========================================================
18
+
19
+ // ---------- Semantic colors (theme-aware) ----------
20
+
21
+ // Primary
22
+ $evo-primary-color: var(--evo-color-primary);
23
+ $evo-primary-hover: var(--evo-color-primary-hover);
24
+ $evo-primary-active: var(--evo-color-primary-active);
25
+ $evo-primary-focus: var(--evo-color-primary-focus);
26
+ $evo-primary-fg: var(--evo-color-primary-fg);
27
+ $evo-primary-soft: var(--evo-color-primary-soft);
28
+ $evo-primary-rgb: var(--evo-color-primary-rgb);
29
+
30
+ // Secondary
31
+ $evo-secondary-bg: var(--evo-color-secondary);
32
+ $evo-secondary-color: var(--evo-color-secondary);
33
+ $evo-secondary-border: var(--evo-color-secondary-border);
34
+ $evo-secondary-hover: var(--evo-color-secondary-hover);
35
+ $evo-secondary-active: var(--evo-color-secondary-active);
36
+ $evo-secondary-text: var(--evo-color-secondary-fg);
37
+ $evo-secondary-focus: var(--evo-color-secondary-border);
38
+
39
+ // Danger
40
+ $evo-danger-color: var(--evo-color-danger);
41
+ $evo-danger-hover: var(--evo-color-danger-hover);
42
+ $evo-danger-active: var(--evo-color-danger-active);
43
+ $evo-danger-focus: var(--evo-color-danger-focus);
44
+ $evo-danger-fg: var(--evo-color-danger-fg);
45
+ $evo-danger-soft: var(--evo-color-danger-soft);
46
+ $evo-danger-rgb: var(--evo-color-danger-rgb);
47
+
48
+ // Warning
49
+ $evo-warning-color: var(--evo-color-warning);
50
+ $evo-warning-hover: var(--evo-color-warning-hover);
51
+ $evo-warning-active: var(--evo-color-warning-active);
52
+ $evo-warning-focus: var(--evo-color-warning-focus);
53
+ $evo-warning-text: var(--evo-color-warning-fg);
54
+ $evo-warning-soft: var(--evo-color-warning-soft);
55
+
56
+ // Success
57
+ $evo-success-color: var(--evo-color-success);
58
+ $evo-success-hover: var(--evo-color-success-hover);
59
+ $evo-success-active: var(--evo-color-success-active);
60
+ $evo-success-focus: var(--evo-color-success-focus);
61
+ $evo-success-fg: var(--evo-color-success-fg);
62
+ $evo-success-soft: var(--evo-color-success-soft);
63
+
64
+ // Info
65
+ $evo-info-color: var(--evo-color-info);
66
+ $evo-info-hover: var(--evo-color-info-hover);
67
+ $evo-info-active: var(--evo-color-info-active);
68
+ $evo-info-focus: var(--evo-color-info-focus);
69
+ $evo-info-fg: var(--evo-color-info-fg);
70
+ $evo-info-soft: var(--evo-color-info-soft);
71
+
72
+ // Surfaces, borders, text — the semantic foundation
73
+ $color-background: var(--evo-color-bg);
74
+ $color-surface: var(--evo-color-surface);
75
+ $color-surface-elevated: var(--evo-color-surface-elevated);
76
+ $color-surface-sunken: var(--evo-color-surface-sunken);
77
+ $color-surface-hover: var(--evo-color-surface-hover);
78
+ $color-surface-active: var(--evo-color-surface-active);
79
+ $color-border: var(--evo-color-border);
80
+ $color-border-strong: var(--evo-color-border-strong);
81
+ $color-border-subtle: var(--evo-color-border-subtle);
82
+ $color-text-primary: var(--evo-color-text);
83
+ $color-text-secondary: var(--evo-color-text-secondary);
84
+ $color-text-muted: var(--evo-color-text-muted);
85
+ $color-text-inverted: var(--evo-color-text-inverted);
86
+ $color-overlay: var(--evo-color-overlay);
87
+ $color-backdrop: var(--evo-color-backdrop);
88
+
89
+ // Skeleton
90
+ $color-skeleton-base: var(--evo-color-skeleton-base);
91
+ $color-skeleton-highlight: var(--evo-color-skeleton-highlight);
92
+
93
+ // ---------- Card defaults (theme-aware) ----------
94
+ $evo-card-bg: $color-surface-elevated;
95
+ $evo-card-border: $color-border;
96
+ $evo-card-padding: 1rem 0.5rem;
97
+
98
+ // ---------- Static design tokens (theme-independent) ----------
99
+
100
+ // Button sizing
101
+ $evo-btn-padding-y: 0.25rem;
102
+ $evo-btn-padding-x: 0.63rem;
103
+ $evo-btn-padding-y-sm: 0.13rem;
104
+ $evo-btn-padding-x-sm: 0.38rem;
105
+ $evo-btn-padding-y-lg: 0.37rem;
106
+ $evo-btn-padding-x-lg: 0.88rem;
107
+
108
+ $evo-btn-font-size: 0.875rem;
109
+ $evo-btn-font-size-sm: 0.75rem;
110
+ $evo-btn-font-size-lg: 1rem;
111
+ $evo-btn-font-weight: 600;
112
+ $evo-btn-line-height: 1.5;
113
+
114
+ // Card sizing
115
+ $card-width: 280px;
116
+ $card-height: 380px;
117
+ $card-padding: 1.25rem;
118
+
119
+ // Border radius
120
+ $radius-sm: 6px;
121
+ $radius-md: 12px;
122
+ $radius-lg: 16px;
123
+ $radius-xl: 20px;
124
+ $radius-full: 9999px;
125
+
126
+ // Shadows — read `--evo-shadow-color` and `--evo-shadow-strength`
127
+ // so they automatically deepen in dark mode.
128
+ $shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
129
+ $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
130
+ $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
131
+ $shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
132
+ $shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
133
+
134
+ // Transitions
135
+ $transition-fast: 150ms ease;
136
+ $transition-normal: 250ms ease;
137
+ $transition-slow: 400ms ease;
138
+ $transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
139
+
140
+ // Typography
141
+ $font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
142
+ $font-display: 'Cal Sans', 'Inter', sans-serif;
143
+
144
+ $text-xs: 0.75rem;
145
+ $text-sm: 0.875rem;
146
+ $text-base: 1rem;
147
+ $text-lg: 1.125rem;
148
+ $text-xl: 1.25rem;
149
+ $text-2xl: 1.5rem;
150
+ $text-3xl: 1.875rem;
151
+
152
+ // Shape & motion
153
+ $evo-border-radius: 8px;
154
+ $evo-border-radius-sm: 4px;
155
+ $evo-border-radius-lg: 12px;
156
+ $evo-border-radius-pill: 9999px;
157
+
158
+ $evo-btn-transition: 150ms ease;
159
+ $evo-btn-disabled-opacity: 0.5;
160
+ $evo-btn-outline-offset: 2px;
161
+ $evo-btn-outline-width: 2px;
package/src/css/breadcrumb.module.scss CHANGED
@@ -1,50 +1,50 @@
1
- @use 'base/variables' as *;
2
- @use 'base/color' as *;
3
-
4
- .breadcrumb {
5
- display: flex;
6
- align-items: center;
7
- flex-wrap: wrap;
8
- list-style: none;
9
- margin: 0;
10
- padding: 0;
11
- gap: 0;
12
- font-family: $font-sans;
13
- }
14
-
15
- .item {
16
- display: flex;
17
- align-items: center;
18
- list-style: none;
19
- }
20
-
21
- .separator {
22
- display: flex;
23
- align-items: center;
24
- color: $color-text-muted;
25
- font-size: $text-sm;
26
- padding: 0 0.375rem;
27
- list-style: none;
28
- user-select: none;
29
- }
30
-
31
- .link {
32
- font-size: $text-sm;
33
- color: $evo-primary-color;
34
- text-decoration: none;
35
- transition: color $transition-fast;
36
- border-radius: $radius-sm;
37
-
38
- &:hover { color: $evo-primary-hover; text-decoration: underline; }
39
- &:focus-visible { outline: 2px solid $evo-primary-focus; outline-offset: 2px; }
40
- }
41
-
42
- .text {
43
- font-size: $text-sm;
44
- color: $color-text-secondary;
45
- }
46
-
47
- .current {
48
- color: $color-text-primary;
49
- font-weight: 500;
50
- }
1
+ @use 'base/variables' as *;
2
+ @use 'base/color' as *;
3
+
4
+ .breadcrumb {
5
+ display: flex;
6
+ align-items: center;
7
+ flex-wrap: wrap;
8
+ list-style: none;
9
+ margin: 0;
10
+ padding: 0;
11
+ gap: 0;
12
+ font-family: $font-sans;
13
+ }
14
+
15
+ .item {
16
+ display: flex;
17
+ align-items: center;
18
+ list-style: none;
19
+ }
20
+
21
+ .separator {
22
+ display: flex;
23
+ align-items: center;
24
+ color: $color-text-muted;
25
+ font-size: $text-sm;
26
+ padding: 0 0.375rem;
27
+ list-style: none;
28
+ user-select: none;
29
+ }
30
+
31
+ .link {
32
+ font-size: $text-sm;
33
+ color: $evo-primary-color;
34
+ text-decoration: none;
35
+ transition: color $transition-fast;
36
+ border-radius: $radius-sm;
37
+
38
+ &:hover { color: $evo-primary-hover; text-decoration: underline; }
39
+ &:focus-visible { outline: 2px solid $evo-primary-focus; outline-offset: 2px; }
40
+ }
41
+
42
+ .text {
43
+ font-size: $text-sm;
44
+ color: $color-text-secondary;
45
+ }
46
+
47
+ .current {
48
+ color: $color-text-primary;
49
+ font-weight: 500;
50
+ }