@phpsoftbox/react-softbox 0.1.0 → 0.2.0

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 (31) hide show
  1. package/README.md +8 -3
  2. package/dist/components/Badge/Badge.module.css +12 -12
  3. package/dist/components/Image/Image.d.ts +7 -0
  4. package/dist/components/Image/Image.js +15 -0
  5. package/dist/components/Image/Image.js.map +1 -0
  6. package/dist/components/Image/Image.module.css +17 -0
  7. package/dist/components/Input/FloatLabel/FloatLabel.module.css +14 -0
  8. package/dist/components/Input/NumberInput.d.ts +3 -1
  9. package/dist/components/Input/NumberInput.js +97 -28
  10. package/dist/components/Input/NumberInput.js.map +1 -1
  11. package/dist/components/Menu/Dropdown.d.ts +36 -3
  12. package/dist/components/Menu/Dropdown.js +71 -3
  13. package/dist/components/Menu/Dropdown.js.map +1 -1
  14. package/dist/components/Menu/Menu.d.ts +4 -1
  15. package/dist/components/Menu/Menu.js +10 -3
  16. package/dist/components/Menu/Menu.js.map +1 -1
  17. package/dist/components/Menu/Menu.module.css +50 -4
  18. package/dist/foundations/index.css +1 -0
  19. package/dist/foundations/tokens.css +31 -22
  20. package/dist/foundations/utilities.css +675 -0
  21. package/dist/index.d.ts +1 -0
  22. package/dist/index.js +1 -0
  23. package/dist/index.js.map +1 -1
  24. package/docs/README.md +1 -0
  25. package/docs/forms.md +9 -0
  26. package/docs/layout.md +15 -0
  27. package/docs/media.md +12 -0
  28. package/docs/navigation.md +29 -1
  29. package/docs/theme.md +28 -0
  30. package/docs/typography.md +11 -0
  31. package/package.json +1 -1
package/dist/components/Menu/Menu.module.css CHANGED
@@ -8,6 +8,10 @@
8
8
  align-items: stretch;
9
9
  }
10
10
 
11
+ .vertical .item {
12
+ width: 100%;
13
+ }
14
+
11
15
  .horizontal {
12
16
  flex-direction: row;
13
17
  align-items: center;
@@ -24,10 +28,22 @@
24
28
  color: var(--color-text);
25
29
  cursor: pointer;
26
30
  font-weight: 600;
27
- font-size: 14px;
31
+ font-size: var(--font-size-4);
28
32
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
29
33
  }
30
34
 
35
+ .label {
36
+ display: inline-flex;
37
+ align-items: center;
38
+ gap: 6px;
39
+ }
40
+
41
+ .meta {
42
+ margin-left: auto;
43
+ display: inline-flex;
44
+ align-items: center;
45
+ }
46
+
31
47
  .item:hover {
32
48
  border-color: rgba(79, 230, 163, 0.35);
33
49
  background: rgba(79, 230, 163, 0.08);
@@ -50,6 +66,27 @@
50
66
  cursor: not-allowed;
51
67
  }
52
68
 
