@veevarts/design-system 1.15.0 → 1.16.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.cjs +4 -4
- package/dist/index.js +1812 -1770
- package/dist/patterns/Stepper/Stepper.d.ts +62 -0
- package/package.json +1 -1
|
@@ -16,6 +16,59 @@ export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
16
16
|
* ```
|
|
17
17
|
*/
|
|
18
18
|
label?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Labels rendered inside the active step when using the `activeLabel` variant.
|
|
21
|
+
* The array index matches the zero-based step index.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* <Stepper
|
|
26
|
+
* variant="activeLabel"
|
|
27
|
+
* stepLabels={['Details', 'Recurrences', 'Attendance']}
|
|
28
|
+
* stepsCount={3}
|
|
29
|
+
* />
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
stepLabels?: string[];
|
|
33
|
+
/**
|
|
34
|
+
* Whether to show a tooltip with the step label on each step.
|
|
35
|
+
* Tooltip content comes from `stepLabels[stepIndex]`.
|
|
36
|
+
*
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
showStepLabelTooltip?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Placement for the optional step label tooltip.
|
|
42
|
+
*
|
|
43
|
+
* @default "top"
|
|
44
|
+
*/
|
|
45
|
+
stepLabelTooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
|
|
46
|
+
/**
|
|
47
|
+
* Whether to render a step counter like "Step 1 of 6".
|
|
48
|
+
*
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
showStepCounter?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Position of the optional step counter relative to the step list.
|
|
54
|
+
*
|
|
55
|
+
* @default "right"
|
|
56
|
+
*/
|
|
57
|
+
stepCounterPosition?: 'left' | 'right';
|
|
58
|
+
/**
|
|
59
|
+
* Layout distribution for the stepper and optional step counter.
|
|
60
|
+
*
|
|
61
|
+
* - `compact`: content stays grouped together
|
|
62
|
+
* - `spread`: content stretches to opposite sides of the available width
|
|
63
|
+
*
|
|
64
|
+
* @default "compact"
|
|
65
|
+
*/
|
|
66
|
+
layout?: 'compact' | 'spread';
|
|
67
|
+
/**
|
|
68
|
+
* Optional formatter for the step counter text.
|
|
69
|
+
* Receives one-based current step number and total step count.
|
|
70
|
+
*/
|
|
71
|
+
stepCounterFormat?: (currentStepNumber: number, totalSteps: number) => string;
|
|
19
72
|
/**
|
|
20
73
|
* Total number of steps in the sequence.
|
|
21
74
|
*
|
|
@@ -40,6 +93,15 @@ export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
40
93
|
* ```
|
|
41
94
|
*/
|
|
42
95
|
color?: ButtonProps['color'];
|
|
96
|
+
/**
|
|
97
|
+
* Visual presentation of the stepper.
|
|
98
|
+
*
|
|
99
|
+
* - `default`: current behavior with checkmarks on completed steps
|
|
100
|
+
* - `activeLabel`: active step expands into a pill with number + label
|
|
101
|
+
*
|
|
102
|
+
* @default "default"
|
|
103
|
+
*/
|
|
104
|
+
variant?: 'default' | 'activeLabel';
|
|
43
105
|
/**
|
|
44
106
|
* The current active step index (zero-based).
|
|
45
107
|
* Use this prop for controlled mode.
|