@fairmint/ui 0.4.9 → 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 +11 -7
- 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 +11 -7
- package/dist/components/generic/StepProgress/StepProgress.js.map +1 -1
- package/dist/styles.css +7 -12
- 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(
|
|
@@ -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(
|
|
@@ -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
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
border: 1px solid transparent;
|
|
72
72
|
border-radius: 999px;
|
|
73
73
|
background: transparent;
|
|
74
|
-
color: var(--fairmint-step-progress-text-secondary, #
|
|
74
|
+
color: var(--fairmint-step-progress-text-secondary, #111927);
|
|
75
75
|
font: inherit;
|
|
76
76
|
text-align: left;
|
|
77
77
|
text-decoration: none;
|
|
@@ -118,16 +118,11 @@
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
.fairmint-step-progress__pill[data-state="active"] {
|
|
121
|
-
border-color: var(--fairmint-step-progress-active-border, #
|
|
122
|
-
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);
|
|
123
123
|
color: var(--fairmint-step-progress-text-primary, #111927);
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
.fairmint-step-progress[data-orientation="vertical"]
|
|
127
|
-
.fairmint-step-progress__pill[data-state="active"] {
|
|
128
|
-
border-color: transparent;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
126
|
.fairmint-step-progress__indicator {
|
|
132
127
|
display: inline-flex;
|
|
133
128
|
flex: 0 0 1.125rem;
|
|
@@ -135,7 +130,7 @@
|
|
|
135
130
|
justify-content: center;
|
|
136
131
|
width: 1.125rem;
|
|
137
132
|
height: 1.125rem;
|
|
138
|
-
border: 1px solid var(--fairmint-step-progress-border, #
|
|
133
|
+
border: 1px solid var(--fairmint-step-progress-border, #6c737f);
|
|
139
134
|
border-radius: 50%;
|
|
140
135
|
color: var(--fairmint-step-progress-text-primary, #111927);
|
|
141
136
|
font-size: 0.625rem;
|
|
@@ -151,7 +146,7 @@
|
|
|
151
146
|
|
|
152
147
|
.fairmint-step-progress__pill[data-state="complete"] .fairmint-step-progress__indicator {
|
|
153
148
|
border-color: var(--fairmint-step-progress-complete-border, #a5b4fc);
|
|
154
|
-
background: var(--fairmint-step-progress-surface-selected, #
|
|
149
|
+
background: var(--fairmint-step-progress-surface-selected, #e0e7ff);
|
|
155
150
|
color: var(--fairmint-step-progress-complete-text, #4f46e5);
|
|
156
151
|
}
|
|
157
152
|
|
|
@@ -190,7 +185,7 @@
|
|
|
190
185
|
width: 1px;
|
|
191
186
|
height: 0.875rem;
|
|
192
187
|
margin-left: 1.3125rem;
|
|
193
|
-
background: var(--fairmint-step-progress-
|
|
188
|
+
background: var(--fairmint-step-progress-connector, #e5e7eb);
|
|
194
189
|
}
|
|
195
190
|
|
|
196
191
|
.fairmint-step-progress[data-orientation="vertical"]
|
|
@@ -230,7 +225,7 @@
|
|
|
230
225
|
|
|
231
226
|
.fairmint-step-progress[data-orientation="vertical"]
|
|
232
227
|
.fairmint-step-progress__pill[data-state="active"] {
|
|
233
|
-
border-color: var(--fairmint-step-progress-active-border, #
|
|
228
|
+
border-color: var(--fairmint-step-progress-active-border, #a5b4fc);
|
|
234
229
|
}
|
|
235
230
|
|
|
236
231
|
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__indicator {
|