@phcdevworks/spectre-ui 1.1.2 → 1.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.
- package/README.md +33 -11
- package/dist/base.css +22 -4
- package/dist/components.css +116 -12
- package/dist/index.cjs +39 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +116 -12
- package/dist/index.d.cts +14 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +39 -4
- package/dist/index.js.map +1 -1
- package/dist/utilities.css +22 -4
- package/package.json +23 -11
package/dist/index.css
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
--sp-text-on-surface-subtle: #657287;
|
|
18
18
|
--sp-text-on-surface-meta: #657287;
|
|
19
19
|
--sp-component-card-text: #141b24;
|
|
20
|
-
--sp-component-card-text-muted: #
|
|
20
|
+
--sp-component-card-text-muted: #4b576a;
|
|
21
21
|
--sp-component-input-text: #141b24;
|
|
22
22
|
--sp-component-input-placeholder: #657287;
|
|
23
23
|
--sp-button-text-default: #141b24;
|
|
@@ -176,13 +176,25 @@
|
|
|
176
176
|
--sp-font-md-weight: 500;
|
|
177
177
|
--sp-font-lg-size: 1.25rem;
|
|
178
178
|
--sp-font-lg-line-height: 2rem;
|
|
179
|
-
--sp-font-lg-weight:
|
|
179
|
+
--sp-font-lg-weight: 600;
|
|
180
180
|
--sp-font-xl-size: 1.5rem;
|
|
181
181
|
--sp-font-xl-line-height: 2.125rem;
|
|
182
182
|
--sp-font-xl-weight: 600;
|
|
183
183
|
--sp-font-2xl-size: 1.875rem;
|
|
184
184
|
--sp-font-2xl-line-height: 2.5rem;
|
|
185
|
-
--sp-font-2xl-weight:
|
|
185
|
+
--sp-font-2xl-weight: 700;
|
|
186
|
+
--sp-font-3xl-size: 2.25rem;
|
|
187
|
+
--sp-font-3xl-line-height: 2.75rem;
|
|
188
|
+
--sp-font-3xl-weight: 700;
|
|
189
|
+
--sp-font-4xl-size: 3rem;
|
|
190
|
+
--sp-font-4xl-line-height: 3.5rem;
|
|
191
|
+
--sp-font-4xl-weight: 800;
|
|
192
|
+
--sp-font-5xl-size: 3.75rem;
|
|
193
|
+
--sp-font-5xl-line-height: 4.25rem;
|
|
194
|
+
--sp-font-5xl-weight: 800;
|
|
195
|
+
--sp-font-6xl-size: 4.5rem;
|
|
196
|
+
--sp-font-6xl-line-height: 5rem;
|
|
197
|
+
--sp-font-6xl-weight: 900;
|
|
186
198
|
--sp-font-xs-letter-spacing: 0.02em;
|
|
187
199
|
--sp-text-on-page-default: #141b24;
|
|
188
200
|
--sp-text-on-page-muted: #4b576a;
|
|
@@ -254,6 +266,7 @@
|
|
|
254
266
|
--sp-button-primary-text: #ffffff;
|
|
255
267
|
--sp-button-primary-textdisabled: #8a96ad;
|
|
256
268
|
--sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
|
|
269
|
+
--sp-button-primary-focusvisible: {colors.info.500} / 0.4;
|
|
257
270
|
--sp-button-secondary-bg: #ffffff;
|
|
258
271
|
--sp-button-secondary-bghover: #f7f8fb;
|
|
259
272
|
--sp-button-secondary-bgactive: #eef1f6;
|
|
@@ -263,6 +276,7 @@
|
|
|
263
276
|
--sp-button-secondary-border: #075985;
|
|
264
277
|
--sp-button-secondary-borderdisabled: #d9dfeb;
|
|
265
278
|
--sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
|
|
279
|
+
--sp-button-secondary-focusvisible: {colors.info.500} / 0.4;
|
|
266
280
|
--sp-button-ghost-bg: transparent;
|
|
267
281
|
--sp-button-ghost-bghover: #f0f9ff;
|
|
268
282
|
--sp-button-ghost-bgactive: #e0f2fe;
|
|
@@ -270,6 +284,7 @@
|
|
|
270
284
|
--sp-button-ghost-text: #075985;
|
|
271
285
|
--sp-button-ghost-textdisabled: #8a96ad;
|
|
272
286
|
--sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
|
|
287
|
+
--sp-button-ghost-focusvisible: {colors.info.500} / 0.4;
|
|
273
288
|
--sp-button-danger-bg: #dc2626;
|
|
274
289
|
--sp-button-danger-bghover: #b91c1c;
|
|
275
290
|
--sp-button-danger-bgactive: #991b1b;
|
|
@@ -299,6 +314,7 @@
|
|
|
299
314
|
--sp-button-accent-text: #ffffff;
|
|
300
315
|
--sp-button-accent-textdisabled: #8a96ad;
|
|
301
316
|
--sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
|
|
317
|
+
--sp-button-accent-focusvisible: {colors.accent.500} / 0.4;
|
|
302
318
|
--sp-form-default-bg: #ffffff;
|
|
303
319
|
--sp-form-default-border: #b7c1d4;
|
|
304
320
|
--sp-form-default-text: #141b24;
|
|
@@ -306,6 +322,8 @@
|
|
|
306
322
|
--sp-form-hover-border: #0ea5e9;
|
|
307
323
|
--sp-form-focus-border: #0ea5e9;
|
|
308
324
|
--sp-form-focus-ring: #0ea5e9;
|
|
325
|
+
--sp-form-focusvisible-border: {colors.info.500};
|
|
326
|
+
--sp-form-focusvisible-ring: {colors.info.500};
|
|
309
327
|
--sp-form-valid-border: #22c55e;
|
|
310
328
|
--sp-form-valid-bg: #f0fdf4;
|
|
311
329
|
--sp-form-valid-text: #15803d;
|
|
@@ -372,7 +390,7 @@
|
|
|
372
390
|
--sp-badge-danger-text: #fee2e2;
|
|
373
391
|
--sp-icon-box-bg: #222b38;
|
|
374
392
|
--sp-icon-box-border: #374253;
|
|
375
|
-
--sp-icon-box-icon-default: #
|
|
393
|
+
--sp-icon-box-icon-default: #38bdf8;
|
|
376
394
|
--sp-icon-box-icon-success: #4ade80;
|
|
377
395
|
--sp-icon-box-icon-warning: #ffc21a;
|
|
378
396
|
--sp-icon-box-icon-danger: #f87171;
|
|
@@ -608,6 +626,9 @@
|
|
|
608
626
|
--sp-component-rating-star-filled: var(--sp-color-warning-500);
|
|
609
627
|
--sp-component-rating-star-empty: var(--sp-color-neutral-200);
|
|
610
628
|
--sp-component-rating-text: var(--sp-color-neutral-500);
|
|
629
|
+
--sp-component-rating-size-sm: var(--sp-font-sm-size);
|
|
630
|
+
--sp-component-rating-size-md: var(--sp-font-md-size);
|
|
631
|
+
--sp-component-rating-size-lg: var(--sp-font-lg-size);
|
|
611
632
|
}
|
|
612
633
|
|
|
613
634
|
/* dark mode overrides mapped from Spectre token mode definitions */
|
|
@@ -644,6 +665,12 @@
|
|
|
644
665
|
--sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
|
|
645
666
|
--sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
|
|
646
667
|
--sp-component-badge-info-bg-hover: var(--sp-color-info-700);
|
|
668
|
+
|
|
669
|
+
--sp-component-iconbox-primary-bg: var(--sp-color-brand-900);
|
|
670
|
+
--sp-component-iconbox-success-bg: var(--sp-color-success-900);
|
|
671
|
+
--sp-component-iconbox-warning-bg: var(--sp-color-warning-900);
|
|
672
|
+
--sp-component-iconbox-danger-bg: var(--sp-color-error-900);
|
|
673
|
+
--sp-component-iconbox-info-bg: var(--sp-color-info-900);
|
|
647
674
|
}
|
|
648
675
|
|
|
649
676
|
/* BUTTONS -------------------------------------------------------------- */
|
|
@@ -683,6 +710,13 @@
|
|
|
683
710
|
opacity: var(--sp-opacity-active);
|
|
684
711
|
}
|
|
685
712
|
|
|
713
|
+
.sp-btn:focus-visible,
|
|
714
|
+
.sp-btn--focus,
|
|
715
|
+
.sp-btn.is-focus {
|
|
716
|
+
outline: none;
|
|
717
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
718
|
+
}
|
|
719
|
+
|
|
686
720
|
.sp-btn--full {
|
|
687
721
|
width: 100%;
|
|
688
722
|
}
|
|
@@ -1135,7 +1169,8 @@
|
|
|
1135
1169
|
}
|
|
1136
1170
|
|
|
1137
1171
|
.sp-badge--primary.sp-badge--interactive:hover,
|
|
1138
|
-
.sp-badge--primary.sp-badge--interactive.sp-badge--hover
|
|
1172
|
+
.sp-badge--primary.sp-badge--interactive.sp-badge--hover,
|
|
1173
|
+
.sp-badge--primary.sp-badge--interactive.is-hover {
|
|
1139
1174
|
background-color: var(--sp-component-badge-primary-bg-hover);
|
|
1140
1175
|
}
|
|
1141
1176
|
|
|
@@ -1146,7 +1181,8 @@
|
|
|
1146
1181
|
}
|
|
1147
1182
|
|
|
1148
1183
|
.sp-badge--secondary.sp-badge--interactive:hover,
|
|
1149
|
-
.sp-badge--secondary.sp-badge--interactive.sp-badge--hover
|
|
1184
|
+
.sp-badge--secondary.sp-badge--interactive.sp-badge--hover,
|
|
1185
|
+
.sp-badge--secondary.sp-badge--interactive.is-hover {
|
|
1150
1186
|
background-color: var(--sp-component-badge-secondary-bg-hover);
|
|
1151
1187
|
}
|
|
1152
1188
|
|
|
@@ -1156,7 +1192,8 @@
|
|
|
1156
1192
|
}
|
|
1157
1193
|
|
|
1158
1194
|
.sp-badge--success.sp-badge--interactive:hover,
|
|
1159
|
-
.sp-badge--success.sp-badge--interactive.sp-badge--hover
|
|
1195
|
+
.sp-badge--success.sp-badge--interactive.sp-badge--hover,
|
|
1196
|
+
.sp-badge--success.sp-badge--interactive.is-hover {
|
|
1160
1197
|
background-color: var(--sp-component-badge-success-bg-hover);
|
|
1161
1198
|
}
|
|
1162
1199
|
|
|
@@ -1166,7 +1203,8 @@
|
|
|
1166
1203
|
}
|
|
1167
1204
|
|
|
1168
1205
|
.sp-badge--warning.sp-badge--interactive:hover,
|
|
1169
|
-
.sp-badge--warning.sp-badge--interactive.sp-badge--hover
|
|
1206
|
+
.sp-badge--warning.sp-badge--interactive.sp-badge--hover,
|
|
1207
|
+
.sp-badge--warning.sp-badge--interactive.is-hover {
|
|
1170
1208
|
background-color: var(--sp-component-badge-warning-bg-hover);
|
|
1171
1209
|
}
|
|
1172
1210
|
|
|
@@ -1176,7 +1214,8 @@
|
|
|
1176
1214
|
}
|
|
1177
1215
|
|
|
1178
1216
|
.sp-badge--danger.sp-badge--interactive:hover,
|
|
1179
|
-
.sp-badge--danger.sp-badge--interactive.sp-badge--hover
|
|
1217
|
+
.sp-badge--danger.sp-badge--interactive.sp-badge--hover,
|
|
1218
|
+
.sp-badge--danger.sp-badge--interactive.is-hover {
|
|
1180
1219
|
background-color: var(--sp-component-badge-danger-bg-hover);
|
|
1181
1220
|
}
|
|
1182
1221
|
|
|
@@ -1186,7 +1225,8 @@
|
|
|
1186
1225
|
}
|
|
1187
1226
|
|
|
1188
1227
|
.sp-badge--neutral.sp-badge--interactive:hover,
|
|
1189
|
-
.sp-badge--neutral.sp-badge--interactive.sp-badge--hover
|
|
1228
|
+
.sp-badge--neutral.sp-badge--interactive.sp-badge--hover,
|
|
1229
|
+
.sp-badge--neutral.sp-badge--interactive.is-hover {
|
|
1190
1230
|
background-color: var(--sp-component-badge-neutral-bg-hover);
|
|
1191
1231
|
}
|
|
1192
1232
|
|
|
@@ -1196,13 +1236,32 @@
|
|
|
1196
1236
|
}
|
|
1197
1237
|
|
|
1198
1238
|
.sp-badge--info.sp-badge--interactive:hover,
|
|
1199
|
-
.sp-badge--info.sp-badge--interactive.sp-badge--hover
|
|
1239
|
+
.sp-badge--info.sp-badge--interactive.sp-badge--hover,
|
|
1240
|
+
.sp-badge--info.sp-badge--interactive.is-hover {
|
|
1200
1241
|
background-color: var(--sp-component-badge-info-bg-hover);
|
|
1201
1242
|
}
|
|
1202
1243
|
|
|
1203
1244
|
.sp-badge--interactive {
|
|
1204
1245
|
cursor: pointer;
|
|
1205
|
-
transition:
|
|
1246
|
+
transition:
|
|
1247
|
+
background-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1248
|
+
color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1249
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1250
|
+
border-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1251
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
.sp-badge--interactive:active,
|
|
1255
|
+
.sp-badge--interactive.sp-badge--active,
|
|
1256
|
+
.sp-badge--interactive.is-active {
|
|
1257
|
+
opacity: var(--sp-opacity-active);
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
.sp-badge--interactive:focus-visible,
|
|
1261
|
+
.sp-badge--interactive.sp-badge--focus,
|
|
1262
|
+
.sp-badge--interactive.is-focus {
|
|
1263
|
+
outline: none;
|
|
1264
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1206
1265
|
}
|
|
1207
1266
|
|
|
1208
1267
|
.sp-badge--disabled {
|
|
@@ -1227,6 +1286,12 @@
|
|
|
1227
1286
|
font-family: var(--sp-font-family-sans);
|
|
1228
1287
|
font-weight: var(--sp-font-md-weight);
|
|
1229
1288
|
line-height: 0;
|
|
1289
|
+
transition:
|
|
1290
|
+
background-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1291
|
+
color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1292
|
+
box-shadow var(--sp-duration-fast) var(--sp-easing-out),
|
|
1293
|
+
border-color var(--sp-duration-fast) var(--sp-easing-out),
|
|
1294
|
+
opacity var(--sp-duration-fast) var(--sp-easing-out);
|
|
1230
1295
|
}
|
|
1231
1296
|
|
|
1232
1297
|
/* Harden icon rendering:
|
|
@@ -1320,9 +1385,35 @@
|
|
|
1320
1385
|
color: var(--sp-component-iconbox-info-text);
|
|
1321
1386
|
}
|
|
1322
1387
|
|
|
1388
|
+
.sp-iconbox--interactive {
|
|
1389
|
+
cursor: pointer;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
.sp-iconbox--interactive:hover,
|
|
1393
|
+
.sp-iconbox--interactive.sp-iconbox--hover,
|
|
1394
|
+
.sp-iconbox--interactive.is-hover {
|
|
1395
|
+
opacity: var(--sp-opacity-hover);
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
.sp-iconbox--interactive:active,
|
|
1399
|
+
.sp-iconbox--interactive.sp-iconbox--active,
|
|
1400
|
+
.sp-iconbox--interactive.is-active {
|
|
1401
|
+
opacity: var(--sp-opacity-active);
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
.sp-iconbox--interactive:focus-visible,
|
|
1405
|
+
.sp-iconbox--interactive.sp-iconbox--focus,
|
|
1406
|
+
.sp-iconbox--interactive.is-focus {
|
|
1407
|
+
outline: none;
|
|
1408
|
+
box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
.sp-iconbox:disabled,
|
|
1412
|
+
.sp-iconbox[aria-disabled="true"],
|
|
1323
1413
|
.sp-iconbox--disabled {
|
|
1324
1414
|
opacity: var(--sp-opacity-disabled);
|
|
1325
1415
|
pointer-events: none;
|
|
1416
|
+
cursor: not-allowed;
|
|
1326
1417
|
}
|
|
1327
1418
|
|
|
1328
1419
|
.sp-iconbox--loading {
|
|
@@ -1468,6 +1559,19 @@
|
|
|
1468
1559
|
display: inline-flex;
|
|
1469
1560
|
align-items: center;
|
|
1470
1561
|
gap: var(--sp-space-8);
|
|
1562
|
+
font-size: var(--sp-component-rating-size-md);
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
.sp-rating--sm {
|
|
1566
|
+
font-size: var(--sp-component-rating-size-sm);
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
.sp-rating--md {
|
|
1570
|
+
font-size: var(--sp-component-rating-size-md);
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
.sp-rating--lg {
|
|
1574
|
+
font-size: var(--sp-component-rating-size-lg);
|
|
1471
1575
|
}
|
|
1472
1576
|
|
|
1473
1577
|
.sp-rating--disabled {
|
package/dist/index.d.cts
CHANGED
|
@@ -35,6 +35,7 @@ interface ButtonRecipeOptions {
|
|
|
35
35
|
loading?: boolean;
|
|
36
36
|
disabled?: boolean;
|
|
37
37
|
hovered?: boolean;
|
|
38
|
+
focused?: boolean;
|
|
38
39
|
active?: boolean;
|
|
39
40
|
iconOnly?: boolean;
|
|
40
41
|
pill?: boolean;
|
|
@@ -109,6 +110,8 @@ interface BadgeRecipeOptions {
|
|
|
109
110
|
size?: BadgeSize;
|
|
110
111
|
interactive?: boolean;
|
|
111
112
|
hovered?: boolean;
|
|
113
|
+
focused?: boolean;
|
|
114
|
+
active?: boolean;
|
|
112
115
|
disabled?: boolean;
|
|
113
116
|
loading?: boolean;
|
|
114
117
|
}
|
|
@@ -133,6 +136,10 @@ interface IconBoxRecipeOptions {
|
|
|
133
136
|
size?: IconBoxSize;
|
|
134
137
|
disabled?: boolean;
|
|
135
138
|
loading?: boolean;
|
|
139
|
+
interactive?: boolean;
|
|
140
|
+
hovered?: boolean;
|
|
141
|
+
focused?: boolean;
|
|
142
|
+
active?: boolean;
|
|
136
143
|
}
|
|
137
144
|
declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
|
|
138
145
|
|
|
@@ -166,11 +173,18 @@ declare function getPricingCardPriceContainerClasses(): string;
|
|
|
166
173
|
declare function getPricingCardPriceClasses(): string;
|
|
167
174
|
declare function getPricingCardDescriptionClasses(): string;
|
|
168
175
|
|
|
176
|
+
declare const RATING_SIZES: {
|
|
177
|
+
readonly sm: true;
|
|
178
|
+
readonly md: true;
|
|
179
|
+
readonly lg: true;
|
|
180
|
+
};
|
|
181
|
+
type RatingSize = keyof typeof RATING_SIZES;
|
|
169
182
|
/**
|
|
170
183
|
* Generate classes for the Rating component.
|
|
171
184
|
* @sync v2.x - Synced with latest design tokens.
|
|
172
185
|
*/
|
|
173
186
|
interface RatingRecipeOptions {
|
|
187
|
+
size?: RatingSize;
|
|
174
188
|
disabled?: boolean;
|
|
175
189
|
loading?: boolean;
|
|
176
190
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ interface ButtonRecipeOptions {
|
|
|
35
35
|
loading?: boolean;
|
|
36
36
|
disabled?: boolean;
|
|
37
37
|
hovered?: boolean;
|
|
38
|
+
focused?: boolean;
|
|
38
39
|
active?: boolean;
|
|
39
40
|
iconOnly?: boolean;
|
|
40
41
|
pill?: boolean;
|
|
@@ -109,6 +110,8 @@ interface BadgeRecipeOptions {
|
|
|
109
110
|
size?: BadgeSize;
|
|
110
111
|
interactive?: boolean;
|
|
111
112
|
hovered?: boolean;
|
|
113
|
+
focused?: boolean;
|
|
114
|
+
active?: boolean;
|
|
112
115
|
disabled?: boolean;
|
|
113
116
|
loading?: boolean;
|
|
114
117
|
}
|
|
@@ -133,6 +136,10 @@ interface IconBoxRecipeOptions {
|
|
|
133
136
|
size?: IconBoxSize;
|
|
134
137
|
disabled?: boolean;
|
|
135
138
|
loading?: boolean;
|
|
139
|
+
interactive?: boolean;
|
|
140
|
+
hovered?: boolean;
|
|
141
|
+
focused?: boolean;
|
|
142
|
+
active?: boolean;
|
|
136
143
|
}
|
|
137
144
|
declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
|
|
138
145
|
|
|
@@ -166,11 +173,18 @@ declare function getPricingCardPriceContainerClasses(): string;
|
|
|
166
173
|
declare function getPricingCardPriceClasses(): string;
|
|
167
174
|
declare function getPricingCardDescriptionClasses(): string;
|
|
168
175
|
|
|
176
|
+
declare const RATING_SIZES: {
|
|
177
|
+
readonly sm: true;
|
|
178
|
+
readonly md: true;
|
|
179
|
+
readonly lg: true;
|
|
180
|
+
};
|
|
181
|
+
type RatingSize = keyof typeof RATING_SIZES;
|
|
169
182
|
/**
|
|
170
183
|
* Generate classes for the Rating component.
|
|
171
184
|
* @sync v2.x - Synced with latest design tokens.
|
|
172
185
|
*/
|
|
173
186
|
interface RatingRecipeOptions {
|
|
187
|
+
size?: RatingSize;
|
|
174
188
|
disabled?: boolean;
|
|
175
189
|
loading?: boolean;
|
|
176
190
|
}
|
package/dist/index.js
CHANGED
|
@@ -70,6 +70,7 @@ function getButtonClasses(opts = {}) {
|
|
|
70
70
|
loading = false,
|
|
71
71
|
disabled = false,
|
|
72
72
|
hovered = false,
|
|
73
|
+
focused = false,
|
|
73
74
|
active = false,
|
|
74
75
|
iconOnly = false,
|
|
75
76
|
pill = false
|
|
@@ -110,6 +111,7 @@ function getButtonClasses(opts = {}) {
|
|
|
110
111
|
loading && "sp-btn--loading",
|
|
111
112
|
disabled && "sp-btn--disabled",
|
|
112
113
|
hovered && "sp-btn--hover",
|
|
114
|
+
focused && "sp-btn--focus",
|
|
113
115
|
active && "sp-btn--active",
|
|
114
116
|
iconOnly && "sp-btn--icon",
|
|
115
117
|
pill && "sp-btn--pill"
|
|
@@ -231,7 +233,7 @@ var BADGE_SIZES = {
|
|
|
231
233
|
lg: true
|
|
232
234
|
};
|
|
233
235
|
function getBadgeClasses(opts = {}) {
|
|
234
|
-
const { variant: variantInput, size: sizeInput, interactive, hovered, disabled, loading } = opts;
|
|
236
|
+
const { variant: variantInput, size: sizeInput, interactive, hovered, focused, active, disabled, loading } = opts;
|
|
235
237
|
const variant = resolveOption({
|
|
236
238
|
name: "badge variant",
|
|
237
239
|
value: variantInput,
|
|
@@ -266,6 +268,8 @@ function getBadgeClasses(opts = {}) {
|
|
|
266
268
|
sizeClass,
|
|
267
269
|
interactive && "sp-badge--interactive",
|
|
268
270
|
hovered && "sp-badge--hover",
|
|
271
|
+
focused && "sp-badge--focus",
|
|
272
|
+
active && "sp-badge--active",
|
|
269
273
|
disabled && "sp-badge--disabled",
|
|
270
274
|
loading && "sp-badge--loading"
|
|
271
275
|
);
|
|
@@ -285,7 +289,16 @@ var ICONBOX_SIZES = {
|
|
|
285
289
|
lg: true
|
|
286
290
|
};
|
|
287
291
|
function getIconBoxClasses(opts = {}) {
|
|
288
|
-
const {
|
|
292
|
+
const {
|
|
293
|
+
variant: variantInput,
|
|
294
|
+
size: sizeInput,
|
|
295
|
+
disabled = false,
|
|
296
|
+
loading = false,
|
|
297
|
+
interactive = false,
|
|
298
|
+
hovered = false,
|
|
299
|
+
focused = false,
|
|
300
|
+
active = false
|
|
301
|
+
} = opts;
|
|
289
302
|
const variant = resolveOption({
|
|
290
303
|
name: "icon box variant",
|
|
291
304
|
value: variantInput,
|
|
@@ -317,7 +330,11 @@ function getIconBoxClasses(opts = {}) {
|
|
|
317
330
|
variantClass,
|
|
318
331
|
sizeClass,
|
|
319
332
|
disabled && "sp-iconbox--disabled",
|
|
320
|
-
loading && "sp-iconbox--loading"
|
|
333
|
+
loading && "sp-iconbox--loading",
|
|
334
|
+
interactive && "sp-iconbox--interactive",
|
|
335
|
+
hovered && "sp-iconbox--hover",
|
|
336
|
+
focused && "sp-iconbox--focus",
|
|
337
|
+
active && "sp-iconbox--active"
|
|
321
338
|
);
|
|
322
339
|
}
|
|
323
340
|
|
|
@@ -370,10 +387,28 @@ function getPricingCardDescriptionClasses() {
|
|
|
370
387
|
}
|
|
371
388
|
|
|
372
389
|
// src/recipes/rating.ts
|
|
390
|
+
var RATING_SIZES = {
|
|
391
|
+
sm: true,
|
|
392
|
+
md: true,
|
|
393
|
+
lg: true
|
|
394
|
+
};
|
|
373
395
|
function getRatingClasses(opts = {}) {
|
|
374
|
-
const { disabled = false, loading = false } = opts;
|
|
396
|
+
const { size: sizeInput, disabled = false, loading = false } = opts;
|
|
397
|
+
const size = resolveOption({
|
|
398
|
+
name: "rating size",
|
|
399
|
+
value: sizeInput,
|
|
400
|
+
allowed: RATING_SIZES,
|
|
401
|
+
fallback: "md"
|
|
402
|
+
});
|
|
403
|
+
const sizeMap = {
|
|
404
|
+
sm: "sp-rating--sm",
|
|
405
|
+
md: "sp-rating--md",
|
|
406
|
+
lg: "sp-rating--lg"
|
|
407
|
+
};
|
|
408
|
+
const sizeClass = sizeMap[size];
|
|
375
409
|
return cx(
|
|
376
410
|
"sp-rating",
|
|
411
|
+
sizeClass,
|
|
377
412
|
disabled && "sp-rating--disabled",
|
|
378
413
|
loading && "sp-rating--loading"
|
|
379
414
|
);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/css-constants.ts","../src/internal/cx.ts","../src/internal/resolve-option.ts","../src/recipes/button.ts","../src/recipes/card.ts","../src/recipes/input.ts","../src/recipes/badge.ts","../src/recipes/iconbox.ts","../src/recipes/testimonial.ts","../src/recipes/pricing-card.ts","../src/recipes/rating.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export const spectreBaseStylesPath = \"@phcdevworks/spectre-ui/base.css\";\nexport const spectreComponentsStylesPath = \"@phcdevworks/spectre-ui/components.css\";\nexport const spectreUtilitiesStylesPath = \"@phcdevworks/spectre-ui/utilities.css\";\nexport const spectreIndexStylesPath = \"@phcdevworks/spectre-ui/index.css\";\n\nexport const spectreStyles = {\n index: spectreIndexStylesPath,\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n};\n","export function cx(...parts: Array<string | false | null | undefined>): string {\n const seen = new Set<string>();\n const classes: string[] = [];\n\n for (const part of parts) {\n if (!part) continue;\n const trimmed = part.trim();\n if (!trimmed) continue;\n\n if (!/\\s/.test(trimmed)) {\n if (!seen.has(trimmed)) {\n seen.add(trimmed);\n classes.push(trimmed);\n }\n continue;\n }\n\n for (const token of trimmed.split(/\\s+/)) {\n if (!token || seen.has(token)) continue;\n seen.add(token);\n classes.push(token);\n }\n }\n\n return classes.join(\" \");\n}\n","type AllowedValues<T extends string> = readonly T[] | Record<T, unknown>;\n\nconst hasOwn = (value: object, key: string): boolean =>\n Object.prototype.hasOwnProperty.call(value, key);\n\nconst isAllowedValue = <T extends string>(value: T, allowed: AllowedValues<T>): boolean =>\n Array.isArray(allowed) ? allowed.includes(value) : hasOwn(allowed, value);\n\nexport function resolveOption<T extends string>(config: {\n name: string;\n value: T | undefined;\n allowed: AllowedValues<T>;\n fallback: T;\n}): T {\n const { name, value, allowed, fallback } = config;\n\n if (value === undefined) return fallback;\n if (isAllowedValue(value, allowed)) return value;\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(`[spectre-ui] Unknown ${name}: ${value}`);\n }\n\n return fallback;\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst BUTTON_VARIANTS = {\n primary: true,\n secondary: true,\n ghost: true,\n danger: true,\n success: true,\n cta: true,\n accent: true,\n} as const;\n\nconst BUTTON_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_VARIANTS;\nexport type ButtonSize = keyof typeof BUTTON_SIZES;\n\n/**\n * Generate classes for the Button component.\n * @sync v2.x - Synced with latest design tokens, including CTA variants.\n */\nexport interface ButtonRecipeOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n fullWidth?: boolean;\n loading?: boolean;\n disabled?: boolean;\n hovered?: boolean;\n active?: boolean;\n iconOnly?: boolean;\n pill?: boolean;\n}\n\nexport function getButtonClasses(opts: ButtonRecipeOptions = {}): string {\n const {\n variant: variantInput,\n size: sizeInput,\n fullWidth = false,\n loading = false,\n disabled = false,\n hovered = false,\n active = false,\n iconOnly = false,\n pill = false,\n } = opts;\n\n const variant = resolveOption({\n name: \"button variant\",\n value: variantInput,\n allowed: BUTTON_VARIANTS,\n fallback: \"primary\",\n });\n const size = resolveOption({\n name: \"button size\",\n value: sizeInput,\n allowed: BUTTON_SIZES,\n fallback: \"md\",\n });\n\n const variantMap: Record<ButtonVariant, string> = {\n primary: \"sp-btn--primary\",\n secondary: \"sp-btn--secondary\",\n ghost: \"sp-btn--ghost\",\n danger: \"sp-btn--danger\",\n success: \"sp-btn--success\",\n cta: \"sp-btn--cta\",\n accent: \"sp-btn--accent\",\n };\n const variantClass = variantMap[variant];\n\n const sizeMap: Record<ButtonSize, string> = {\n sm: \"sp-btn--sm\",\n md: \"sp-btn--md\",\n lg: \"sp-btn--lg\",\n };\n const sizeClass = sizeMap[size];\n\n return cx(\n \"sp-btn\",\n variantClass,\n sizeClass,\n fullWidth && \"sp-btn--full\",\n loading && \"sp-btn--loading\",\n disabled && \"sp-btn--disabled\",\n hovered && \"sp-btn--hover\",\n active && \"sp-btn--active\",\n iconOnly && \"sp-btn--icon\",\n pill && \"sp-btn--pill\",\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst CARD_VARIANTS = {\n elevated: true,\n flat: true,\n outline: true,\n ghost: true,\n} as const;\n\nexport type CardVariant = keyof typeof CARD_VARIANTS;\n\nexport interface CardRecipeOptions {\n variant?: CardVariant;\n interactive?: boolean; // hover/focus styles\n padded?: boolean; // apply default padding\n fullHeight?: boolean;\n disabled?: boolean;\n loading?: boolean;\n hovered?: boolean;\n focused?: boolean;\n}\n\nexport function getCardClasses(opts: CardRecipeOptions = {}): string {\n const {\n variant: variantInput,\n interactive = false,\n padded = false,\n fullHeight = false,\n disabled = false,\n loading = false,\n hovered = false,\n focused = false,\n } = opts;\n\n const variant = resolveOption({\n name: \"card variant\",\n value: variantInput,\n allowed: CARD_VARIANTS,\n fallback: \"elevated\",\n });\n\n const variantMap: Record<CardVariant, string> = {\n elevated: \"sp-card--elevated\",\n flat: \"sp-card--flat\",\n outline: \"sp-card--outline\",\n ghost: \"sp-card--ghost\",\n };\n const variantClass = variantMap[variant];\n\n return cx(\n \"sp-card\",\n variantClass,\n interactive && \"sp-card--interactive\",\n padded && \"sp-card--padded\",\n fullHeight && \"sp-card--full\",\n disabled && \"sp-card--disabled\",\n loading && \"sp-card--loading\",\n hovered && \"sp-card--hover\",\n focused && \"sp-card--focus\",\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst INPUT_STATES = {\n default: true,\n error: true,\n success: true,\n disabled: true,\n loading: true,\n} as const;\n\nconst INPUT_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type InputState = keyof typeof INPUT_STATES;\nexport type InputSize = keyof typeof INPUT_SIZES;\n\nexport interface InputRecipeOptions {\n state?: InputState;\n size?: InputSize;\n fullWidth?: boolean;\n pill?: boolean;\n focused?: boolean;\n hovered?: boolean;\n}\n\nexport function getInputClasses(opts: InputRecipeOptions = {}): string {\n const {\n state: stateInput,\n size: sizeInput,\n fullWidth = false,\n pill = false,\n focused = false,\n hovered = false,\n } = opts;\n\n const state = resolveOption({\n name: \"input state\",\n value: stateInput,\n allowed: INPUT_STATES,\n fallback: \"default\",\n });\n const size = resolveOption({\n name: \"input size\",\n value: sizeInput,\n allowed: INPUT_SIZES,\n fallback: \"md\",\n });\n\n const sizeMap: Record<InputSize, string> = {\n sm: \"sp-input--sm\",\n md: \"sp-input--md\",\n lg: \"sp-input--lg\",\n };\n const sizeClass = sizeMap[size];\n\n // State\n return cx(\n \"sp-input\",\n sizeClass,\n state === \"error\" && \"sp-input--error\",\n state === \"success\" && \"sp-input--success\",\n // Visual state only; actual disabled attribute is handled by adapters.\n state === \"disabled\" && \"sp-input--disabled\",\n state === \"loading\" && \"sp-input--loading\",\n focused && \"sp-input--focus\",\n hovered && \"sp-input--hover\",\n fullWidth && \"sp-input--full\",\n pill && \"sp-input--pill\",\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst BADGE_VARIANTS = {\n primary: true,\n secondary: true,\n success: true,\n warning: true,\n danger: true,\n neutral: true,\n info: true,\n} as const;\n\nconst BADGE_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type BadgeVariant = keyof typeof BADGE_VARIANTS;\nexport type BadgeSize = keyof typeof BADGE_SIZES;\n\n/**\n * Generate classes for the Badge component.\n * @sync v2.x - Synced with latest design tokens, including hover states.\n */\nexport interface BadgeRecipeOptions {\n variant?: BadgeVariant;\n size?: BadgeSize;\n interactive?: boolean;\n hovered?: boolean;\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getBadgeClasses(opts: BadgeRecipeOptions = {}): string {\n const { variant: variantInput, size: sizeInput, interactive, hovered, disabled, loading } = opts;\n\n const variant = resolveOption({\n name: \"badge variant\",\n value: variantInput,\n allowed: BADGE_VARIANTS,\n fallback: \"primary\",\n });\n const size = resolveOption({\n name: \"badge size\",\n value: sizeInput,\n allowed: BADGE_SIZES,\n fallback: \"md\",\n });\n\n const variantMap: Record<BadgeVariant, string> = {\n primary: \"sp-badge--primary\",\n secondary: \"sp-badge--secondary\",\n success: \"sp-badge--success\",\n warning: \"sp-badge--warning\",\n danger: \"sp-badge--danger\",\n neutral: \"sp-badge--neutral\",\n info: \"sp-badge--info\",\n };\n const variantClass = variantMap[variant];\n\n const sizeMap: Record<BadgeSize, string> = {\n sm: \"sp-badge--sm\",\n md: \"sp-badge--md\",\n lg: \"sp-badge--lg\",\n };\n const sizeClass = sizeMap[size];\n\n return cx(\n \"sp-badge\",\n variantClass,\n sizeClass,\n interactive && \"sp-badge--interactive\",\n hovered && \"sp-badge--hover\",\n disabled && \"sp-badge--disabled\",\n loading && \"sp-badge--loading\"\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst ICONBOX_VARIANTS = {\n primary: true,\n success: true,\n warning: true,\n danger: true,\n info: true,\n} as const;\n\nconst ICONBOX_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type IconBoxVariant = keyof typeof ICONBOX_VARIANTS;\nexport type IconBoxSize = keyof typeof ICONBOX_SIZES;\n\nexport interface IconBoxRecipeOptions {\n variant?: IconBoxVariant;\n size?: IconBoxSize;\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getIconBoxClasses(opts: IconBoxRecipeOptions = {}): string {\n const { variant: variantInput, size: sizeInput, disabled = false, loading = false } = opts;\n\n const variant = resolveOption({\n name: \"icon box variant\",\n value: variantInput,\n allowed: ICONBOX_VARIANTS,\n fallback: \"primary\",\n });\n const size = resolveOption({\n name: \"icon box size\",\n value: sizeInput,\n allowed: ICONBOX_SIZES,\n fallback: \"md\",\n });\n\n const variantMap: Record<IconBoxVariant, string> = {\n primary: \"sp-iconbox--primary\",\n success: \"sp-iconbox--success\",\n warning: \"sp-iconbox--warning\",\n danger: \"sp-iconbox--danger\",\n info: \"sp-iconbox--info\",\n };\n const variantClass = variantMap[variant];\n\n const sizeMap: Record<IconBoxSize, string> = {\n sm: \"sp-iconbox--sm\",\n md: \"sp-iconbox--md\",\n lg: \"sp-iconbox--lg\",\n };\n const sizeClass = sizeMap[size];\n\n return cx(\n \"sp-iconbox\",\n variantClass,\n sizeClass,\n disabled && \"sp-iconbox--disabled\",\n loading && \"sp-iconbox--loading\",\n );\n}\n","import { cx } from \"../internal/cx\";\n\n/**\n * Generate classes for the Testimonial component.\n * @sync v2.x - Synced with latest design tokens.\n */\nexport interface TestimonialRecipeOptions {\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getTestimonialClasses(opts: TestimonialRecipeOptions = {}): string {\n const { disabled = false, loading = false } = opts;\n return cx(\n \"sp-testimonial\",\n disabled && \"sp-testimonial--disabled\",\n loading && \"sp-testimonial--loading\"\n );\n}\n\nexport function getTestimonialQuoteClasses(): string {\n return cx(\"sp-testimonial-quote\");\n}\n\nexport function getTestimonialAuthorClasses(): string {\n return cx(\"sp-testimonial-author\");\n}\n\nexport function getTestimonialAuthorInfoClasses(): string {\n return cx(\"sp-testimonial-author-info\");\n}\n\nexport function getTestimonialAuthorNameClasses(): string {\n return cx(\"sp-testimonial-author-name\");\n}\n\nexport function getTestimonialAuthorTitleClasses(): string {\n return cx(\"sp-testimonial-author-title\");\n}\n","import { cx } from \"../internal/cx\";\n\n/**\n * Generate classes for the PricingCard component.\n * @sync v2.x - Synced with latest design tokens.\n */\nexport interface PricingCardRecipeOptions {\n featured?: boolean;\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getPricingCardClasses(opts: PricingCardRecipeOptions = {}): string {\n const { featured = false, disabled = false, loading = false } = opts;\n return cx(\n \"sp-pricing-card\",\n featured && \"sp-pricing-card--featured\",\n disabled && \"sp-pricing-card--disabled\",\n loading && \"sp-pricing-card--loading\"\n );\n}\n\nexport function getPricingCardBadgeClasses(): string {\n return cx(\"sp-pricing-card-badge\");\n}\n\nexport function getPricingCardPriceContainerClasses(): string {\n return cx(\"sp-pricing-card-price-container\");\n}\n\nexport function getPricingCardPriceClasses(): string {\n return cx(\"sp-pricing-card-price\");\n}\n\nexport function getPricingCardDescriptionClasses(): string {\n return cx(\"sp-pricing-card-description\");\n}\n","import { cx } from \"../internal/cx\";\n\n/**\n * Generate classes for the Rating component.\n * @sync v2.x - Synced with latest design tokens.\n */\nexport interface RatingRecipeOptions {\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getRatingClasses(opts: RatingRecipeOptions = {}): string {\n const { disabled = false, loading = false } = opts;\n return cx(\n \"sp-rating\",\n disabled && \"sp-rating--disabled\",\n loading && \"sp-rating--loading\"\n );\n}\n\nexport function getRatingStarsClasses(): string {\n return cx(\"sp-rating-stars\");\n}\n\nexport function getRatingStarClasses(isFilled: boolean = false): string {\n return cx(\n \"sp-rating-star\",\n isFilled && \"sp-rating-star--filled\"\n );\n}\n\nexport function getRatingTextClasses(): string {\n return cx(\"sp-rating-text\");\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/css-constants.ts","../src/internal/cx.ts","../src/internal/resolve-option.ts","../src/recipes/button.ts","../src/recipes/card.ts","../src/recipes/input.ts","../src/recipes/badge.ts","../src/recipes/iconbox.ts","../src/recipes/testimonial.ts","../src/recipes/pricing-card.ts","../src/recipes/rating.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export const spectreBaseStylesPath = \"@phcdevworks/spectre-ui/base.css\";\nexport const spectreComponentsStylesPath = \"@phcdevworks/spectre-ui/components.css\";\nexport const spectreUtilitiesStylesPath = \"@phcdevworks/spectre-ui/utilities.css\";\nexport const spectreIndexStylesPath = \"@phcdevworks/spectre-ui/index.css\";\n\nexport const spectreStyles = {\n index: spectreIndexStylesPath,\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n};\n","export function cx(...parts: Array<string | false | null | undefined>): string {\n const seen = new Set<string>();\n const classes: string[] = [];\n\n for (const part of parts) {\n if (!part) continue;\n const trimmed = part.trim();\n if (!trimmed) continue;\n\n if (!/\\s/.test(trimmed)) {\n if (!seen.has(trimmed)) {\n seen.add(trimmed);\n classes.push(trimmed);\n }\n continue;\n }\n\n for (const token of trimmed.split(/\\s+/)) {\n if (!token || seen.has(token)) continue;\n seen.add(token);\n classes.push(token);\n }\n }\n\n return classes.join(\" \");\n}\n","type AllowedValues<T extends string> = readonly T[] | Record<T, unknown>;\n\nconst hasOwn = (value: object, key: string): boolean =>\n Object.prototype.hasOwnProperty.call(value, key);\n\nconst isAllowedValue = <T extends string>(value: T, allowed: AllowedValues<T>): boolean =>\n Array.isArray(allowed) ? allowed.includes(value) : hasOwn(allowed, value);\n\nexport function resolveOption<T extends string>(config: {\n name: string;\n value: T | undefined;\n allowed: AllowedValues<T>;\n fallback: T;\n}): T {\n const { name, value, allowed, fallback } = config;\n\n if (value === undefined) return fallback;\n if (isAllowedValue(value, allowed)) return value;\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(`[spectre-ui] Unknown ${name}: ${value}`);\n }\n\n return fallback;\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst BUTTON_VARIANTS = {\n primary: true,\n secondary: true,\n ghost: true,\n danger: true,\n success: true,\n cta: true,\n accent: true,\n} as const;\n\nconst BUTTON_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_VARIANTS;\nexport type ButtonSize = keyof typeof BUTTON_SIZES;\n\n/**\n * Generate classes for the Button component.\n * @sync v2.x - Synced with latest design tokens, including CTA variants.\n */\nexport interface ButtonRecipeOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n fullWidth?: boolean;\n loading?: boolean;\n disabled?: boolean;\n hovered?: boolean;\n focused?: boolean;\n active?: boolean;\n iconOnly?: boolean;\n pill?: boolean;\n}\n\nexport function getButtonClasses(opts: ButtonRecipeOptions = {}): string {\n const {\n variant: variantInput,\n size: sizeInput,\n fullWidth = false,\n loading = false,\n disabled = false,\n hovered = false,\n focused = false,\n active = false,\n iconOnly = false,\n pill = false,\n } = opts;\n\n const variant = resolveOption({\n name: \"button variant\",\n value: variantInput,\n allowed: BUTTON_VARIANTS,\n fallback: \"primary\",\n });\n const size = resolveOption({\n name: \"button size\",\n value: sizeInput,\n allowed: BUTTON_SIZES,\n fallback: \"md\",\n });\n\n const variantMap: Record<ButtonVariant, string> = {\n primary: \"sp-btn--primary\",\n secondary: \"sp-btn--secondary\",\n ghost: \"sp-btn--ghost\",\n danger: \"sp-btn--danger\",\n success: \"sp-btn--success\",\n cta: \"sp-btn--cta\",\n accent: \"sp-btn--accent\",\n };\n const variantClass = variantMap[variant];\n\n const sizeMap: Record<ButtonSize, string> = {\n sm: \"sp-btn--sm\",\n md: \"sp-btn--md\",\n lg: \"sp-btn--lg\",\n };\n const sizeClass = sizeMap[size];\n\n return cx(\n \"sp-btn\",\n variantClass,\n sizeClass,\n fullWidth && \"sp-btn--full\",\n loading && \"sp-btn--loading\",\n disabled && \"sp-btn--disabled\",\n hovered && \"sp-btn--hover\",\n focused && \"sp-btn--focus\",\n active && \"sp-btn--active\",\n iconOnly && \"sp-btn--icon\",\n pill && \"sp-btn--pill\",\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst CARD_VARIANTS = {\n elevated: true,\n flat: true,\n outline: true,\n ghost: true,\n} as const;\n\nexport type CardVariant = keyof typeof CARD_VARIANTS;\n\nexport interface CardRecipeOptions {\n variant?: CardVariant;\n interactive?: boolean; // hover/focus styles\n padded?: boolean; // apply default padding\n fullHeight?: boolean;\n disabled?: boolean;\n loading?: boolean;\n hovered?: boolean;\n focused?: boolean;\n}\n\nexport function getCardClasses(opts: CardRecipeOptions = {}): string {\n const {\n variant: variantInput,\n interactive = false,\n padded = false,\n fullHeight = false,\n disabled = false,\n loading = false,\n hovered = false,\n focused = false,\n } = opts;\n\n const variant = resolveOption({\n name: \"card variant\",\n value: variantInput,\n allowed: CARD_VARIANTS,\n fallback: \"elevated\",\n });\n\n const variantMap: Record<CardVariant, string> = {\n elevated: \"sp-card--elevated\",\n flat: \"sp-card--flat\",\n outline: \"sp-card--outline\",\n ghost: \"sp-card--ghost\",\n };\n const variantClass = variantMap[variant];\n\n return cx(\n \"sp-card\",\n variantClass,\n interactive && \"sp-card--interactive\",\n padded && \"sp-card--padded\",\n fullHeight && \"sp-card--full\",\n disabled && \"sp-card--disabled\",\n loading && \"sp-card--loading\",\n hovered && \"sp-card--hover\",\n focused && \"sp-card--focus\",\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst INPUT_STATES = {\n default: true,\n error: true,\n success: true,\n disabled: true,\n loading: true,\n} as const;\n\nconst INPUT_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type InputState = keyof typeof INPUT_STATES;\nexport type InputSize = keyof typeof INPUT_SIZES;\n\nexport interface InputRecipeOptions {\n state?: InputState;\n size?: InputSize;\n fullWidth?: boolean;\n pill?: boolean;\n focused?: boolean;\n hovered?: boolean;\n}\n\nexport function getInputClasses(opts: InputRecipeOptions = {}): string {\n const {\n state: stateInput,\n size: sizeInput,\n fullWidth = false,\n pill = false,\n focused = false,\n hovered = false,\n } = opts;\n\n const state = resolveOption({\n name: \"input state\",\n value: stateInput,\n allowed: INPUT_STATES,\n fallback: \"default\",\n });\n const size = resolveOption({\n name: \"input size\",\n value: sizeInput,\n allowed: INPUT_SIZES,\n fallback: \"md\",\n });\n\n const sizeMap: Record<InputSize, string> = {\n sm: \"sp-input--sm\",\n md: \"sp-input--md\",\n lg: \"sp-input--lg\",\n };\n const sizeClass = sizeMap[size];\n\n // State\n return cx(\n \"sp-input\",\n sizeClass,\n state === \"error\" && \"sp-input--error\",\n state === \"success\" && \"sp-input--success\",\n // Visual state only; actual disabled attribute is handled by adapters.\n state === \"disabled\" && \"sp-input--disabled\",\n state === \"loading\" && \"sp-input--loading\",\n focused && \"sp-input--focus\",\n hovered && \"sp-input--hover\",\n fullWidth && \"sp-input--full\",\n pill && \"sp-input--pill\",\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst BADGE_VARIANTS = {\n primary: true,\n secondary: true,\n success: true,\n warning: true,\n danger: true,\n neutral: true,\n info: true,\n} as const;\n\nconst BADGE_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type BadgeVariant = keyof typeof BADGE_VARIANTS;\nexport type BadgeSize = keyof typeof BADGE_SIZES;\n\n/**\n * Generate classes for the Badge component.\n * @sync v2.x - Synced with latest design tokens, including hover states.\n */\nexport interface BadgeRecipeOptions {\n variant?: BadgeVariant;\n size?: BadgeSize;\n interactive?: boolean;\n hovered?: boolean;\n focused?: boolean;\n active?: boolean;\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getBadgeClasses(opts: BadgeRecipeOptions = {}): string {\n const { variant: variantInput, size: sizeInput, interactive, hovered, focused, active, disabled, loading } = opts;\n\n const variant = resolveOption({\n name: \"badge variant\",\n value: variantInput,\n allowed: BADGE_VARIANTS,\n fallback: \"primary\",\n });\n const size = resolveOption({\n name: \"badge size\",\n value: sizeInput,\n allowed: BADGE_SIZES,\n fallback: \"md\",\n });\n\n const variantMap: Record<BadgeVariant, string> = {\n primary: \"sp-badge--primary\",\n secondary: \"sp-badge--secondary\",\n success: \"sp-badge--success\",\n warning: \"sp-badge--warning\",\n danger: \"sp-badge--danger\",\n neutral: \"sp-badge--neutral\",\n info: \"sp-badge--info\",\n };\n const variantClass = variantMap[variant];\n\n const sizeMap: Record<BadgeSize, string> = {\n sm: \"sp-badge--sm\",\n md: \"sp-badge--md\",\n lg: \"sp-badge--lg\",\n };\n const sizeClass = sizeMap[size];\n\n return cx(\n \"sp-badge\",\n variantClass,\n sizeClass,\n interactive && \"sp-badge--interactive\",\n hovered && \"sp-badge--hover\",\n focused && \"sp-badge--focus\",\n active && \"sp-badge--active\",\n disabled && \"sp-badge--disabled\",\n loading && \"sp-badge--loading\"\n );\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst ICONBOX_VARIANTS = {\n primary: true,\n success: true,\n warning: true,\n danger: true,\n info: true,\n} as const;\n\nconst ICONBOX_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type IconBoxVariant = keyof typeof ICONBOX_VARIANTS;\nexport type IconBoxSize = keyof typeof ICONBOX_SIZES;\n\nexport interface IconBoxRecipeOptions {\n variant?: IconBoxVariant;\n size?: IconBoxSize;\n disabled?: boolean;\n loading?: boolean;\n interactive?: boolean;\n hovered?: boolean;\n focused?: boolean;\n active?: boolean;\n}\n\nexport function getIconBoxClasses(opts: IconBoxRecipeOptions = {}): string {\n const {\n variant: variantInput,\n size: sizeInput,\n disabled = false,\n loading = false,\n interactive = false,\n hovered = false,\n focused = false,\n active = false,\n } = opts;\n\n const variant = resolveOption({\n name: \"icon box variant\",\n value: variantInput,\n allowed: ICONBOX_VARIANTS,\n fallback: \"primary\",\n });\n const size = resolveOption({\n name: \"icon box size\",\n value: sizeInput,\n allowed: ICONBOX_SIZES,\n fallback: \"md\",\n });\n\n const variantMap: Record<IconBoxVariant, string> = {\n primary: \"sp-iconbox--primary\",\n success: \"sp-iconbox--success\",\n warning: \"sp-iconbox--warning\",\n danger: \"sp-iconbox--danger\",\n info: \"sp-iconbox--info\",\n };\n const variantClass = variantMap[variant];\n\n const sizeMap: Record<IconBoxSize, string> = {\n sm: \"sp-iconbox--sm\",\n md: \"sp-iconbox--md\",\n lg: \"sp-iconbox--lg\",\n };\n const sizeClass = sizeMap[size];\n\n return cx(\n \"sp-iconbox\",\n variantClass,\n sizeClass,\n disabled && \"sp-iconbox--disabled\",\n loading && \"sp-iconbox--loading\",\n interactive && \"sp-iconbox--interactive\",\n hovered && \"sp-iconbox--hover\",\n focused && \"sp-iconbox--focus\",\n active && \"sp-iconbox--active\"\n );\n}\n","import { cx } from \"../internal/cx\";\n\n/**\n * Generate classes for the Testimonial component.\n * @sync v2.x - Synced with latest design tokens.\n */\nexport interface TestimonialRecipeOptions {\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getTestimonialClasses(opts: TestimonialRecipeOptions = {}): string {\n const { disabled = false, loading = false } = opts;\n return cx(\n \"sp-testimonial\",\n disabled && \"sp-testimonial--disabled\",\n loading && \"sp-testimonial--loading\"\n );\n}\n\nexport function getTestimonialQuoteClasses(): string {\n return cx(\"sp-testimonial-quote\");\n}\n\nexport function getTestimonialAuthorClasses(): string {\n return cx(\"sp-testimonial-author\");\n}\n\nexport function getTestimonialAuthorInfoClasses(): string {\n return cx(\"sp-testimonial-author-info\");\n}\n\nexport function getTestimonialAuthorNameClasses(): string {\n return cx(\"sp-testimonial-author-name\");\n}\n\nexport function getTestimonialAuthorTitleClasses(): string {\n return cx(\"sp-testimonial-author-title\");\n}\n","import { cx } from \"../internal/cx\";\n\n/**\n * Generate classes for the PricingCard component.\n * @sync v2.x - Synced with latest design tokens.\n */\nexport interface PricingCardRecipeOptions {\n featured?: boolean;\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getPricingCardClasses(opts: PricingCardRecipeOptions = {}): string {\n const { featured = false, disabled = false, loading = false } = opts;\n return cx(\n \"sp-pricing-card\",\n featured && \"sp-pricing-card--featured\",\n disabled && \"sp-pricing-card--disabled\",\n loading && \"sp-pricing-card--loading\"\n );\n}\n\nexport function getPricingCardBadgeClasses(): string {\n return cx(\"sp-pricing-card-badge\");\n}\n\nexport function getPricingCardPriceContainerClasses(): string {\n return cx(\"sp-pricing-card-price-container\");\n}\n\nexport function getPricingCardPriceClasses(): string {\n return cx(\"sp-pricing-card-price\");\n}\n\nexport function getPricingCardDescriptionClasses(): string {\n return cx(\"sp-pricing-card-description\");\n}\n","import { cx } from \"../internal/cx\";\nimport { resolveOption } from \"../internal/resolve-option\";\n\nconst RATING_SIZES = {\n sm: true,\n md: true,\n lg: true,\n} as const;\n\nexport type RatingSize = keyof typeof RATING_SIZES;\n\n/**\n * Generate classes for the Rating component.\n * @sync v2.x - Synced with latest design tokens.\n */\nexport interface RatingRecipeOptions {\n size?: RatingSize;\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport function getRatingClasses(opts: RatingRecipeOptions = {}): string {\n const { size: sizeInput, disabled = false, loading = false } = opts;\n\n const size = resolveOption({\n name: \"rating size\",\n value: sizeInput,\n allowed: RATING_SIZES,\n fallback: \"md\",\n });\n\n const sizeMap: Record<RatingSize, string> = {\n sm: \"sp-rating--sm\",\n md: \"sp-rating--md\",\n lg: \"sp-rating--lg\",\n };\n const sizeClass = sizeMap[size];\n\n return cx(\n \"sp-rating\",\n sizeClass,\n disabled && \"sp-rating--disabled\",\n loading && \"sp-rating--loading\"\n );\n}\n\nexport function getRatingStarsClasses(): string {\n return cx(\"sp-rating-stars\");\n}\n\nexport function getRatingStarClasses(isFilled: boolean = false): string {\n return cx(\n \"sp-rating-star\",\n isFilled && \"sp-rating-star--filled\"\n );\n}\n\nexport function getRatingTextClasses(): string {\n return cx(\"sp-rating-text\");\n}\n"]}
|
package/dist/utilities.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
--sp-text-on-surface-subtle: #657287;
|
|
14
14
|
--sp-text-on-surface-meta: #657287;
|
|
15
15
|
--sp-component-card-text: #141b24;
|
|
16
|
-
--sp-component-card-text-muted: #
|
|
16
|
+
--sp-component-card-text-muted: #4b576a;
|
|
17
17
|
--sp-component-input-text: #141b24;
|
|
18
18
|
--sp-component-input-placeholder: #657287;
|
|
19
19
|
--sp-button-text-default: #141b24;
|
|
@@ -172,13 +172,25 @@
|
|
|
172
172
|
--sp-font-md-weight: 500;
|
|
173
173
|
--sp-font-lg-size: 1.25rem;
|
|
174
174
|
--sp-font-lg-line-height: 2rem;
|
|
175
|
-
--sp-font-lg-weight:
|
|
175
|
+
--sp-font-lg-weight: 600;
|
|
176
176
|
--sp-font-xl-size: 1.5rem;
|
|
177
177
|
--sp-font-xl-line-height: 2.125rem;
|
|
178
178
|
--sp-font-xl-weight: 600;
|
|
179
179
|
--sp-font-2xl-size: 1.875rem;
|
|
180
180
|
--sp-font-2xl-line-height: 2.5rem;
|
|
181
|
-
--sp-font-2xl-weight:
|
|
181
|
+
--sp-font-2xl-weight: 700;
|
|
182
|
+
--sp-font-3xl-size: 2.25rem;
|
|
183
|
+
--sp-font-3xl-line-height: 2.75rem;
|
|
184
|
+
--sp-font-3xl-weight: 700;
|
|
185
|
+
--sp-font-4xl-size: 3rem;
|
|
186
|
+
--sp-font-4xl-line-height: 3.5rem;
|
|
187
|
+
--sp-font-4xl-weight: 800;
|
|
188
|
+
--sp-font-5xl-size: 3.75rem;
|
|
189
|
+
--sp-font-5xl-line-height: 4.25rem;
|
|
190
|
+
--sp-font-5xl-weight: 800;
|
|
191
|
+
--sp-font-6xl-size: 4.5rem;
|
|
192
|
+
--sp-font-6xl-line-height: 5rem;
|
|
193
|
+
--sp-font-6xl-weight: 900;
|
|
182
194
|
--sp-font-xs-letter-spacing: 0.02em;
|
|
183
195
|
--sp-text-on-page-default: #141b24;
|
|
184
196
|
--sp-text-on-page-muted: #4b576a;
|
|
@@ -250,6 +262,7 @@
|
|
|
250
262
|
--sp-button-primary-text: #ffffff;
|
|
251
263
|
--sp-button-primary-textdisabled: #8a96ad;
|
|
252
264
|
--sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
|
|
265
|
+
--sp-button-primary-focusvisible: {colors.info.500} / 0.4;
|
|
253
266
|
--sp-button-secondary-bg: #ffffff;
|
|
254
267
|
--sp-button-secondary-bghover: #f7f8fb;
|
|
255
268
|
--sp-button-secondary-bgactive: #eef1f6;
|
|
@@ -259,6 +272,7 @@
|
|
|
259
272
|
--sp-button-secondary-border: #075985;
|
|
260
273
|
--sp-button-secondary-borderdisabled: #d9dfeb;
|
|
261
274
|
--sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
|
|
275
|
+
--sp-button-secondary-focusvisible: {colors.info.500} / 0.4;
|
|
262
276
|
--sp-button-ghost-bg: transparent;
|
|
263
277
|
--sp-button-ghost-bghover: #f0f9ff;
|
|
264
278
|
--sp-button-ghost-bgactive: #e0f2fe;
|
|
@@ -266,6 +280,7 @@
|
|
|
266
280
|
--sp-button-ghost-text: #075985;
|
|
267
281
|
--sp-button-ghost-textdisabled: #8a96ad;
|
|
268
282
|
--sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
|
|
283
|
+
--sp-button-ghost-focusvisible: {colors.info.500} / 0.4;
|
|
269
284
|
--sp-button-danger-bg: #dc2626;
|
|
270
285
|
--sp-button-danger-bghover: #b91c1c;
|
|
271
286
|
--sp-button-danger-bgactive: #991b1b;
|
|
@@ -295,6 +310,7 @@
|
|
|
295
310
|
--sp-button-accent-text: #ffffff;
|
|
296
311
|
--sp-button-accent-textdisabled: #8a96ad;
|
|
297
312
|
--sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
|
|
313
|
+
--sp-button-accent-focusvisible: {colors.accent.500} / 0.4;
|
|
298
314
|
--sp-form-default-bg: #ffffff;
|
|
299
315
|
--sp-form-default-border: #b7c1d4;
|
|
300
316
|
--sp-form-default-text: #141b24;
|
|
@@ -302,6 +318,8 @@
|
|
|
302
318
|
--sp-form-hover-border: #0ea5e9;
|
|
303
319
|
--sp-form-focus-border: #0ea5e9;
|
|
304
320
|
--sp-form-focus-ring: #0ea5e9;
|
|
321
|
+
--sp-form-focusvisible-border: {colors.info.500};
|
|
322
|
+
--sp-form-focusvisible-ring: {colors.info.500};
|
|
305
323
|
--sp-form-valid-border: #22c55e;
|
|
306
324
|
--sp-form-valid-bg: #f0fdf4;
|
|
307
325
|
--sp-form-valid-text: #15803d;
|
|
@@ -368,7 +386,7 @@
|
|
|
368
386
|
--sp-badge-danger-text: #fee2e2;
|
|
369
387
|
--sp-icon-box-bg: #222b38;
|
|
370
388
|
--sp-icon-box-border: #374253;
|
|
371
|
-
--sp-icon-box-icon-default: #
|
|
389
|
+
--sp-icon-box-icon-default: #38bdf8;
|
|
372
390
|
--sp-icon-box-icon-success: #4ade80;
|
|
373
391
|
--sp-icon-box-icon-warning: #ffc21a;
|
|
374
392
|
--sp-icon-box-icon-danger: #f87171;
|