@kwtv/components 0.2.0 → 0.4.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 (56) hide show
  1. package/README.md +52 -9
  2. package/package.json +2 -2
  3. package/src/astro/Accordion.astro +10 -6
  4. package/src/astro/AccordionItem.astro +55 -45
  5. package/src/astro/ActiveFilterTags.astro +41 -28
  6. package/src/astro/Alert.astro +45 -41
  7. package/src/astro/Badge.astro +80 -76
  8. package/src/astro/Band.astro +104 -58
  9. package/src/astro/Breadcrumb.astro +38 -30
  10. package/src/astro/Button.astro +135 -129
  11. package/src/astro/Card.astro +72 -62
  12. package/src/astro/CartLine.astro +72 -58
  13. package/src/astro/Checkbox.astro +36 -32
  14. package/src/astro/Chip.astro +68 -64
  15. package/src/astro/ChipRail.astro +6 -1
  16. package/src/astro/DotGrid.astro +55 -42
  17. package/src/astro/EmptyState.astro +29 -23
  18. package/src/astro/FilterGroup.astro +29 -26
  19. package/src/astro/Filters.astro +57 -47
  20. package/src/astro/Footer.astro +195 -178
  21. package/src/astro/FooterColumn.astro +39 -35
  22. package/src/astro/Header.astro +80 -67
  23. package/src/astro/Icon.astro +4 -2
  24. package/src/astro/IconButton.astro +67 -61
  25. package/src/astro/Marquee.astro +43 -41
  26. package/src/astro/NavDropdown.astro +169 -149
  27. package/src/astro/NavLink.astro +59 -56
  28. package/src/astro/Newsletter.astro +64 -56
  29. package/src/astro/Pager.astro +71 -46
  30. package/src/astro/PickCard.astro +72 -68
  31. package/src/astro/ProductCard.astro +134 -119
  32. package/src/astro/Radio.astro +36 -32
  33. package/src/astro/Skeleton.astro +60 -42
  34. package/src/astro/Social.astro +26 -21
  35. package/src/astro/StepIndicator.astro +70 -54
  36. package/src/astro/Sticker.astro +74 -49
  37. package/src/astro/Swatch.astro +44 -40
  38. package/src/astro/SwipeCarousel.astro +5 -1
  39. package/src/astro/Table.astro +66 -56
  40. package/src/astro/TableCard.astro +45 -37
  41. package/src/astro/TextField.astro +104 -91
  42. package/src/astro/Totals.astro +39 -35
  43. package/src/react/Drawer.css +60 -56
  44. package/src/react/Drawer.tsx +1 -5
  45. package/src/react/Modal.css +97 -93
  46. package/src/react/Modal.tsx +4 -6
  47. package/src/react/NewsCarousel.css +108 -104
  48. package/src/react/NewsCarousel.tsx +7 -1
  49. package/src/react/QuantityStepper.css +84 -80
  50. package/src/react/Select.css +159 -155
  51. package/src/react/Select.tsx +8 -2
  52. package/src/react/Toast.css +128 -124
  53. package/src/react/Toast.tsx +38 -4
  54. package/src/styles/base.css +30 -26
  55. package/src/styles/controls.css +183 -179
  56. package/src/styles/motion.css +203 -199
package/src/styles/controls.css CHANGED
@@ -11,201 +11,205 @@
11
11
  * before this file.
12
12
  */
13
13
 
14
- /* ---- Button --------------------------------------------------------------- */
15
- .ui-btn {
16
- --_pad-x: var(--space-5);
17
- display: inline-flex;
18
- align-items: center;
19
- justify-content: center;
20
- gap: var(--space-2);
21
- position: relative;
22
- min-height: 40px;
23
- padding: var(--space-2) var(--_pad-x);
24
- border: 1px solid transparent;
25
- border-radius: var(--radius-md);
26
- font-family: var(--font-sans);
27
- font-size: var(--text-sm);
28
- font-weight: var(--weight-semibold);
29
- line-height: 1;
30
- text-decoration: none;
31
- cursor: pointer;
32
- transition:
33
- background-color var(--duration-fast) var(--ease-standard),
34
- border-color var(--duration-fast) var(--ease-standard),
35
- transform var(--duration-fast) var(--ease-standard);
36
- }
14
+ @layer reset, tokens, base, components, motion, utilities;
37
15
 
