@fairmint/ui 0.3.11 → 0.3.12
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 +2 -2
- package/dist/components/generic/StepProgress/StepProgress.cjs.map +1 -1
- package/dist/components/generic/StepProgress/StepProgress.js +2 -2
- package/dist/components/generic/StepProgress/StepProgress.js.map +1 -1
- package/dist/styles.css +16 -8
- package/package.json +1 -1
|
@@ -8,8 +8,8 @@ const UnstyledButton = require("../../../node_modules/@mantine/core/esm/componen
|
|
|
8
8
|
const CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9
9
|
"svg",
|
|
10
10
|
{
|
|
11
|
-
width: "
|
|
12
|
-
height: "
|
|
11
|
+
width: "11",
|
|
12
|
+
height: "11",
|
|
13
13
|
viewBox: "0 0 24 24",
|
|
14
14
|
fill: "none",
|
|
15
15
|
stroke: "currentColor",
|
|
@@ -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=\"
|
|
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.colorBorderDefault,\n \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextSecondary,\n \"--fairmint-step-progress-surface-selected\": fairmintVars.colorSurfaceSelected,\n // One shared accent tone for anything bordering/reading on colorSurfaceSelected,\n // instead of two adjacent-but-different indigo shades competing.\n \"--fairmint-step-progress-active-border\": indigoColors[2],\n \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n \"--fairmint-step-progress-complete-border\": indigoColors[2],\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 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 aria-current={status === \"active\" ? \"step\" : undefined}\n title={`Step ${stepNumber}: ${step.label}`}\n >\n {pillContent}\n </span>\n )}\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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"}
|
|
@@ -6,8 +6,8 @@ import { UnstyledButton } from "../../../node_modules/@mantine/core/esm/componen
|
|
|
6
6
|
const CheckIcon = () => /* @__PURE__ */ jsx(
|
|
7
7
|
"svg",
|
|
8
8
|
{
|
|
9
|
-
width: "
|
|
10
|
-
height: "
|
|
9
|
+
width: "11",
|
|
10
|
+
height: "11",
|
|
11
11
|
viewBox: "0 0 24 24",
|
|
12
12
|
fill: "none",
|
|
13
13
|
stroke: "currentColor",
|
|
@@ -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=\"
|
|
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.colorBorderDefault,\n \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextSecondary,\n \"--fairmint-step-progress-surface-selected\": fairmintVars.colorSurfaceSelected,\n // One shared accent tone for anything bordering/reading on colorSurfaceSelected,\n // instead of two adjacent-but-different indigo shades competing.\n \"--fairmint-step-progress-active-border\": indigoColors[2],\n \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n \"--fairmint-step-progress-complete-border\": indigoColors[2],\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 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 aria-current={status === \"active\" ? \"step\" : undefined}\n title={`Step ${stepNumber}: ${step.label}`}\n >\n {pillContent}\n </span>\n )}\n </li>\n );\n })}\n </ol>\n </Box>\n );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":[],"mappings":";;;;;AA6BA,MAAM,YAAY,MAChB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA,oBAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA;AAC5B;AAGF,MAAM,oBAAoB,CAAC,YAAoB,cAAsB;AACnE,MAAI,CAAC,OAAO,SAAS,UAAU,EAAG,QAAO;AACzC,SAAO,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,UAAU,GAAG,CAAC,GAAG,SAAS;AAChE;AAEO,MAAM,wBAAwB,CACnC,MACA,YACA,eAC2B;AAC3B,MAAI,eAAe,WAAY,QAAO;AACtC,MAAI,KAAK,aAAa,aAAa,WAAY,QAAO;AACtD,SAAO;AACT;AAOO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,GAAsB;AACpB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,qBAAqB,kBAAkB,YAAY,MAAM,MAAM;AACrE,QAAM,YAAY;AAAA,IAChB,kCAAkC,YAAY;AAAA,IAC9C,mCAAmC,aAAa;AAAA,IAChD,yCAAyC,aAAa;AAAA,IACtD,2CAA2C,aAAa;AAAA,IACxD,6CAA6C,aAAa;AAAA;AAAA;AAAA,IAG1D,0CAA0C,aAAa,CAAC;AAAA,IACxD,kDAAkD,aAAa;AAAA,IAC/D,4CAA4C,aAAa,CAAC;AAAA,IAC1D,0CAA0C,aAAa;AAAA,EAAA;AAGzD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,OAAO;AAAA,MAEP,UAAA,oBAAC,QAAG,WAAU,gCACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,aAAa,QAAQ;AAC3B,cAAM,SAAS,sBAAsB,MAAM,YAAY,kBAAkB;AACzE,cAAM,gBAAgB,QAAQ,YAAY,KAAK,CAAC,KAAK;AACrD,cAAM,cACJ,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,qCAAoC,eAAY,QAC7D,qBAAW,aAAa,oBAAC,WAAA,CAAA,CAAU,IAAK,WAAA,CAC3C;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,MAAA,CAAM;AAAA,QAAA,GAC9D;AAGF,eACE,oBAAC,MAAA,EAAuC,WAAU,gCAC/C,UAAA,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,oBAAiB;AAAA,YACjB,gBAAc,WAAW,WAAW,SAAS;AAAA,YAC7C,cAAY,QAAQ,UAAU,KAAK,KAAK,KAAK;AAAA,YAC7C,SAAS,MAAM,eAAe,UAAU;AAAA,YAEvC,UAAA;AAAA,UAAA;AAAA,QAAA,IAGH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,gBAAc,WAAW,WAAW,SAAS;AAAA,YAC7C,OAAO,QAAQ,UAAU,KAAK,KAAK,KAAK;AAAA,YAEvC,UAAA;AAAA,UAAA;AAAA,QAAA,KApBE,GAAG,UAAU,IAAI,KAAK,KAAK,EAuBpC;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,MAAM,kCAAkC;"}
|
package/dist/styles.css
CHANGED
|
@@ -111,14 +111,22 @@
|
|
|
111
111
|
flex: none;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
|
|
114
|
+
/*
|
|
115
|
+
* Scoped under the root class on purpose. The pill renders as an UnstyledButton,
|
|
116
|
+
* whose reset sets `border: 0; padding: 0` at the same single-class specificity —
|
|
117
|
+
* so which one wins comes down to stylesheet order, and in a consumer app Mantine's
|
|
118
|
+
* sheet can land after this one. That silently drops the selected ring and the
|
|
119
|
+
* horizontal padding, leaving the step indicator flush against the pill edge. Two
|
|
120
|
+
* classes here settles it in any order.
|
|
121
|
+
*/
|
|
122
|
+
.fairmint-step-progress .fairmint-step-progress__pill {
|
|
115
123
|
box-sizing: border-box;
|
|
116
124
|
display: flex;
|
|
117
125
|
align-items: center;
|
|
118
126
|
justify-content: flex-start;
|
|
119
127
|
gap: 0.5rem;
|
|
120
128
|
width: 100%;
|
|
121
|
-
min-height:
|
|
129
|
+
min-height: 2.125rem;
|
|
122
130
|
padding: 0.5rem 0.75rem;
|
|
123
131
|
overflow: hidden;
|
|
124
132
|
border: 1px solid transparent;
|
|
@@ -151,15 +159,15 @@
|
|
|
151
159
|
|
|
152
160
|
.fairmint-step-progress__indicator {
|
|
153
161
|
display: inline-flex;
|
|
154
|
-
flex: 0 0 1.
|
|
162
|
+
flex: 0 0 1.125rem;
|
|
155
163
|
align-items: center;
|
|
156
164
|
justify-content: center;
|
|
157
|
-
width: 1.
|
|
158
|
-
height: 1.
|
|
165
|
+
width: 1.125rem;
|
|
166
|
+
height: 1.125rem;
|
|
159
167
|
border: 1px solid var(--fairmint-step-progress-border, #d2d6db);
|
|
160
168
|
border-radius: 50%;
|
|
161
169
|
color: var(--fairmint-step-progress-text-primary, #111927);
|
|
162
|
-
font-size: 0.
|
|
170
|
+
font-size: 0.625rem;
|
|
163
171
|
font-weight: 700;
|
|
164
172
|
line-height: 1;
|
|
165
173
|
}
|
|
@@ -181,7 +189,7 @@
|
|
|
181
189
|
overflow: hidden;
|
|
182
190
|
text-overflow: ellipsis;
|
|
183
191
|
white-space: nowrap;
|
|
184
|
-
font-size:
|
|
192
|
+
font-size: 0.875rem;
|
|
185
193
|
font-weight: 500;
|
|
186
194
|
line-height: 1.25;
|
|
187
195
|
}
|
|
@@ -205,7 +213,7 @@
|
|
|
205
213
|
flex: 0 0 auto;
|
|
206
214
|
}
|
|
207
215
|
|
|
208
|
-
.fairmint-step-progress__pill {
|
|
216
|
+
.fairmint-step-progress .fairmint-step-progress__pill {
|
|
209
217
|
width: auto;
|
|
210
218
|
min-width: 9rem;
|
|
211
219
|
}
|