69
+ .staticItem {
70
+ cursor: default;
71
+ border: none;
72
+ background: transparent;
73
+ padding: 0;
74
+ display: inline-flex;
75
+ align-items: center;
76
+ gap: 10px;
77
+ width: 100%;
78
+ }
79
+
80
+ .staticItem:hover {
81
+ border-color: transparent;
82
+ background: transparent;
83
+ }
84
+
85
+ .staticItem:focus-visible {
86
+ outline: none;
87
+ box-shadow: none;
88
+ }
89
+
53
90
  .divider {
54
91
  height: 1px;
55
92
  background: var(--color-divider);
@@ -182,19 +219,20 @@
182
219
  .dropdownMenu {
183
220
  position: absolute;
184
221
  top: calc(100% + 8px);
185
- min-width: 180px;
222
+ width: max-content;
186
223
  max-width: calc(100vw - 24px);
187
224
  background: var(--surface-panel);
188
225
  border: 1px solid var(--color-line);
189
226
  border-radius: var(--radius-md);
190
- padding: 8px;
227
+ padding: 16px;
191
228
  box-shadow: var(--shadow-soft);
192
229
  z-index: 10;
193
230
  transform-origin: top right;
194
231
  animation: dropdown-in 0.18s ease;
195
232
  box-sizing: border-box;
196
233
  white-space: normal;
197
- overflow-wrap: anywhere;
234
+ overflow-wrap: break-word;
235
+ word-break: break-word;
198
236
  }
199
237
 
200
238
  .align-left {
@@ -205,6 +243,14 @@
205
243
  right: 0;
206
244
  }
207
245
 
246
+ .dropdownHeader {
247
+ letter-spacing: 0.14em;
248
+ text-transform: uppercase;
249
+ color: var(--color-muted);
250
+ font-weight: 600;
251
+ padding: 8px 0;
252
+ }
253
+
208
254
  @media (max-width: 820px) {
209
255
  .horizontal {
210
256
  flex-wrap: wrap;
package/dist/foundations/index.css CHANGED
@@ -1,3 +1,4 @@
1
1
  @import "./tokens.css";
2
2
  @import "./typography.css";
3
3
  @import "./layout.css";
4
+ @import "./utilities.css";
package/dist/foundations/tokens.css CHANGED
@@ -1,6 +1,15 @@
1
1
  :root {
2
2
  color-scheme: dark;
3
3
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
4
+ --font-size-1: 11px;
5
+ --font-size-2: 12px;
6
+ --font-size-3: 13px;
7
+ --font-size-4: 14px;
8
+ --font-size-5: 16px;
9
+ --font-size-6: 18px;
10
+ --font-size-7: 20px;
11
+ --font-size-8: 24px;
12
+ --font-size-9: 28px;
4
13
 
5
14
  --color-bg: #0b1626;
6
15
  --color-surface: #0f1e33;
@@ -14,28 +23,28 @@
14
23
 
15
24
  --color-on-solid: #06201c;
16
25
 
17
- --badge-default-bg: rgba(30, 51, 85, 0.45);
18
- --badge-default-border: rgba(30, 51, 85, 0.7);
26
+ --badge-default-bg: #1e3355;
27
+ --badge-default-border: #2b4268;
19
28
  --badge-default-color: var(--color-muted);
20
29
 
21
- --badge-primary-bg: rgba(79, 230, 163, 0.2);
22
- --badge-primary-border: rgba(79, 230, 163, 0.4);
30
+ --badge-primary-bg: #0f3a2d;
31
+ --badge-primary-border: #1a6a4f;
23
32
  --badge-primary-color: var(--color-mint);
24
33
 
25
- --badge-info-bg: rgba(30, 99, 233, 0.2);
26
- --badge-info-border: rgba(30, 99, 233, 0.45);
34
+ --badge-info-bg: #122a4d;
35
+ --badge-info-border: #264a8b;
27
36
  --badge-info-color: #9cc0ff;
28
37
 
29
- --badge-success-bg: rgba(47, 186, 122, 0.16);
30
- --badge-success-border: rgba(47, 186, 122, 0.45);
38
+ --badge-success-bg: #103b2a;
39
+ --badge-success-border: #1f6b4a;
31
40
  --badge-success-color: #2fba7a;
32
41
 
33
- --badge-warning-bg: rgba(246, 200, 106, 0.18);
34
- --badge-warning-border: rgba(246, 200, 106, 0.45);
42
+ --badge-warning-bg: #5a4318;
43
+ --badge-warning-border: #8b6425;
35
44
  --badge-warning-color: #f6c86a;
36
45
 
37
- --badge-danger-bg: rgba(255, 107, 107, 0.18);
38
- --badge-danger-border: rgba(255, 107, 107, 0.45);
46
+ --badge-danger-bg: #4c2222;
47
+ --badge-danger-border: #7a3030;
39
48
  --badge-danger-color: #ff6b6b;
40
49
 
41
50
  --btn-default-start: #4b5d78;
@@ -171,24 +180,24 @@
171
180
  --badge-default-border: #c5d2e6;
172
181
  --badge-default-color: #4f5d73;
173
182
 
174
- --badge-primary-bg: rgba(20, 201, 214, 0.22);
175
- --badge-primary-border: rgba(20, 201, 214, 0.6);
183
+ --badge-primary-bg: #c9f3f0;
184
+ --badge-primary-border: #86d7dc;
176
185
  --badge-primary-color: #0a6f7a;
177
186
 
178
- --badge-info-bg: rgba(30, 99, 233, 0.18);
179
- --badge-info-border: rgba(30, 99, 233, 0.55);
187
+ --badge-info-bg: #cddcff;
188
+ --badge-info-border: #8aa8ff;
180
189
  --badge-info-color: #1e4fb8;
181
190
 
182
- --badge-success-bg: rgba(79, 230, 163, 0.22);
183
- --badge-success-border: rgba(42, 186, 122, 0.6);
191
+ --badge-success-bg: #c8f0dc;
192
+ --badge-success-border: #7fceaa;
184
193
  --badge-success-color: #1b7f58;
185
194
 
186
- --badge-warning-bg: rgba(246, 200, 106, 0.25);
187
- --badge-warning-border: rgba(246, 200, 106, 0.65);
195
+ --badge-warning-bg: #ffe0a6;
196
+ --badge-warning-border: #e0b255;
188
197
  --badge-warning-color: #9a6b00;
189
198
 
190
- --badge-danger-bg: rgba(255, 107, 107, 0.2);
191
- --badge-danger-border: rgba(255, 107, 107, 0.6);
199
+ --badge-danger-bg: #ffc2c2;
200
+ --badge-danger-border: #e08b8b;
192
201
  --badge-danger-color: #b93c3c;
193
202
 
194
203
  --btn-default-start: #8a9bb6;