38
- .ui-btn--sm {
39
- min-height: 32px;
40
- --_pad-x: var(--space-4);
41
- font-size: var(--text-xs);
42
- }
43
- .ui-btn--md {
44
- min-height: 40px;
45
- }
46
- .ui-btn--lg {
47
- min-height: 48px;
48
- --_pad-x: var(--space-6);
49
- font-size: var(--text-base);
50
- }
16
+ @layer components {
17
+ /* ---- Button --------------------------------------------------------------- */
18
+ .ui-btn {
19
+ --_pad-x: var(--space-5);
20
+ display: inline-flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ gap: var(--space-2);
24
+ position: relative;
25
+ min-height: 40px;
26
+ padding: var(--space-2) var(--_pad-x);
27
+ border: 1px solid transparent;
28
+ border-radius: var(--radius-md);
29
+ font-family: var(--font-sans);
30
+ font-size: var(--text-sm);
31
+ font-weight: var(--weight-semibold);
32
+ line-height: 1;
33
+ text-decoration: none;
34
+ cursor: pointer;
35
+ transition:
36
+ background-color var(--duration-fast) var(--ease-standard),
37
+ border-color var(--duration-fast) var(--ease-standard),
38
+ transform var(--duration-fast) var(--ease-standard);
39
+ }
51
40
 
52
- .ui-btn--block {
53
- display: flex;
54
- width: 100%;
55
- }
41
+ .ui-btn--sm {
42
+ min-height: 32px;
43
+ --_pad-x: var(--space-4);
44
+ font-size: var(--text-xs);
45
+ }
46
+ .ui-btn--md {
47
+ min-height: 40px;
48
+ }
49
+ .ui-btn--lg {
50
+ min-height: 48px;
51
+ --_pad-x: var(--space-6);
52
+ font-size: var(--text-base);
53
+ }
56
54
 
57
- .ui-btn--primary {
58
- background: var(--primary);
59
- color: var(--primary-fg);
60
- }
61
- .ui-btn--primary:hover,
62
- .ui-btn--primary.is-hover {
63
- background: var(--primary-hover);
64
- }
55
+ .ui-btn--block {
56
+ display: flex;
57
+ width: 100%;
58
+ }
65
59
 
66
- .ui-btn--secondary {
67
- background: transparent;
68
- border-color: var(--border-strong);
69
- color: var(--text);
70
- }
71
- .ui-btn--secondary:hover,
72
- .ui-btn--secondary.is-hover {
73
- background: var(--surface-hover);
74
- }
60
+ .ui-btn--primary {
61
+ background: var(--primary);
62
+ color: var(--primary-fg);
63
+ }
64
+ .ui-btn--primary:hover,
65
+ .ui-btn--primary.is-hover {
66
+ background: var(--primary-hover);
67
+ }
75
68
 
76
- .ui-btn--accent {
77
- background: var(--accent);
78
- color: var(--accent-fg);
79
- }
80
- .ui-btn--accent:hover,
81
- .ui-btn--accent.is-hover {
82
- background: var(--accent-hover);
83
- }
69
+ .ui-btn--secondary {
70
+ background: transparent;
71
+ border-color: var(--border-strong);
72
+ color: var(--text);
73
+ }
74
+ .ui-btn--secondary:hover,
75
+ .ui-btn--secondary.is-hover {
76
+ background: var(--surface-hover);
77
+ }
84
78
 
85
- .ui-btn--ghost {
86
- background: transparent;
87
- color: var(--link);
88
- padding-inline: var(--space-3);
89
- }
90
- .ui-btn--ghost:hover,
91
- .ui-btn--ghost.is-hover {
92
- background: var(--surface-hover);
93
- color: var(--link-hover);
94
- }
79
+ .ui-btn--accent {
80
+ background: var(--accent);
81
+ color: var(--accent-fg);
82
+ }
83
+ .ui-btn--accent:hover,
84
+ .ui-btn--accent.is-hover {
85
+ background: var(--accent-hover);
86
+ }
95
87
 
96
- .ui-btn:focus-visible,
97
- .ui-btn.is-focus {
98
- outline: 2px solid var(--focus);
99
- outline-offset: 2px;
100
- box-shadow: 0 0 0 4px var(--focus-outer);
101
- }
88
+ .ui-btn--ghost {
89
+ background: transparent;
90
+ color: var(--link);
91
+ padding-inline: var(--space-3);
92
+ }
93
+ .ui-btn--ghost:hover,
94
+ .ui-btn--ghost.is-hover {
95
+ background: var(--surface-hover);
96
+ color: var(--link-hover);
97
+ }
102
98
 
103
- .ui-btn:active,
104
- .ui-btn.is-active {
105
- transform: translateY(1px);
106
- }
99
+ .ui-btn:focus-visible,
100
+ .ui-btn.is-focus {
101
+ outline: 2px solid var(--focus);
102
+ outline-offset: 2px;
103
+ box-shadow: 0 0 0 4px var(--focus-outer);
104
+ }
107
105
 
108
- .ui-btn:disabled,
109
- .ui-btn[aria-disabled="true"] {
110
- opacity: 0.5;
111
- cursor: not-allowed;
112
- pointer-events: none;
113
- }
106
+ .ui-btn:active,
107
+ .ui-btn.is-active {
108
+ transform: translateY(1px);
109
+ }
114
110
 
115
- .ui-btn.is-loading {
116
- cursor: progress;
117
- }
118
- .ui-btn.is-loading .ui-btn__label,
119
- .ui-btn.is-loading .ui-btn__icon {
120
- visibility: hidden;
121
- }
122
- .ui-btn__spinner {
123
- position: absolute;
124
- width: 16px;
125
- height: 16px;
126
- border: 2px solid currentColor;
127
- border-top-color: transparent;
128
- border-radius: var(--radius-full);
129
- animation: ui-btn-spin var(--duration-slower) linear infinite;
130
- }
111
+ .ui-btn:disabled,
112
+ .ui-btn[aria-disabled="true"] {
113
+ opacity: 0.5;
114
+ cursor: not-allowed;
115
+ pointer-events: none;
116
+ }
131
117
 
132
- .ui-btn__icon {
133
- display: inline-flex;
134
- font-size: 1em;
135
- }
118
+ .ui-btn.is-loading {
119
+ cursor: progress;
120
+ }
121
+ .ui-btn.is-loading .ui-btn__label,
122
+ .ui-btn.is-loading .ui-btn__icon {
123
+ visibility: hidden;
124
+ }
125
+ .ui-btn__spinner {
126
+ position: absolute;
127
+ width: 16px;
128
+ height: 16px;
129
+ border: 2px solid currentColor;
130
+ border-top-color: transparent;
131
+ border-radius: var(--radius-full);
132
+ animation: ui-btn-spin var(--duration-slower) linear infinite;
133
+ }
136
134
 
137
- @keyframes ui-btn-spin {
138
- to {
139
- transform: rotate(360deg);
135
+ .ui-btn__icon {
136
+ display: inline-flex;
137
+ font-size: 1em;
140
138
  }
141
- }
142
139
 
143
- /* ---- Icon button ---------------------------------------------------------- */
144
- .ui-iconbtn {
145
- position: relative;
146
- display: inline-flex;
147
- align-items: center;
148
- justify-content: center;
149
- width: 44px;
150
- height: 44px;
151
- padding: 0;
152
- background: transparent;
153
- border: 1px solid transparent;
154
- border-radius: var(--radius-md);
155
- color: var(--text);
156
- cursor: pointer;
157
- transition:
158
- background-color var(--duration-fast) var(--ease-standard),
159
- border-color var(--duration-fast) var(--ease-standard);
160
- }
161
- .ui-iconbtn:hover,
162
- .ui-iconbtn.is-hover {
163
- background: var(--surface-hover);
164
- border-color: var(--border-strong);
165
- }
166
- .ui-iconbtn:focus-visible,
167
- .ui-iconbtn.is-focus {
168
- outline: 2px solid var(--focus);
169
- outline-offset: 2px;
170
- box-shadow: 0 0 0 4px var(--focus-outer);
171
- }
172
- .ui-iconbtn:active,
173
- .ui-iconbtn.is-active {
174
- background: var(--surface-hover);
175
- }
176
- .ui-iconbtn:disabled,
177
- .ui-iconbtn.is-disabled {
178
- opacity: 0.5;
179
- cursor: not-allowed;
180
- pointer-events: none;
181
- }
182
- .ui-iconbtn__count {
183
- position: absolute;
184
- top: 3px;
185
- right: 3px;
186
- display: inline-flex;
187
- align-items: center;
188
- justify-content: center;
189
- min-width: 19px;
190
- height: 19px;
191
- padding: 0 var(--space-1);
192
- background: var(--accent);
193
- color: var(--accent-fg);
194
- border-radius: var(--radius-full);
195
- font-family: var(--font-sans);
196
- font-size: var(--text-2xs);
197
- font-weight: var(--weight-semibold);
198
- line-height: 1;
199
- }
140
+ @keyframes ui-btn-spin {
141
+ to {
142
+ transform: rotate(360deg);
143
+ }
144
+ }
200
145
 
201
- @media (prefers-reduced-motion: reduce) {
202
- .ui-btn {
203
- transition: none;
146
+ /* ---- Icon button ---------------------------------------------------------- */
147
+ .ui-iconbtn {
148
+ position: relative;
149
+ display: inline-flex;
150
+ align-items: center;
151
+ justify-content: center;
152
+ width: 44px;
153
+ height: 44px;
154
+ padding: 0;
155
+ background: transparent;
156
+ border: 1px solid transparent;
157
+ border-radius: var(--radius-md);
158
+ color: var(--text);
159
+ cursor: pointer;
160
+ transition:
161
+ background-color var(--duration-fast) var(--ease-standard),
162
+ border-color var(--duration-fast) var(--ease-standard);
204
163
  }
205
- .ui-btn__spinner {
206
- animation-duration: 1200ms;
164
+ .ui-iconbtn:hover,
165
+ .ui-iconbtn.is-hover {
166
+ background: var(--surface-hover);
167
+ border-color: var(--border-strong);
207
168
  }
208
- .ui-iconbtn {
209
- transition: none;
169
+ .ui-iconbtn:focus-visible,
170
+ .ui-iconbtn.is-focus {
171
+ outline: 2px solid var(--focus);
172
+ outline-offset: 2px;
173
+ box-shadow: 0 0 0 4px var(--focus-outer);
174
+ }
175
+ .ui-iconbtn:active,
176
+ .ui-iconbtn.is-active {
177
+ background: var(--surface-hover);
178
+ }
179
+ .ui-iconbtn:disabled,
180
+ .ui-iconbtn.is-disabled {
181
+ opacity: 0.5;
182
+ cursor: not-allowed;
183
+ pointer-events: none;
184
+ }
185
+ .ui-iconbtn__count {
186
+ position: absolute;
187
+ top: 3px;
188
+ right: 3px;
189
+ display: inline-flex;
190
+ align-items: center;
191
+ justify-content: center;
192
+ min-width: 19px;
193
+ height: 19px;
194
+ padding: 0 var(--space-1);
195
+ background: var(--accent);
196
+ color: var(--accent-fg);
197
+ border-radius: var(--radius-full);
198
+ font-family: var(--font-sans);
199
+ font-size: var(--text-2xs);
200
+ font-weight: var(--weight-semibold);
201
+ line-height: 1;
202
+ }
203
+
204
+ @media (prefers-reduced-motion: reduce) {
205
+ .ui-btn {
206
+ transition: none;
207
+ }
208
+ .ui-btn__spinner {
209
+ animation-duration: 1200ms;
210
+ }
211
+ .ui-iconbtn {
212
+ transition: none;
213
+ }
210
214
  }
211
215
  }