@fairmint/ui 0.4.8 → 0.4.10
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/generic/StepProgress/StepProgress.cjs +46 -29
- package/dist/components/generic/StepProgress/StepProgress.cjs.map +1 -1
- package/dist/components/generic/StepProgress/StepProgress.d.ts.map +1 -1
- package/dist/components/generic/StepProgress/StepProgress.js +46 -29
- package/dist/components/generic/StepProgress/StepProgress.js.map +1 -1
- package/dist/styles.css +77 -5
- package/package.json +1 -1
|
@@ -40,15 +40,19 @@ function StepProgress({
|
|
|
40
40
|
const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);
|
|
41
41
|
const rootStyle = {
|
|
42
42
|
"--fairmint-step-progress-brand": index.brandColors.indigo,
|
|
43
|
-
|
|
43
|
+
// colorBorderDefault washes out on colorBgSurfaceSecondary; text-secondary clears 3:1.
|
|
44
|
+
"--fairmint-step-progress-border": index.fairmintVars.colorTextSecondary,
|
|
45
|
+
// Kept off the ring token: the ring carries the step number and needs 3:1, the
|
|
46
|
+
// connector is decorative and reads as a hairline between pills.
|
|
47
|
+
"--fairmint-step-progress-connector": index.fairmintVars.colorBorderDefault,
|
|
44
48
|
"--fairmint-step-progress-text-primary": index.fairmintVars.colorTextPrimary,
|
|
45
|
-
|
|
46
|
-
"--fairmint-step-progress-
|
|
47
|
-
//
|
|
48
|
-
|
|
49
|
-
"--fairmint-step-progress-active-border": index.indigoColors[
|
|
49
|
+
// Pending labels use primary ink; active hierarchy is weight + fill, not mute gray.
|
|
50
|
+
"--fairmint-step-progress-text-secondary": index.fairmintVars.colorTextPrimary,
|
|
51
|
+
// indigo[1] — surface-selected (indigo[0]) is too close to the secondary canvas.
|
|
52
|
+
"--fairmint-step-progress-surface-selected": index.fairmintVars.colorBgBrandSubtleHover,
|
|
53
|
+
"--fairmint-step-progress-active-border": index.indigoColors[3],
|
|
50
54
|
"--fairmint-step-progress-active-indicator-text": index.commonColors.white,
|
|
51
|
-
"--fairmint-step-progress-complete-border": index.indigoColors[
|
|
55
|
+
"--fairmint-step-progress-complete-border": index.indigoColors[3],
|
|
52
56
|
"--fairmint-step-progress-complete-text": index.fairmintVars.colorIconOnSurfaceSelected
|
|
53
57
|
};
|
|
54
58
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -67,28 +71,41 @@ function StepProgress({
|
|
|
67
71
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "fairmint-step-progress__indicator", "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : stepNumber }),
|
|
68
72
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "fairmint-step-progress__label", children: step.label })
|
|
69
73
|
] });
|
|
70
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
74
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "fairmint-step-progress__item", children: [
|
|
75
|
+
isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
76
|
+
UnstyledButton.UnstyledButton,
|
|
77
|
+
{
|
|
78
|
+
type: "button",
|
|
79
|
+
className: "fairmint-step-progress__pill",
|
|
80
|
+
"data-state": status,
|
|
81
|
+
"data-interactive": "true",
|
|
82
|
+
"data-disabled": "false",
|
|
83
|
+
"aria-current": status === "active" ? "step" : void 0,
|
|
84
|
+
"aria-label": `Step ${stepNumber}: ${step.label}`,
|
|
85
|
+
onClick: () => onStepChange?.(stepNumber),
|
|
86
|
+
children: pillContent
|
|
87
|
+
}
|
|
88
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
89
|
+
"span",
|
|
90
|
+
{
|
|
91
|
+
className: "fairmint-step-progress__pill",
|
|
92
|
+
"data-state": status,
|
|
93
|
+
"data-disabled": step.disabled ? "true" : "false",
|
|
94
|
+
"aria-current": status === "active" ? "step" : void 0,
|
|
95
|
+
"aria-disabled": step.disabled || void 0,
|
|
96
|
+
title: `Step ${stepNumber}: ${step.label}`,
|
|
97
|
+
children: pillContent
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
index2 < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
101
|
+
"span",
|
|
102
|
+
{
|
|
103
|
+
className: "fairmint-step-progress__connector",
|
|
104
|
+
"data-state": status,
|
|
105
|
+
"aria-hidden": "true"
|
|
106
|
+
}
|
|
107
|
+
) : null
|
|
108
|
+
] }, `${stepNumber}-${step.label}`);
|
|
92
109
|
}) })
|
|
93
110
|
}
|
|
94
111
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepProgress.cjs","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n /** Visible label in the progress pill. */\n label: string;\n /** Explicitly mark a step complete when completion is not derived from activeStep. */\n completed?: boolean;\n /** Prevent navigation to this step when onStepChange is supplied. */\n disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n steps: readonly StepProgressStep[];\n /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n activeStep: number;\n /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n orientation?: StepProgressOrientation;\n /** Called with the 1-indexed step number when a pill is activated. */\n onStepChange?: (step: number) => void;\n /** Accessible label for the navigation. @default \"Progress\" */\n ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n <svg\n width=\"11\"\n height=\"11\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m5 13 4 4 10-10\" />\n </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n if (!Number.isFinite(activeStep)) return 1;\n return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n step: StepProgressStep,\n stepNumber: number,\n activeStep: number,\n): StepProgressStepStatus => {\n if (stepNumber === activeStep) return \"active\";\n if (step.completed ?? stepNumber < activeStep) return \"complete\";\n return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n steps,\n activeStep,\n orientation = \"horizontal\",\n onStepChange,\n ariaLabel = \"Progress\",\n}: StepProgressProps) {\n if (steps.length === 0) return null;\n\n const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n const rootStyle = {\n \"--fairmint-step-progress-brand\": brandColors.indigo,\n \"--fairmint-step-progress-border\": fairmintVars.
|
|
1
|
+
{"version":3,"file":"StepProgress.cjs","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n /** Visible label in the progress pill. */\n label: string;\n /** Explicitly mark a step complete when completion is not derived from activeStep. */\n completed?: boolean;\n /** Prevent navigation to this step when onStepChange is supplied. */\n disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n steps: readonly StepProgressStep[];\n /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n activeStep: number;\n /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n orientation?: StepProgressOrientation;\n /** Called with the 1-indexed step number when a pill is activated. */\n onStepChange?: (step: number) => void;\n /** Accessible label for the navigation. @default \"Progress\" */\n ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n <svg\n width=\"11\"\n height=\"11\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m5 13 4 4 10-10\" />\n </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n if (!Number.isFinite(activeStep)) return 1;\n return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n step: StepProgressStep,\n stepNumber: number,\n activeStep: number,\n): StepProgressStepStatus => {\n if (stepNumber === activeStep) return \"active\";\n if (step.completed ?? stepNumber < activeStep) return \"complete\";\n return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n steps,\n activeStep,\n orientation = \"horizontal\",\n onStepChange,\n ariaLabel = \"Progress\",\n}: StepProgressProps) {\n if (steps.length === 0) return null;\n\n const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n const rootStyle = {\n \"--fairmint-step-progress-brand\": brandColors.indigo,\n // colorBorderDefault washes out on colorBgSurfaceSecondary; text-secondary clears 3:1.\n \"--fairmint-step-progress-border\": fairmintVars.colorTextSecondary,\n // Kept off the ring token: the ring carries the step number and needs 3:1, the\n // connector is decorative and reads as a hairline between pills.\n \"--fairmint-step-progress-connector\": fairmintVars.colorBorderDefault,\n \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n // Pending labels use primary ink; active hierarchy is weight + fill, not mute gray.\n \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextPrimary,\n // indigo[1] — surface-selected (indigo[0]) is too close to the secondary canvas.\n \"--fairmint-step-progress-surface-selected\": fairmintVars.colorBgBrandSubtleHover,\n \"--fairmint-step-progress-active-border\": indigoColors[3],\n \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n \"--fairmint-step-progress-complete-border\": indigoColors[3],\n \"--fairmint-step-progress-complete-text\": fairmintVars.colorIconOnSurfaceSelected,\n };\n\n return (\n <Box\n component=\"nav\"\n aria-label={ariaLabel}\n className=\"fairmint-step-progress\"\n data-orientation={orientation}\n style={rootStyle}\n >\n <ol className=\"fairmint-step-progress__list\">\n {steps.map((step, index) => {\n const stepNumber = index + 1;\n const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);\n const isInteractive = Boolean(onStepChange) && !step.disabled;\n const pillContent = (\n <>\n <span className=\"fairmint-step-progress__indicator\" aria-hidden=\"true\">\n {status === \"complete\" ? <CheckIcon /> : stepNumber}\n </span>\n <span className=\"fairmint-step-progress__label\">{step.label}</span>\n </>\n );\n\n return (\n <li key={`${stepNumber}-${step.label}`} className=\"fairmint-step-progress__item\">\n {isInteractive ? (\n <UnstyledButton\n type=\"button\"\n className=\"fairmint-step-progress__pill\"\n data-state={status}\n data-interactive=\"true\"\n data-disabled=\"false\"\n aria-current={status === \"active\" ? \"step\" : undefined}\n aria-label={`Step ${stepNumber}: ${step.label}`}\n onClick={() => onStepChange?.(stepNumber)}\n >\n {pillContent}\n </UnstyledButton>\n ) : (\n <span\n className=\"fairmint-step-progress__pill\"\n data-state={status}\n data-disabled={step.disabled ? \"true\" : \"false\"}\n aria-current={status === \"active\" ? \"step\" : undefined}\n aria-disabled={step.disabled || undefined}\n title={`Step ${stepNumber}: ${step.label}`}\n >\n {pillContent}\n </span>\n )}\n {index < steps.length - 1 ? (\n <span\n className=\"fairmint-step-progress__connector\"\n data-state={status}\n aria-hidden=\"true\"\n />\n ) : null}\n </li>\n );\n })}\n </ol>\n </Box>\n );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":["jsx","brandColors","fairmintVars","indigoColors","commonColors","Box","index","jsxs","Fragment","UnstyledButton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qFAAqF;IACrF,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,qBAAqB,GAChC,MAAM,gBAAgB,EACtB,YAAY,MAAM,EAClB,YAAY,MAAM,KACjB,sBAIF,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,YAAY,EACZ,SAAsB,GACvB,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"StepProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qFAAqF;IACrF,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,qBAAqB,GAChC,MAAM,gBAAgB,EACtB,YAAY,MAAM,EAClB,YAAY,MAAM,KACjB,sBAIF,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,YAAY,EACZ,SAAsB,GACvB,EAAE,iBAAiB,sCAoFnB;AAED,eAAO,MAAM,+BAA+B,SAAS,CAAC"}
|
|
@@ -38,15 +38,19 @@ function StepProgress({
|
|
|
38
38
|
const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);
|
|
39
39
|
const rootStyle = {
|
|
40
40
|
"--fairmint-step-progress-brand": brandColors.indigo,
|
|
41
|
-
|
|
41
|
+
// colorBorderDefault washes out on colorBgSurfaceSecondary; text-secondary clears 3:1.
|
|
42
|
+
"--fairmint-step-progress-border": fairmintVars.colorTextSecondary,
|
|
43
|
+
// Kept off the ring token: the ring carries the step number and needs 3:1, the
|
|
44
|
+
// connector is decorative and reads as a hairline between pills.
|
|
45
|
+
"--fairmint-step-progress-connector": fairmintVars.colorBorderDefault,
|
|
42
46
|
"--fairmint-step-progress-text-primary": fairmintVars.colorTextPrimary,
|
|
43
|
-
|
|
44
|
-
"--fairmint-step-progress-
|
|
45
|
-
//
|
|
46
|
-
|
|
47
|
-
"--fairmint-step-progress-active-border": indigoColors[
|
|
47
|
+
// Pending labels use primary ink; active hierarchy is weight + fill, not mute gray.
|
|
48
|
+
"--fairmint-step-progress-text-secondary": fairmintVars.colorTextPrimary,
|
|
49
|
+
// indigo[1] — surface-selected (indigo[0]) is too close to the secondary canvas.
|
|
50
|
+
"--fairmint-step-progress-surface-selected": fairmintVars.colorBgBrandSubtleHover,
|
|
51
|
+
"--fairmint-step-progress-active-border": indigoColors[3],
|
|
48
52
|
"--fairmint-step-progress-active-indicator-text": commonColors.white,
|
|
49
|
-
"--fairmint-step-progress-complete-border": indigoColors[
|
|
53
|
+
"--fairmint-step-progress-complete-border": indigoColors[3],
|
|
50
54
|
"--fairmint-step-progress-complete-text": fairmintVars.colorIconOnSurfaceSelected
|
|
51
55
|
};
|
|
52
56
|
return /* @__PURE__ */ jsx(
|
|
@@ -65,28 +69,41 @@ function StepProgress({
|
|
|
65
69
|
/* @__PURE__ */ jsx("span", { className: "fairmint-step-progress__indicator", "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : stepNumber }),
|
|
66
70
|
/* @__PURE__ */ jsx("span", { className: "fairmint-step-progress__label", children: step.label })
|
|
67
71
|
] });
|
|
68
|
-
return /* @__PURE__ */
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
72
|
+
return /* @__PURE__ */ jsxs("li", { className: "fairmint-step-progress__item", children: [
|
|
73
|
+
isInteractive ? /* @__PURE__ */ jsx(
|
|
74
|
+
UnstyledButton,
|
|
75
|
+
{
|
|
76
|
+
type: "button",
|
|
77
|
+
className: "fairmint-step-progress__pill",
|
|
78
|
+
"data-state": status,
|
|
79
|
+
"data-interactive": "true",
|
|
80
|
+
"data-disabled": "false",
|
|
81
|
+
"aria-current": status === "active" ? "step" : void 0,
|
|
82
|
+
"aria-label": `Step ${stepNumber}: ${step.label}`,
|
|
83
|
+
onClick: () => onStepChange?.(stepNumber),
|
|
84
|
+
children: pillContent
|
|
85
|
+
}
|
|
86
|
+
) : /* @__PURE__ */ jsx(
|
|
87
|
+
"span",
|
|
88
|
+
{
|
|
89
|
+
className: "fairmint-step-progress__pill",
|
|
90
|
+
"data-state": status,
|
|
91
|
+
"data-disabled": step.disabled ? "true" : "false",
|
|
92
|
+
"aria-current": status === "active" ? "step" : void 0,
|
|
93
|
+
"aria-disabled": step.disabled || void 0,
|
|
94
|
+
title: `Step ${stepNumber}: ${step.label}`,
|
|
95
|
+
children: pillContent
|
|
96
|
+
}
|
|
97
|
+
),
|
|
98
|
+
index < steps.length - 1 ? /* @__PURE__ */ jsx(
|
|
99
|
+
"span",
|
|
100
|
+
{
|
|
101
|
+
className: "fairmint-step-progress__connector",
|
|
102
|
+
"data-state": status,
|
|
103
|
+
"aria-hidden": "true"
|
|
104
|
+
}
|
|
105
|
+
) : null
|
|
106
|
+
] }, `${stepNumber}-${step.label}`);
|
|
90
107
|
}) })
|
|
91
108
|
}
|
|
92
109
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepProgress.js","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n /** Visible label in the progress pill. */\n label: string;\n /** Explicitly mark a step complete when completion is not derived from activeStep. */\n completed?: boolean;\n /** Prevent navigation to this step when onStepChange is supplied. */\n disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n steps: readonly StepProgressStep[];\n /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n activeStep: number;\n /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n orientation?: StepProgressOrientation;\n /** Called with the 1-indexed step number when a pill is activated. */\n onStepChange?: (step: number) => void;\n /** Accessible label for the navigation. @default \"Progress\" */\n ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n <svg\n width=\"11\"\n height=\"11\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m5 13 4 4 10-10\" />\n </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n if (!Number.isFinite(activeStep)) return 1;\n return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n step: StepProgressStep,\n stepNumber: number,\n activeStep: number,\n): StepProgressStepStatus => {\n if (stepNumber === activeStep) return \"active\";\n if (step.completed ?? stepNumber < activeStep) return \"complete\";\n return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n steps,\n activeStep,\n orientation = \"horizontal\",\n onStepChange,\n ariaLabel = \"Progress\",\n}: StepProgressProps) {\n if (steps.length === 0) return null;\n\n const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n const rootStyle = {\n \"--fairmint-step-progress-brand\": brandColors.indigo,\n \"--fairmint-step-progress-border\": fairmintVars.
|
|
1
|
+
{"version":3,"file":"StepProgress.js","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n /** Visible label in the progress pill. */\n label: string;\n /** Explicitly mark a step complete when completion is not derived from activeStep. */\n completed?: boolean;\n /** Prevent navigation to this step when onStepChange is supplied. */\n disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n steps: readonly StepProgressStep[];\n /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n activeStep: number;\n /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n orientation?: StepProgressOrientation;\n /** Called with the 1-indexed step number when a pill is activated. */\n onStepChange?: (step: number) => void;\n /** Accessible label for the navigation. @default \"Progress\" */\n ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n <svg\n width=\"11\"\n height=\"11\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m5 13 4 4 10-10\" />\n </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n if (!Number.isFinite(activeStep)) return 1;\n return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n step: StepProgressStep,\n stepNumber: number,\n activeStep: number,\n): StepProgressStepStatus => {\n if (stepNumber === activeStep) return \"active\";\n if (step.completed ?? stepNumber < activeStep) return \"complete\";\n return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n steps,\n activeStep,\n orientation = \"horizontal\",\n onStepChange,\n ariaLabel = \"Progress\",\n}: StepProgressProps) {\n if (steps.length === 0) return null;\n\n const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n const rootStyle = {\n \"--fairmint-step-progress-brand\": brandColors.indigo,\n // colorBorderDefault washes out on colorBgSurfaceSecondary; text-secondary clears 3:1.\n \"--fairmint-step-progress-border\": fairmintVars.colorTextSecondary,\n // Kept off the ring token: the ring carries the step number and needs 3:1, the\n // connector is decorative and reads as a hairline between pills.\n \"--fairmint-step-progress-connector\": fairmintVars.colorBorderDefault,\n \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n // Pending labels use primary ink; active hierarchy is weight + fill, not mute gray.\n \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextPrimary,\n // indigo[1] — surface-selected (indigo[0]) is too close to the secondary canvas.\n \"--fairmint-step-progress-surface-selected\": fairmintVars.colorBgBrandSubtleHover,\n \"--fairmint-step-progress-active-border\": indigoColors[3],\n \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n \"--fairmint-step-progress-complete-border\": indigoColors[3],\n \"--fairmint-step-progress-complete-text\": fairmintVars.colorIconOnSurfaceSelected,\n };\n\n return (\n <Box\n component=\"nav\"\n aria-label={ariaLabel}\n className=\"fairmint-step-progress\"\n data-orientation={orientation}\n style={rootStyle}\n >\n <ol className=\"fairmint-step-progress__list\">\n {steps.map((step, index) => {\n const stepNumber = index + 1;\n const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);\n const isInteractive = Boolean(onStepChange) && !step.disabled;\n const pillContent = (\n <>\n <span className=\"fairmint-step-progress__indicator\" aria-hidden=\"true\">\n {status === \"complete\" ? <CheckIcon /> : stepNumber}\n </span>\n <span className=\"fairmint-step-progress__label\">{step.label}</span>\n </>\n );\n\n return (\n <li key={`${stepNumber}-${step.label}`} className=\"fairmint-step-progress__item\">\n {isInteractive ? (\n <UnstyledButton\n type=\"button\"\n className=\"fairmint-step-progress__pill\"\n data-state={status}\n data-interactive=\"true\"\n data-disabled=\"false\"\n aria-current={status === \"active\" ? \"step\" : undefined}\n aria-label={`Step ${stepNumber}: ${step.label}`}\n onClick={() => onStepChange?.(stepNumber)}\n >\n {pillContent}\n </UnstyledButton>\n ) : (\n <span\n className=\"fairmint-step-progress__pill\"\n data-state={status}\n data-disabled={step.disabled ? \"true\" : \"false\"}\n aria-current={status === \"active\" ? \"step\" : undefined}\n aria-disabled={step.disabled || undefined}\n title={`Step ${stepNumber}: ${step.label}`}\n >\n {pillContent}\n </span>\n )}\n {index < steps.length - 1 ? (\n <span\n className=\"fairmint-step-progress__connector\"\n data-state={status}\n aria-hidden=\"true\"\n />\n ) : null}\n </li>\n );\n })}\n </ol>\n </Box>\n );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":[],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__list {
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
justify-content: flex-start;
|
|
24
|
+
gap: 0;
|
|
24
25
|
margin: 0;
|
|
25
26
|
overflow: visible;
|
|
26
27
|
}
|
|
@@ -45,6 +46,8 @@
|
|
|
45
46
|
|
|
46
47
|
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__item {
|
|
47
48
|
flex: none;
|
|
49
|
+
width: 100%;
|
|
50
|
+
max-width: none;
|
|
48
51
|
}
|
|
49
52
|
|
|
50
53
|
/*
|
|
@@ -68,7 +71,7 @@
|
|
|
68
71
|
border: 1px solid transparent;
|
|
69
72
|
border-radius: 999px;
|
|
70
73
|
background: transparent;
|
|
71
|
-
color: var(--fairmint-step-progress-text-secondary, #
|
|
74
|
+
color: var(--fairmint-step-progress-text-secondary, #111927);
|
|
72
75
|
font: inherit;
|
|
73
76
|
text-align: left;
|
|
74
77
|
text-decoration: none;
|
|
@@ -91,10 +94,20 @@
|
|
|
91
94
|
justify-content: center;
|
|
92
95
|
}
|
|
93
96
|
|
|
97
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__pill {
|
|
98
|
+
padding: 0.375rem 0.625rem;
|
|
99
|
+
border-color: transparent;
|
|
100
|
+
border-radius: 0.5rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
94
103
|
.fairmint-step-progress__pill[data-interactive="true"] {
|
|
95
104
|
cursor: pointer;
|
|
96
105
|
}
|
|
97
106
|
|
|
107
|
+
.fairmint-step-progress__pill[data-disabled="true"] {
|
|
108
|
+
opacity: 0.55;
|
|
109
|
+
}
|
|
110
|
+
|
|
98
111
|
.fairmint-step-progress__pill[data-interactive="true"]:hover {
|
|
99
112
|
background: var(--fairmint-interactive-hover-bg, #f8f9fa);
|
|
100
113
|
}
|
|
@@ -105,8 +118,8 @@
|
|
|
105
118
|
}
|
|
106
119
|
|
|
107
120
|
.fairmint-step-progress__pill[data-state="active"] {
|
|
108
|
-
border-color: var(--fairmint-step-progress-active-border, #
|
|
109
|
-
background: var(--fairmint-step-progress-surface-selected, #
|
|
121
|
+
border-color: var(--fairmint-step-progress-active-border, #a5b4fc);
|
|
122
|
+
background: var(--fairmint-step-progress-surface-selected, #e0e7ff);
|
|
110
123
|
color: var(--fairmint-step-progress-text-primary, #111927);
|
|
111
124
|
}
|
|
112
125
|
|
|
@@ -117,7 +130,7 @@
|
|
|
117
130
|
justify-content: center;
|
|
118
131
|
width: 1.125rem;
|
|
119
132
|
height: 1.125rem;
|
|
120
|
-
border: 1px solid var(--fairmint-step-progress-border, #
|
|
133
|
+
border: 1px solid var(--fairmint-step-progress-border, #6c737f);
|
|
121
134
|
border-radius: 50%;
|
|
122
135
|
color: var(--fairmint-step-progress-text-primary, #111927);
|
|
123
136
|
font-size: 0.625rem;
|
|
@@ -133,10 +146,16 @@
|
|
|
133
146
|
|
|
134
147
|
.fairmint-step-progress__pill[data-state="complete"] .fairmint-step-progress__indicator {
|
|
135
148
|
border-color: var(--fairmint-step-progress-complete-border, #a5b4fc);
|
|
136
|
-
background: var(--fairmint-step-progress-surface-selected, #
|
|
149
|
+
background: var(--fairmint-step-progress-surface-selected, #e0e7ff);
|
|
137
150
|
color: var(--fairmint-step-progress-complete-text, #4f46e5);
|
|
138
151
|
}
|
|
139
152
|
|
|
153
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__indicator {
|
|
154
|
+
flex-basis: 1.375rem;
|
|
155
|
+
width: 1.375rem;
|
|
156
|
+
height: 1.375rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
140
159
|
.fairmint-step-progress__label {
|
|
141
160
|
min-width: 0;
|
|
142
161
|
overflow: hidden;
|
|
@@ -151,9 +170,33 @@
|
|
|
151
170
|
font-weight: 600;
|
|
152
171
|
}
|
|
153
172
|
|
|
173
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__label {
|
|
174
|
+
overflow: visible;
|
|
175
|
+
text-overflow: clip;
|
|
176
|
+
white-space: normal;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.fairmint-step-progress__connector {
|
|
180
|
+
display: none;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__connector {
|
|
184
|
+
display: block;
|
|
185
|
+
width: 1px;
|
|
186
|
+
height: 0.875rem;
|
|
187
|
+
margin-left: 1.3125rem;
|
|
188
|
+
background: var(--fairmint-step-progress-connector, #e5e7eb);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.fairmint-step-progress[data-orientation="vertical"]
|
|
192
|
+
.fairmint-step-progress__connector[data-state="complete"] {
|
|
193
|
+
background: var(--fairmint-step-progress-complete-border, #a5b4fc);
|
|
194
|
+
}
|
|
195
|
+
|
|
154
196
|
@media (max-width: 47.99em) {
|
|
155
197
|
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__list {
|
|
156
198
|
flex-direction: row;
|
|
199
|
+
gap: 0.5rem;
|
|
157
200
|
margin-bottom: 1.5rem;
|
|
158
201
|
overflow-x: auto;
|
|
159
202
|
}
|
|
@@ -164,6 +207,8 @@
|
|
|
164
207
|
|
|
165
208
|
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__item {
|
|
166
209
|
flex: 0 0 auto;
|
|
210
|
+
width: auto;
|
|
211
|
+
max-width: 14rem;
|
|
167
212
|
}
|
|
168
213
|
|
|
169
214
|
.fairmint-step-progress .fairmint-step-progress__pill {
|
|
@@ -171,6 +216,33 @@
|
|
|
171
216
|
width: auto;
|
|
172
217
|
min-width: 9rem;
|
|
173
218
|
}
|
|
219
|
+
|
|
220
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__pill {
|
|
221
|
+
min-height: 2.125rem;
|
|
222
|
+
padding: 0.5rem 0.75rem;
|
|
223
|
+
border-radius: 999px;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.fairmint-step-progress[data-orientation="vertical"]
|
|
227
|
+
.fairmint-step-progress__pill[data-state="active"] {
|
|
228
|
+
border-color: var(--fairmint-step-progress-active-border, #a5b4fc);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__indicator {
|
|
232
|
+
flex-basis: 1.125rem;
|
|
233
|
+
width: 1.125rem;
|
|
234
|
+
height: 1.125rem;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__label {
|
|
238
|
+
overflow: hidden;
|
|
239
|
+
text-overflow: ellipsis;
|
|
240
|
+
white-space: nowrap;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__connector {
|
|
244
|
+
display: none;
|
|
245
|
+
}
|
|
174
246
|
}
|
|
175
247
|
.fairmint-step-flow {
|
|
176
248
|
width: 100%;
|