@timmbr/ui 1.16.0 → 1.17.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/components/Stepper/Stepper.d.ts +2 -0
- package/dist/components/Stepper/Stepper.d.ts.map +1 -1
- package/dist/components/Stepper/Stepper.js +77 -63
- package/dist/components/Stepper/Stepper.styles.d.ts +9 -0
- package/dist/components/Stepper/Stepper.styles.d.ts.map +1 -1
- package/dist/components/Stepper/Stepper.styles.js +43 -1
- package/dist/components/Stepper/Stepper.types.d.ts +14 -1
- package/dist/components/Stepper/Stepper.types.d.ts.map +1 -1
- package/dist/components/Stepper/subcomponents/ProgressStepper.d.ts +13 -0
- package/dist/components/Stepper/subcomponents/ProgressStepper.d.ts.map +1 -0
- package/dist/components/Stepper/subcomponents/ProgressStepper.js +77 -0
- package/dist/components/Stepper/subcomponents/index.d.ts +3 -0
- package/dist/components/Stepper/subcomponents/index.d.ts.map +1 -0
- package/dist/index.js +1 -1
- package/package.json +4 -4
|
@@ -4,6 +4,8 @@ import type { StepperProps } from './Stepper.types';
|
|
|
4
4
|
* Progress through a sequence of steps (order tracking, checkout, onboarding).
|
|
5
5
|
* Steps before `current` are complete; `status="error"` marks the current
|
|
6
6
|
* step as failed (e.g. a cancelled order).
|
|
7
|
+
*
|
|
8
|
+
* Use `variant="progress"` for checkout/KYC flows with icons and status badges.
|
|
7
9
|
*/
|
|
8
10
|
export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
|
|
9
11
|
//# sourceMappingURL=Stepper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAA+B,YAAY,EAAE,MAAM,iBAAiB,CAAC;AASjF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,uFAsFnB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { cn } from '@timmbr/utils';
|
|
4
4
|
import { Check, X } from '@timmbr/icons';
|
|
5
5
|
import { stepConnectorVariants, stepIndicatorVariants, stepperVariants } from './Stepper.styles.js';
|
|
6
|
+
import { ProgressStepper } from './subcomponents/ProgressStepper.js';
|
|
6
7
|
|
|
7
8
|
function stateOf(index, current, status) {
|
|
8
9
|
if (index < current) return "complete";
|
|
@@ -10,71 +11,84 @@ function stateOf(index, current, status) {
|
|
|
10
11
|
return "upcoming";
|
|
11
12
|
}
|
|
12
13
|
const Stepper = React.forwardRef(
|
|
13
|
-
({ steps, current, status = "default", orientation = "horizontal", className, ...props }, ref) =>
|
|
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
|
-
|
|
14
|
+
({ steps, current, status = "default", orientation = "horizontal", variant = "default", className, ...props }, ref) => {
|
|
15
|
+
if (variant === "progress") {
|
|
16
|
+
return /* @__PURE__ */ jsx(
|
|
17
|
+
ProgressStepper,
|
|
18
|
+
{
|
|
19
|
+
steps,
|
|
20
|
+
current,
|
|
21
|
+
status,
|
|
22
|
+
className
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
27
|
+
"ol",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
"data-slot": "stepper",
|
|
31
|
+
"data-orientation": orientation,
|
|
32
|
+
className: cn(stepperVariants({ orientation }), className),
|
|
33
|
+
...props,
|
|
34
|
+
children: steps.map((step, index) => {
|
|
35
|
+
const state = stateOf(index, current, status);
|
|
36
|
+
const isLast = index === steps.length - 1;
|
|
37
|
+
return /* @__PURE__ */ jsxs(
|
|
38
|
+
"li",
|
|
39
|
+
{
|
|
40
|
+
"data-state": state,
|
|
41
|
+
"aria-current": state === "current" || state === "error" ? "step" : void 0,
|
|
42
|
+
className: cn(
|
|
43
|
+
"relative flex min-w-0",
|
|
44
|
+
orientation === "horizontal" ? "flex-1 flex-col items-center text-center" : "gap-3 pb-6 last:pb-0"
|
|
43
45
|
),
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
step.label,
|
|
63
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "error" ? " (failed)" : "" })
|
|
64
|
-
]
|
|
65
|
-
}
|
|
46
|
+
children: [
|
|
47
|
+
!isLast && /* @__PURE__ */ jsx(
|
|
48
|
+
"span",
|
|
49
|
+
{
|
|
50
|
+
"aria-hidden": "true",
|
|
51
|
+
className: stepConnectorVariants({
|
|
52
|
+
orientation,
|
|
53
|
+
complete: state === "complete"
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
),
|
|
57
|
+
/* @__PURE__ */ jsx("span", { className: stepIndicatorVariants({ state }), "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 3 }) : state === "error" ? /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 3 }) : index + 1 }),
|
|
58
|
+
/* @__PURE__ */ jsxs(
|
|
59
|
+
"span",
|
|
60
|
+
{
|
|
61
|
+
className: cn(
|
|
62
|
+
"min-w-0",
|
|
63
|
+
orientation === "horizontal" ? "mt-2 px-1" : "pt-0.5"
|
|
66
64
|
),
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsxs(
|
|
67
|
+
"span",
|
|
68
|
+
{
|
|
69
|
+
className: cn(
|
|
70
|
+
"block text-body-2 font-medium",
|
|
71
|
+
state === "upcoming" ? "text-muted-foreground" : "text-foreground",
|
|
72
|
+
state === "error" && "text-destructive"
|
|
73
|
+
),
|
|
74
|
+
children: [
|
|
75
|
+
step.label,
|
|
76
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "error" ? " (failed)" : "" })
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
step.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-caption-lg text-muted-foreground", children: step.description })
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
step.id ?? index
|
|
87
|
+
);
|
|
88
|
+
})
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
}
|
|
78
92
|
);
|
|
79
93
|
Stepper.displayName = "Stepper";
|
|
80
94
|
|
|
@@ -11,4 +11,13 @@ export declare const stepConnectorVariants: (props?: ({
|
|
|
11
11
|
complete?: boolean | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
export type StepperVariants = VariantProps<typeof stepperVariants>;
|
|
14
|
+
export declare const stepProgressIndicatorVariants: (props?: ({
|
|
15
|
+
state?: "current" | "error" | "complete" | "upcoming" | null | undefined;
|
|
16
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
17
|
+
export declare const stepProgressConnectorVariants: (props?: ({
|
|
18
|
+
state?: "current" | "error" | "complete" | "upcoming" | null | undefined;
|
|
19
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
20
|
+
export declare const stepProgressBadgeVariants: (props?: ({
|
|
21
|
+
state?: "current" | "error" | "complete" | "upcoming" | null | undefined;
|
|
22
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
23
|
//# sourceMappingURL=Stepper.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;8EAQ1B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAajC,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,qBAAqB;;;8EAYhC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Stepper.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;8EAQ1B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAajC,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,qBAAqB;;;8EAYhC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAInE,eAAO,MAAM,6BAA6B;;8EAazC,CAAC;AAEF,eAAO,MAAM,6BAA6B;;8EAazC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;8EAarC,CAAC"}
|
|
@@ -36,5 +36,47 @@ const stepConnectorVariants = cva("absolute", {
|
|
|
36
36
|
},
|
|
37
37
|
defaultVariants: { orientation: "horizontal", complete: false }
|
|
38
38
|
});
|
|
39
|
+
const stepProgressIndicatorVariants = cva(
|
|
40
|
+
"relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
|
|
41
|
+
{
|
|
42
|
+
variants: {
|
|
43
|
+
state: {
|
|
44
|
+
complete: "border-primary bg-primary text-primary-foreground",
|
|
45
|
+
current: "border-primary bg-background text-primary ring-4 ring-primary/15",
|
|
46
|
+
error: "border-destructive bg-destructive text-destructive-foreground",
|
|
47
|
+
upcoming: "border-dashed border-muted-foreground/30 bg-background text-muted-foreground"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
defaultVariants: { state: "upcoming" }
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
const stepProgressConnectorVariants = cva(
|
|
54
|
+
"absolute left-1/2 top-5 h-0.5 w-full",
|
|
55
|
+
{
|
|
56
|
+
variants: {
|
|
57
|
+
state: {
|
|
58
|
+
complete: "bg-primary",
|
|
59
|
+
current: "bg-primary",
|
|
60
|
+
error: "bg-destructive",
|
|
61
|
+
upcoming: "bg-border"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
defaultVariants: { state: "upcoming" }
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
const stepProgressBadgeVariants = cva(
|
|
68
|
+
"inline-flex items-center rounded-full px-2.5 py-0.5 text-caption-lg font-medium",
|
|
69
|
+
{
|
|
70
|
+
variants: {
|
|
71
|
+
state: {
|
|
72
|
+
complete: "border-transparent bg-success/10 text-success",
|
|
73
|
+
current: "border-transparent bg-primary/10 text-primary",
|
|
74
|
+
error: "border-transparent bg-destructive/10 text-destructive",
|
|
75
|
+
upcoming: "border border-border bg-transparent text-muted-foreground"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
defaultVariants: { state: "upcoming" }
|
|
79
|
+
}
|
|
80
|
+
);
|
|
39
81
|
|
|
40
|
-
export { stepConnectorVariants, stepIndicatorVariants, stepperVariants };
|
|
82
|
+
export { stepConnectorVariants, stepIndicatorVariants, stepProgressBadgeVariants, stepProgressConnectorVariants, stepProgressIndicatorVariants, stepperVariants };
|
|
@@ -2,9 +2,20 @@ import type * as React from 'react';
|
|
|
2
2
|
export type StepState = 'complete' | 'current' | 'error' | 'upcoming';
|
|
3
3
|
export interface StepItem {
|
|
4
4
|
id?: string;
|
|
5
|
+
/** Primary step name — rendered as bold title in the progress variant. */
|
|
5
6
|
label: React.ReactNode;
|
|
6
|
-
/** Secondary line
|
|
7
|
+
/** Secondary line below the title — e.g. a date, hint, or sub-step name. */
|
|
7
8
|
description?: React.ReactNode;
|
|
9
|
+
/** Icon rendered inside the step circle (progress variant).
|
|
10
|
+
* Completed steps always show <Check> regardless of this prop. */
|
|
11
|
+
icon?: React.ReactNode;
|
|
12
|
+
/** Override the auto-derived status badge text.
|
|
13
|
+
* Defaults: complete → 'Completed', current → 'In Progress', error → 'Failed', upcoming → 'Pending'. */
|
|
14
|
+
statusLabel?: string;
|
|
15
|
+
}
|
|
16
|
+
/** Step item for the `progress` variant — `label` and `icon` are required. */
|
|
17
|
+
export interface ProgressStepItem extends Omit<StepItem, 'icon'> {
|
|
18
|
+
icon: React.ReactNode;
|
|
8
19
|
}
|
|
9
20
|
export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
|
|
10
21
|
steps: StepItem[];
|
|
@@ -13,5 +24,7 @@ export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
|
|
|
13
24
|
/** `error` marks the current step as failed. */
|
|
14
25
|
status?: 'default' | 'error';
|
|
15
26
|
orientation?: 'horizontal' | 'vertical';
|
|
27
|
+
/** 'default' = numbered circles (existing). 'progress' = icon circles + status badges. */
|
|
28
|
+
variant?: 'default' | 'progress';
|
|
16
29
|
}
|
|
17
30
|
//# sourceMappingURL=Stepper.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,QAAQ;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"Stepper.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,QAAQ;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;uEACmE;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;6GACyG;IACzG,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,8EAA8E;AAC9E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC9D,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;IAC5E,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAClC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { ProgressStepItem, StepperProps } from '../Stepper.types';
|
|
3
|
+
export interface ProgressStepperProps {
|
|
4
|
+
steps: ProgressStepItem[];
|
|
5
|
+
current: number;
|
|
6
|
+
status?: StepperProps['status'];
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function ProgressStepper({ steps, current, status, className }: ProgressStepperProps): React.JSX.Element;
|
|
10
|
+
export declare namespace ProgressStepper {
|
|
11
|
+
var displayName: string;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=ProgressStepper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressStepper.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/subcomponents/ProgressStepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,gBAAgB,EAAa,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAkB,EAAE,SAAS,EAAE,EAAE,oBAAoB,qBAgEtG;yBAhEe,eAAe"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import { cn } from '@timmbr/utils';
|
|
4
|
+
import { Check, X } from '@timmbr/icons';
|
|
5
|
+
import { stepProgressConnectorVariants, stepProgressIndicatorVariants, stepProgressBadgeVariants } from '../Stepper.styles.js';
|
|
6
|
+
|
|
7
|
+
function stateOf(index, current, status) {
|
|
8
|
+
if (index < current) return "complete";
|
|
9
|
+
if (index === current) return status === "error" ? "error" : "current";
|
|
10
|
+
return "upcoming";
|
|
11
|
+
}
|
|
12
|
+
function resolveBadgeText(step, state) {
|
|
13
|
+
if (step.statusLabel) return step.statusLabel;
|
|
14
|
+
if (state === "complete") return "Completed";
|
|
15
|
+
if (state === "current") return "In Progress";
|
|
16
|
+
if (state === "error") return "Failed";
|
|
17
|
+
return "Pending";
|
|
18
|
+
}
|
|
19
|
+
function ProgressStepper({ steps, current, status = "default", className }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
"ol",
|
|
22
|
+
{
|
|
23
|
+
"data-slot": "stepper",
|
|
24
|
+
"data-variant": "progress",
|
|
25
|
+
"data-orientation": "horizontal",
|
|
26
|
+
className: cn("flex items-start font-sans", className),
|
|
27
|
+
children: steps.map((step, index) => {
|
|
28
|
+
const state = stateOf(index, current, status);
|
|
29
|
+
const isLast = index === steps.length - 1;
|
|
30
|
+
return /* @__PURE__ */ jsxs(
|
|
31
|
+
"li",
|
|
32
|
+
{
|
|
33
|
+
"data-state": state,
|
|
34
|
+
"aria-current": state === "current" || state === "error" ? "step" : void 0,
|
|
35
|
+
className: "relative flex flex-1 flex-col items-center text-center",
|
|
36
|
+
children: [
|
|
37
|
+
!isLast && /* @__PURE__ */ jsx(
|
|
38
|
+
"span",
|
|
39
|
+
{
|
|
40
|
+
"aria-hidden": "true",
|
|
41
|
+
className: stepProgressConnectorVariants({ state })
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
/* @__PURE__ */ jsx("span", { className: stepProgressIndicatorVariants({ state }), "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 2.5 }) : state === "error" ? /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 2.5 }) : step.icon ?? index + 1 }),
|
|
45
|
+
/* @__PURE__ */ jsxs("span", { className: "mt-3 min-w-0 px-1", children: [
|
|
46
|
+
/* @__PURE__ */ jsxs("span", { className: "block text-caption font-medium uppercase tracking-wide text-muted-foreground", children: [
|
|
47
|
+
"Step ",
|
|
48
|
+
index + 1
|
|
49
|
+
] }),
|
|
50
|
+
/* @__PURE__ */ jsxs(
|
|
51
|
+
"span",
|
|
52
|
+
{
|
|
53
|
+
className: cn(
|
|
54
|
+
"mt-0.5 block text-body-2 font-bold",
|
|
55
|
+
state === "upcoming" ? "text-muted-foreground" : "text-foreground",
|
|
56
|
+
state === "error" && "text-destructive"
|
|
57
|
+
),
|
|
58
|
+
children: [
|
|
59
|
+
step.label,
|
|
60
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "error" ? " (failed)" : "" })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
step.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-caption-lg text-muted-foreground", children: step.description }),
|
|
65
|
+
/* @__PURE__ */ jsx("span", { className: cn("mt-2 inline-block", stepProgressBadgeVariants({ state })), children: resolveBadgeText(step, state) })
|
|
66
|
+
] })
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
step.id ?? index
|
|
70
|
+
);
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
ProgressStepper.displayName = "ProgressStepper";
|
|
76
|
+
|
|
77
|
+
export { ProgressStepper };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/subcomponents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -196,7 +196,7 @@ export { snackbarActionVariants, snackbarCloseVariants, snackbarHostVariants, sn
|
|
|
196
196
|
export { spinnerIconVariants, spinnerVariants } from './components/Spinner/Spinner.styles.js';
|
|
197
197
|
export { stackVariants } from './components/Stack/Stack.styles.js';
|
|
198
198
|
export { statHelpTextVariants, statIndicatorVariants, statLabelVariants, statValueVariants, statVariants } from './components/Stat/Stat.styles.js';
|
|
199
|
-
export { stepConnectorVariants, stepIndicatorVariants, stepperVariants } from './components/Stepper/Stepper.styles.js';
|
|
199
|
+
export { stepConnectorVariants, stepIndicatorVariants, stepProgressBadgeVariants, stepProgressConnectorVariants, stepProgressIndicatorVariants, stepperVariants } from './components/Stepper/Stepper.styles.js';
|
|
200
200
|
export { stockMeterFillVariants, stockMeterTrackVariants, stockMeterVariants } from './components/StockMeter/StockMeter.styles.js';
|
|
201
201
|
export { subNavFooterVariants, subNavIconVariants, subNavItemVariants, subNavListVariants } from './components/SubNav/SubNav.styles.js';
|
|
202
202
|
export { swatchVariants } from './components/Swatch/Swatch.styles.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@timmbr/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.17.0",
|
|
4
4
|
"description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
"@tiptap/extension-text-align": "^2.11.0",
|
|
52
52
|
"@tiptap/extension-placeholder": "^2.11.0",
|
|
53
53
|
"@tiptap/extension-character-count": "^2.11.0",
|
|
54
|
+
"@timmbr/theme": "1.3.0",
|
|
54
55
|
"@timmbr/hooks": "1.3.0",
|
|
55
|
-
"@timmbr/motion": "1.2.5",
|
|
56
|
-
"@timmbr/utils": "1.6.0",
|
|
57
56
|
"@timmbr/icons": "1.6.0",
|
|
58
|
-
"@timmbr/
|
|
57
|
+
"@timmbr/motion": "1.2.5",
|
|
58
|
+
"@timmbr/utils": "1.6.0"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"next": ">=13.0.0 || >=14.0.0 || >=15.0.0 || >=16.0.0",
|