@veracity/vui/dist/stepper/stepperIndicator.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 { ICON_SIZES } from "./stepperIndicatorTheme.js";
import { th, useStyleConfig, useTheme } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import Icon from "../icon/icon.js";
import T from "../t/t.js";
import { CSS_VARS } from "./stepperConsts.js";
import { jsx } from "react/jsx-runtime";

//#region src/stepper/stepperIndicator.tsx
const IndicatorBox = styled.spanBox`
  align-items: center;
  background-color: var(${CSS_VARS.indicatorBg}, ${(p) => p.$bg});
  border-color: var(${CSS_VARS.indicatorBorder}, ${(p) => p.$border});
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  color: var(${CSS_VARS.indicatorColor}, ${(p) => p.$color});
  display: inline-flex;
  justify-content: center;
`;
const NumberIndicatorBox = styled(IndicatorBox)`
  outline: var(${CSS_VARS.indicatorOutline}, 6px solid white);
`;
const Content = ({ number, variant, size }) => {
	if (typeof number === "undefined") return null;
	const statusIconSize = ICON_SIZES.status[size ?? "md"];
	if (variant === "completed") return /* @__PURE__ */ jsx(Icon, {
		name: "uiCheck",
		size: statusIconSize
	});
	if (variant === "error") return /* @__PURE__ */ jsx(Icon, {
		name: "uiTimes",
		size: statusIconSize
	});
	return /* @__PURE__ */ jsx(T, {
		fontSize: size === "md" ? 16 : 14,
		fontWeight: 600,
		children: number
	});
};
/**
* Renders a step indicator circle with a number, icon, or status variant.
* Sub-component of the Stepper namespace.
*/
const StepperIndicator = vui((props, ref) => {
	const { icon, number, className, size = "md", variant = "active", ...rest } = props;
	const { circle: circleStyles, icon: iconStyles, height, width } = useStyleConfig("StepperIndicator", props);
	const isIconMode = Boolean(icon);
	const slot = isIconMode ? iconStyles : circleStyles;
	const theme = useTheme();
	const rc = (token) => th.color(token)({ theme }) ?? token;
	const indicatorColors = {
		$bg: rc(slot?.bg ?? "transparent"),
		$border: rc(slot?.borderColor ?? "transparent"),
		$color: rc(slot?.color ?? "inherit")
	};
	const indicatorClassName = cs("vui-stepperIndicator", isIconMode ? "vui-stepperIndicatorIcon" : "vui-stepperIndicatorNumber", className);
	const Root = isIconMode ? IndicatorBox : NumberIndicatorBox;
	const content = isIconMode ? /* @__PURE__ */ jsx(Icon, {
		name: icon,
		size: ICON_SIZES.iconMode[size]
	}) : /* @__PURE__ */ jsx(Content, {
		number,
		size,
		variant
	});
	return /* @__PURE__ */ jsx(Root, {
		"aria-hidden": "true",
		className: indicatorClassName,
		ref,
		...indicatorColors,
		...rest,
		h: height,
		w: width,
		children: content
	});
});
StepperIndicator.displayName = "StepperIndicator";

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