@spark-ui/components
Version:
Spark (Leboncoin design system) components.
834 lines (812 loc) • 27.9 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/progress-tracker/index.ts
var progress_tracker_exports = {};
__export(progress_tracker_exports, {
ProgressTracker: () => ProgressTracker2
});
module.exports = __toCommonJS(progress_tracker_exports);
// src/progress-tracker/ProgressTracker.tsx
var import_class_variance_authority2 = require("class-variance-authority");
var import_react2 = require("react");
// src/progress-tracker/ProgressTracker.styles.ts
var import_class_variance_authority = require("class-variance-authority");
var progressList = (0, import_class_variance_authority.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
var import_react = require("react");
var ProgressTrackerContext = (0, import_react.createContext)(
{}
);
var ProgressTrackerStepContext = (0, import_react.createContext)(
{}
);
var useProgressTrackerContext = () => (0, import_react.useContext)(ProgressTrackerContext);
var useProgressTrackerStepContext = () => (0, import_react.useContext)(ProgressTrackerStepContext);
var ID_PREFIX = ":progress-tracker";
// src/progress-tracker/ProgressTracker.tsx
var import_jsx_runtime = require("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] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
const Component = readOnly ? "div" : "nav";
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ProgressTrackerContext.Provider,
{
value: { stepIndex, onStepClick, steps, setSteps, size, intent, design, readOnly },
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Component,
{
ref,
"data-spark-component": "progress-tracker",
className: (0, import_class_variance_authority2.cx)("inline-flex", className),
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"ol",
{
"data-orientation": orientation,
className: progressList,
style: { counterReset: "step" },
children
}
)
}
)
}
);
};
ProgressTracker.displayName = "ProgressTracker";
// src/progress-tracker/ProgressTrackerStep.tsx
var import_react5 = require("react");
// src/progress-tracker/ProgressTrackerStep.styles.ts
var import_class_variance_authority3 = require("class-variance-authority");
var stepItemVariant = (0, import_class_variance_authority3.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 = (0, import_class_variance_authority3.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
var import_Check = require("@spark-ui/icons/Check");
// src/icon/Icon.tsx
var import_react4 = require("react");
// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react3 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var Slottable = import_radix_ui.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
};
// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
const Component = asChild ? Slot : "span";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Component,
{
...props,
ref,
style: {
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
position: "absolute",
border: 0,
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
wordWrap: "normal",
...props.style
}
}
);
};
VisuallyHidden.displayName = "VisuallyHidden";
// src/icon/Icon.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority4 = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority4.cva)(["fill-current shrink-0"], {
variants: {
/**
* Color scheme of the icon.
*/
intent: (0, import_internal_utils.makeVariants)({
current: ["text-current"],
main: ["text-main"],
support: ["text-support"],
accent: ["text-accent"],
basic: ["text-basic"],
success: ["text-success"],
alert: ["text-alert"],
error: ["text-error"],
info: ["text-info"],
neutral: ["text-neutral"]
}),
/**
* Sets the size of the icon.
*/
size: (0, import_internal_utils.makeVariants)({
current: ["u-current-font-size"],
sm: ["w-sz-16", "h-sz-16"],
md: ["w-sz-24", "h-sz-24"],
lg: ["w-sz-32", "h-sz-32"],
xl: ["w-sz-40", "h-sz-40"]
})
}
});
// src/icon/Icon.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var Icon = ({
label,
className,
size = "current",
intent = "current",
children,
...others
}) => {
const child = import_react4.Children.only(children);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
(0, import_react4.cloneElement)(child, {
className: iconStyles({ className, size, intent }),
"data-spark-component": "icon",
"aria-hidden": "true",
focusable: "false",
...others
}),
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VisuallyHidden, { children: label })
] });
};
Icon.displayName = "Icon";
// src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
var import_class_variance_authority5 = require("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 = (0, import_class_variance_authority5.cva)(
[
"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
var import_jsx_runtime5 = require("react/jsx-runtime");
var CompleteIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check.Check, {}) });
var ProgressTrackerStepIndicator = ({
complete,
incomplete,
className
}) => {
const { size, intent, design } = useProgressTrackerContext();
const { index, state } = useProgressTrackerStepContext();
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"span",
{
className: stepIndicatorVariant({ size, intent, design, state, className }),
"aria-hidden": "true",
children: size !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
state === "complete" && (complete === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CompleteIndicator, {}) : complete),
state !== "complete" && (incomplete === void 0 ? `${index + 1}` : incomplete)
] })
}
);
};
ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
// src/progress-tracker/ProgressTrackerStep.tsx
var import_jsx_runtime6 = require("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-${(0, import_react5.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";
})();
(0, import_react5.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__ */ (0, import_jsx_runtime6.jsx)(
"li",
{
id: stepId,
ref,
"data-state": progressState,
...progressState === "active" && {
"aria-current": "step"
},
className: stepItemVariant({
size,
intent,
disabled,
disabledAfter
}),
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"button",
{
type: "button",
"aria-label": ariaLabel,
"data-interactive": !disabled && !readOnly,
...!disabled && !readOnly && {
onClick: () => onStepClick?.(stepIndex)
},
disabled,
className: stepButtonVariant({
size,
readOnly,
className
}),
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
ProgressTrackerStepContext.Provider,
{
value: {
index: stepIndex,
state: progressState
},
children: children || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProgressTrackerStepIndicator, {})
}
)
}
)
}
);
};
ProgressTrackerStep.displayName = "ProgressTracker.Step";
// src/progress-tracker/ProgressTrackerStepLabel.styles.ts
var import_class_variance_authority6 = require("class-variance-authority");
var stepLabel = (0, import_class_variance_authority6.cva)([
"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
var import_jsx_runtime7 = require("react/jsx-runtime");
var ProgressTrackerStepLabel = ({
className,
children
}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ProgressTracker
});
//# sourceMappingURL=index.js.map