@spark-ui/components 10.14.4 → 10.15.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 (8) hide show
  1. package/dist/docgen.json +1 -38
  2. package/dist/progress-tracker/index.d.mts +3 -4
  3. package/dist/progress-tracker/index.d.ts +3 -4
  4. package/dist/progress-tracker/index.js +54 -332
  5. package/dist/progress-tracker/index.js.map +1 -1
  6. package/dist/progress-tracker/index.mjs +54 -332
  7. package/dist/progress-tracker/index.mjs.map +1 -1
  8. package/package.json +5 -5
package/dist/docgen.json CHANGED
@@ -34000,25 +34000,6 @@
34000
34000
  "name": "boolean"
34001
34001
  }
34002
34002
  },
34003
- "design": {
34004
- "defaultValue": null,
34005
- "description": "",
34006
- "name": "design",
34007
- "declarations": [],
34008
- "required": false,
34009
- "type": {
34010
- "name": "enum",
34011
- "raw": "\"tinted\" | \"outline\"",
34012
- "value": [
34013
- {
34014
- "value": "\"tinted\""
34015
- },
34016
- {
34017
- "value": "\"outline\""
34018
- }
34019
- ]
34020
- }
34021
- },
34022
34003
  "size": {
34023
34004
  "defaultValue": null,
34024
34005
  "description": "",
@@ -34049,29 +34030,11 @@
34049
34030
  "required": false,
34050
34031
  "type": {
34051
34032
  "name": "enum",
34052
- "raw": "\"main\" | \"alert\" | \"support\" | \"accent\" | \"success\" | \"danger\" | \"info\" | \"neutral\" | \"basic\"",
34033
+ "raw": "\"success\" | \"neutral\" | \"basic\"",
34053
34034
  "value": [
34054
- {
34055
- "value": "\"main\""
34056
- },
34057
- {
34058
- "value": "\"alert\""
34059
- },
34060
- {
34061
- "value": "\"support\""
34062
- },
34063
- {
34064
- "value": "\"accent\""
34065
- },
34066
34035
  {
34067
34036
  "value": "\"success\""
34068
34037
  },
34069
- {
34070
- "value": "\"danger\""
34071
- },
34072
- {
34073
- "value": "\"info\""
34074
- },
34075
34038
  {
34076
34039
  "value": "\"neutral\""
34077
34040
  },
package/dist/progress-tracker/index.d.mts CHANGED
@@ -5,13 +5,12 @@ import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const stepIndicatorVariant: (props?: ({
7
7
  size?: "sm" | "md" | "lg" | null | undefined;
8
- intent?: "main" | "basic" | "support" | "neutral" | "info" | "accent" | "danger" | "alert" | "success" | null | undefined;
9
- design?: "outline" | "tinted" | null | undefined;
8
+ intent?: "basic" | "neutral" | "success" | null | undefined;
10
9
  state?: "complete" | "incomplete" | "active" | null | undefined;
11
10
  } & class_variance_authority_types.ClassProp) | undefined) => string;
12
11
  type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>;
13
12
 
14
- interface ProgressTrackerProps extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent' | 'design'> {
13
+ interface ProgressTrackerProps extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {
15
14
  /**
16
15
  * The orientation of the progress tracker
17
16
  * @default 'horizontal"
@@ -33,7 +32,7 @@ interface ProgressTrackerProps extends ComponentPropsWithRef<'div'>, Pick<StepIn
33
32
  readOnly?: boolean;
34
33
  }
35
34
  declare const ProgressTracker$1: {
36
- ({ stepIndex, onStepClick, readOnly, intent, size, design, orientation, children, className, ref, ...rest }: PropsWithChildren<ProgressTrackerProps>): react_jsx_runtime.JSX.Element;
35
+ ({ stepIndex, onStepClick, readOnly, intent, size, orientation, children, className, ref, ...rest }: PropsWithChildren<ProgressTrackerProps>): react_jsx_runtime.JSX.Element;
37
36
  displayName: string;
38
37
  };
39
38
 
package/dist/progress-tracker/index.d.ts CHANGED
@@ -5,13 +5,12 @@ import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const stepIndicatorVariant: (props?: ({
7
7
  size?: "sm" | "md" | "lg" | null | undefined;
8
- intent?: "main" | "basic" | "support" | "neutral" | "info" | "accent" | "danger" | "alert" | "success" | null | undefined;
9
- design?: "outline" | "tinted" | null | undefined;
8
+ intent?: "basic" | "neutral" | "success" | null | undefined;
10
9
  state?: "complete" | "incomplete" | "active" | null | undefined;
11
10
  } & class_variance_authority_types.ClassProp) | undefined) => string;
12
11
  type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>;
13
12
 
14
- interface ProgressTrackerProps extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent' | 'design'> {
13
+ interface ProgressTrackerProps extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {
15
14
  /**
16
15
  * The orientation of the progress tracker
17
16
  * @default 'horizontal"
@@ -33,7 +32,7 @@ interface ProgressTrackerProps extends ComponentPropsWithRef<'div'>, Pick<StepIn
33
32
  readOnly?: boolean;
34
33
  }
35
34
  declare const ProgressTracker$1: {
36
- ({ stepIndex, onStepClick, readOnly, intent, size, design, orientation, children, className, ref, ...rest }: PropsWithChildren<ProgressTrackerProps>): react_jsx_runtime.JSX.Element;
35
+ ({ stepIndex, onStepClick, readOnly, intent, size, orientation, children, className, ref, ...rest }: PropsWithChildren<ProgressTrackerProps>): react_jsx_runtime.JSX.Element;
37
36
  displayName: string;
38
37
  };
39
38
 
package/dist/progress-tracker/index.js CHANGED
@@ -56,7 +56,6 @@ var ProgressTracker = ({
56
56
  readOnly = false,
57
57
  intent = "basic",
58
58
  size = "lg",
59
- design = "outline",
60
59
  orientation = "horizontal",
61
60
  children,
62
61
  className,
@@ -68,7 +67,7 @@ var ProgressTracker = ({
68
67
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
69
68
  ProgressTrackerContext.Provider,
70
69
  {
71
- value: { stepIndex, onStepClick, steps, setSteps, size, intent, design, readOnly },
70
+ value: { stepIndex, onStepClick, steps, setSteps, size, intent, readOnly },
72
71
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
73
72
  Component,
74
73
  {
@@ -155,13 +154,7 @@ var stepItemVariant = (0, import_class_variance_authority3.cva)(
155
154
  },
156
155
  intent: {
157
156
  basic: "",
158
- support: "",
159
- main: "",
160
157
  neutral: "",
161
- info: "",
162
- accent: "",
163
- danger: "",
164
- alert: "",
165
158
  success: ""
166
159
  },
167
160
  disabled: {
@@ -323,304 +316,6 @@ Icon.displayName = "Icon";
323
316
 
324
317
  // src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
325
318
  var import_class_variance_authority5 = require("class-variance-authority");
326
-
327
- // src/progress-tracker/stepIndicatorVariants/outline.ts
328
- var outlineVariants = [
329
- {
330
- design: "outline",
331
- intent: "basic",
332
- state: ["complete", "incomplete"],
333
- class: [
334
- "text-on-basic-container bg-transparent",
335
- "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
336
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
337
- ]
338
- },
339
- {
340
- design: "outline",
341
- intent: "basic",
342
- state: "active",
343
- class: "text-on-basic bg-basic"
344
- },
345
- {
346
- design: "outline",
347
- intent: "support",
348
- state: ["complete", "incomplete"],
349
- class: [
350
- "text-on-support-container bg-transparent",
351
- "group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered",
352
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
353
- ]
354
- },
355
- {
356
- design: "outline",
357
- intent: "support",
358
- state: "active",
359
- class: "text-on-support bg-support"
360
- },
361
- {
362
- design: "outline",
363
- intent: "main",
364
- state: ["complete", "incomplete"],
365
- class: [
366
- "text-on-main-container bg-transparent",
367
- "group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered",
368
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
369
- ]
370
- },
371
- {
372
- design: "outline",
373
- intent: "main",
374
- state: "active",
375
- class: "text-on-main bg-main"
376
- },
377
- {
378
- design: "outline",
379
- intent: "neutral",
380
- state: ["complete", "incomplete"],
381
- class: [
382
- "text-on-neutral-container bg-transparent",
383
- "group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered",
384
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
385
- ]
386
- },
387
- {
388
- design: "outline",
389
- intent: "neutral",
390
- state: "active",
391
- class: "text-on-neutral bg-neutral"
392
- },
393
- {
394
- design: "outline",
395
- intent: "info",
396
- state: ["complete", "incomplete"],
397
- class: [
398
- "text-on-info-container bg-transparent",
399
- "group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered",
400
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
401
- ]
402
- },
403
- {
404
- design: "outline",
405
- intent: "info",
406
- state: "active",
407
- class: "text-on-info bg-info"
408
- },
409
- {
410
- design: "outline",
411
- intent: "accent",
412
- state: ["complete", "incomplete"],
413
- class: [
414
- "text-on-accent-container bg-transparent",
415
- "group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered",
416
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
417
- ]
418
- },
419
- {
420
- design: "outline",
421
- intent: "accent",
422
- state: "active",
423
- class: "text-on-accent bg-accent"
424
- },
425
- {
426
- design: "outline",
427
- intent: "danger",
428
- state: ["complete", "incomplete"],
429
- class: [
430
- "text-on-error-container bg-transparent",
431
- "group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered",
432
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
433
- ]
434
- },
435
- {
436
- design: "outline",
437
- intent: "danger",
438
- state: "active",
439
- class: "text-on-error bg-error"
440
- },
441
- {
442
- design: "outline",
443
- intent: "alert",
444
- state: ["complete", "incomplete"],
445
- class: [
446
- "text-on-alert-container bg-transparent",
447
- "group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered",
448
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
449
- ]
450
- },
451
- {
452
- design: "outline",
453
- intent: "alert",
454
- state: "active",
455
- class: "text-on-alert bg-alert"
456
- },
457
- {
458
- design: "outline",
459
- intent: "success",
460
- state: ["complete", "incomplete"],
461
- class: [
462
- "text-on-success-container bg-transparent",
463
- "group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered",
464
- "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
465
- ]
466
- },
467
- {
468
- design: "outline",
469
- intent: "success",
470
- state: "active",
471
- class: "text-on-success bg-success"
472
- }
473
- ];
474
-
475
- // src/progress-tracker/stepIndicatorVariants/tinted.ts
476
- var tintedVariants = [
477
- {
478
- design: "tinted",
479
- intent: "basic",
480
- state: ["complete", "incomplete"],
481
- class: [
482
- "text-on-basic-container bg-basic-container",
483
- "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
484
- "group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"
485
- ]
486
- },
487
- {
488
- design: "tinted",
489
- intent: "basic",
490
- state: "active",
491
- class: "text-on-basic bg-basic"
492
- },
493
- {
494
- design: "tinted",
495
- intent: "support",
496
- state: ["complete", "incomplete"],
497
- class: [
498
- "text-on-support-container bg-support-container",
499
- "group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered",
500
- "group-hover/btn:group-data-[interactive=false]/btn:bg-support-container"
501
- ]
502
- },
503
- {
504
- design: "tinted",
505
- intent: "support",
506
- state: "active",
507
- class: "text-on-support bg-support"
508
- },
509
- {
510
- design: "tinted",
511
- intent: "main",
512
- state: ["complete", "incomplete"],
513
- class: [
514
- "text-on-main-container bg-main-container",
515
- "group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered",
516
- "group-hover/btn:group-data-[interactive=false]/btn:bg-main-container"
517
- ]
518
- },
519
- {
520
- design: "tinted",
521
- intent: "main",
522
- state: "active",
523
- class: "text-on-main bg-main"
524
- },
525
- {
526
- design: "tinted",
527
- intent: "neutral",
528
- state: ["complete", "incomplete"],
529
- class: [
530
- "text-on-neutral-container bg-neutral-container",
531
- "group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered",
532
- "group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"
533
- ]
534
- },
535
- {
536
- design: "tinted",
537
- intent: "neutral",
538
- state: "active",
539
- class: "text-on-neutral bg-neutral"
540
- },
541
- {
542
- design: "tinted",
543
- intent: "info",
544
- state: ["complete", "incomplete"],
545
- class: [
546
- "text-on-info-container bg-info-container",
547
- "group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered",
548
- "group-hover/btn:group-data-[interactive=false]/btn:bg-info-container"
549
- ]
550
- },
551
- {
552
- design: "tinted",
553
- intent: "info",
554
- state: "active",
555
- class: "text-on-info bg-info"
556
- },
557
- {
558
- design: "tinted",
559
- intent: "accent",
560
- state: ["complete", "incomplete"],
561
- class: [
562
- "text-on-accent-container bg-accent-container",
563
- "group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered",
564
- "group-hover/btn:group-data-[interactive=false]/btn:bg-accent-container"
565
- ]
566
- },
567
- {
568
- design: "tinted",
569
- intent: "accent",
570
- state: "active",
571
- class: "text-on-accent bg-accent"
572
- },
573
- {
574
- design: "tinted",
575
- intent: "danger",
576
- state: ["complete", "incomplete"],
577
- class: [
578
- "text-on-error-container bg-error-container",
579
- "group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered",
580
- "group-hover/btn:group-data-[interactive=false]/btn:bg-error-container"
581
- ]
582
- },
583
- {
584
- design: "tinted",
585
- intent: "danger",
586
- state: "active",
587
- class: "text-on-error bg-error"
588
- },
589
- {
590
- design: "tinted",
591
- intent: "alert",
592
- state: ["complete", "incomplete"],
593
- class: [
594
- "text-on-alert-container bg-alert-container",
595
- "group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered",
596
- "group-hover/btn:group-data-[interactive=false]/btn:bg-alert-container"
597
- ]
598
- },
599
- {
600
- design: "tinted",
601
- intent: "alert",
602
- state: "active",
603
- class: "text-on-alert bg-alert"
604
- },
605
- {
606
- design: "tinted",
607
- intent: "success",
608
- state: ["complete", "incomplete"],
609
- class: [
610
- "text-on-success-container bg-success-container",
611
- "group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered",
612
- "group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"
613
- ]
614
- },
615
- {
616
- design: "tinted",
617
- intent: "success",
618
- state: "active",
619
- class: "text-on-success bg-success"
620
- }
621
- ];
622
-
623
- // src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
624
319
  var stepIndicatorVariant = (0, import_class_variance_authority5.cva)(
625
320
  [
626
321
  "relative flex shrink-0 justify-center items-center",
@@ -649,19 +344,9 @@ var stepIndicatorVariant = (0, import_class_variance_authority5.cva)(
649
344
  },
650
345
  intent: {
651
346
  basic: "",
652
- support: "",
653
- main: "",
654
347
  neutral: "",
655
- info: "",
656
- accent: "",
657
- danger: "",
658
- alert: "",
659
348
  success: ""
660
349
  },
661
- design: {
662
- outline: "border-sm",
663
- tinted: ""
664
- },
665
350
  state: {
666
351
  complete: "",
667
352
  incomplete: "",
@@ -672,14 +357,58 @@ var stepIndicatorVariant = (0, import_class_variance_authority5.cva)(
672
357
  * Known type issue with CVA compoundVariants and VS Code/Intellisense:
673
358
  * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163
674
359
  * */
675
- /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
676
360
  /* @ts-ignore */
677
- compoundVariants: [...outlineVariants, ...tintedVariants],
361
+ compoundVariants: [
362
+ // Basic
363
+ {
364
+ intent: "basic",
365
+ state: ["complete", "incomplete"],
366
+ class: [
367
+ "text-on-basic-container bg-basic-container",
368
+ "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
369
+ "group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"
370
+ ]
371
+ },
372
+ {
373
+ intent: "basic",
374
+ state: "active",
375
+ class: "text-on-basic bg-basic"
376
+ },
377
+ // Neutral
378
+ {
379
+ intent: "neutral",
380
+ state: ["complete", "incomplete"],
381
+ class: [
382
+ "text-on-neutral-container bg-neutral-container",
383
+ "group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered",
384
+ "group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"
385
+ ]
386
+ },
387
+ {
388
+ intent: "neutral",
389
+ state: "active",
390
+ class: "text-on-neutral bg-neutral"
391
+ },
392
+ // Success
393
+ {
394
+ intent: "success",
395
+ state: ["complete", "incomplete"],
396
+ class: [
397
+ "text-on-success-container bg-success-container",
398
+ "group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered",
399
+ "group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"
400
+ ]
401
+ },
402
+ {
403
+ intent: "success",
404
+ state: "active",
405
+ class: "text-on-success bg-success"
406
+ }
407
+ ],
678
408
  defaultVariants: {
679
409
  size: "lg",
680
410
  state: "incomplete",
681
- intent: "basic",
682
- design: "outline"
411
+ intent: "basic"
683
412
  }
684
413
  }
685
414
  );
@@ -692,19 +421,12 @@ var ProgressTrackerStepIndicator = ({
692
421
  incomplete,
693
422
  className
694
423
  }) => {
695
- const { size, intent, design } = useProgressTrackerContext();
424
+ const { size, intent } = useProgressTrackerContext();
696
425
  const { index, state } = useProgressTrackerStepContext();
697
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
698
- "span",
699
- {
700
- className: stepIndicatorVariant({ size, intent, design, state, className }),
701
- "aria-hidden": "true",
702
- children: size !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
703
- state === "complete" && (complete === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CompleteIndicator, {}) : complete),
704
- state !== "complete" && (incomplete === void 0 ? `${index + 1}` : incomplete)
705
- ] })
706
- }
707
- );
426
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: stepIndicatorVariant({ size, intent, state, className }), "aria-hidden": "true", children: size !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
427
+ state === "complete" && (complete === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CompleteIndicator, {}) : complete),
428
+ state !== "complete" && (incomplete === void 0 ? `${index + 1}` : incomplete)
429
+ ] }) });
708
430
  };
709
431
  ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
710
432