@veracity/vui/dist/stepper/stepperStep.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import { th, useStyleConfig, useTheme } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import Box from "../box/box.js";
import { CLASS, CSS_VARS } from "./stepperConsts.js";
import { useStepperContext } from "./stepperContext.js";
import StepperIndicator from "./stepperIndicator.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/stepper/stepperStep.tsx
const StepperBaseHorizontal = styled.divBox`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  ${CSS_VARS.tailColor}: ${(p) => p.$tailColor};
  ${CSS_VARS.iconTailColor}: ${(p) => p.$iconTailColor};
`;
const StepperBaseVertical = styled.divBox`
  display: flex;
  gap: var(${CSS_VARS.vertGap}, 8px);
  position: relative;
  width: 100%;
  ${CSS_VARS.tailColor}: ${(p) => p.$tailColor};
  ${CSS_VARS.vertTailMaxWidth}: ${(p) => p.$vertTailWidth};
`;
const StepperTitleBox = styled.divBox`
  display: block;
  white-space: nowrap;
`;
const StepperHorizTail = ({ isIconMode = false }) => {
	return /* @__PURE__ */ jsx(Box, {
		borderBottom: `1px solid var(${isIconMode ? CSS_VARS.iconTailColor : CSS_VARS.tailColor})`,
		className: CLASS.tail,
		h: `var(${CSS_VARS.horizTailHeight}, 16px)`,
		left: "50%",
		position: "absolute",
		w: "100%"
	});
};
const StepperVertTail = () => /* @__PURE__ */ jsx(Box, {
	borderRight: `1px solid var(${CSS_VARS.tailColor})`,
	className: CLASS.tail,
	maxW: `var(${CSS_VARS.vertTailMaxWidth}, 16px)`,
	minH: "100%",
	position: "absolute",
	w: "100%"
});
const StepperStepVertical = ({ icon, number, size, description, title, className, variant, children, isIconMode, ref, styles, tailColor: resolvedTailColor }) => {
	const { title: titleStyles, desc: descStyles, indicatorWidth, titleColor, titleFontWeight, vertTailWidth } = styles;
	const indicatorFlex = `0 0 ${indicatorWidth ?? "32px"}`;
	return /* @__PURE__ */ jsxs(StepperBaseVertical, {
		$tailColor: resolvedTailColor,
		$vertTailWidth: vertTailWidth ?? "16px",
		className: cs(CLASS.step, variant && `${CLASS.step}--${variant}`, className),
		ref,
		children: [
			/* @__PURE__ */ jsx(StepperVertTail, {}),
			/* @__PURE__ */ jsx(Box, {
				flex: indicatorFlex,
				position: "relative",
				zIndex: 1,
				children: /* @__PURE__ */ jsx(StepperIndicator, {
					icon,
					number,
					size,
					variant
				})
			}),
			/* @__PURE__ */ jsxs(Box, {
				flex: "1",
				flexDirection: "column",
				children: [
					!!title && /* @__PURE__ */ jsx(StepperTitleBox, {
						className: CLASS.title,
						...titleStyles,
						color: titleColor,
						fontWeight: titleFontWeight,
						children: title
					}),
					!!description && /* @__PURE__ */ jsx(Box, {
						...descStyles,
						display: "block",
						children: description
					}),
					children
				]
			})
		]
	});
};
const StepperStepHorizontal = ({ icon, number, size, description, title, className, variant, children, isIconMode, ref, styles, tailColor: resolvedTailColor, iconTailColor: resolvedIconTailColor }) => {
	const { title: titleStyles, desc: descStyles, titleColor, titleFontWeight } = styles;
	return /* @__PURE__ */ jsxs(StepperBaseHorizontal, {
		$tailColor: resolvedTailColor,
		$iconTailColor: resolvedIconTailColor,
		className: cs(CLASS.step, variant && `${CLASS.step}--${variant}`, className),
		ref,
		children: [
			/* @__PURE__ */ jsx(StepperHorizTail, { isIconMode }),
			/* @__PURE__ */ jsx(Box, {
				display: "block",
				position: "relative",
				textAlign: "center",
				zIndex: 1,
				children: /* @__PURE__ */ jsx(StepperIndicator, {
					icon,
					number,
					size,
					variant
				})
			}),
			/* @__PURE__ */ jsxs(Box, {
				display: "block",
				textAlign: "center",
				children: [
					!!title && /* @__PURE__ */ jsx(StepperTitleBox, {
						className: CLASS.title,
						...titleStyles,
						color: titleColor,
						fontWeight: titleFontWeight,
						textAlign: "center",
						children: title
					}),
					!!description && /* @__PURE__ */ jsx(Box, {
						display: "block",
						textAlign: "center",
						...descStyles,
						children: description
					}),
					children
				]
			})
		]
	});
};
const StepperStep = vui(({ icon, number, size: propSize = "md", description, title, className, variant, children }, ref) => {
	const context = useStepperContext();
	const size = context?.size || propSize;
	const orientation = context?.orientation || "horizontal";
	const isIconMode = Boolean(icon);
	const styles = useStyleConfig("Stepper", {
		size,
		variant
	});
	const theme = useTheme();
	const rc = (token) => th.color(token)({ theme });
	const stepProps = {
		icon,
		number,
		size,
		description,
		title,
		className,
		variant,
		children,
		isIconMode,
		ref,
		styles,
		tailColor: rc(isIconMode ? styles.iconTailColor : styles.tailColor),
		iconTailColor: rc(styles.iconTailColor)
	};
	return orientation === "vertical" ? /* @__PURE__ */ jsx(StepperStepVertical, { ...stepProps }) : /* @__PURE__ */ jsx(StepperStepHorizontal, { ...stepProps });
});
StepperStep.displayName = "StepperStep";

//#endregion
export { StepperStep as default };
globalThis.__vuiVersion__ = "5.3.0-alpha.2"
//# sourceMappingURL=stepperStep.js.map