@phcdevworks/spectre-ui 1.6.0 → 1.8.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/CHANGELOG.md +87 -10
- package/README.md +94 -97
- package/dist/base.css +36 -25
- package/dist/components.css +662 -34
- package/dist/index.cjs +231 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +662 -34
- package/dist/index.d.cts +123 -2
- package/dist/index.d.ts +123 -2
- package/dist/index.js +228 -20
- package/dist/index.js.map +1 -1
- package/dist/utilities.css +36 -25
- package/package.json +17 -13
package/dist/index.d.cts
CHANGED
|
@@ -103,6 +103,7 @@ declare const BADGE_VARIANTS: {
|
|
|
103
103
|
readonly neutral: true;
|
|
104
104
|
readonly info: true;
|
|
105
105
|
readonly ghost: true;
|
|
106
|
+
readonly outline: true;
|
|
106
107
|
readonly accent: true;
|
|
107
108
|
readonly cta: true;
|
|
108
109
|
};
|
|
@@ -137,6 +138,7 @@ declare const ICONBOX_VARIANTS: {
|
|
|
137
138
|
readonly ghost: true;
|
|
138
139
|
readonly accent: true;
|
|
139
140
|
readonly cta: true;
|
|
141
|
+
readonly outline: true;
|
|
140
142
|
};
|
|
141
143
|
declare const ICONBOX_SIZES: {
|
|
142
144
|
readonly sm: true;
|
|
@@ -219,6 +221,125 @@ interface RatingRecipeOptions {
|
|
|
219
221
|
declare function getRatingClasses(opts?: RatingRecipeOptions): string;
|
|
220
222
|
declare function getRatingStarsClasses(): string;
|
|
221
223
|
declare function getRatingStarClasses(isFilled?: boolean): string;
|
|
222
|
-
declare function getRatingTextClasses(
|
|
224
|
+
declare function getRatingTextClasses(opts?: {
|
|
225
|
+
disabled?: boolean;
|
|
226
|
+
}): string;
|
|
227
|
+
|
|
228
|
+
declare const ALERT_VARIANTS: {
|
|
229
|
+
readonly info: true;
|
|
230
|
+
readonly success: true;
|
|
231
|
+
readonly warning: true;
|
|
232
|
+
readonly danger: true;
|
|
233
|
+
readonly neutral: true;
|
|
234
|
+
};
|
|
235
|
+
declare const ALERT_SIZES: {
|
|
236
|
+
readonly sm: true;
|
|
237
|
+
readonly md: true;
|
|
238
|
+
readonly lg: true;
|
|
239
|
+
};
|
|
240
|
+
type AlertVariant = keyof typeof ALERT_VARIANTS;
|
|
241
|
+
type AlertSize = keyof typeof ALERT_SIZES;
|
|
242
|
+
interface AlertRecipeOptions {
|
|
243
|
+
variant?: AlertVariant;
|
|
244
|
+
size?: AlertSize;
|
|
245
|
+
dismissed?: boolean;
|
|
246
|
+
fullWidth?: boolean;
|
|
247
|
+
interactive?: boolean;
|
|
248
|
+
hovered?: boolean;
|
|
249
|
+
focused?: boolean;
|
|
250
|
+
active?: boolean;
|
|
251
|
+
disabled?: boolean;
|
|
252
|
+
loading?: boolean;
|
|
253
|
+
}
|
|
254
|
+
declare function getAlertClasses(opts?: AlertRecipeOptions): string;
|
|
255
|
+
|
|
256
|
+
declare const AVATAR_SIZES: {
|
|
257
|
+
readonly xs: true;
|
|
258
|
+
readonly sm: true;
|
|
259
|
+
readonly md: true;
|
|
260
|
+
readonly lg: true;
|
|
261
|
+
readonly xl: true;
|
|
262
|
+
};
|
|
263
|
+
declare const AVATAR_SHAPES: {
|
|
264
|
+
readonly circle: true;
|
|
265
|
+
readonly square: true;
|
|
266
|
+
};
|
|
267
|
+
type AvatarSize = keyof typeof AVATAR_SIZES;
|
|
268
|
+
type AvatarShape = keyof typeof AVATAR_SHAPES;
|
|
269
|
+
interface AvatarRecipeOptions {
|
|
270
|
+
size?: AvatarSize;
|
|
271
|
+
shape?: AvatarShape;
|
|
272
|
+
disabled?: boolean;
|
|
273
|
+
loading?: boolean;
|
|
274
|
+
interactive?: boolean;
|
|
275
|
+
hovered?: boolean;
|
|
276
|
+
focused?: boolean;
|
|
277
|
+
active?: boolean;
|
|
278
|
+
fullWidth?: boolean;
|
|
279
|
+
placeholder?: boolean;
|
|
280
|
+
}
|
|
281
|
+
declare function getAvatarClasses(opts?: AvatarRecipeOptions): string;
|
|
282
|
+
|
|
283
|
+
declare const TAG_VARIANTS: {
|
|
284
|
+
readonly default: true;
|
|
285
|
+
readonly primary: true;
|
|
286
|
+
readonly secondary: true;
|
|
287
|
+
readonly success: true;
|
|
288
|
+
readonly warning: true;
|
|
289
|
+
readonly danger: true;
|
|
290
|
+
readonly info: true;
|
|
291
|
+
readonly neutral: true;
|
|
292
|
+
readonly accent: true;
|
|
293
|
+
readonly cta: true;
|
|
294
|
+
readonly outline: true;
|
|
295
|
+
readonly ghost: true;
|
|
296
|
+
};
|
|
297
|
+
declare const TAG_SIZES: {
|
|
298
|
+
readonly sm: true;
|
|
299
|
+
readonly md: true;
|
|
300
|
+
readonly lg: true;
|
|
301
|
+
};
|
|
302
|
+
type TagVariant = keyof typeof TAG_VARIANTS;
|
|
303
|
+
type TagSize = keyof typeof TAG_SIZES;
|
|
304
|
+
interface TagRecipeOptions {
|
|
305
|
+
variant?: TagVariant;
|
|
306
|
+
size?: TagSize;
|
|
307
|
+
dismissible?: boolean;
|
|
308
|
+
selected?: boolean;
|
|
309
|
+
disabled?: boolean;
|
|
310
|
+
loading?: boolean;
|
|
311
|
+
interactive?: boolean;
|
|
312
|
+
hovered?: boolean;
|
|
313
|
+
focused?: boolean;
|
|
314
|
+
active?: boolean;
|
|
315
|
+
fullWidth?: boolean;
|
|
316
|
+
}
|
|
317
|
+
declare function getTagClasses(opts?: TagRecipeOptions): string;
|
|
318
|
+
|
|
319
|
+
declare const SPINNER_VARIANTS: {
|
|
320
|
+
readonly primary: true;
|
|
321
|
+
readonly secondary: true;
|
|
322
|
+
readonly success: true;
|
|
323
|
+
readonly warning: true;
|
|
324
|
+
readonly danger: true;
|
|
325
|
+
readonly info: true;
|
|
326
|
+
readonly neutral: true;
|
|
327
|
+
readonly accent: true;
|
|
328
|
+
readonly cta: true;
|
|
329
|
+
};
|
|
330
|
+
declare const SPINNER_SIZES: {
|
|
331
|
+
readonly sm: true;
|
|
332
|
+
readonly md: true;
|
|
333
|
+
readonly lg: true;
|
|
334
|
+
};
|
|
335
|
+
type SpinnerVariant = keyof typeof SPINNER_VARIANTS;
|
|
336
|
+
type SpinnerSize = keyof typeof SPINNER_SIZES;
|
|
337
|
+
interface SpinnerRecipeOptions {
|
|
338
|
+
variant?: SpinnerVariant;
|
|
339
|
+
size?: SpinnerSize;
|
|
340
|
+
disabled?: boolean;
|
|
341
|
+
loading?: boolean;
|
|
342
|
+
}
|
|
343
|
+
declare function getSpinnerClasses(opts?: SpinnerRecipeOptions): string;
|
|
223
344
|
|
|
224
|
-
export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type RatingSize, type TestimonialRecipeOptions, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
|
345
|
+
export { type AlertRecipeOptions, type AlertSize, type AlertVariant, type AvatarRecipeOptions, type AvatarShape, type AvatarSize, type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type RatingSize, type SpinnerRecipeOptions, type SpinnerSize, type SpinnerVariant, type TagRecipeOptions, type TagSize, type TagVariant, type TestimonialRecipeOptions, getAlertClasses, getAvatarClasses, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getSpinnerClasses, getTagClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
package/dist/index.d.ts
CHANGED
|
@@ -103,6 +103,7 @@ declare const BADGE_VARIANTS: {
|
|
|
103
103
|
readonly neutral: true;
|
|
104
104
|
readonly info: true;
|
|
105
105
|
readonly ghost: true;
|
|
106
|
+
readonly outline: true;
|
|
106
107
|
readonly accent: true;
|
|
107
108
|
readonly cta: true;
|
|
108
109
|
};
|
|
@@ -137,6 +138,7 @@ declare const ICONBOX_VARIANTS: {
|
|
|
137
138
|
readonly ghost: true;
|
|
138
139
|
readonly accent: true;
|
|
139
140
|
readonly cta: true;
|
|
141
|
+
readonly outline: true;
|
|
140
142
|
};
|
|
141
143
|
declare const ICONBOX_SIZES: {
|
|
142
144
|
readonly sm: true;
|
|
@@ -219,6 +221,125 @@ interface RatingRecipeOptions {
|
|
|
219
221
|
declare function getRatingClasses(opts?: RatingRecipeOptions): string;
|
|
220
222
|
declare function getRatingStarsClasses(): string;
|
|
221
223
|
declare function getRatingStarClasses(isFilled?: boolean): string;
|
|
222
|
-
declare function getRatingTextClasses(
|
|
224
|
+
declare function getRatingTextClasses(opts?: {
|
|
225
|
+
disabled?: boolean;
|
|
226
|
+
}): string;
|
|
227
|
+
|
|
228
|
+
declare const ALERT_VARIANTS: {
|
|
229
|
+
readonly info: true;
|
|
230
|
+
readonly success: true;
|
|
231
|
+
readonly warning: true;
|
|
232
|
+
readonly danger: true;
|
|
233
|
+
readonly neutral: true;
|
|
234
|
+
};
|
|
235
|
+
declare const ALERT_SIZES: {
|
|
236
|
+
readonly sm: true;
|
|
237
|
+
readonly md: true;
|
|
238
|
+
readonly lg: true;
|
|
239
|
+
};
|
|
240
|
+
type AlertVariant = keyof typeof ALERT_VARIANTS;
|
|
241
|
+
type AlertSize = keyof typeof ALERT_SIZES;
|
|
242
|
+
interface AlertRecipeOptions {
|
|
243
|
+
variant?: AlertVariant;
|
|
244
|
+
size?: AlertSize;
|
|
245
|
+
dismissed?: boolean;
|
|
246
|
+
fullWidth?: boolean;
|
|
247
|
+
interactive?: boolean;
|
|
248
|
+
hovered?: boolean;
|
|
249
|
+
focused?: boolean;
|
|
250
|
+
active?: boolean;
|
|
251
|
+
disabled?: boolean;
|
|
252
|
+
loading?: boolean;
|
|
253
|
+
}
|
|
254
|
+
declare function getAlertClasses(opts?: AlertRecipeOptions): string;
|
|
255
|
+
|
|
256
|
+
declare const AVATAR_SIZES: {
|
|
257
|
+
readonly xs: true;
|
|
258
|
+
readonly sm: true;
|
|
259
|
+
readonly md: true;
|
|
260
|
+
readonly lg: true;
|
|
261
|
+
readonly xl: true;
|
|
262
|
+
};
|
|
263
|
+
declare const AVATAR_SHAPES: {
|
|
264
|
+
readonly circle: true;
|
|
265
|
+
readonly square: true;
|
|
266
|
+
};
|
|
267
|
+
type AvatarSize = keyof typeof AVATAR_SIZES;
|
|
268
|
+
type AvatarShape = keyof typeof AVATAR_SHAPES;
|
|
269
|
+
interface AvatarRecipeOptions {
|
|
270
|
+
size?: AvatarSize;
|
|
271
|
+
shape?: AvatarShape;
|
|
272
|
+
disabled?: boolean;
|
|
273
|
+
loading?: boolean;
|
|
274
|
+
interactive?: boolean;
|
|
275
|
+
hovered?: boolean;
|
|
276
|
+
focused?: boolean;
|
|
277
|
+
active?: boolean;
|
|
278
|
+
fullWidth?: boolean;
|
|
279
|
+
placeholder?: boolean;
|
|
280
|
+
}
|
|
281
|
+
declare function getAvatarClasses(opts?: AvatarRecipeOptions): string;
|
|
282
|
+
|
|
283
|
+
declare const TAG_VARIANTS: {
|
|
284
|
+
readonly default: true;
|
|
285
|
+
readonly primary: true;
|
|
286
|
+
readonly secondary: true;
|
|
287
|
+
readonly success: true;
|
|
288
|
+
readonly warning: true;
|
|
289
|
+
readonly danger: true;
|
|
290
|
+
readonly info: true;
|
|
291
|
+
readonly neutral: true;
|
|
292
|
+
readonly accent: true;
|
|
293
|
+
readonly cta: true;
|
|
294
|
+
readonly outline: true;
|
|
295
|
+
readonly ghost: true;
|
|
296
|
+
};
|
|
297
|
+
declare const TAG_SIZES: {
|
|
298
|
+
readonly sm: true;
|
|
299
|
+
readonly md: true;
|
|
300
|
+
readonly lg: true;
|
|
301
|
+
};
|
|
302
|
+
type TagVariant = keyof typeof TAG_VARIANTS;
|
|
303
|
+
type TagSize = keyof typeof TAG_SIZES;
|
|
304
|
+
interface TagRecipeOptions {
|
|
305
|
+
variant?: TagVariant;
|
|
306
|
+
size?: TagSize;
|
|
307
|
+
dismissible?: boolean;
|
|
308
|
+
selected?: boolean;
|
|
309
|
+
disabled?: boolean;
|
|
310
|
+
loading?: boolean;
|
|
311
|
+
interactive?: boolean;
|
|
312
|
+
hovered?: boolean;
|
|
313
|
+
focused?: boolean;
|
|
314
|
+
active?: boolean;
|
|
315
|
+
fullWidth?: boolean;
|
|
316
|
+
}
|
|
317
|
+
declare function getTagClasses(opts?: TagRecipeOptions): string;
|
|
318
|
+
|
|
319
|
+
declare const SPINNER_VARIANTS: {
|
|
320
|
+
readonly primary: true;
|
|
321
|
+
readonly secondary: true;
|
|
322
|
+
readonly success: true;
|
|
323
|
+
readonly warning: true;
|
|
324
|
+
readonly danger: true;
|
|
325
|
+
readonly info: true;
|
|
326
|
+
readonly neutral: true;
|
|
327
|
+
readonly accent: true;
|
|
328
|
+
readonly cta: true;
|
|
329
|
+
};
|
|
330
|
+
declare const SPINNER_SIZES: {
|
|
331
|
+
readonly sm: true;
|
|
332
|
+
readonly md: true;
|
|
333
|
+
readonly lg: true;
|
|
334
|
+
};
|
|
335
|
+
type SpinnerVariant = keyof typeof SPINNER_VARIANTS;
|
|
336
|
+
type SpinnerSize = keyof typeof SPINNER_SIZES;
|
|
337
|
+
interface SpinnerRecipeOptions {
|
|
338
|
+
variant?: SpinnerVariant;
|
|
339
|
+
size?: SpinnerSize;
|
|
340
|
+
disabled?: boolean;
|
|
341
|
+
loading?: boolean;
|
|
342
|
+
}
|
|
343
|
+
declare function getSpinnerClasses(opts?: SpinnerRecipeOptions): string;
|
|
223
344
|
|
|
224
|
-
export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type RatingSize, type TestimonialRecipeOptions, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
|
345
|
+
export { type AlertRecipeOptions, type AlertSize, type AlertVariant, type AvatarRecipeOptions, type AvatarShape, type AvatarSize, type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type RatingSize, type SpinnerRecipeOptions, type SpinnerSize, type SpinnerVariant, type TagRecipeOptions, type TagSize, type TagVariant, type TestimonialRecipeOptions, getAlertClasses, getAvatarClasses, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getSpinnerClasses, getTagClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
package/dist/index.js
CHANGED
|
@@ -110,9 +110,9 @@ function getButtonClasses(opts = {}) {
|
|
|
110
110
|
fullWidth && "sp-btn--full",
|
|
111
111
|
loading && "sp-btn--loading",
|
|
112
112
|
disabled && "sp-btn--disabled",
|
|
113
|
-
hovered && "sp-btn--hover",
|
|
114
|
-
focused && "sp-btn--focus",
|
|
115
|
-
active && "sp-btn--active",
|
|
113
|
+
hovered && "sp-btn--hover is-hover",
|
|
114
|
+
focused && "sp-btn--focus is-focus",
|
|
115
|
+
active && "sp-btn--active is-active",
|
|
116
116
|
iconOnly && "sp-btn--icon",
|
|
117
117
|
pill && "sp-btn--pill"
|
|
118
118
|
);
|
|
@@ -253,6 +253,7 @@ var BADGE_VARIANTS = {
|
|
|
253
253
|
neutral: true,
|
|
254
254
|
info: true,
|
|
255
255
|
ghost: true,
|
|
256
|
+
outline: true,
|
|
256
257
|
accent: true,
|
|
257
258
|
cta: true
|
|
258
259
|
};
|
|
@@ -294,6 +295,7 @@ function getBadgeClasses(opts = {}) {
|
|
|
294
295
|
neutral: "sp-badge--neutral",
|
|
295
296
|
info: "sp-badge--info",
|
|
296
297
|
ghost: "sp-badge--ghost",
|
|
298
|
+
outline: "sp-badge--outline",
|
|
297
299
|
accent: "sp-badge--accent",
|
|
298
300
|
cta: "sp-badge--cta"
|
|
299
301
|
};
|
|
@@ -329,7 +331,8 @@ var ICONBOX_VARIANTS = {
|
|
|
329
331
|
neutral: true,
|
|
330
332
|
ghost: true,
|
|
331
333
|
accent: true,
|
|
332
|
-
cta: true
|
|
334
|
+
cta: true,
|
|
335
|
+
outline: true
|
|
333
336
|
};
|
|
334
337
|
var ICONBOX_SIZES = {
|
|
335
338
|
sm: true,
|
|
@@ -371,7 +374,8 @@ function getIconBoxClasses(opts = {}) {
|
|
|
371
374
|
neutral: "sp-iconbox--neutral",
|
|
372
375
|
ghost: "sp-iconbox--ghost",
|
|
373
376
|
accent: "sp-iconbox--accent",
|
|
374
|
-
cta: "sp-iconbox--cta"
|
|
377
|
+
cta: "sp-iconbox--cta",
|
|
378
|
+
outline: "sp-iconbox--outline"
|
|
375
379
|
};
|
|
376
380
|
const variantClass = variantMap[variant];
|
|
377
381
|
const sizeMap = {
|
|
@@ -515,21 +519,15 @@ function getRatingClasses(opts = {}) {
|
|
|
515
519
|
allowed: RATING_SIZES,
|
|
516
520
|
fallback: "md"
|
|
517
521
|
});
|
|
518
|
-
const sizeMap = {
|
|
519
|
-
sm: "sp-rating--sm",
|
|
520
|
-
md: "sp-rating--md",
|
|
521
|
-
lg: "sp-rating--lg"
|
|
522
|
-
};
|
|
523
|
-
const sizeClass = sizeMap[size];
|
|
524
522
|
return cx(
|
|
525
523
|
"sp-rating",
|
|
526
|
-
|
|
524
|
+
`sp-rating--${size}`,
|
|
527
525
|
disabled && "sp-rating--disabled",
|
|
528
526
|
loading && "sp-rating--loading",
|
|
529
527
|
interactive && "sp-rating--interactive",
|
|
530
|
-
hovered && "sp-rating--hover",
|
|
531
|
-
focused && "sp-rating--focus",
|
|
532
|
-
active && "sp-rating--active",
|
|
528
|
+
hovered && "sp-rating--hover is-hover",
|
|
529
|
+
focused && "sp-rating--focus is-focus",
|
|
530
|
+
active && "sp-rating--active is-active",
|
|
533
531
|
pill && "sp-rating--pill",
|
|
534
532
|
fullWidth && "sp-rating--full"
|
|
535
533
|
);
|
|
@@ -538,15 +536,225 @@ function getRatingStarsClasses() {
|
|
|
538
536
|
return cx("sp-rating-stars");
|
|
539
537
|
}
|
|
540
538
|
function getRatingStarClasses(isFilled = false) {
|
|
539
|
+
return cx("sp-rating-star", isFilled && "sp-rating-star--filled");
|
|
540
|
+
}
|
|
541
|
+
function getRatingTextClasses(opts = {}) {
|
|
542
|
+
const { disabled = false } = opts;
|
|
543
|
+
return cx("sp-rating-text", disabled && "sp-rating-text--disabled");
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
// src/recipes/alert.ts
|
|
547
|
+
var ALERT_VARIANTS = {
|
|
548
|
+
info: true,
|
|
549
|
+
success: true,
|
|
550
|
+
warning: true,
|
|
551
|
+
danger: true,
|
|
552
|
+
neutral: true
|
|
553
|
+
};
|
|
554
|
+
var ALERT_SIZES = {
|
|
555
|
+
sm: true,
|
|
556
|
+
md: true,
|
|
557
|
+
lg: true
|
|
558
|
+
};
|
|
559
|
+
function getAlertClasses(opts = {}) {
|
|
560
|
+
const {
|
|
561
|
+
variant: variantInput,
|
|
562
|
+
size: sizeInput,
|
|
563
|
+
dismissed = false,
|
|
564
|
+
fullWidth = false,
|
|
565
|
+
interactive = false,
|
|
566
|
+
hovered = false,
|
|
567
|
+
focused = false,
|
|
568
|
+
active = false,
|
|
569
|
+
disabled = false,
|
|
570
|
+
loading = false
|
|
571
|
+
} = opts;
|
|
572
|
+
const variant = resolveOption({
|
|
573
|
+
name: "alert variant",
|
|
574
|
+
value: variantInput,
|
|
575
|
+
allowed: ALERT_VARIANTS,
|
|
576
|
+
fallback: "info"
|
|
577
|
+
});
|
|
578
|
+
const size = resolveOption({
|
|
579
|
+
name: "alert size",
|
|
580
|
+
value: sizeInput,
|
|
581
|
+
allowed: ALERT_SIZES,
|
|
582
|
+
fallback: "md"
|
|
583
|
+
});
|
|
584
|
+
return cx(
|
|
585
|
+
"sp-alert",
|
|
586
|
+
`sp-alert--${variant}`,
|
|
587
|
+
`sp-alert--${size}`,
|
|
588
|
+
dismissed && "sp-alert--dismissed",
|
|
589
|
+
fullWidth && "sp-alert--full",
|
|
590
|
+
interactive && "sp-alert--interactive",
|
|
591
|
+
hovered && "sp-alert--hover is-hover",
|
|
592
|
+
focused && "sp-alert--focus is-focus",
|
|
593
|
+
active && "sp-alert--active is-active",
|
|
594
|
+
disabled && "sp-alert--disabled",
|
|
595
|
+
loading && "sp-alert--loading"
|
|
596
|
+
);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
// src/recipes/avatar.ts
|
|
600
|
+
var AVATAR_SIZES = {
|
|
601
|
+
xs: true,
|
|
602
|
+
sm: true,
|
|
603
|
+
md: true,
|
|
604
|
+
lg: true,
|
|
605
|
+
xl: true
|
|
606
|
+
};
|
|
607
|
+
var AVATAR_SHAPES = {
|
|
608
|
+
circle: true,
|
|
609
|
+
square: true
|
|
610
|
+
};
|
|
611
|
+
function getAvatarClasses(opts = {}) {
|
|
612
|
+
const {
|
|
613
|
+
size: sizeInput,
|
|
614
|
+
shape: shapeInput,
|
|
615
|
+
disabled = false,
|
|
616
|
+
loading = false,
|
|
617
|
+
interactive = false,
|
|
618
|
+
hovered = false,
|
|
619
|
+
focused = false,
|
|
620
|
+
active = false,
|
|
621
|
+
fullWidth = false,
|
|
622
|
+
placeholder = false
|
|
623
|
+
} = opts;
|
|
624
|
+
const size = resolveOption({
|
|
625
|
+
name: "avatar size",
|
|
626
|
+
value: sizeInput,
|
|
627
|
+
allowed: AVATAR_SIZES,
|
|
628
|
+
fallback: "md"
|
|
629
|
+
});
|
|
630
|
+
const shape = resolveOption({
|
|
631
|
+
name: "avatar shape",
|
|
632
|
+
value: shapeInput,
|
|
633
|
+
allowed: AVATAR_SHAPES,
|
|
634
|
+
fallback: "circle"
|
|
635
|
+
});
|
|
636
|
+
return cx(
|
|
637
|
+
"sp-avatar",
|
|
638
|
+
`sp-avatar--${size}`,
|
|
639
|
+
`sp-avatar--${shape}`,
|
|
640
|
+
disabled && "sp-avatar--disabled",
|
|
641
|
+
loading && "sp-avatar--loading",
|
|
642
|
+
interactive && "sp-avatar--interactive",
|
|
643
|
+
hovered && "sp-avatar--hover is-hover",
|
|
644
|
+
focused && "sp-avatar--focus is-focus",
|
|
645
|
+
active && "sp-avatar--active is-active",
|
|
646
|
+
fullWidth && "sp-avatar--full",
|
|
647
|
+
placeholder && "sp-avatar--placeholder"
|
|
648
|
+
);
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
// src/recipes/tag.ts
|
|
652
|
+
var TAG_VARIANTS = {
|
|
653
|
+
default: true,
|
|
654
|
+
primary: true,
|
|
655
|
+
secondary: true,
|
|
656
|
+
success: true,
|
|
657
|
+
warning: true,
|
|
658
|
+
danger: true,
|
|
659
|
+
info: true,
|
|
660
|
+
neutral: true,
|
|
661
|
+
accent: true,
|
|
662
|
+
cta: true,
|
|
663
|
+
outline: true,
|
|
664
|
+
ghost: true
|
|
665
|
+
};
|
|
666
|
+
var TAG_SIZES = {
|
|
667
|
+
sm: true,
|
|
668
|
+
md: true,
|
|
669
|
+
lg: true
|
|
670
|
+
};
|
|
671
|
+
function getTagClasses(opts = {}) {
|
|
672
|
+
const {
|
|
673
|
+
variant: variantInput,
|
|
674
|
+
size: sizeInput,
|
|
675
|
+
dismissible = false,
|
|
676
|
+
selected = false,
|
|
677
|
+
disabled = false,
|
|
678
|
+
loading = false,
|
|
679
|
+
interactive = false,
|
|
680
|
+
hovered = false,
|
|
681
|
+
focused = false,
|
|
682
|
+
active = false,
|
|
683
|
+
fullWidth = false
|
|
684
|
+
} = opts;
|
|
685
|
+
const variant = resolveOption({
|
|
686
|
+
name: "tag variant",
|
|
687
|
+
value: variantInput,
|
|
688
|
+
allowed: TAG_VARIANTS,
|
|
689
|
+
fallback: "default"
|
|
690
|
+
});
|
|
691
|
+
const size = sizeInput && resolveOption({
|
|
692
|
+
name: "tag size",
|
|
693
|
+
value: sizeInput,
|
|
694
|
+
allowed: TAG_SIZES,
|
|
695
|
+
fallback: "md"
|
|
696
|
+
});
|
|
541
697
|
return cx(
|
|
542
|
-
"sp-
|
|
543
|
-
|
|
698
|
+
"sp-tag",
|
|
699
|
+
`sp-tag--${variant}`,
|
|
700
|
+
size && `sp-tag--${size}`,
|
|
701
|
+
dismissible && "sp-tag--dismissible",
|
|
702
|
+
selected && "sp-tag--selected",
|
|
703
|
+
disabled && "sp-tag--disabled",
|
|
704
|
+
loading && "sp-tag--loading",
|
|
705
|
+
interactive && "sp-tag--interactive",
|
|
706
|
+
hovered && "sp-tag--hover is-hover",
|
|
707
|
+
focused && "sp-tag--focus is-focus",
|
|
708
|
+
active && "sp-tag--active is-active",
|
|
709
|
+
fullWidth && "sp-tag--full"
|
|
544
710
|
);
|
|
545
711
|
}
|
|
546
|
-
|
|
547
|
-
|
|
712
|
+
|
|
713
|
+
// src/recipes/spinner.ts
|
|
714
|
+
var SPINNER_VARIANTS = {
|
|
715
|
+
primary: true,
|
|
716
|
+
secondary: true,
|
|
717
|
+
success: true,
|
|
718
|
+
warning: true,
|
|
719
|
+
danger: true,
|
|
720
|
+
info: true,
|
|
721
|
+
neutral: true,
|
|
722
|
+
accent: true,
|
|
723
|
+
cta: true
|
|
724
|
+
};
|
|
725
|
+
var SPINNER_SIZES = {
|
|
726
|
+
sm: true,
|
|
727
|
+
md: true,
|
|
728
|
+
lg: true
|
|
729
|
+
};
|
|
730
|
+
function getSpinnerClasses(opts = {}) {
|
|
731
|
+
const {
|
|
732
|
+
variant: variantInput,
|
|
733
|
+
size: sizeInput,
|
|
734
|
+
disabled = false,
|
|
735
|
+
loading = false
|
|
736
|
+
} = opts;
|
|
737
|
+
const variant = variantInput && resolveOption({
|
|
738
|
+
name: "spinner variant",
|
|
739
|
+
value: variantInput,
|
|
740
|
+
allowed: SPINNER_VARIANTS,
|
|
741
|
+
fallback: "primary"
|
|
742
|
+
});
|
|
743
|
+
const size = resolveOption({
|
|
744
|
+
name: "spinner size",
|
|
745
|
+
value: sizeInput,
|
|
746
|
+
allowed: SPINNER_SIZES,
|
|
747
|
+
fallback: "md"
|
|
748
|
+
});
|
|
749
|
+
return cx(
|
|
750
|
+
"sp-spinner",
|
|
751
|
+
variant && `sp-spinner--${variant}`,
|
|
752
|
+
`sp-spinner--${size}`,
|
|
753
|
+
disabled && "sp-spinner--disabled",
|
|
754
|
+
loading && "sp-spinner--loading"
|
|
755
|
+
);
|
|
548
756
|
}
|
|
549
757
|
|
|
550
|
-
export { getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
|
758
|
+
export { getAlertClasses, getAvatarClasses, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getSpinnerClasses, getTagClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
|
551
759
|
//# sourceMappingURL=index.js.map
|
|
552
760
|
//# sourceMappingURL=index.js.map
|