@fairmint/ui 0.3.11 → 0.3.13
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/_virtual/index3.cjs +5 -3
- package/dist/_virtual/index3.cjs.map +1 -1
- package/dist/_virtual/index3.js +5 -2
- package/dist/_virtual/index3.js.map +1 -1
- package/dist/_virtual/index4.cjs +3 -5
- package/dist/_virtual/index4.cjs.map +1 -1
- package/dist/_virtual/index4.js +2 -5
- package/dist/_virtual/index4.js.map +1 -1
- 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/node_modules/@mantine/form/esm/hooks/use-form-status/use-form-status.cjs +1 -1
- package/dist/node_modules/@mantine/form/esm/hooks/use-form-status/use-form-status.js +1 -1
- package/dist/node_modules/prop-types/index.cjs +1 -1
- package/dist/node_modules/prop-types/index.js +1 -1
- package/dist/styles.css +35 -12
- package/package.json +1 -1
package/dist/_virtual/index3.cjs
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
const _commonjsHelpers = require("./_commonjsHelpers.cjs");
|
|
3
|
+
const index = require("../node_modules/fast-deep-equal/index.cjs");
|
|
4
|
+
var fastDeepEqualExports = index.__require();
|
|
5
|
+
const isEqual = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(fastDeepEqualExports);
|
|
6
|
+
module.exports = isEqual;
|
|
5
7
|
//# sourceMappingURL=index3.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/dist/_virtual/index3.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
|
|
2
|
+
import { __require as requireFastDeepEqual } from "../node_modules/fast-deep-equal/index.js";
|
|
3
|
+
var fastDeepEqualExports = requireFastDeepEqual();
|
|
4
|
+
const isEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqualExports);
|
|
2
5
|
export {
|
|
3
|
-
|
|
6
|
+
isEqual as default
|
|
4
7
|
};
|
|
5
8
|
//# sourceMappingURL=index3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/dist/_virtual/index4.cjs
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const isEqual = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(fastDeepEqualExports);
|
|
6
|
-
module.exports = isEqual;
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
var propTypes = { exports: {} };
|
|
4
|
+
exports.__module = propTypes;
|
|
7
5
|
//# sourceMappingURL=index4.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/dist/_virtual/index4.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { __require as requireFastDeepEqual } from "../node_modules/fast-deep-equal/index.js";
|
|
3
|
-
var fastDeepEqualExports = requireFastDeepEqual();
|
|
4
|
-
const isEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqualExports);
|
|
1
|
+
var propTypes = { exports: {} };
|
|
5
2
|
export {
|
|
6
|
-
|
|
3
|
+
propTypes as __module
|
|
7
4
|
};
|
|
8
5
|
//# sourceMappingURL=index4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -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;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
|
-
const index = require("../../../../../../_virtual/
|
|
4
|
+
const index = require("../../../../../../_virtual/index3.cjs");
|
|
5
5
|
const getStatus = require("../../get-status/get-status.cjs");
|
|
6
6
|
const clearListState = require("../../lists/clear-list-state.cjs");
|
|
7
7
|
const getPath = require("../../paths/get-path.cjs");
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useRef, useCallback } from "react";
|
|
2
|
-
import isEqual from "../../../../../../_virtual/
|
|
2
|
+
import isEqual from "../../../../../../_virtual/index3.js";
|
|
3
3
|
import { getStatus } from "../../get-status/get-status.js";
|
|
4
4
|
import { clearListState } from "../../lists/clear-list-state.js";
|
|
5
5
|
import { getPath } from "../../paths/get-path.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const index$1 = require("../../_virtual/
|
|
3
|
+
const index$1 = require("../../_virtual/index4.cjs");
|
|
4
4
|
const index = require("./node_modules/react-is/index.cjs");
|
|
5
5
|
const factoryWithTypeCheckers = require("./factoryWithTypeCheckers.cjs");
|
|
6
6
|
const factoryWithThrowingShims = require("./factoryWithThrowingShims.cjs");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __module as propTypes } from "../../_virtual/
|
|
1
|
+
import { __module as propTypes } from "../../_virtual/index4.js";
|
|
2
2
|
import { __require as requireReactIs } from "./node_modules/react-is/index.js";
|
|
3
3
|
import { __require as requireFactoryWithTypeCheckers } from "./factoryWithTypeCheckers.js";
|
|
4
4
|
import { __require as requireFactoryWithThrowingShims } from "./factoryWithThrowingShims.js";
|
package/dist/styles.css
CHANGED
|
@@ -83,6 +83,7 @@
|
|
|
83
83
|
|
|
84
84
|
.fairmint-step-progress__list {
|
|
85
85
|
display: flex;
|
|
86
|
+
justify-content: space-between;
|
|
86
87
|
gap: 0.5rem;
|
|
87
88
|
width: 100%;
|
|
88
89
|
margin: 0 0 1.5rem;
|
|
@@ -98,27 +99,49 @@
|
|
|
98
99
|
|
|
99
100
|
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__list {
|
|
100
101
|
flex-direction: column;
|
|
102
|
+
justify-content: flex-start;
|
|
101
103
|
margin: 0;
|
|
102
104
|
overflow: visible;
|
|
103
105
|
}
|
|
104
106
|
|
|
107
|
+
/*
|
|
108
|
+
* Sized to its label, capped, and never grown to fill a share.
|
|
109
|
+
*
|
|
110
|
+
* Three things have to hold at once. A short step like "Sign" should not sit in a
|
|
111
|
+
* pill stretched to a quarter of the row, so the item takes its content width
|
|
112
|
+
* rather than an equal share. A wordy step should not push its neighbours aside,
|
|
113
|
+
* so `max-width` caps it and the label ellipsises inside. And once the steps stop
|
|
114
|
+
* fitting, the row should run past the container for the list to scroll rather than
|
|
115
|
+
* every pill squeezing down — which is what shrinking to `min-width: 0` used to do.
|
|
116
|
+
*
|
|
117
|
+
* The spare room goes *between* the pills via `justify-content` on the list, not
|
|
118
|
+
* inside them.
|
|
119
|
+
*/
|
|
105
120
|
.fairmint-step-progress__item {
|
|
106
|
-
|
|
107
|
-
|
|
121
|
+
flex: 0 1 auto;
|
|
122
|
+
max-width: 14rem;
|
|
108
123
|
}
|
|
109
124
|
|
|
110
125
|
.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__item {
|
|
111
126
|
flex: none;
|
|
112
127
|
}
|
|
113
128
|
|
|
114
|
-
|
|
129
|
+
/*
|
|
130
|
+
* Scoped under the root class on purpose. The pill renders as an UnstyledButton,
|
|
131
|
+
* whose reset sets `border: 0; padding: 0` at the same single-class specificity —
|
|
132
|
+
* so which one wins comes down to stylesheet order, and in a consumer app Mantine's
|
|
133
|
+
* sheet can land after this one. That silently drops the selected ring and the
|
|
134
|
+
* horizontal padding, leaving the step indicator flush against the pill edge. Two
|
|
135
|
+
* classes here settles it in any order.
|
|
136
|
+
*/
|
|
137
|
+
.fairmint-step-progress .fairmint-step-progress__pill {
|
|
115
138
|
box-sizing: border-box;
|
|
116
139
|
display: flex;
|
|
117
140
|
align-items: center;
|
|
118
141
|
justify-content: flex-start;
|
|
119
142
|
gap: 0.5rem;
|
|
120
143
|
width: 100%;
|
|
121
|
-
min-height:
|
|
144
|
+
min-height: 2.125rem;
|
|
122
145
|
padding: 0.5rem 0.75rem;
|
|
123
146
|
overflow: hidden;
|
|
124
147
|
border: 1px solid transparent;
|
|
@@ -151,15 +174,15 @@
|
|
|
151
174
|
|
|
152
175
|
.fairmint-step-progress__indicator {
|
|
153
176
|
display: inline-flex;
|
|
154
|
-
flex: 0 0 1.
|
|
177
|
+
flex: 0 0 1.125rem;
|
|
155
178
|
align-items: center;
|
|
156
179
|
justify-content: center;
|
|
157
|
-
width: 1.
|
|
158
|
-
height: 1.
|
|
180
|
+
width: 1.125rem;
|
|
181
|
+
height: 1.125rem;
|
|
159
182
|
border: 1px solid var(--fairmint-step-progress-border, #d2d6db);
|
|
160
183
|
border-radius: 50%;
|
|
161
184
|
color: var(--fairmint-step-progress-text-primary, #111927);
|
|
162
|
-
font-size: 0.
|
|
185
|
+
font-size: 0.625rem;
|
|
163
186
|
font-weight: 700;
|
|
164
187
|
line-height: 1;
|
|
165
188
|
}
|
|
@@ -181,13 +204,13 @@
|
|
|
181
204
|
overflow: hidden;
|
|
182
205
|
text-overflow: ellipsis;
|
|
183
206
|
white-space: nowrap;
|
|
184
|
-
font-size:
|
|
185
|
-
font-weight:
|
|
207
|
+
font-size: 0.875rem;
|
|
208
|
+
font-weight: 400;
|
|
186
209
|
line-height: 1.25;
|
|
187
210
|
}
|
|
188
211
|
|
|
189
212
|
.fairmint-step-progress__pill[data-state="active"] .fairmint-step-progress__label {
|
|
190
|
-
font-weight:
|
|
213
|
+
font-weight: 600;
|
|
191
214
|
}
|
|
192
215
|
|
|
193
216
|
@media (max-width: 47.99em) {
|
|
@@ -205,7 +228,7 @@
|
|
|
205
228
|
flex: 0 0 auto;
|
|
206
229
|
}
|
|
207
230
|
|
|
208
|
-
.fairmint-step-progress__pill {
|
|
231
|
+
.fairmint-step-progress .fairmint-step-progress__pill {
|
|
209
232
|
width: auto;
|
|
210
233
|
min-width: 9rem;
|
|
211
234
|
}
|