@spark-ui/components
Version:
Spark (Leboncoin design system) components.
717 lines (701 loc) • 23.3 kB
JavaScript
import {
Icon
} from "../chunk-UMUMFMFB.mjs";
import "../chunk-KEGAAGJW.mjs";
import "../chunk-6QCEPQ3U.mjs";
// src/progress-tracker/ProgressTracker.tsx
import { cx as cx2 } from "class-variance-authority";
import { useState } from "react";
// src/progress-tracker/ProgressTracker.styles.ts
import { cx } from "class-variance-authority";
var progressList = cx([
"flex flex-nowrap items-start group/list",
"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full",
"data-[orientation=vertical]:flex-col"
]);
// src/progress-tracker/ProgressTrackerContext.ts
import { createContext, useContext } from "react";
var ProgressTrackerContext = createContext(
{}
);
var ProgressTrackerStepContext = createContext(
{}
);
var useProgressTrackerContext = () => useContext(ProgressTrackerContext);
var useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext);
var ID_PREFIX = ":progress-tracker";
// src/progress-tracker/ProgressTracker.tsx
import { jsx } from "react/jsx-runtime";
var ProgressTracker = ({
stepIndex = 0,
onStepClick,
readOnly = false,
intent = "basic",
size = "lg",
design = "outline",
orientation = "horizontal",
children,
className,
ref,
...rest
}) => {
const [steps, setSteps] = useState(/* @__PURE__ */ new Map());
const Component = readOnly ? "div" : "nav";
return /* @__PURE__ */ jsx(
ProgressTrackerContext.Provider,
{
value: { stepIndex, onStepClick, steps, setSteps, size, intent, design, readOnly },
children: /* @__PURE__ */ jsx(
Component,
{
ref,
"data-spark-component": "progress-tracker",
className: cx2("inline-flex", className),
...rest,
children: /* @__PURE__ */ jsx(
"ol",
{
"data-orientation": orientation,
className: progressList,
style: { counterReset: "step" },
children
}
)
}
)
}
);
};
ProgressTracker.displayName = "ProgressTracker";
// src/progress-tracker/ProgressTrackerStep.tsx
import { useEffect, useId } from "react";
// src/progress-tracker/ProgressTrackerStep.styles.ts
import { cva } from "class-variance-authority";
var stepItemVariant = cva(
[
"relative inline-flex items-start flex-auto first:grow-0 justify-center group/item",
// Progress Track
"after:absolute after:z-base",
"last:after:content-none",
// Horizontal orientation
"group-data-[orientation=horizontal]/list:px-[1px]",
"group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base",
"group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0",
"group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]",
"first:group-data-[orientation=horizontal]/list:before:content-none",
// Vertical orientation
"group-data-[orientation=vertical]/list:py-[1px]",
"group-data-[orientation=vertical]/list:items-start",
"group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]"
],
{
variants: {
size: {
sm: [
// Horizontal orientation
"group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]",
"group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]",
"first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]",
"last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]",
// Vertical orientation
"group-data-[orientation=vertical]/list:after:left-[8px]",
"group-data-[orientation=vertical]/list:after:top-[25px]",
"first:group-data-[orientation=vertical]/list:after:top-[21px]"
],
md: [
// Horizontal orientation
"group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]",
"group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]",
"first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]",
"last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]",
// Vertical orientation
"group-data-[orientation=vertical]/list:after:left-[12px]",
"group-data-[orientation=vertical]/list:after:top-[33px]",
"first:group-data-[orientation=vertical]/list:after:top-[29px]"
],
lg: [
// Horizontal orientation
"group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]",
"group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]",
"first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]",
"last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]",
// Vertical orientation
"group-data-[orientation=vertical]/list:after:left-[16px]",
"group-data-[orientation=vertical]/list:after:top-[41px]",
"first:group-data-[orientation=vertical]/list:after:top-[37px]"
]
},
intent: {
basic: ["after:bg-basic", "group-data-[orientation=horizontal]/list:before:bg-basic"],
support: ["after:bg-support", "group-data-[orientation=horizontal]/list:before:bg-support"],
main: ["after:bg-main", "group-data-[orientation=horizontal]/list:before:bg-main"],
neutral: ["after:bg-neutral", "group-data-[orientation=horizontal]/list:before:bg-neutral"],
info: ["after:bg-info", "group-data-[orientation=horizontal]/list:before:bg-info"],
accent: ["after:bg-accent", "group-data-[orientation=horizontal]/list:before:bg-accent"],
danger: ["after:bg-error", "group-data-[orientation=horizontal]/list:before:bg-error"],
alert: ["after:bg-alert", "group-data-[orientation=horizontal]/list:before:bg-alert"],
success: ["after:bg-success", "group-data-[orientation=horizontal]/list:before:bg-success"]
},
disabled: {
true: "before:opacity-dim-3",
false: ""
},
disabledAfter: {
true: "after:opacity-dim-3",
false: ""
}
},
defaultVariants: {
disabled: false,
disabledAfter: false,
size: "lg",
intent: "basic"
}
}
);
var stepButtonVariant = cva(
[
"relative flex group/btn disabled:cursor-default",
// Horizontal orientation
"group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center",
"group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm",
"group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0",
// Vertical orientation
"group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start",
"group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm",
"group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0"
],
{
variants: {
size: {
sm: [
"group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]",
"group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]"
],
md: [
"group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]",
"group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]"
],
lg: [
"group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]",
"group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]"
]
},
readOnly: {
true: "cursor-default",
false: "cursor-pointer"
}
},
defaultVariants: {
size: "lg",
readOnly: false
}
}
);
// src/progress-tracker/ProgressTrackerStepIndicator.tsx
import { Check } from "@spark-ui/icons/Check";
// src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
import { cva as cva2 } from "class-variance-authority";
// src/progress-tracker/stepIndicatorVariants/outline.ts
var outlineVariants = [
{
design: "outline",
intent: "basic",
state: ["complete", "incomplete"],
class: [
"text-on-basic-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "basic",
state: "active",
class: "text-on-basic-container bg-basic-container"
},
{
design: "outline",
intent: "support",
state: ["complete", "incomplete"],
class: [
"text-on-support-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "support",
state: "active",
class: "text-on-support-container bg-support-container"
},
{
design: "outline",
intent: "main",
state: ["complete", "incomplete"],
class: [
"text-on-main-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "main",
state: "active",
class: "text-on-main-container bg-main-container"
},
{
design: "outline",
intent: "neutral",
state: ["complete", "incomplete"],
class: [
"text-on-neutral-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "neutral",
state: "active",
class: "text-on-neutral-container bg-neutral-container"
},
{
design: "outline",
intent: "info",
state: ["complete", "incomplete"],
class: [
"text-on-info-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "info",
state: "active",
class: "text-on-info-container bg-info-container"
},
{
design: "outline",
intent: "accent",
state: ["complete", "incomplete"],
class: [
"text-on-accent-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "accent",
state: "active",
class: "text-on-accent-container bg-accent-container"
},
{
design: "outline",
intent: "danger",
state: ["complete", "incomplete"],
class: [
"text-on-error-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "danger",
state: "active",
class: "text-on-error-container bg-error-container"
},
{
design: "outline",
intent: "alert",
state: ["complete", "incomplete"],
class: [
"text-on-alert-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "alert",
state: "active",
class: "text-on-alert-container bg-alert-container"
},
{
design: "outline",
intent: "success",
state: ["complete", "incomplete"],
class: [
"text-on-success-container bg-transparent",
"group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
]
},
{
design: "outline",
intent: "success",
state: "active",
class: "text-on-success-container bg-success-container"
}
];
// src/progress-tracker/stepIndicatorVariants/tinted.ts
var tintedVariants = [
{
design: "tinted",
intent: "basic",
state: ["complete", "incomplete"],
class: [
"text-on-basic-container bg-basic-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"
]
},
{
design: "tinted",
intent: "basic",
state: "active",
class: "text-on-basic bg-basic"
},
{
design: "tinted",
intent: "support",
state: ["complete", "incomplete"],
class: [
"text-on-support-container bg-support-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-support-container"
]
},
{
design: "tinted",
intent: "support",
state: "active",
class: "text-on-support bg-support"
},
{
design: "tinted",
intent: "main",
state: ["complete", "incomplete"],
class: [
"text-on-main-container bg-main-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-main-container"
]
},
{
design: "tinted",
intent: "main",
state: "active",
class: "text-on-main bg-main"
},
{
design: "tinted",
intent: "neutral",
state: ["complete", "incomplete"],
class: [
"text-on-neutral-container bg-neutral-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"
]
},
{
design: "tinted",
intent: "neutral",
state: "active",
class: "text-on-neutral bg-neutral"
},
{
design: "tinted",
intent: "info",
state: ["complete", "incomplete"],
class: [
"text-on-info-container bg-info-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-info-container"
]
},
{
design: "tinted",
intent: "info",
state: "active",
class: "text-on-info bg-info"
},
{
design: "tinted",
intent: "accent",
state: ["complete", "incomplete"],
class: [
"text-on-accent-container bg-accent-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-accent-container"
]
},
{
design: "tinted",
intent: "accent",
state: "active",
class: "text-on-accent bg-accent"
},
{
design: "tinted",
intent: "danger",
state: ["complete", "incomplete"],
class: [
"text-on-error-container bg-error-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-error-container"
]
},
{
design: "tinted",
intent: "danger",
state: "active",
class: "text-on-error bg-error"
},
{
design: "tinted",
intent: "alert",
state: ["complete", "incomplete"],
class: [
"text-on-alert-container bg-alert-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-alert-container"
]
},
{
design: "tinted",
intent: "alert",
state: "active",
class: "text-on-alert bg-alert"
},
{
design: "tinted",
intent: "success",
state: ["complete", "incomplete"],
class: [
"text-on-success-container bg-success-container",
"group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered",
"group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"
]
},
{
design: "tinted",
intent: "success",
state: "active",
class: "text-on-success bg-success"
}
];
// src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
var stepIndicatorVariant = cva2(
[
"relative flex shrink-0 justify-center items-center",
"rounded-full",
"text-body-2 font-bold",
"group-disabled/btn:opacity-dim-3"
],
{
variants: {
size: {
sm: [
"w-sz-16 h-sz-16",
"group-data-[orientation=horizontal]/list:mt-[-16px]",
"group-data-[orientation=vertical]/list:ml-[-16px]"
],
md: [
"w-sz-24 h-sz-24",
"group-data-[orientation=horizontal]/list:mt-[-24px]",
"group-data-[orientation=vertical]/list:ml-[-24px]"
],
lg: [
"w-sz-32 h-sz-32",
"group-data-[orientation=horizontal]/list:mt-[-32px]",
"group-data-[orientation=vertical]/list:ml-[-32px]"
]
},
intent: {
basic: "",
support: "",
main: "",
neutral: "",
info: "",
accent: "",
danger: "",
alert: "",
success: ""
},
design: {
outline: "border-sm",
tinted: ""
},
state: {
complete: "",
incomplete: "",
active: ""
}
},
/**
* Known type issue with CVA compoundVariants and VS Code/Intellisense:
* https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163
* */
/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
/* @ts-ignore */
compoundVariants: [...outlineVariants, ...tintedVariants],
defaultVariants: {
size: "lg",
state: "incomplete",
intent: "basic",
design: "outline"
}
}
);
// src/progress-tracker/ProgressTrackerStepIndicator.tsx
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
var CompleteIndicator = () => /* @__PURE__ */ jsx2(Icon, { size: "sm", children: /* @__PURE__ */ jsx2(Check, {}) });
var ProgressTrackerStepIndicator = ({
complete,
incomplete,
className
}) => {
const { size, intent, design } = useProgressTrackerContext();
const { index, state } = useProgressTrackerStepContext();
return /* @__PURE__ */ jsx2(
"span",
{
className: stepIndicatorVariant({ size, intent, design, state, className }),
"aria-hidden": "true",
children: size !== "sm" && /* @__PURE__ */ jsxs(Fragment, { children: [
state === "complete" && (complete === void 0 ? /* @__PURE__ */ jsx2(CompleteIndicator, {}) : complete),
state !== "complete" && (incomplete === void 0 ? `${index + 1}` : incomplete)
] })
}
);
};
ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
// src/progress-tracker/ProgressTrackerStep.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var ProgressTrackerStep = ({
disabled = false,
children,
"aria-label": ariaLabel,
className,
ref,
...rest
}) => {
const {
stepIndex: currentStepIndex,
steps,
onStepClick,
setSteps,
size,
intent,
readOnly
} = useProgressTrackerContext();
const stepId = `${ID_PREFIX}-step-${useId()}`;
const stepIndex = [...steps.keys()].indexOf(stepId);
const disabledAfter = (() => {
const nextStepId = [...steps.keys()][stepIndex + 1];
return !!(nextStepId && steps.get(nextStepId)?.includes("disabled"));
})();
const progressState = (() => {
if (stepIndex === currentStepIndex) return "active";
else if (stepIndex < currentStepIndex) return "complete";
else return "incomplete";
})();
useEffect(() => {
setSteps((steps2) => {
const newSteps = new Map(steps2);
return newSteps.set(
stepId,
[progressState, disabled ? "disabled" : ""].filter((v) => !!v)
);
});
return () => {
setSteps((steps2) => {
steps2.delete(stepId);
return steps2;
});
};
}, []);
return /* @__PURE__ */ jsx3(
"li",
{
"data-spark-component": "progress-tracker-step",
id: stepId,
ref,
"data-state": progressState,
...progressState === "active" && {
"aria-current": "step"
},
className: stepItemVariant({
size,
intent,
disabled,
disabledAfter
}),
...rest,
children: /* @__PURE__ */ jsx3(
"button",
{
type: "button",
"aria-label": ariaLabel,
"data-interactive": !disabled && !readOnly,
...!disabled && !readOnly && {
onClick: () => onStepClick?.(stepIndex)
},
disabled,
className: stepButtonVariant({
size,
readOnly,
className
}),
children: /* @__PURE__ */ jsx3(
ProgressTrackerStepContext.Provider,
{
value: {
index: stepIndex,
state: progressState
},
children: children || /* @__PURE__ */ jsx3(ProgressTrackerStepIndicator, {})
}
)
}
)
}
);
};
ProgressTrackerStep.displayName = "ProgressTracker.Step";
// src/progress-tracker/ProgressTrackerStepLabel.styles.ts
import { cva as cva3 } from "class-variance-authority";
var stepLabel = cva3([
"flex text-body-2 font-bold",
"text-on-surface group-disabled/btn:text-on-surface/dim-1",
"group-data-[orientation=horizontal]/list:mt-md",
"group-data-[orientation=vertical]/list:ml-md",
"group-data-[orientation=vertical]/list:my-auto"
]);
// src/progress-tracker/ProgressTrackerStepLabel.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
var ProgressTrackerStepLabel = ({
className,
children
}) => /* @__PURE__ */ jsx4("span", { className: stepLabel({ className }), children });
ProgressTrackerStepLabel.displayName = "ProgressTracker.StepLabel";
// src/progress-tracker/index.ts
var ProgressTracker2 = Object.assign(ProgressTracker, {
Step: ProgressTrackerStep,
StepLabel: ProgressTrackerStepLabel,
StepIndicator: ProgressTrackerStepIndicator
});
ProgressTracker2.displayName = "ProgressTracker";
ProgressTrackerStep.displayName = "ProgressTracker.Step";
ProgressTrackerStepLabel.displayName = "ProgressTracker.StepLabel";
ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
export {
ProgressTracker2 as ProgressTracker
};
//# sourceMappingURL=index.mjs.map