UNPKG

@spark-ui/progress-tracker

Version:

A progress tracker component is a visual navigation element typically used to display progress or guide user through a multi-step process.

sparkui.vercel.app

leboncoin/spark-web

92 lines (91 loc) • 4.66 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
export declare const outlineVariants: readonly [{ readonly design: "outline"; readonly intent: "basic"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-basic-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "basic"; readonly state: "active"; readonly class: "text-on-basic-container bg-basic-container"; }, { readonly design: "outline"; readonly intent: "support"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-support-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "support"; readonly state: "active"; readonly class: "text-on-support-container bg-support-container"; }, { readonly design: "outline"; readonly intent: "main"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-main-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "main"; readonly state: "active"; readonly class: "text-on-main-container bg-main-container"; }, { readonly design: "outline"; readonly intent: "neutral"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-neutral-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "neutral"; readonly state: "active"; readonly class: "text-on-neutral-container bg-neutral-container"; }, { readonly design: "outline"; readonly intent: "info"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-info-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "info"; readonly state: "active"; readonly class: "text-on-info-container bg-info-container"; }, { readonly design: "outline"; readonly intent: "accent"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-accent-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "accent"; readonly state: "active"; readonly class: "text-on-accent-container bg-accent-container"; }, { readonly design: "outline"; readonly intent: "danger"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-error-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "danger"; readonly state: "active"; readonly class: "text-on-error-container bg-error-container"; }, { readonly design: "outline"; readonly intent: "alert"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-alert-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "alert"; readonly state: "active"; readonly class: "text-on-alert-container bg-alert-container"; }, { readonly design: "outline"; readonly intent: "success"; readonly state: readonly ["complete", "incomplete"]; readonly class: readonly ["text-on-success-container bg-transparent", "group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"]; }, { readonly design: "outline"; readonly intent: "success"; readonly state: "active"; readonly class: "text-on-success-container bg-success-container"; }];