@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/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(): string;
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(): string;
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
- sizeClass,
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-rating-star",
543
- isFilled && "sp-rating-star--filled"
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
- function getRatingTextClasses() {
547
- return cx("sp-rating-text");
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