@veracity/vui/dist/stepperHorizontal/stepHorizontal.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 { useStepperHorizontalContext } from "./context.js";
import { stepClassName } from "./consts.js";
import { StepHorizontalTail } from "./stepHorizontalTail.js";
import { StepHorizontalTitle } from "./stepHorizontalTitle.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/stepperHorizontal/stepHorizontal.tsx
const StepHorizontalBase = styled.divBox`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
`;
/**
* Implements a Horizontal step component
*/
const StepHorizontal = vui(({ icon, number, size: propSize = "md", description, title, className, variant, children }, ref) => {
	const size = useStepperHorizontalContext()?.size || propSize;
	return /* @__PURE__ */ jsxs(StepHorizontalBase, {
		className: cs(stepClassName, stepClassName + variant, className),
		ref,
		children: [
			/* @__PURE__ */ jsx(StepHorizontalTail, {
				size,
				variant
			}),
			/* @__PURE__ */ jsx(Box, {
				display: "block",
				textAlign: "center",
				children: /* @__PURE__ */ jsx(StepIndicator, {
					icon,
					number,
					size,
					variant
				})
			}),
			/* @__PURE__ */ jsxs(Box, {
				display: "block",
				textAlign: "center",
				children: [
					!!title && /* @__PURE__ */ jsx(StepHorizontalTitle, {
						size,
						variant,
						children: title
					}),
					!!description && /* @__PURE__ */ jsx(Box, {
						color: "sandstone.45",
						display: "block",
						fontSize: `${size === "md" ? 14 : 12}px`,
						textAlign: "center",
						children: description
					}),
					/* @__PURE__ */ jsx(Box, {
						display: "block",
						children
					})
				]
			})
		]
	});
});
StepHorizontal.displayName = "StepHorizontal";

//#endregion
export { StepHorizontal, StepHorizontal as default, StepHorizontalBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=stepHorizontal.js.map