@veracity/vui 5.3.0-alpha.manual.2608050712 → 5.3.0

package/dist/stepper/stepperIndicator.js

@@ -1,85 +0,0 @@
-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 ?? "transparent"});
-  border-color: var(${CSS_VARS.indicatorBorder}, ${(p) => p.$border ?? "transparent"});
-  border-radius: 50%;
-  border-style: solid;
-  border-width: 1px;
-  color: var(${CSS_VARS.indicatorColor}, ${(p) => p.$color ?? "inherit"});
-  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, StepperIndicator as default };
-globalThis.__vuiVersion__ = "5.3.0-alpha.2"
-//# sourceMappingURL=stepperIndicator.js.map

package/dist/stepper/stepperIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepperIndicator.js","names":[],"sources":["../../src/stepper/stepperIndicator.tsx"],"sourcesContent":["import type { StepperIndicatorProps } from './stepperIndicatorTypes'\nimport type { StepperIndicatorVariant } from './stepperIndicatorTypes'\n\nimport { styled, th, useStyleConfig, useTheme, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { CSS_VARS } from './stepperConsts'\nimport { ICON_SIZES } from './stepperIndicatorTheme'\n\nconst IndicatorBox = styled.spanBox<{ $bg?: string; $border?: string; $color?: string }>`\n  align-items: center;\n  background-color: var(${CSS_VARS.indicatorBg}, ${(p: { $bg?: string }) => p.$bg ?? 'transparent'});\n  border-color: var(${CSS_VARS.indicatorBorder}, ${(p: { $border?: string }) => p.$border ?? 'transparent'});\n  border-radius: 50%;\n  border-style: solid;\n  border-width: 1px;\n  color: var(${CSS_VARS.indicatorColor}, ${(p: { $color?: string }) => p.$color ?? 'inherit'});\n  display: inline-flex;\n  justify-content: center;\n`\n\nconst NumberIndicatorBox = styled(IndicatorBox)`\n  outline: var(${CSS_VARS.indicatorOutline}, 6px solid white);\n`\n\ntype ContentProps = { number?: number; variant?: StepperIndicatorVariant; size?: 'md' | 'sm' }\n\nconst Content = ({ number, variant, size }: ContentProps) => {\n  if (typeof number === 'undefined') return null\n  const statusIconSize = ICON_SIZES.status[size ?? 'md']\n  if (variant === 'completed') return <Icon name=\"uiCheck\" size={statusIconSize} />\n  if (variant === 'error') return <Icon name=\"uiTimes\" size={statusIconSize} />\n\n  return (\n    <T fontSize={size === 'md' ? 16 : 14} fontWeight={600}>\n      {number}\n    </T>\n  )\n}\n\n/**\n * Renders a step indicator circle with a number, icon, or status variant.\n * Sub-component of the Stepper namespace.\n */\nexport const StepperIndicator = vui<'div', StepperIndicatorProps>((props, ref) => {\n  const { icon, number, className, size = 'md', variant = 'active', ...rest } = props\n\n  const styles = useStyleConfig('StepperIndicator', props)\n  const { circle: circleStyles, icon: iconStyles, height, width } = styles\n  const isIconMode = Boolean(icon)\n  const slot = isIconMode ? iconStyles : circleStyles\n  const theme = useTheme()\n  const rc = (token: string) => th.color(token)({ theme }) ?? token\n  const indicatorColors = {\n    $bg: rc(slot?.bg ?? 'transparent'),\n    $border: rc(slot?.borderColor ?? 'transparent'),\n    $color: rc(slot?.color ?? 'inherit'),\n  }\n\n  const indicatorClassName = cs(\n    'vui-stepperIndicator',\n    isIconMode ? 'vui-stepperIndicatorIcon' : 'vui-stepperIndicatorNumber',\n    className,\n  )\n\n  const Root = isIconMode ? IndicatorBox : NumberIndicatorBox\n  const content = isIconMode ? (\n    <Icon name={icon!} size={ICON_SIZES.iconMode[size]} />\n  ) : (\n    <Content number={number} size={size} variant={variant} />\n  )\n\n  return (\n    <Root\n      aria-hidden=\"true\"\n      className={indicatorClassName}\n      ref={ref}\n      {...indicatorColors}\n      {...rest}\n      h={height as string}\n      w={width as string}\n    >\n      {content}\n    </Root>\n  )\n})\n\nStepperIndicator.displayName = 'StepperIndicator'\n\nexport default StepperIndicator\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,eAAe,OAAO,OAA4D;;0BAE9D,SAAS,YAAY,KAAK,MAAwB,EAAE,OAAO,cAAc;sBAC7E,SAAS,gBAAgB,KAAK,MAA4B,EAAE,WAAW,cAAc;;;;eAI5F,SAAS,eAAe,KAAK,MAA2B,EAAE,UAAU,UAAU;;;;AAK7F,MAAM,qBAAqB,OAAO,YAAY,CAAC;iBAC9B,SAAS,iBAAiB;;AAK3C,MAAM,WAAW,EAAE,QAAQ,SAAS,WAAyB;CAC3D,IAAI,OAAO,WAAW,aAAa,OAAO;CAC1C,MAAM,iBAAiB,WAAW,OAAO,QAAQ;CACjD,IAAI,YAAY,aAAa,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAU,MAAM;CAAiB;CAChF,IAAI,YAAY,SAAS,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAU,MAAM;CAAiB;CAE5E,OACE,oBAAC,GAAD;EAAG,UAAU,SAAS,OAAO,KAAK;EAAI,YAAY;YAC/C;CACA;AAEP;;;;;AAMA,MAAa,mBAAmB,KAAmC,OAAO,QAAQ;CAChF,MAAM,EAAE,MAAM,QAAQ,WAAW,OAAO,MAAM,UAAU,UAAU,GAAG,SAAS;CAG9E,MAAM,EAAE,QAAQ,cAAc,MAAM,YAAY,QAAQ,UADzC,eAAe,oBAAoB,KACqB;CACvE,MAAM,aAAa,QAAQ,IAAI;CAC/B,MAAM,OAAO,aAAa,aAAa;CACvC,MAAM,QAAQ,SAAS;CACvB,MAAM,MAAM,UAAkB,GAAG,MAAM,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK;CAC5D,MAAM,kBAAkB;EACtB,KAAK,GAAG,MAAM,MAAM,aAAa;EACjC,SAAS,GAAG,MAAM,eAAe,aAAa;EAC9C,QAAQ,GAAG,MAAM,SAAS,SAAS;CACrC;CAEA,MAAM,qBAAqB,GACzB,wBACA,aAAa,6BAA6B,8BAC1C,SACF;CAEA,MAAM,OAAO,aAAa,eAAe;CACzC,MAAM,UAAU,aACd,oBAAC,MAAD;EAAM,MAAM;EAAO,MAAM,WAAW,SAAS;CAAQ,KAErD,oBAAC,SAAD;EAAiB;EAAc;EAAe;CAAU;CAG1D,OACE,oBAAC,MAAD;EACE,eAAY;EACZ,WAAW;EACN;EACL,GAAI;EACJ,GAAI;EACJ,GAAG;EACH,GAAG;YAEF;CACG;AAEV,CAAC;AAED,iBAAiB,cAAc"}

package/dist/stepper/stepperIndicatorTheme.js

@@ -1,102 +0,0 @@
-//#region src/stepper/stepperIndicatorTheme.ts
-const defaultProps = {
-	size: "md",
-	variant: "active"
-};
-const baseStyle = {
-	circle: { borderColor: "sandstone.90" },
-	icon: { borderColor: "sandstone.45" }
-};
-const ICON_SIZES = {
-	status: {
-		md: "md",
-		sm: "sm"
-	},
-	iconMode: {
-		md: "xs",
-		sm: "xxs"
-	}
-};
-const sizes = {
-	sm: {
-		height: "24px",
-		width: "24px"
-	},
-	md: {
-		height: "32px",
-		width: "32px"
-	}
-};
-const variants = {
-	active: {
-		circle: {
-			bg: "seaBlue.main",
-			borderColor: "seaBlue.main",
-			color: "white"
-		},
-		icon: {
-			bg: "white",
-			borderColor: "seaBlue.main",
-			color: "seaBlue.main"
-		}
-	},
-	completed: {
-		circle: {
-			bg: "landGreen.41",
-			borderColor: "landGreen.41",
-			color: "white"
-		},
-		icon: {
-			bg: "white",
-			borderColor: "landGreen.41",
-			color: "landGreen.41"
-		}
-	},
-	optional: {
-		circle: {
-			bg: "white",
-			borderColor: "seaBlue.45",
-			color: "seaBlue.45"
-		},
-		icon: {
-			bg: "white",
-			borderColor: "seaBlue.45",
-			color: "seaBlue.45"
-		}
-	},
-	pending: {
-		circle: {
-			bg: "sandstone.90",
-			borderColor: "sandstone.90",
-			color: "sandstone.45"
-		},
-		icon: {
-			bg: "white",
-			borderColor: "sandstone.45",
-			color: "sandstone.45"
-		}
-	},
-	error: {
-		circle: {
-			bg: "energyRed.45",
-			borderColor: "energyRed.45",
-			color: "white"
-		},
-		icon: {
-			bg: "white",
-			borderColor: "energyRed.45",
-			color: "energyRed.45"
-		}
-	}
-};
-var stepperIndicatorTheme_default = {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
-};
-
-//#endregion
-export { ICON_SIZES, stepperIndicatorTheme_default as default, sizes, variants };
-globalThis.__vuiVersion__ = "5.3.0-alpha.2"
-//# sourceMappingURL=stepperIndicatorTheme.js.map

package/dist/stepper/stepperIndicatorTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepperIndicatorTheme.js","names":[],"sources":["../../src/stepper/stepperIndicatorTheme.ts"],"sourcesContent":["const defaultProps = {\n  size: 'md',\n  variant: 'active',\n}\n\nconst baseStyle = {\n  circle: {\n    borderColor: 'sandstone.90',\n  },\n  icon: {\n    borderColor: 'sandstone.45',\n  },\n}\n\nexport const ICON_SIZES = {\n  status: { md: 'md', sm: 'sm' },\n  iconMode: { md: 'xs', sm: 'xxs' },\n} as const\n\nexport const sizes = {\n  sm: { height: '24px', width: '24px' },\n  md: { height: '32px', width: '32px' },\n} as const\n\nexport const variants = {\n  active: {\n    circle: {\n      bg: 'seaBlue.main',\n      borderColor: 'seaBlue.main',\n      color: 'white',\n    },\n    icon: {\n      bg: 'white',\n      borderColor: 'seaBlue.main',\n      color: 'seaBlue.main',\n    },\n  },\n  completed: {\n    circle: {\n      bg: 'landGreen.41',\n      borderColor: 'landGreen.41',\n      color: 'white',\n    },\n    icon: {\n      bg: 'white',\n      borderColor: 'landGreen.41',\n      color: 'landGreen.41',\n    },\n  },\n  optional: {\n    circle: {\n      bg: 'white',\n      borderColor: 'seaBlue.45',\n      color: 'seaBlue.45',\n    },\n    icon: {\n      bg: 'white',\n      borderColor: 'seaBlue.45',\n      color: 'seaBlue.45',\n    },\n  },\n  pending: {\n    circle: {\n      bg: 'sandstone.90',\n      borderColor: 'sandstone.90',\n      color: 'sandstone.45',\n    },\n    icon: {\n      bg: 'white',\n      borderColor: 'sandstone.45',\n      color: 'sandstone.45',\n    },\n  },\n  error: {\n    circle: {\n      bg: 'energyRed.45',\n      borderColor: 'energyRed.45',\n      color: 'white',\n    },\n    icon: {\n      bg: 'white',\n      borderColor: 'energyRed.45',\n      color: 'energyRed.45',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;AACX;AAEA,MAAM,YAAY;CAChB,QAAQ,EACN,aAAa,eACf;CACA,MAAM,EACJ,aAAa,eACf;AACF;AAEA,MAAa,aAAa;CACxB,QAAQ;EAAE,IAAI;EAAM,IAAI;CAAK;CAC7B,UAAU;EAAE,IAAI;EAAM,IAAI;CAAM;AAClC;AAEA,MAAa,QAAQ;CACnB,IAAI;EAAE,QAAQ;EAAQ,OAAO;CAAO;CACpC,IAAI;EAAE,QAAQ;EAAQ,OAAO;CAAO;AACtC;AAEA,MAAa,WAAW;CACtB,QAAQ;EACN,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,OAAO;EACT;CACF;CACA,WAAW;EACT,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,OAAO;EACT;CACF;CACA,UAAU;EACR,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,OAAO;EACT;CACF;CACA,SAAS;EACP,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,OAAO;EACT;CACF;CACA,OAAO;EACL,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,OAAO;EACT;CACF;AACF;AAEA,oCAAe;CACb;CACA;CACA;CACA;AACF"}

package/dist/stepper/stepperIndicatorTypes.d.ts

@@ -1,20 +0,0 @@
-import { ThemingProps } from "../theme/types.js";
-import "../theme/index.js";
-import { SystemProps } from "../system/system.js";
-import "../system/index.js";
-import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
-//#region src/stepper/stepperIndicatorTypes.d.ts
-type StepperIndicatorSize = 'md' | 'sm';
-type StepperIndicatorVariant = 'active' | 'completed' | 'optional' | 'pending' | 'error';
-type StepperIndicatorProps = SystemProps & ThemingProps<'StepperIndicator'> & {
-  icon?: IconProp;
-  className?: string;
-  number?: number;
-  size?: StepperIndicatorSize;
-  variant?: StepperIndicatorVariant;
-};
-//#endregion
-export { StepperIndicatorProps, StepperIndicatorSize, StepperIndicatorVariant };
-
-//# sourceMappingURL=stepperIndicatorTypes.d.ts.map

package/dist/stepper/stepperIndicatorTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepperIndicatorTypes.d.ts","names":[],"sources":["../../src/stepper/stepperIndicatorTypes.ts"],"mappings":";;;;;;;KAIY;KAEA;KAEA,wBAAwB,cAClC;EACE,OAAO;EACP;EACA;EACA,OAAO;EACP,UAAU"}

package/dist/stepper/stepperStep.d.ts

@@ -1,9 +0,0 @@
-import { VuiComponent } from "../core/vui.js";
-import { StepperStepProps } from "./stepperTypes.js";
-import "../index.js";
-//#region src/stepper/stepperStep.d.ts
-declare const StepperStep: VuiComponent<"div", StepperStepProps>;
-//#endregion
-export { StepperStep, StepperStep as default };
-
-//# sourceMappingURL=stepperStep.d.ts.map

package/dist/stepper/stepperStep.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepperStep.d.ts","names":[],"sources":["../../src/stepper/stepperStep.tsx"],"mappings":";;;;cAgLa,aAAW,oBAAA"}

package/dist/stepper/stepperStep.js

@@ -1,171 +0,0 @@
-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, StepperStep as default };
-globalThis.__vuiVersion__ = "5.3.0-alpha.2"
-//# sourceMappingURL=stepperStep.js.map

package/dist/stepper/stepperStep.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepperStep.js","names":[],"sources":["../../src/stepper/stepperStep.tsx"],"sourcesContent":["import type { StepperIndicatorVariant } from './stepperIndicatorTypes'\nimport type { StepperOrientation, StepperSize, StepperStepProps } from './stepperTypes'\n\nimport { Box } from '../box'\nimport { styled, th, useStyleConfig, useTheme, vui } from '../core'\nimport { cs } from '../utils'\nimport { CLASS, CSS_VARS } from './stepperConsts'\nimport { useStepperContext } from './stepperContext'\nimport { StepperIndicator } from './stepperIndicator'\n\n// ─── Base elements ────────────────────────────────────────────────────────────\n\nconst StepperBaseHorizontal = styled.divBox<{ $tailColor: string; $iconTailColor: string }>`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  ${CSS_VARS.tailColor}: ${(p: { $tailColor: string }) => p.$tailColor};\n  ${CSS_VARS.iconTailColor}: ${(p: { $iconTailColor: string }) => p.$iconTailColor};\n`\n\nconst StepperBaseVertical = styled.divBox<{ $tailColor: string; $vertTailWidth: string }>`\n  display: flex;\n  gap: var(${CSS_VARS.vertGap}, 8px);\n  position: relative;\n  width: 100%;\n  ${CSS_VARS.tailColor}: ${(p: { $tailColor: string }) => p.$tailColor};\n  ${CSS_VARS.vertTailMaxWidth}: ${(p: { $vertTailWidth: string }) => p.$vertTailWidth};\n`\n\nconst StepperTitleBox = styled.divBox`\n  display: block;\n  white-space: nowrap;\n`\n\n// ─── Tails ────────────────────────────────────────────────────────────────────\n\nconst StepperHorizTail = ({ isIconMode = false }: { isIconMode?: boolean }) => {\n  const border = `1px solid var(${isIconMode ? CSS_VARS.iconTailColor : CSS_VARS.tailColor})`\n  return (\n    <Box\n      borderBottom={border}\n      className={CLASS.tail}\n      h={`var(${CSS_VARS.horizTailHeight}, 16px)`}\n      left=\"50%\"\n      position=\"absolute\"\n      w=\"100%\"\n    />\n  )\n}\n\nconst StepperVertTail = () => (\n  <Box\n    borderRight={`1px solid var(${CSS_VARS.tailColor})`}\n    className={CLASS.tail}\n    maxW={`var(${CSS_VARS.vertTailMaxWidth}, 16px)`}\n    minH=\"100%\"\n    position=\"absolute\"\n    w=\"100%\"\n  />\n)\n\n// ─── StepperStep ──────────────────────────────────────────────────────────────\n\ntype StepProps = {\n  icon?: StepperStepProps['icon']\n  number?: number\n  size: StepperSize\n  description?: React.ReactNode\n  title?: React.ReactNode\n  className?: string\n  variant?: StepperIndicatorVariant\n  children?: React.ReactNode\n  isIconMode: boolean\n  ref?: React.Ref<HTMLDivElement>\n  styles: ReturnType<typeof useStyleConfig>\n  tailColor: string\n  iconTailColor: string\n}\n\nconst StepperStepVertical = ({\n  icon,\n  number,\n  size,\n  description,\n  title,\n  className,\n  variant,\n  children,\n  isIconMode,\n  ref,\n  styles,\n  tailColor: resolvedTailColor,\n}: StepProps) => {\n  const { title: titleStyles, desc: descStyles, indicatorWidth, titleColor, titleFontWeight, vertTailWidth } = styles\n  const indicatorFlex = `0 0 ${indicatorWidth ?? '32px'}`\n\n  return (\n    <StepperBaseVertical\n      $tailColor={resolvedTailColor}\n      $vertTailWidth={vertTailWidth ?? '16px'}\n      className={cs(CLASS.step, variant && `${CLASS.step}--${variant}`, className)}\n      ref={ref}\n    >\n      <StepperVertTail />\n      <Box flex={indicatorFlex} position=\"relative\" zIndex={1}>\n        <StepperIndicator icon={icon} number={number} size={size} variant={variant} />\n      </Box>\n      <Box flex=\"1\" flexDirection=\"column\">\n        {!!title && (\n          <StepperTitleBox className={CLASS.title} {...titleStyles} color={titleColor} fontWeight={titleFontWeight}>\n            {title}\n          </StepperTitleBox>\n        )}\n        {!!description && (\n          <Box {...descStyles} display={'block'}>\n            {description}\n          </Box>\n        )}\n        {children}\n      </Box>\n    </StepperBaseVertical>\n  )\n}\n\nconst StepperStepHorizontal = ({\n  icon,\n  number,\n  size,\n  description,\n  title,\n  className,\n  variant,\n  children,\n  isIconMode,\n  ref,\n  styles,\n  tailColor: resolvedTailColor,\n  iconTailColor: resolvedIconTailColor,\n}: StepProps) => {\n  const { title: titleStyles, desc: descStyles, titleColor, titleFontWeight } = styles\n\n  return (\n    <StepperBaseHorizontal\n      $tailColor={resolvedTailColor}\n      $iconTailColor={resolvedIconTailColor}\n      className={cs(CLASS.step, variant && `${CLASS.step}--${variant}`, className)}\n      ref={ref}\n    >\n      <StepperHorizTail isIconMode={isIconMode} />\n      <Box display=\"block\" position=\"relative\" textAlign=\"center\" zIndex={1}>\n        <StepperIndicator icon={icon} number={number} size={size} variant={variant} />\n      </Box>\n      <Box display=\"block\" textAlign=\"center\">\n        {!!title && (\n          <StepperTitleBox\n            className={CLASS.title}\n            {...titleStyles}\n            color={titleColor}\n            fontWeight={titleFontWeight}\n            textAlign=\"center\"\n          >\n            {title}\n          </StepperTitleBox>\n        )}\n        {!!description && (\n          <Box display=\"block\" textAlign=\"center\" {...descStyles}>\n            {description}\n          </Box>\n        )}\n        {children}\n      </Box>\n    </StepperBaseHorizontal>\n  )\n}\n\nexport const StepperStep = vui<'div', StepperStepProps>(\n  ({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {\n    const context = useStepperContext()\n    const size = (context?.size || propSize) as StepperSize\n    const orientation = (context?.orientation || 'horizontal') as StepperOrientation\n    const isIconMode = Boolean(icon)\n    const styles = useStyleConfig('Stepper', { size, variant })\n    const theme = useTheme()\n    const rc = (token: string) => th.color(token)({ theme }) as string\n    const resolvedTailColor = rc(isIconMode ? styles.iconTailColor : styles.tailColor)\n    const resolvedIconTailColor = rc(styles.iconTailColor)\n    const stepProps = {\n      icon,\n      number,\n      size,\n      description,\n      title,\n      className,\n      variant,\n      children,\n      isIconMode,\n      ref,\n      styles,\n      tailColor: resolvedTailColor,\n      iconTailColor: resolvedIconTailColor,\n    }\n\n    return orientation === 'vertical' ? (\n      <StepperStepVertical {...stepProps} />\n    ) : (\n      <StepperStepHorizontal {...stepProps} />\n    )\n  },\n)\n\nStepperStep.displayName = 'StepperStep'\n\nexport default StepperStep\n"],"mappings":"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"}

package/dist/stepper/stepperTheme.js

@@ -1,65 +0,0 @@
-import { sizes as sizes$1 } from "./stepperIndicatorTheme.js";
-
-//#region src/stepper/stepperTheme.ts
-const baseStyle = { desc: { color: "sandstone.45" } };
-const defaultProps = { size: "md" };
-const variants = {
-	active: {
-		tailColor: "seaBlue.main",
-		iconTailColor: "seaBlue.main",
-		titleColor: "sandstone.10",
-		titleFontWeight: 600
-	},
-	completed: {
-		tailColor: "landGreen.41",
-		iconTailColor: "landGreen.41",
-		titleColor: "sandstone.10"
-	},
-	optional: {
-		tailColor: "seaBlue.45",
-		iconTailColor: "seaBlue.45",
-		titleColor: "sandstone.10"
-	},
-	pending: {
-		tailColor: "sandstone.90",
-		iconTailColor: "sandstone.45",
-		titleColor: "sandstone.55"
-	},
-	error: {
-		tailColor: "energyRed.45",
-		iconTailColor: "energyRed.45",
-		titleColor: "energyRed.main",
-		titleFontWeight: 600
-	}
-};
-const sizes = {
-	md: {
-		title: {
-			fontSize: "16px",
-			pt: "4px"
-		},
-		indicatorWidth: sizes$1.md.width,
-		vertTailWidth: "16px",
-		desc: { fontSize: "14px" }
-	},
-	sm: {
-		title: {
-			fontSize: "14px",
-			pt: "2px"
-		},
-		indicatorWidth: sizes$1.sm.width,
-		vertTailWidth: "12px",
-		desc: { fontSize: "12px" }
-	}
-};
-var stepperTheme_default = {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
-};
-
-//#endregion
-export { stepperTheme_default as default, sizes, variants };
-globalThis.__vuiVersion__ = "5.3.0-alpha.2"
-//# sourceMappingURL=stepperTheme.js.map

package/dist/stepper/stepperTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepperTheme.js","names":["indicatorSizes"],"sources":["../../src/stepper/stepperTheme.ts"],"sourcesContent":["import { sizes as indicatorSizes } from './stepperIndicatorTheme'\n\nconst baseStyle = {\n  desc: { color: 'sandstone.45' },\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nexport const variants = {\n  active: {\n    tailColor: 'seaBlue.main',\n    iconTailColor: 'seaBlue.main',\n    titleColor: 'sandstone.10',\n    titleFontWeight: 600,\n  },\n  completed: { tailColor: 'landGreen.41', iconTailColor: 'landGreen.41', titleColor: 'sandstone.10' },\n  optional: { tailColor: 'seaBlue.45', iconTailColor: 'seaBlue.45', titleColor: 'sandstone.10' },\n  pending: { tailColor: 'sandstone.90', iconTailColor: 'sandstone.45', titleColor: 'sandstone.55' },\n  error: {\n    tailColor: 'energyRed.45',\n    iconTailColor: 'energyRed.45',\n    titleColor: 'energyRed.main',\n    titleFontWeight: 600,\n  },\n}\n\nexport const sizes = {\n  md: {\n    title: { fontSize: '16px', pt: '4px' },\n    indicatorWidth: indicatorSizes.md.width,\n    vertTailWidth: '16px',\n    desc: { fontSize: '14px' },\n  },\n  sm: {\n    title: { fontSize: '14px', pt: '2px' },\n    indicatorWidth: indicatorSizes.sm.width,\n    vertTailWidth: '12px',\n    desc: { fontSize: '12px' },\n  },\n} as const\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY,EAChB,MAAM,EAAE,OAAO,eAAe,EAChC;AAEA,MAAM,eAAe,EACnB,MAAM,KACR;AAEA,MAAa,WAAW;CACtB,QAAQ;EACN,WAAW;EACX,eAAe;EACf,YAAY;EACZ,iBAAiB;CACnB;CACA,WAAW;EAAE,WAAW;EAAgB,eAAe;EAAgB,YAAY;CAAe;CAClG,UAAU;EAAE,WAAW;EAAc,eAAe;EAAc,YAAY;CAAe;CAC7F,SAAS;EAAE,WAAW;EAAgB,eAAe;EAAgB,YAAY;CAAe;CAChG,OAAO;EACL,WAAW;EACX,eAAe;EACf,YAAY;EACZ,iBAAiB;CACnB;AACF;AAEA,MAAa,QAAQ;CACnB,IAAI;EACF,OAAO;GAAE,UAAU;GAAQ,IAAI;EAAM;EACrC,gBAAgBA,QAAe,GAAG;EAClC,eAAe;EACf,MAAM,EAAE,UAAU,OAAO;CAC3B;CACA,IAAI;EACF,OAAO;GAAE,UAAU;GAAQ,IAAI;EAAM;EACrC,gBAAgBA,QAAe,GAAG;EAClC,eAAe;EACf,MAAM,EAAE,UAAU,OAAO;CAC3B;AACF;AAEA,2BAAe;CACb;CACA;CACA;CACA;AACF"}

package/dist/stepper/stepperTypes.d.ts

@@ -1,33 +0,0 @@
-import { ThemingProps } from "../theme/types.js";
-import "../theme/index.js";
-import { ChildrenProp } from "../core/types.js";
-import { SystemProps } from "../system/system.js";
-import "../system/index.js";
-import "../core/index.js";
-import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
-import { StepperIndicatorVariant } from "./stepperIndicatorTypes.js";
-import { ReactNode } from "react";
-//#region src/stepper/stepperTypes.d.ts
-type StepperSize = 'md' | 'sm';
-type StepperOrientation = 'horizontal' | 'vertical';
-type StepperProps = SystemProps & ThemingProps<'Stepper'> & ChildrenProp & {
-  /** Layout direction. Defaults to 'horizontal'. */
-  orientation?: StepperOrientation;
-  /** Size applied to all steps. Defaults to 'md'. */
-  size?: StepperSize;
-  className?: string;
-};
-type StepperStepProps = SystemProps & ChildrenProp & {
-  icon?: IconProp;
-  number?: number;
-  size?: StepperSize;
-  description?: ReactNode;
-  title?: ReactNode;
-  className?: string;
-  variant?: StepperIndicatorVariant;
-};
-//#endregion
-export { StepperOrientation, StepperProps, StepperSize, StepperStepProps };
-
-//# sourceMappingURL=stepperTypes.d.ts.map

package/dist/stepper/stepperTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepperTypes.d.ts","names":[],"sources":["../../src/stepper/stepperTypes.ts"],"mappings":";;;;;;;;;;;KAQY;KAEA;KAEA,eAAe,cACzB,0BACA;;EAEE,cAAc;;EAEd,OAAO;EACP;;KAGQ,mBAAmB,cAC7B;EACE,OAAO;EACP;EACA,OAAO;EACP,cAAc;EACd,QAAQ;EACR;EACA,UAAU"}