@phcdevworks/spectre-ui 1.7.0 → 1.9.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 +91 -0
- package/README.md +98 -72
- package/dist/base.css +110 -0
- package/dist/components.css +658 -7
- package/dist/index.cjs +191 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +658 -7
- package/dist/index.d.cts +99 -1
- package/dist/index.d.ts +99 -1
- package/dist/index.js +181 -8
- package/dist/index.js.map +1 -1
- package/dist/utilities.css +110 -0
- package/package.json +15 -10
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,8 +138,10 @@ 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: {
|
|
144
|
+
readonly xs: true;
|
|
142
145
|
readonly sm: true;
|
|
143
146
|
readonly md: true;
|
|
144
147
|
readonly lg: true;
|
|
@@ -314,15 +317,110 @@ interface TagRecipeOptions {
|
|
|
314
317
|
}
|
|
315
318
|
declare function getTagClasses(opts?: TagRecipeOptions): string;
|
|
316
319
|
|
|
320
|
+
declare const SPINNER_VARIANTS: {
|
|
321
|
+
readonly primary: true;
|
|
322
|
+
readonly secondary: true;
|
|
323
|
+
readonly success: true;
|
|
324
|
+
readonly warning: true;
|
|
325
|
+
readonly danger: true;
|
|
326
|
+
readonly info: true;
|
|
327
|
+
readonly neutral: true;
|
|
328
|
+
readonly accent: true;
|
|
329
|
+
readonly cta: true;
|
|
330
|
+
};
|
|
317
331
|
declare const SPINNER_SIZES: {
|
|
318
332
|
readonly sm: true;
|
|
319
333
|
readonly md: true;
|
|
320
334
|
readonly lg: true;
|
|
321
335
|
};
|
|
336
|
+
type SpinnerVariant = keyof typeof SPINNER_VARIANTS;
|
|
322
337
|
type SpinnerSize = keyof typeof SPINNER_SIZES;
|
|
323
338
|
interface SpinnerRecipeOptions {
|
|
339
|
+
variant?: SpinnerVariant;
|
|
324
340
|
size?: SpinnerSize;
|
|
341
|
+
disabled?: boolean;
|
|
342
|
+
loading?: boolean;
|
|
325
343
|
}
|
|
326
344
|
declare function getSpinnerClasses(opts?: SpinnerRecipeOptions): string;
|
|
327
345
|
|
|
328
|
-
|
|
346
|
+
interface NavRecipeOptions {
|
|
347
|
+
bordered?: boolean;
|
|
348
|
+
sticky?: boolean;
|
|
349
|
+
fullWidth?: boolean;
|
|
350
|
+
}
|
|
351
|
+
declare function getNavClasses(opts?: NavRecipeOptions): string;
|
|
352
|
+
declare function getNavLinksClasses(): string;
|
|
353
|
+
interface NavLinkRecipeOptions {
|
|
354
|
+
active?: boolean;
|
|
355
|
+
disabled?: boolean;
|
|
356
|
+
hovered?: boolean;
|
|
357
|
+
focused?: boolean;
|
|
358
|
+
}
|
|
359
|
+
declare function getNavLinkClasses(opts?: NavLinkRecipeOptions): string;
|
|
360
|
+
|
|
361
|
+
declare const TOAST_VARIANTS: {
|
|
362
|
+
readonly info: true;
|
|
363
|
+
readonly success: true;
|
|
364
|
+
readonly warning: true;
|
|
365
|
+
readonly danger: true;
|
|
366
|
+
};
|
|
367
|
+
type ToastVariant = keyof typeof TOAST_VARIANTS;
|
|
368
|
+
interface ToastRecipeOptions {
|
|
369
|
+
variant?: ToastVariant;
|
|
370
|
+
dismissed?: boolean;
|
|
371
|
+
fullWidth?: boolean;
|
|
372
|
+
}
|
|
373
|
+
declare function getToastClasses(opts?: ToastRecipeOptions): string;
|
|
374
|
+
interface ToastIconRecipeOptions {
|
|
375
|
+
variant?: ToastVariant;
|
|
376
|
+
}
|
|
377
|
+
declare function getToastIconClasses(opts?: ToastIconRecipeOptions): string;
|
|
378
|
+
|
|
379
|
+
declare const TOOLTIP_PLACEMENTS: {
|
|
380
|
+
readonly top: true;
|
|
381
|
+
readonly bottom: true;
|
|
382
|
+
readonly left: true;
|
|
383
|
+
readonly right: true;
|
|
384
|
+
};
|
|
385
|
+
type TooltipPlacement = keyof typeof TOOLTIP_PLACEMENTS;
|
|
386
|
+
interface TooltipRecipeOptions {
|
|
387
|
+
placement?: TooltipPlacement;
|
|
388
|
+
visible?: boolean;
|
|
389
|
+
}
|
|
390
|
+
declare function getTooltipClasses(opts?: TooltipRecipeOptions): string;
|
|
391
|
+
|
|
392
|
+
declare const DROPDOWN_PLACEMENTS: {
|
|
393
|
+
readonly 'bottom-start': true;
|
|
394
|
+
readonly 'bottom-end': true;
|
|
395
|
+
readonly 'top-start': true;
|
|
396
|
+
readonly 'top-end': true;
|
|
397
|
+
};
|
|
398
|
+
type DropdownPlacement = keyof typeof DROPDOWN_PLACEMENTS;
|
|
399
|
+
interface DropdownRecipeOptions {
|
|
400
|
+
fullWidth?: boolean;
|
|
401
|
+
}
|
|
402
|
+
declare function getDropdownClasses(opts?: DropdownRecipeOptions): string;
|
|
403
|
+
interface DropdownMenuRecipeOptions {
|
|
404
|
+
placement?: DropdownPlacement;
|
|
405
|
+
open?: boolean;
|
|
406
|
+
}
|
|
407
|
+
declare function getDropdownMenuClasses(opts?: DropdownMenuRecipeOptions): string;
|
|
408
|
+
interface DropdownItemRecipeOptions {
|
|
409
|
+
active?: boolean;
|
|
410
|
+
disabled?: boolean;
|
|
411
|
+
hovered?: boolean;
|
|
412
|
+
focused?: boolean;
|
|
413
|
+
}
|
|
414
|
+
declare function getDropdownItemClasses(opts?: DropdownItemRecipeOptions): string;
|
|
415
|
+
|
|
416
|
+
interface ModalOverlayRecipeOptions {
|
|
417
|
+
open?: boolean;
|
|
418
|
+
}
|
|
419
|
+
declare function getModalOverlayClasses(opts?: ModalOverlayRecipeOptions): string;
|
|
420
|
+
interface ModalRecipeOptions {
|
|
421
|
+
open?: boolean;
|
|
422
|
+
fullWidth?: boolean;
|
|
423
|
+
}
|
|
424
|
+
declare function getModalClasses(opts?: ModalRecipeOptions): string;
|
|
425
|
+
|
|
426
|
+
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 DropdownItemRecipeOptions, type DropdownMenuRecipeOptions, type DropdownPlacement, type DropdownRecipeOptions, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type ModalOverlayRecipeOptions, type ModalRecipeOptions, type NavLinkRecipeOptions, type NavRecipeOptions, type PricingCardRecipeOptions, type RatingRecipeOptions, type RatingSize, type SpinnerRecipeOptions, type SpinnerSize, type SpinnerVariant, type TagRecipeOptions, type TagSize, type TagVariant, type TestimonialRecipeOptions, type ToastIconRecipeOptions, type ToastRecipeOptions, type ToastVariant, type TooltipPlacement, type TooltipRecipeOptions, getAlertClasses, getAvatarClasses, getBadgeClasses, getButtonClasses, getCardClasses, getDropdownClasses, getDropdownItemClasses, getDropdownMenuClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getModalClasses, getModalOverlayClasses, getNavClasses, getNavLinkClasses, getNavLinksClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getSpinnerClasses, getTagClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, getToastClasses, getToastIconClasses, getTooltipClasses, 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,8 +138,10 @@ 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: {
|
|
144
|
+
readonly xs: true;
|
|
142
145
|
readonly sm: true;
|
|
143
146
|
readonly md: true;
|
|
144
147
|
readonly lg: true;
|
|
@@ -314,15 +317,110 @@ interface TagRecipeOptions {
|
|
|
314
317
|
}
|
|
315
318
|
declare function getTagClasses(opts?: TagRecipeOptions): string;
|
|
316
319
|
|
|
320
|
+
declare const SPINNER_VARIANTS: {
|
|
321
|
+
readonly primary: true;
|
|
322
|
+
readonly secondary: true;
|
|
323
|
+
readonly success: true;
|
|
324
|
+
readonly warning: true;
|
|
325
|
+
readonly danger: true;
|
|
326
|
+
readonly info: true;
|
|
327
|
+
readonly neutral: true;
|
|
328
|
+
readonly accent: true;
|
|
329
|
+
readonly cta: true;
|
|
330
|
+
};
|
|
317
331
|
declare const SPINNER_SIZES: {
|
|
318
332
|
readonly sm: true;
|
|
319
333
|
readonly md: true;
|
|
320
334
|
readonly lg: true;
|
|
321
335
|
};
|
|
336
|
+
type SpinnerVariant = keyof typeof SPINNER_VARIANTS;
|
|
322
337
|
type SpinnerSize = keyof typeof SPINNER_SIZES;
|
|
323
338
|
interface SpinnerRecipeOptions {
|
|
339
|
+
variant?: SpinnerVariant;
|
|
324
340
|
size?: SpinnerSize;
|
|
341
|
+
disabled?: boolean;
|
|
342
|
+
loading?: boolean;
|
|
325
343
|
}
|
|
326
344
|
declare function getSpinnerClasses(opts?: SpinnerRecipeOptions): string;
|
|
327
345
|
|
|
328
|
-
|
|
346
|
+
interface NavRecipeOptions {
|
|
347
|
+
bordered?: boolean;
|
|
348
|
+
sticky?: boolean;
|
|
349
|
+
fullWidth?: boolean;
|
|
350
|
+
}
|
|
351
|
+
declare function getNavClasses(opts?: NavRecipeOptions): string;
|
|
352
|
+
declare function getNavLinksClasses(): string;
|
|
353
|
+
interface NavLinkRecipeOptions {
|
|
354
|
+
active?: boolean;
|
|
355
|
+
disabled?: boolean;
|
|
356
|
+
hovered?: boolean;
|
|
357
|
+
focused?: boolean;
|
|
358
|
+
}
|
|
359
|
+
declare function getNavLinkClasses(opts?: NavLinkRecipeOptions): string;
|
|
360
|
+
|
|
361
|
+
declare const TOAST_VARIANTS: {
|
|
362
|
+
readonly info: true;
|
|
363
|
+
readonly success: true;
|
|
364
|
+
readonly warning: true;
|
|
365
|
+
readonly danger: true;
|
|
366
|
+
};
|
|
367
|
+
type ToastVariant = keyof typeof TOAST_VARIANTS;
|
|
368
|
+
interface ToastRecipeOptions {
|
|
369
|
+
variant?: ToastVariant;
|
|
370
|
+
dismissed?: boolean;
|
|
371
|
+
fullWidth?: boolean;
|
|
372
|
+
}
|
|
373
|
+
declare function getToastClasses(opts?: ToastRecipeOptions): string;
|
|
374
|
+
interface ToastIconRecipeOptions {
|
|
375
|
+
variant?: ToastVariant;
|
|
376
|
+
}
|
|
377
|
+
declare function getToastIconClasses(opts?: ToastIconRecipeOptions): string;
|
|
378
|
+
|
|
379
|
+
declare const TOOLTIP_PLACEMENTS: {
|
|
380
|
+
readonly top: true;
|
|
381
|
+
readonly bottom: true;
|
|
382
|
+
readonly left: true;
|
|
383
|
+
readonly right: true;
|
|
384
|
+
};
|
|
385
|
+
type TooltipPlacement = keyof typeof TOOLTIP_PLACEMENTS;
|
|
386
|
+
interface TooltipRecipeOptions {
|
|
387
|
+
placement?: TooltipPlacement;
|
|
388
|
+
visible?: boolean;
|
|
389
|
+
}
|
|
390
|
+
declare function getTooltipClasses(opts?: TooltipRecipeOptions): string;
|
|
391
|
+
|
|
392
|
+
declare const DROPDOWN_PLACEMENTS: {
|
|
393
|
+
readonly 'bottom-start': true;
|
|
394
|
+
readonly 'bottom-end': true;
|
|
395
|
+
readonly 'top-start': true;
|
|
396
|
+
readonly 'top-end': true;
|
|
397
|
+
};
|
|
398
|
+
type DropdownPlacement = keyof typeof DROPDOWN_PLACEMENTS;
|
|
399
|
+
interface DropdownRecipeOptions {
|
|
400
|
+
fullWidth?: boolean;
|
|
401
|
+
}
|
|
402
|
+
declare function getDropdownClasses(opts?: DropdownRecipeOptions): string;
|
|
403
|
+
interface DropdownMenuRecipeOptions {
|
|
404
|
+
placement?: DropdownPlacement;
|
|
405
|
+
open?: boolean;
|
|
406
|
+
}
|
|
407
|
+
declare function getDropdownMenuClasses(opts?: DropdownMenuRecipeOptions): string;
|
|
408
|
+
interface DropdownItemRecipeOptions {
|
|
409
|
+
active?: boolean;
|
|
410
|
+
disabled?: boolean;
|
|
411
|
+
hovered?: boolean;
|
|
412
|
+
focused?: boolean;
|
|
413
|
+
}
|
|
414
|
+
declare function getDropdownItemClasses(opts?: DropdownItemRecipeOptions): string;
|
|
415
|
+
|
|
416
|
+
interface ModalOverlayRecipeOptions {
|
|
417
|
+
open?: boolean;
|
|
418
|
+
}
|
|
419
|
+
declare function getModalOverlayClasses(opts?: ModalOverlayRecipeOptions): string;
|
|
420
|
+
interface ModalRecipeOptions {
|
|
421
|
+
open?: boolean;
|
|
422
|
+
fullWidth?: boolean;
|
|
423
|
+
}
|
|
424
|
+
declare function getModalClasses(opts?: ModalRecipeOptions): string;
|
|
425
|
+
|
|
426
|
+
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 DropdownItemRecipeOptions, type DropdownMenuRecipeOptions, type DropdownPlacement, type DropdownRecipeOptions, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type ModalOverlayRecipeOptions, type ModalRecipeOptions, type NavLinkRecipeOptions, type NavRecipeOptions, type PricingCardRecipeOptions, type RatingRecipeOptions, type RatingSize, type SpinnerRecipeOptions, type SpinnerSize, type SpinnerVariant, type TagRecipeOptions, type TagSize, type TagVariant, type TestimonialRecipeOptions, type ToastIconRecipeOptions, type ToastRecipeOptions, type ToastVariant, type TooltipPlacement, type TooltipRecipeOptions, getAlertClasses, getAvatarClasses, getBadgeClasses, getButtonClasses, getCardClasses, getDropdownClasses, getDropdownItemClasses, getDropdownMenuClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getModalClasses, getModalOverlayClasses, getNavClasses, getNavLinkClasses, getNavLinksClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getSpinnerClasses, getTagClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, getToastClasses, getToastIconClasses, getTooltipClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
package/dist/index.js
CHANGED
|
@@ -215,9 +215,9 @@ function getInputClasses(opts = {}) {
|
|
|
215
215
|
// Visual state only; actual disabled attribute is handled by adapters.
|
|
216
216
|
(state === "disabled" || disabled) && "sp-input--disabled",
|
|
217
217
|
(state === "loading" || loading) && "sp-input--loading",
|
|
218
|
-
focused && "sp-input--focus",
|
|
219
|
-
hovered && "sp-input--hover",
|
|
220
|
-
active && "sp-input--active",
|
|
218
|
+
focused && "sp-input--focus is-focus",
|
|
219
|
+
hovered && "sp-input--hover is-hover",
|
|
220
|
+
active && "sp-input--active is-active",
|
|
221
221
|
fullWidth && "sp-input--full",
|
|
222
222
|
pill && "sp-input--pill"
|
|
223
223
|
);
|
|
@@ -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,9 +331,11 @@ 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 = {
|
|
338
|
+
xs: true,
|
|
335
339
|
sm: true,
|
|
336
340
|
md: true,
|
|
337
341
|
lg: true
|
|
@@ -371,10 +375,12 @@ function getIconBoxClasses(opts = {}) {
|
|
|
371
375
|
neutral: "sp-iconbox--neutral",
|
|
372
376
|
ghost: "sp-iconbox--ghost",
|
|
373
377
|
accent: "sp-iconbox--accent",
|
|
374
|
-
cta: "sp-iconbox--cta"
|
|
378
|
+
cta: "sp-iconbox--cta",
|
|
379
|
+
outline: "sp-iconbox--outline"
|
|
375
380
|
};
|
|
376
381
|
const variantClass = variantMap[variant];
|
|
377
382
|
const sizeMap = {
|
|
383
|
+
xs: "sp-iconbox--xs",
|
|
378
384
|
sm: "sp-iconbox--sm",
|
|
379
385
|
md: "sp-iconbox--md",
|
|
380
386
|
lg: "sp-iconbox--lg"
|
|
@@ -707,22 +713,189 @@ function getTagClasses(opts = {}) {
|
|
|
707
713
|
}
|
|
708
714
|
|
|
709
715
|
// src/recipes/spinner.ts
|
|
716
|
+
var SPINNER_VARIANTS = {
|
|
717
|
+
primary: true,
|
|
718
|
+
secondary: true,
|
|
719
|
+
success: true,
|
|
720
|
+
warning: true,
|
|
721
|
+
danger: true,
|
|
722
|
+
info: true,
|
|
723
|
+
neutral: true,
|
|
724
|
+
accent: true,
|
|
725
|
+
cta: true
|
|
726
|
+
};
|
|
710
727
|
var SPINNER_SIZES = {
|
|
711
728
|
sm: true,
|
|
712
729
|
md: true,
|
|
713
730
|
lg: true
|
|
714
731
|
};
|
|
715
732
|
function getSpinnerClasses(opts = {}) {
|
|
716
|
-
const {
|
|
733
|
+
const {
|
|
734
|
+
variant: variantInput,
|
|
735
|
+
size: sizeInput,
|
|
736
|
+
disabled = false,
|
|
737
|
+
loading = false
|
|
738
|
+
} = opts;
|
|
739
|
+
const variant = variantInput && resolveOption({
|
|
740
|
+
name: "spinner variant",
|
|
741
|
+
value: variantInput,
|
|
742
|
+
allowed: SPINNER_VARIANTS,
|
|
743
|
+
fallback: "primary"
|
|
744
|
+
});
|
|
717
745
|
const size = resolveOption({
|
|
718
746
|
name: "spinner size",
|
|
719
747
|
value: sizeInput,
|
|
720
748
|
allowed: SPINNER_SIZES,
|
|
721
749
|
fallback: "md"
|
|
722
750
|
});
|
|
723
|
-
return cx(
|
|
751
|
+
return cx(
|
|
752
|
+
"sp-spinner",
|
|
753
|
+
variant && `sp-spinner--${variant}`,
|
|
754
|
+
`sp-spinner--${size}`,
|
|
755
|
+
disabled && "sp-spinner--disabled",
|
|
756
|
+
loading && "sp-spinner--loading"
|
|
757
|
+
);
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
// src/recipes/nav.ts
|
|
761
|
+
function getNavClasses(opts = {}) {
|
|
762
|
+
const { bordered = false, sticky = false, fullWidth = false } = opts;
|
|
763
|
+
return cx(
|
|
764
|
+
"sp-nav",
|
|
765
|
+
bordered && "sp-nav--bordered",
|
|
766
|
+
sticky && "sp-nav--sticky",
|
|
767
|
+
fullWidth && "sp-nav--full"
|
|
768
|
+
);
|
|
769
|
+
}
|
|
770
|
+
function getNavLinksClasses() {
|
|
771
|
+
return cx("sp-nav__links");
|
|
772
|
+
}
|
|
773
|
+
function getNavLinkClasses(opts = {}) {
|
|
774
|
+
const {
|
|
775
|
+
active = false,
|
|
776
|
+
disabled = false,
|
|
777
|
+
hovered = false,
|
|
778
|
+
focused = false
|
|
779
|
+
} = opts;
|
|
780
|
+
return cx(
|
|
781
|
+
"sp-nav__link",
|
|
782
|
+
active && "sp-nav__link--active",
|
|
783
|
+
disabled && "sp-nav__link--disabled",
|
|
784
|
+
hovered && "sp-nav__link--hover is-hover",
|
|
785
|
+
focused && "sp-nav__link--focus is-focus"
|
|
786
|
+
);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
// src/recipes/toast.ts
|
|
790
|
+
var TOAST_VARIANTS = {
|
|
791
|
+
info: true,
|
|
792
|
+
success: true,
|
|
793
|
+
warning: true,
|
|
794
|
+
danger: true
|
|
795
|
+
};
|
|
796
|
+
function getToastClasses(opts = {}) {
|
|
797
|
+
const { variant: variantInput, dismissed = false, fullWidth = false } = opts;
|
|
798
|
+
const variant = resolveOption({
|
|
799
|
+
name: "toast variant",
|
|
800
|
+
value: variantInput,
|
|
801
|
+
allowed: TOAST_VARIANTS,
|
|
802
|
+
fallback: "info"
|
|
803
|
+
});
|
|
804
|
+
return cx(
|
|
805
|
+
"sp-toast",
|
|
806
|
+
`sp-toast--${variant}`,
|
|
807
|
+
dismissed && "sp-toast--dismissed",
|
|
808
|
+
fullWidth && "sp-toast--full"
|
|
809
|
+
);
|
|
810
|
+
}
|
|
811
|
+
function getToastIconClasses(opts = {}) {
|
|
812
|
+
const { variant: variantInput } = opts;
|
|
813
|
+
const variant = resolveOption({
|
|
814
|
+
name: "toast variant",
|
|
815
|
+
value: variantInput,
|
|
816
|
+
allowed: TOAST_VARIANTS,
|
|
817
|
+
fallback: "info"
|
|
818
|
+
});
|
|
819
|
+
return cx("sp-toast__icon", `sp-toast__icon--${variant}`);
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
// src/recipes/tooltip.ts
|
|
823
|
+
var TOOLTIP_PLACEMENTS = {
|
|
824
|
+
top: true,
|
|
825
|
+
bottom: true,
|
|
826
|
+
left: true,
|
|
827
|
+
right: true
|
|
828
|
+
};
|
|
829
|
+
function getTooltipClasses(opts = {}) {
|
|
830
|
+
const { placement: placementInput, visible = false } = opts;
|
|
831
|
+
const placement = resolveOption({
|
|
832
|
+
name: "tooltip placement",
|
|
833
|
+
value: placementInput,
|
|
834
|
+
allowed: TOOLTIP_PLACEMENTS,
|
|
835
|
+
fallback: "top"
|
|
836
|
+
});
|
|
837
|
+
return cx(
|
|
838
|
+
"sp-tooltip",
|
|
839
|
+
`sp-tooltip--${placement}`,
|
|
840
|
+
visible && "sp-tooltip--visible"
|
|
841
|
+
);
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
// src/recipes/dropdown.ts
|
|
845
|
+
var DROPDOWN_PLACEMENTS = {
|
|
846
|
+
"bottom-start": true,
|
|
847
|
+
"bottom-end": true,
|
|
848
|
+
"top-start": true,
|
|
849
|
+
"top-end": true
|
|
850
|
+
};
|
|
851
|
+
function getDropdownClasses(opts = {}) {
|
|
852
|
+
const { fullWidth = false } = opts;
|
|
853
|
+
return cx("sp-dropdown", fullWidth && "sp-dropdown--full");
|
|
854
|
+
}
|
|
855
|
+
function getDropdownMenuClasses(opts = {}) {
|
|
856
|
+
const { placement: placementInput, open = false } = opts;
|
|
857
|
+
const placement = resolveOption({
|
|
858
|
+
name: "dropdown menu placement",
|
|
859
|
+
value: placementInput,
|
|
860
|
+
allowed: DROPDOWN_PLACEMENTS,
|
|
861
|
+
fallback: "bottom-start"
|
|
862
|
+
});
|
|
863
|
+
return cx(
|
|
864
|
+
"sp-dropdown__menu",
|
|
865
|
+
`sp-dropdown__menu--${placement}`,
|
|
866
|
+
open && "sp-dropdown__menu--open"
|
|
867
|
+
);
|
|
868
|
+
}
|
|
869
|
+
function getDropdownItemClasses(opts = {}) {
|
|
870
|
+
const {
|
|
871
|
+
active = false,
|
|
872
|
+
disabled = false,
|
|
873
|
+
hovered = false,
|
|
874
|
+
focused = false
|
|
875
|
+
} = opts;
|
|
876
|
+
return cx(
|
|
877
|
+
"sp-dropdown__item",
|
|
878
|
+
active && "sp-dropdown__item--active",
|
|
879
|
+
disabled && "sp-dropdown__item--disabled",
|
|
880
|
+
hovered && "sp-dropdown__item--hover is-hover",
|
|
881
|
+
focused && "sp-dropdown__item--focus is-focus"
|
|
882
|
+
);
|
|
883
|
+
}
|
|
884
|
+
|
|
885
|
+
// src/recipes/modal.ts
|
|
886
|
+
function getModalOverlayClasses(opts = {}) {
|
|
887
|
+
const { open = false } = opts;
|
|
888
|
+
return cx("sp-modal-overlay", open && "sp-modal-overlay--open");
|
|
889
|
+
}
|
|
890
|
+
function getModalClasses(opts = {}) {
|
|
891
|
+
const { open = false, fullWidth = false } = opts;
|
|
892
|
+
return cx(
|
|
893
|
+
"sp-modal",
|
|
894
|
+
open && "sp-modal--open",
|
|
895
|
+
fullWidth && "sp-modal--full"
|
|
896
|
+
);
|
|
724
897
|
}
|
|
725
898
|
|
|
726
|
-
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 };
|
|
899
|
+
export { getAlertClasses, getAvatarClasses, getBadgeClasses, getButtonClasses, getCardClasses, getDropdownClasses, getDropdownItemClasses, getDropdownMenuClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getModalClasses, getModalOverlayClasses, getNavClasses, getNavLinkClasses, getNavLinksClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getSpinnerClasses, getTagClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, getToastClasses, getToastIconClasses, getTooltipClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
|
|
727
900
|
//# sourceMappingURL=index.js.map
|
|
728
901
|
//# sourceMappingURL=index.js.map
|