@veracity/vui/dist/stepperVertical/stepVertical.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 styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { StepIndicator } from "../stepIndicator/stepIndicator.js";
import { useStepperVerticalContext } from "./context.js";
import { stepClassName } from "./consts.js";
import { StepVerticalTail } from "./stepVerticalTail.js";
import { StepVerticalTitle } from "./stepVerticalTitle.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/stepperVertical/stepVertical.tsx
const StepVerticalBase = styled.divBox`
  display: flex;
  position: relative;
  width: 100%;
`;
/**
* Implements a vertical step component
*/
const StepVertical = vui(({ icon, number, size: propSize = "md", description, title, className, variant, children }, ref) => {
	const size = useStepperVerticalContext()?.size || propSize;
	return /* @__PURE__ */ jsxs(StepVerticalBase, {
		className: cs(stepClassName, className),
		ref,
		children: [
			/* @__PURE__ */ jsx(StepVerticalTail, {
				size,
				variant
			}),
			/* @__PURE__ */ jsx(Box, {
				flex: `0 0 ${size === "md" ? 40 : 30}px`,
				children: /* @__PURE__ */ jsx(StepIndicator, {
					icon,
					number,
					size,
					variant
				})
			}),
			/* @__PURE__ */ jsxs(Box, {
				flex: "1",
				flexDirection: "column",
				children: [
					!!title && /* @__PURE__ */ jsx(StepVerticalTitle, {
						size,
						variant,
						children: title
					}),
					!!description && /* @__PURE__ */ jsx(Box, {
						color: "sandstone.45",
						fontSize: `${size === "md" ? 14 : 12}px`,
						children: description
					}),
					/* @__PURE__ */ jsx(Box, { children })
				]
			})
		]
	});
});
StepVertical.displayName = "StepVertical";

//#endregion
export { StepVertical, StepVertical as default, StepVerticalBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=stepVertical.js.map