@phcdevworks/spectre-ui 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +500 -0
  2. package/README.md +328 -35
  3. package/dist/base.css +23 -26
  4. package/dist/components.css +683 -79
  5. package/dist/index.cjs +275 -44
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.css +683 -79
  8. package/dist/index.d.cts +125 -2
  9. package/dist/index.d.ts +125 -2
  10. package/dist/index.js +268 -45
  11. package/dist/index.js.map +1 -1
  12. package/dist/utilities.css +23 -26
  13. package/package.json +34 -29
package/dist/index.d.cts CHANGED
@@ -85,6 +85,14 @@ interface InputRecipeOptions {
85
85
  loading?: boolean;
86
86
  }
87
87
  declare function getInputClasses(opts?: InputRecipeOptions): string;
88
+ declare function getInputWrapperClasses(): string;
89
+ declare function getInputLabelClasses(opts?: {
90
+ disabled?: boolean;
91
+ }): string;
92
+ declare function getInputHelperTextClasses(opts?: {
93
+ disabled?: boolean;
94
+ }): string;
95
+ declare function getInputErrorMessageClasses(): string;
88
96
 
89
97
  declare const BADGE_VARIANTS: {
90
98
  readonly primary: true;
@@ -96,6 +104,7 @@ declare const BADGE_VARIANTS: {
96
104
  readonly info: true;
97
105
  readonly ghost: true;
98
106
  readonly accent: true;
107
+ readonly cta: true;
99
108
  };
100
109
  declare const BADGE_SIZES: {
101
110
  readonly sm: true;
@@ -127,6 +136,7 @@ declare const ICONBOX_VARIANTS: {
127
136
  readonly neutral: true;
128
137
  readonly ghost: true;
129
138
  readonly accent: true;
139
+ readonly cta: true;
130
140
  };
131
141
  declare const ICONBOX_SIZES: {
132
142
  readonly sm: true;
@@ -145,10 +155,19 @@ interface IconBoxRecipeOptions {
145
155
  focused?: boolean;
146
156
  active?: boolean;
147
157
  pill?: boolean;
158
+ fullWidth?: boolean;
148
159
  }
149
160
  declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
150
161
 
162
+ declare const TESTIMONIAL_VARIANTS: {
163
+ readonly elevated: true;
164
+ readonly flat: true;
165
+ readonly outline: true;
166
+ readonly ghost: true;
167
+ };
168
+ type TestimonialVariant = keyof typeof TESTIMONIAL_VARIANTS;
151
169
  interface TestimonialRecipeOptions {
170
+ variant?: TestimonialVariant;
152
171
  disabled?: boolean;
153
172
  loading?: boolean;
154
173
  interactive?: boolean;
@@ -200,6 +219,110 @@ interface RatingRecipeOptions {
200
219
  declare function getRatingClasses(opts?: RatingRecipeOptions): string;
201
220
  declare function getRatingStarsClasses(): string;
202
221
  declare function getRatingStarClasses(isFilled?: boolean): string;
203
- declare function getRatingTextClasses(): string;
222
+ declare function getRatingTextClasses(opts?: {
223
+ disabled?: boolean;
224
+ }): string;
225
+
226
+ declare const ALERT_VARIANTS: {
227
+ readonly info: true;
228
+ readonly success: true;
229
+ readonly warning: true;
230
+ readonly danger: true;
231
+ readonly neutral: true;
232
+ };
233
+ declare const ALERT_SIZES: {
234
+ readonly sm: true;
235
+ readonly md: true;
236
+ readonly lg: true;
237
+ };
238
+ type AlertVariant = keyof typeof ALERT_VARIANTS;
239
+ type AlertSize = keyof typeof ALERT_SIZES;
240
+ interface AlertRecipeOptions {
241
+ variant?: AlertVariant;
242
+ size?: AlertSize;
243
+ dismissed?: boolean;
244
+ fullWidth?: boolean;
245
+ interactive?: boolean;
246
+ hovered?: boolean;
247
+ focused?: boolean;
248
+ active?: boolean;
249
+ disabled?: boolean;
250
+ loading?: boolean;
251
+ }
252
+ declare function getAlertClasses(opts?: AlertRecipeOptions): string;
253
+
254
+ declare const AVATAR_SIZES: {
255
+ readonly xs: true;
256
+ readonly sm: true;
257
+ readonly md: true;
258
+ readonly lg: true;
259
+ readonly xl: true;
260
+ };
261
+ declare const AVATAR_SHAPES: {
262
+ readonly circle: true;
263
+ readonly square: true;
264
+ };
265
+ type AvatarSize = keyof typeof AVATAR_SIZES;
266
+ type AvatarShape = keyof typeof AVATAR_SHAPES;
267
+ interface AvatarRecipeOptions {
268
+ size?: AvatarSize;
269
+ shape?: AvatarShape;
270
+ disabled?: boolean;
271
+ loading?: boolean;
272
+ interactive?: boolean;
273
+ hovered?: boolean;
274
+ focused?: boolean;
275
+ active?: boolean;
276
+ fullWidth?: boolean;
277
+ placeholder?: boolean;
278
+ }
279
+ declare function getAvatarClasses(opts?: AvatarRecipeOptions): string;
280
+
281
+ declare const TAG_VARIANTS: {
282
+ readonly default: true;
283
+ readonly primary: true;
284
+ readonly secondary: true;
285
+ readonly success: true;
286
+ readonly warning: true;
287
+ readonly danger: true;
288
+ readonly info: true;
289
+ readonly neutral: true;
290
+ readonly accent: true;
291
+ readonly cta: true;
292
+ readonly outline: true;
293
+ readonly ghost: true;
294
+ };
295
+ declare const TAG_SIZES: {
296
+ readonly sm: true;
297
+ readonly md: true;
298
+ readonly lg: true;
299
+ };
300
+ type TagVariant = keyof typeof TAG_VARIANTS;
301
+ type TagSize = keyof typeof TAG_SIZES;
302
+ interface TagRecipeOptions {
303
+ variant?: TagVariant;
304
+ size?: TagSize;
305
+ dismissible?: boolean;
306
+ selected?: boolean;
307
+ disabled?: boolean;
308
+ loading?: boolean;
309
+ interactive?: boolean;
310
+ hovered?: boolean;
311
+ focused?: boolean;
312
+ active?: boolean;
313
+ fullWidth?: boolean;
314
+ }
315
+ declare function getTagClasses(opts?: TagRecipeOptions): string;
316
+
317
+ declare const SPINNER_SIZES: {
318
+ readonly sm: true;
319
+ readonly md: true;
320
+ readonly lg: true;
321
+ };
322
+ type SpinnerSize = keyof typeof SPINNER_SIZES;
323
+ interface SpinnerRecipeOptions {
324
+ size?: SpinnerSize;
325
+ }
326
+ declare function getSpinnerClasses(opts?: SpinnerRecipeOptions): string;
204
327
 
205
- 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, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
328
+ 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 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
@@ -85,6 +85,14 @@ interface InputRecipeOptions {
85
85
  loading?: boolean;
86
86
  }
87
87
  declare function getInputClasses(opts?: InputRecipeOptions): string;
88
+ declare function getInputWrapperClasses(): string;
89
+ declare function getInputLabelClasses(opts?: {
90
+ disabled?: boolean;
91
+ }): string;
92
+ declare function getInputHelperTextClasses(opts?: {
93
+ disabled?: boolean;
94
+ }): string;
95
+ declare function getInputErrorMessageClasses(): string;
88
96
 
89
97
  declare const BADGE_VARIANTS: {
90
98
  readonly primary: true;
@@ -96,6 +104,7 @@ declare const BADGE_VARIANTS: {
96
104
  readonly info: true;
97
105
  readonly ghost: true;
98
106
  readonly accent: true;
107
+ readonly cta: true;
99
108
  };
100
109
  declare const BADGE_SIZES: {
101
110
  readonly sm: true;
@@ -127,6 +136,7 @@ declare const ICONBOX_VARIANTS: {
127
136
  readonly neutral: true;
128
137
  readonly ghost: true;
129
138
  readonly accent: true;
139
+ readonly cta: true;
130
140
  };
131
141
  declare const ICONBOX_SIZES: {
132
142
  readonly sm: true;
@@ -145,10 +155,19 @@ interface IconBoxRecipeOptions {
145
155
  focused?: boolean;
146
156
  active?: boolean;
147
157
  pill?: boolean;
158
+ fullWidth?: boolean;
148
159
  }
149
160
  declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
150
161
 
162
+ declare const TESTIMONIAL_VARIANTS: {
163
+ readonly elevated: true;
164
+ readonly flat: true;
165
+ readonly outline: true;
166
+ readonly ghost: true;
167
+ };
168
+ type TestimonialVariant = keyof typeof TESTIMONIAL_VARIANTS;
151
169
  interface TestimonialRecipeOptions {
170
+ variant?: TestimonialVariant;
152
171
  disabled?: boolean;
153
172
  loading?: boolean;
154
173
  interactive?: boolean;
@@ -200,6 +219,110 @@ interface RatingRecipeOptions {
200
219
  declare function getRatingClasses(opts?: RatingRecipeOptions): string;
201
220
  declare function getRatingStarsClasses(): string;
202
221
  declare function getRatingStarClasses(isFilled?: boolean): string;
203
- declare function getRatingTextClasses(): string;
222
+ declare function getRatingTextClasses(opts?: {
223
+ disabled?: boolean;
224
+ }): string;
225
+
226
+ declare const ALERT_VARIANTS: {
227
+ readonly info: true;
228
+ readonly success: true;
229
+ readonly warning: true;
230
+ readonly danger: true;
231
+ readonly neutral: true;
232
+ };
233
+ declare const ALERT_SIZES: {
234
+ readonly sm: true;
235
+ readonly md: true;
236
+ readonly lg: true;
237
+ };
238
+ type AlertVariant = keyof typeof ALERT_VARIANTS;
239
+ type AlertSize = keyof typeof ALERT_SIZES;
240
+ interface AlertRecipeOptions {
241
+ variant?: AlertVariant;
242
+ size?: AlertSize;
243
+ dismissed?: boolean;
244
+ fullWidth?: boolean;
245
+ interactive?: boolean;
246
+ hovered?: boolean;
247
+ focused?: boolean;
248
+ active?: boolean;
249
+ disabled?: boolean;
250
+ loading?: boolean;
251
+ }
252
+ declare function getAlertClasses(opts?: AlertRecipeOptions): string;
253
+
254
+ declare const AVATAR_SIZES: {
255
+ readonly xs: true;
256
+ readonly sm: true;
257
+ readonly md: true;
258
+ readonly lg: true;
259
+ readonly xl: true;
260
+ };
261
+ declare const AVATAR_SHAPES: {
262
+ readonly circle: true;
263
+ readonly square: true;
264
+ };
265
+ type AvatarSize = keyof typeof AVATAR_SIZES;
266
+ type AvatarShape = keyof typeof AVATAR_SHAPES;
267
+ interface AvatarRecipeOptions {
268
+ size?: AvatarSize;
269
+ shape?: AvatarShape;
270
+ disabled?: boolean;
271
+ loading?: boolean;
272
+ interactive?: boolean;
273
+ hovered?: boolean;
274
+ focused?: boolean;
275
+ active?: boolean;
276
+ fullWidth?: boolean;
277
+ placeholder?: boolean;
278
+ }
279
+ declare function getAvatarClasses(opts?: AvatarRecipeOptions): string;
280
+
281
+ declare const TAG_VARIANTS: {
282
+ readonly default: true;
283
+ readonly primary: true;
284
+ readonly secondary: true;
285
+ readonly success: true;
286
+ readonly warning: true;
287
+ readonly danger: true;
288
+ readonly info: true;
289
+ readonly neutral: true;
290
+ readonly accent: true;
291
+ readonly cta: true;
292
+ readonly outline: true;
293
+ readonly ghost: true;
294
+ };
295
+ declare const TAG_SIZES: {
296
+ readonly sm: true;
297
+ readonly md: true;
298
+ readonly lg: true;
299
+ };
300
+ type TagVariant = keyof typeof TAG_VARIANTS;
301
+ type TagSize = keyof typeof TAG_SIZES;
302
+ interface TagRecipeOptions {
303
+ variant?: TagVariant;
304
+ size?: TagSize;
305
+ dismissible?: boolean;
306
+ selected?: boolean;
307
+ disabled?: boolean;
308
+ loading?: boolean;
309
+ interactive?: boolean;
310
+ hovered?: boolean;
311
+ focused?: boolean;
312
+ active?: boolean;
313
+ fullWidth?: boolean;
314
+ }
315
+ declare function getTagClasses(opts?: TagRecipeOptions): string;
316
+
317
+ declare const SPINNER_SIZES: {
318
+ readonly sm: true;
319
+ readonly md: true;
320
+ readonly lg: true;
321
+ };
322
+ type SpinnerSize = keyof typeof SPINNER_SIZES;
323
+ interface SpinnerRecipeOptions {
324
+ size?: SpinnerSize;
325
+ }
326
+ declare function getSpinnerClasses(opts?: SpinnerRecipeOptions): string;
204
327
 
205
- 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, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
328
+ 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 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 };