UNPKG

@veracity/vui

Version:

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

73 lines (71 loc) 1.97 kB
import { cs } from "../utils/styles.js"; import { useStyleConfig } from "../core/theme.js"; import vui from "../core/vui.js"; import { Box } from "../box/box.js"; import { Icon } from "../icon/icon.js"; import { T } from "../t/t.js"; import { Button } from "../button/button.js"; import { jsx, jsxs } from "react/jsx-runtime"; //#region src/stepIndicator/stepIndicator.tsx const Content = ({ number, variant, size }) => { if (typeof number === "undefined") return null; if (variant === "completed") return /* @__PURE__ */ jsx(Icon, { name: "uiCheck", size }); if (variant === "error") return /* @__PURE__ */ jsx(Icon, { name: "uiTimes", size }); return /* @__PURE__ */ jsx(T, { fontSize: size === "md" ? 16 : 14, fontWeight: 600, children: number }); }; /** * Implements stepper indicator ** */ const StepIndicator = vui((props, ref) => { const { icon, number, className, size = "md", variant = "active", ...rest } = props; const styles = useStyleConfig("StepIndicator", props); return icon ? /* @__PURE__ */ jsx(Button, { className: cs("vui-stepIndicator", "vui-stepIndicatorIcon", className), icon, ref, ...styles.icon, ...rest, isRound: true, minW: "auto", pointerEvents: "none", size }) : /* @__PURE__ */ jsxs(Button, { className: cs("vui-stepIndicator", "vui-stepIndicatorNumber", className), ref, ...styles.button, ...rest, isRound: true, minW: "auto", pointerEvents: "none", position: "relative", size, px: size === "md" ? "11px" : "7px", children: [/* @__PURE__ */ jsx(Box, { mx: .5, position: "relative" }), /* @__PURE__ */ jsx(Box, { mx: .5, position: "absolute", children: /* @__PURE__ */ jsx(Content, { number, size: String(size), variant: String(variant) }) })] }); }); StepIndicator.displayName = "StepIndicator"; //#endregion export { StepIndicator, StepIndicator as default }; globalThis.__vuiVersion__ = "5.3.1" //# sourceMappingURL=stepIndicator.js.map