erp-pro-ui 0.1.4 → 0.1.6

package/dist/chunks/spotlight-card-DIgacTxA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-card-DIgacTxA.mjs","names":[],"sources":["../../src/components/effects/spotlight-card/SpotlightCard.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SpotlightCardProps } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n  full: \"rounded-full\",\n};\n\nconst paddingMap = {\n  none: \"\",\n  sm: \"p-3\",\n  md: \"p-5\",\n  lg: \"p-7\",\n  xl: \"p-10\",\n};\n\nconst variantStyles = {\n  glass: `\n    bg-ds-surface-1/70\n    backdrop-blur-2xl\n    border border-ds-border-2/60\n    shadow-xl\n  `,\n  solid: `\n    bg-ds-surface-1\n    border border-ds-border-2\n    shadow-lg\n  `,\n  outlined: `\n    bg-transparent\n    border-2 border-ds-border-2\n  `,\n};\n\nexport const SpotlightCard = ({\n  children,\n  className,\n  spotlightColor = \"rgba(115, 103, 240, 0.15)\",\n  spotlightSize = 350,\n  spotlightEnabled = true,\n  variant = \"glass\",\n  borderRadius = \"xl\",\n  padding = \"md\",\n  hoverScale = true,\n  style,\n  onClick,\n}: SpotlightCardProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current || !spotlightEnabled) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n  };\n\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const spotlightStyle =\n    spotlightEnabled && isHovered\n      ? {\n          background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 80%)`,\n        }\n      : {};\n\n  return (\n    <motion.div\n      ref={containerRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden transition-all duration-300\",\n        borderRadiusMap[borderRadius],\n        paddingMap[padding],\n        variantStyles[variant],\n        onClick && \"cursor-pointer\",\n        className,\n      )}\n      style={style}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={onClick}\n      whileHover={hoverScale ? { scale: 1.02 } : undefined}\n      whileTap={onClick ? { scale: 0.98 } : undefined}\n      transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n    >\n      {/* Spotlight overlay */}\n      {spotlightEnabled && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={spotlightStyle}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: isHovered ? 1 : 0 }}\n          transition={{ duration: 0.3 }}\n        />\n      )}\n\n      {/* Border glow effect */}\n      {spotlightEnabled && isHovered && (\n        <motion.div\n          className={mergeClassNames(\n            \"pointer-events-none absolute inset-0 z-0\",\n            borderRadiusMap[borderRadius],\n          )}\n          style={{\n            background: `radial-gradient(${spotlightSize * 0.6}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace(\"0.15\", \"0.3\")}, transparent 70%)`,\n            filter: \"blur(20px)\",\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </motion.div>\n  );\n};\n\nSpotlightCard.displayName = \"SpotlightCard\";\n\nexport default SpotlightCard;\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,MAAM;CACP;AAED,IAAM,aAAa;CACjB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAAgB;CACpB,OAAO;;;;;;CAMP,OAAO;;;;;CAKP,UAAU;;;;CAIX;AAED,IAAa,iBAAiB,EAC5B,UACA,WACA,iBAAiB,6BACjB,gBAAgB,KAChB,mBAAmB,MACnB,UAAU,SACV,eAAe,MACf,UAAU,MACV,aAAa,MACb,OACA,cACwB;CACxB,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,eAAe,oBAAoB,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAClE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,mBAAmB,MAAwC;AAC/D,MAAI,CAAC,aAAa,WAAW,CAAC,iBAAkB;EAChD,MAAM,OAAO,aAAa,QAAQ,uBAAuB;AACzD,mBAAiB;GACf,GAAG,EAAE,UAAU,KAAK;GACpB,GAAG,EAAE,UAAU,KAAK;GACrB,CAAC;;CAGJ,MAAM,yBAAyB;AAC7B,eAAa,KAAK;;CAGpB,MAAM,yBAAyB;AAC7B,eAAa,MAAM;;CAGrB,MAAM,iBACJ,oBAAoB,YAChB,EACE,YAAY,mBAAmB,cAAc,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,qBACvH,GACD,EAAE;AAER,QACE,qBAAC,OAAO,KAAR;EACE,KAAK;EACL,WAAW,gBACT,wDACA,gBAAgB,eAChB,WAAW,UACX,cAAc,UACd,WAAW,kBACX,UACD;EACM;EACP,aAAa;EACb,cAAc;EACd,cAAc;EACL;EACT,YAAY,aAAa,EAAE,OAAO,MAAM,GAAG,KAAA;EAC3C,UAAU,UAAU,EAAE,OAAO,KAAM,GAAG,KAAA;EACtC,YAAY;GAAE,MAAM;GAAU,WAAW;GAAK,SAAS;GAAI;YAjB7D;GAoBG,oBACC,oBAAC,OAAO,KAAR;IACE,WAAU;IACV,OAAO;IACP,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,YAAY,IAAI,GAAG;IACvC,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIH,oBAAoB,aACnB,oBAAC,OAAO,KAAR;IACE,WAAW,gBACT,4CACA,gBAAgB,cACjB;IACD,OAAO;KACL,YAAY,mBAAmB,gBAAgB,GAAI,eAAe,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,QAAQ,QAAQ,MAAM,CAAC;KACnJ,QAAQ;KACT;IACD,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAE,UAAU,IAAK;IAC7B,CAAA;GAIJ,oBAAC,OAAD;IAAK,WAAU;IAAiB;IAAe,CAAA;GACpC;;;AAIjB,cAAc,cAAc"}

package/dist/chunks/{stepper-D6qQbZdg.cjs → stepper-BpjKyemI.cjs}

@@ -1,7 +1,8 @@
 require("./chunk-B_GkZjkl.cjs");
 const require_utils = require("./utils-B4SmmY4J.cjs");
-const require_icons = require("./icons-BxIzP2jd.cjs");
-const require_button = require("./button-CZL6kFzT.cjs");
+const require_truncated_text = require("./truncated-text-istgJRUq.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
+const require_button = require("./button-xqernofO.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -9,51 +10,59 @@ let framer_motion = require("framer-motion");
 var sizeConfig = {
 	sm: {
 		indicator: "w-8 h-8",
+		indicatorPx: 32,
 		icon: "w-4 h-4",
 		text: "text-xs",
-		connectorThickness: "2px"
+		connectorThickness: "2px",
+		connectorThicknessPx: 2
 	},
 	md: {
 		indicator: "w-10 h-10",
+		indicatorPx: 40,
 		icon: "w-5 h-5",
 		text: "text-sm",
-		connectorThickness: "2px"
+		connectorThickness: "2px",
+		connectorThicknessPx: 2
 	},
 	lg: {
 		indicator: "w-12 h-12",
+		indicatorPx: 48,
 		icon: "w-6 h-6",
 		text: "text-base",
-		connectorThickness: "4px"
+		connectorThickness: "4px",
+		connectorThicknessPx: 4
 	}
 };
 var getVariantStyles = (variant, status) => {
 	return {
 		default: {
-			completed: "bg-accent text-on-accent shadow-md shadow-accent/25",
-			current: "bg-accent text-on-accent ring-4 ring-focus/40 shadow-lg shadow-accent/30",
-			upcoming: "bg-neutral-200 text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400",
-			error: "bg-red-500 text-white ring-4 ring-red-500/30"
+			completed: "bg-ds-accent text-ds-on-accent shadow-md shadow-ds-accent/25",
+			current: "bg-ds-accent text-ds-on-accent ring-4 ring-ds-focus/40 shadow-lg shadow-ds-accent/30",
+			upcoming: "bg-ds-surface-3 text-ds-2",
+			error: "bg-ds-state-error-surface text-ds-state-error-text ring-4 ring-ds-state-error-border/35"
 		},
 		glass: {
-			completed: "bg-accent/85 text-on-accent backdrop-blur-xl border border-accent/30 shadow-lg shadow-accent/20",
-			current: "bg-accent/90 text-on-accent backdrop-blur-xl border-2 border-accent ring-4 ring-focus/30 shadow-xl shadow-accent/30",
-			upcoming: "bg-white/60 text-neutral-500 backdrop-blur-xl border border-white/40 dark:bg-neutral-800/60 dark:text-neutral-400 dark:border-white/10",
-			error: "bg-red-500/80 text-white backdrop-blur-xl border border-red-400/30 ring-4 ring-red-500/20"
+			completed: "bg-ds-accent/85 text-ds-on-accent backdrop-blur-xl border border-ds-border-accent/30 shadow-lg shadow-ds-accent/20",
+			current: "bg-ds-accent/90 text-ds-on-accent backdrop-blur-xl border-2 border-ds-border-accent ring-4 ring-ds-focus/30 shadow-xl shadow-ds-accent/30",
+			upcoming: "bg-ds-surface-1 text-ds-2 backdrop-blur-xl border border-ds-border-2",
+			error: "bg-ds-state-error-surface text-ds-state-error-text backdrop-blur-xl border border-ds-state-error-border ring-4 ring-ds-state-error-border/25"
 		},
 		minimal: {
-			completed: "bg-accent-subtle text-accent",
-			current: "bg-accent text-on-accent shadow-sm",
-			upcoming: "bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600",
-			error: "bg-red-100 text-red-500 dark:bg-red-900/30"
+			completed: "bg-ds-accent-subtle text-ds-1",
+			current: "bg-ds-accent text-ds-on-accent shadow-sm",
+			upcoming: "bg-transparent text-ds-2 border-2 border-ds-border-2",
+			error: "bg-ds-state-error-surface text-ds-state-error-text"
 		},
 		outlined: {
-			completed: "bg-transparent text-accent border-2 border-accent",
-			current: "bg-accent text-on-accent border-2 border-accent shadow-lg",
-			upcoming: "bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600",
-			error: "bg-transparent text-red-500 border-2 border-red-500"
+			completed: "bg-transparent text-ds-1 border-2 border-ds-border-accent",
+			current: "bg-ds-accent text-ds-on-accent border-2 border-ds-border-accent shadow-lg",
+			upcoming: "bg-transparent text-ds-2 border-2 border-ds-border-2",
+			error: "bg-transparent text-ds-state-error-text border-2 border-ds-state-error-border"
 		}
 	}[variant][status];
 };
+var getConnectorTrackClassName = (variant) => variant === "glass" ? "bg-ds-surface-2/70 backdrop-blur-sm" : "bg-ds-surface-3";
+var getResolvedLabelPosition = (orientation, labelPosition) => orientation === "vertical" ? "right" : labelPosition;
 var StepIndicator = ({ step, index, status, size, variant, showNumbers, animated, colors }) => {
 	const config = sizeConfig[size];
 	const variantStyles = getVariantStyles(variant, status);
@@ -119,9 +128,14 @@ var StepIndicator = ({ step, index, status, size, variant, showNumbers, animated
 		})
 	});
 };
-var Stepper = ({ steps, currentStep, onStepClick, orientation = "horizontal", size = "md", variant = "glass", showNumbers = true, clickable = true, showConnector = true, className, connectorClassName, stepClassName, showErrors = false, errorSteps = [], completedSteps, animated = true, colors }) => {
+var Stepper = ({ steps, currentStep, onStepClick, orientation = "horizontal", size = "md", variant = "glass", labelPosition = "bottom", showNumbers = true, clickable = true, showConnector = true, className, connectorClassName, stepClassName, showErrors = false, errorSteps = [], completedSteps, animated = true, colors }) => {
 	const isVertical = orientation === "vertical";
+	const resolvedLabelPosition = getResolvedLabelPosition(orientation, labelPosition);
+	const isHorizontalInline = orientation === "horizontal" && resolvedLabelPosition === "right";
 	const config = sizeConfig[size];
+	const indicatorPaddingPx = variant === "glass" || variant === "outlined" || variant === "minimal" ? 4 : 2;
+	const connectorInsetPx = (config.indicatorPx + indicatorPaddingPx * 2) / 2;
+	const connectorCenterOffsetPx = connectorInsetPx - config.connectorThicknessPx / 2;
 	const getStepStatus = (index) => {
 		if (showErrors && errorSteps.includes(index)) return "error";
 		if (completedSteps) {
@@ -140,67 +154,130 @@ var Stepper = ({ steps, currentStep, onStepClick, orientation = "horizontal", si
 		if (status === "completed" || status === "current") onStepClick(index);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_utils.mergeClassNames("w-full relative", isVertical ? "flex flex-col" : "flex items-start justify-between", className),
-		children: [showConnector && (() => {
-			const paddingValue = variant === "glass" || variant === "outlined" || variant === "minimal" ? 4 : 2;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_utils.mergeClassNames("absolute rounded-full", variant === "glass" ? "bg-white/30 dark:bg-white/10 backdrop-blur-sm" : "bg-neutral-200 dark:bg-neutral-700", connectorClassName),
-				style: { ...isVertical ? {
-					top: "0",
-					bottom: "0",
-					left: `calc(${paddingValue}px + 1px + ${config.indicator.split(" ")[0].replace("w-", "")} * 0.125rem - ${config.connectorThickness} / 2)`,
-					width: config.connectorThickness
-				} : {
-					left: "0",
-					right: "0",
-					top: `calc(${paddingValue}px + 1px + ${config.indicator.split(" ")[1].replace("h-", "")} * 0.125rem - ${config.connectorThickness} / 2)`,
-					height: config.connectorThickness
-				} },
-				children: animated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-					className: "absolute top-0 left-0 bg-accent rounded-full",
-					initial: { [isVertical ? "height" : "width"]: 0 },
-					animate: { [isVertical ? "height" : "width"]: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%` },
-					transition: {
-						duration: .4,
-						ease: "easeOut"
+		className: require_utils.mergeClassNames("w-full relative", isVertical ? "flex flex-col" : isHorizontalInline ? "flex items-center" : "flex items-start justify-between", className),
+		children: [showConnector && isVertical && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_utils.mergeClassNames("absolute rounded-full", getConnectorTrackClassName(variant), connectorClassName),
+			style: { ...isVertical ? {
+				top: `${connectorInsetPx}px`,
+				bottom: `${connectorInsetPx}px`,
+				left: `${connectorCenterOffsetPx}px`,
+				width: config.connectorThickness
+			} : {
+				left: `${connectorInsetPx}px`,
+				right: `${connectorInsetPx}px`,
+				top: `${connectorCenterOffsetPx}px`,
+				height: config.connectorThickness
+			} },
+			children: animated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				className: "absolute top-0 left-0 bg-ds-accent rounded-full",
+				initial: { [isVertical ? "height" : "width"]: 0 },
+				animate: { [isVertical ? "height" : "width"]: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%` },
+				transition: {
+					duration: .4,
+					ease: "easeOut"
+				},
+				style: {
+					...isVertical ? { width: "100%" } : { height: "100%" },
+					backgroundColor: colors?.connector || colors?.completed
+				}
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute top-0 left-0 bg-ds-accent rounded-full",
+				style: {
+					...isVertical ? {
+						width: "100%",
+						height: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
+					} : {
+						height: "100%",
+						width: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
 					},
-					style: {
-						...isVertical ? { width: "100%" } : { height: "100%" },
-						backgroundColor: colors?.connector || colors?.completed
-					}
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute top-0 left-0 bg-accent rounded-full",
-					style: {
-						...isVertical ? {
-							width: "100%",
-							height: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
-						} : {
-							height: "100%",
-							width: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
-						},
-						backgroundColor: colors?.connector || colors?.completed
-					}
-				})
-			});
-		})(), steps.map((step, index) => {
+					backgroundColor: colors?.connector || colors?.completed
+				}
+			})
+		}), steps.map((step, index) => {
 			const status = getStepStatus(index);
 			const isLast = index === steps.length - 1;
 			const isClickable = clickable && !step.disabled;
-			const paddingValue = variant === "glass" || variant === "outlined" || variant === "minimal" ? 4 : 2;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_utils.mergeClassNames("relative z-10", isVertical ? "flex gap-4 pb-8" : "flex flex-1 flex-col items-center", !isLast && isVertical && "mb-2", isVertical && isLast && "pb-0", stepClassName),
-				style: { ...!isVertical ? {
+			const isConnectorCompleted = getStepStatus(index) === "completed";
+			const textBlock = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+				className: require_utils.mergeClassNames(resolvedLabelPosition === "right" ? "min-w-0 text-left" : "w-full px-2 text-center", isVertical && "flex-1 pb-6", isVertical && isLast && "pb-0"),
+				style: isVertical ? { marginTop: "-4px" } : void 0,
+				initial: animated ? {
+					opacity: 0,
+					y: 10
+				} : void 0,
+				animate: animated ? {
+					opacity: 1,
+					y: 0
+				} : void 0,
+				transition: { delay: index * .1 },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: require_utils.mergeClassNames("font-medium transition-colors duration-200", config.text, status === "current" ? "text-ds-1" : status === "completed" ? "text-ds-1" : status === "error" ? "text-ds-state-error-text" : "text-ds-2"),
+					children: [step.title, step.optional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ml-1 font-normal text-ds-3",
+						children: "(Optional)"
+					})]
+				}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_utils.mergeClassNames("mt-0.5 text-xs text-ds-2", resolvedLabelPosition === "right" && "text-left"),
+					children: step.description
+				})]
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames("relative z-10 min-w-0", isVertical ? "flex gap-4 pb-8" : isHorizontalInline ? "flex items-center gap-3" : "flex flex-1 flex-col items-center text-center", !isLast && isVertical && "mb-2", isVertical && isLast && "pb-0", stepClassName),
+				style: !isVertical && !isHorizontalInline ? {
 					flexBasis: 0,
-					flexGrow: 1,
-					alignItems: index === 0 ? "flex-start" : isLast ? "flex-end" : "center"
-				} : {} },
+					flexGrow: 1
+				} : void 0,
 				children: [
+					!isVertical && index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: require_utils.mergeClassNames("pointer-events-none absolute z-0 rounded-full", getConnectorTrackClassName(variant), connectorClassName),
+						style: {
+							top: `${connectorCenterOffsetPx}px`,
+							left: 0,
+							right: "50%",
+							height: config.connectorThickness
+						},
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute inset-y-0 right-0 rounded-full bg-ds-accent",
+							style: {
+								left: 0,
+								backgroundColor: colors?.connector || colors?.completed,
+								opacity: status === "completed" || status === "current" ? 1 : 0
+							}
+						})
+					}) : null,
+					!isVertical && !isHorizontalInline && !isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: require_utils.mergeClassNames("pointer-events-none absolute z-0 rounded-full", getConnectorTrackClassName(variant), connectorClassName),
+						style: {
+							top: `${connectorCenterOffsetPx}px`,
+							left: "50%",
+							right: 0,
+							height: config.connectorThickness
+						},
+						"aria-hidden": "true",
+						children: animated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+							className: "absolute inset-y-0 left-0 rounded-full bg-ds-accent",
+							initial: { width: 0 },
+							animate: { width: status === "completed" || status === "current" ? "100%" : "0%" },
+							transition: {
+								duration: .35,
+								ease: "easeOut"
+							},
+							style: { backgroundColor: colors?.connector || colors?.completed }
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute inset-y-0 left-0 rounded-full bg-ds-accent",
+							style: {
+								width: status === "completed" || status === "current" ? "100%" : "0%",
+								backgroundColor: colors?.connector || colors?.completed
+							}
+						})
+					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => handleStepClick(index),
 						disabled: !isClickable,
-						className: require_utils.mergeClassNames("relative z-10 shrink-0 flex items-center justify-center bg-white dark:bg-neutral-900 rounded-full", isClickable ? "cursor-pointer" : "cursor-default", !isVertical && index === 0 && "mx-0", !isVertical && isLast && "mx-0"),
-						style: { padding: `${paddingValue}px` },
+						className: require_utils.mergeClassNames("relative z-10 shrink-0 rounded-full bg-ds-surface-1", isClickable ? "cursor-pointer" : "cursor-default", resolvedLabelPosition === "right" ? "flex items-center justify-center" : "flex items-center justify-center"),
+						style: { padding: `${indicatorPaddingPx}px` },
 						"aria-current": status === "current" ? "step" : void 0,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepIndicator, {
 							step,
@@ -213,29 +290,7 @@ var Stepper = ({ steps, currentStep, onStepClick, orientation = "horizontal", si
 							colors
 						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
-						className: require_utils.mergeClassNames("mt-2", isVertical ? "flex-1 pb-6" : "text-center px-2", !isVertical && index === 0 && "text-left px-0", !isVertical && isLast && "text-right px-0", isVertical && isLast && "pb-0"),
-						style: isVertical ? { marginTop: "-4px" } : void 0,
-						initial: animated ? {
-							opacity: 0,
-							y: 10
-						} : void 0,
-						animate: animated ? {
-							opacity: 1,
-							y: 0
-						} : void 0,
-						transition: { delay: index * .1 },
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-							className: require_utils.mergeClassNames("font-medium transition-colors duration-200", config.text, status === "current" ? "text-accent" : status === "completed" ? "text-neutral-700 dark:text-neutral-200" : status === "error" ? "text-red-500" : "text-neutral-500 dark:text-neutral-400"),
-							children: [step.title, step.optional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "ml-1 text-neutral-400 dark:text-neutral-500 font-normal",
-								children: "(Optional)"
-							})]
-						}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: require_utils.mergeClassNames("mt-0.5 text-neutral-500 dark:text-neutral-400", size === "sm" ? "text-xs" : "text-xs"),
-							children: step.description
-						})]
-					}),
+					textBlock,
 					isVertical && step.content && status === "current" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 						initial: {
 							opacity: 0,
@@ -249,11 +304,31 @@ var Stepper = ({ steps, currentStep, onStepClick, orientation = "horizontal", si
 							opacity: 0,
 							height: 0
 						},
-						className: "pl-14 pb-4 w-full",
+						className: "w-full pb-4 pl-14",
 						children: step.content
 					})
 				]
-			}, step.id);
+			}), isHorizontalInline && showConnector && !isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.mergeClassNames("relative mx-4 min-w-8 flex-1 shrink-0 overflow-hidden rounded-full", getConnectorTrackClassName(variant), connectorClassName),
+				style: { height: config.connectorThickness },
+				"aria-hidden": "true",
+				children: animated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+					className: "absolute inset-y-0 left-0 rounded-full bg-ds-accent",
+					initial: { width: 0 },
+					animate: { width: isConnectorCompleted ? "100%" : "0%" },
+					transition: {
+						duration: .35,
+						ease: "easeOut"
+					},
+					style: { backgroundColor: colors?.connector || colors?.completed }
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute inset-y-0 left-0 rounded-full bg-ds-accent",
+					style: {
+						width: isConnectorCompleted ? "100%" : "0%",
+						backgroundColor: colors?.connector || colors?.completed
+					}
+				})
+			}) : null] }, step.id);
 		})]
 	});
 };
@@ -273,65 +348,73 @@ function getMediaQuerySnapshot(query) {
 }
 function getStepColors(state, isActive) {
 	if (isActive) return {
-		buttonClassName: "border-accent bg-accent/12 text-accent shadow-sm shadow-accent/10",
-		connectorClassName: "bg-accent",
-		badgeClassName: "border-accent bg-accent text-on-accent"
+		buttonClassName: "border-ds-border-accent bg-ds-accent/12 text-ds-1 shadow-sm shadow-ds-accent/10",
+		connectorClassName: "bg-ds-accent",
+		badgeClassName: "border-ds-border-accent bg-ds-accent text-ds-on-accent"
 	};
 	if (state === "valid") return {
-		buttonClassName: "border-success bg-success/10 text-success shadow-sm shadow-success/10",
-		connectorClassName: "bg-success",
-		badgeClassName: "border-success bg-success text-on-accent"
+		buttonClassName: "border-ds-state-success-border bg-ds-state-success-surface text-ds-state-success-text shadow-sm",
+		connectorClassName: "bg-ds-state-success",
+		badgeClassName: "border-ds-state-success-border bg-ds-state-success text-ds-on-accent"
 	};
 	if (state === "invalid") return {
-		buttonClassName: "border-red-500 bg-red-500/10 text-red-600 dark:text-red-300",
-		connectorClassName: "bg-red-500",
-		badgeClassName: "border-red-500 bg-red-500 text-white"
+		buttonClassName: "border-ds-state-error-border bg-ds-state-error-surface text-ds-state-error-text",
+		connectorClassName: "bg-ds-state-danger",
+		badgeClassName: "border-ds-state-error-border bg-ds-state-danger text-ds-on-accent"
 	};
 	return {
-		buttonClassName: "border-border bg-surface text-muted-foreground hover:border-border-strong hover:bg-canvas",
-		connectorClassName: "bg-border-strong/70",
-		badgeClassName: "border-border bg-background text-muted-foreground"
+		buttonClassName: "border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-1 hover:bg-ds-canvas",
+		connectorClassName: "bg-ds-border-3/70",
+		badgeClassName: "border-ds-border-2 bg-ds-canvas text-ds-2"
 	};
 }
 function renderStepContent(label, icon, state, stepNumber, badgeClassName) {
 	if (state === "valid") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "flex items-center gap-2",
+		className: "flex min-w-0 items-center gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
 			className: "h-5 w-5",
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate",
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+			as: "span",
+			showTitleOnHover: true,
+			className: "flex-1",
 			children: label
 		})]
 	});
 	if (state === "invalid") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "flex items-center gap-2",
+		className: "flex min-w-0 items-center gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.AlertTriangleIcon, {
 			className: "h-5 w-5",
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate",
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+			as: "span",
+			showTitleOnHover: true,
+			className: "flex-1",
 			children: label
 		})]
 	});
 	if (icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "flex items-center gap-2",
+		className: "flex min-w-0 items-center gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "shrink-0",
 			children: icon
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate",
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+			as: "span",
+			showTitleOnHover: true,
+			className: "flex-1",
 			children: label
 		})]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "flex items-center gap-2",
+		className: "flex min-w-0 items-center gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: require_utils.mergeClassNames("flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold", badgeClassName),
 			"aria-hidden": "true",
 			children: stepNumber
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate",
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+			as: "span",
+			showTitleOnHover: true,
+			className: "flex-1",
 			children: label
 		})]
 	});
@@ -356,7 +439,7 @@ function StepperSteps({ steps, currentStep, onStepClick, stepStates = [], orient
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 					disabled: !isClickable,
 					onClick: () => onStepClick?.(index),
-					className: require_utils.mergeClassNames("relative z-10 flex min-h-11 items-center justify-center rounded-md border px-4 py-3 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-default disabled:opacity-100", isVertical ? "w-full" : "w-full min-w-0", colors.buttonClassName, stepClassName),
+					className: require_utils.mergeClassNames("relative z-10 flex min-h-11 items-center justify-center rounded-md border px-4 py-3 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1 disabled:cursor-default disabled:opacity-100", isVertical ? "w-full" : "w-full min-w-0", colors.buttonClassName, stepClassName),
 					"aria-current": isActive ? "step" : void 0,
 					"aria-invalid": state === "invalid" ? true : void 0,
 					children: renderStepContent(step.label, step.icon, state, stepNumber, colors.badgeClassName)
@@ -429,10 +512,10 @@ function StepperWizard({ children, initialStep = 0, currentStep: controlledStep,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_utils.mergeClassNames("flex min-h-full w-full flex-1 items-center justify-center p-4", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_utils.mergeClassNames("mx-auto w-full max-w-3xl rounded-3xl border border-border bg-background shadow-2", stepCircleContainerClassName),
+			className: require_utils.mergeClassNames("mx-auto w-full max-w-3xl rounded-3xl border border-ds-border-2 bg-ds-canvas shadow-2", stepCircleContainerClassName),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_utils.mergeClassNames("flex w-full items-center gap-3 border-b border-border px-6 py-6 sm:px-8", stepContainerClassName),
+					className: require_utils.mergeClassNames("flex w-full items-center gap-3 border-b border-ds-border-2 px-6 py-6 sm:px-8", stepContainerClassName),
 					children: stepsArray.map((_, index) => {
 						const status = getIndicatorStatus(index, currentStep);
 						const isClickable = !disableStepIndicators && index !== currentStep;
@@ -463,7 +546,7 @@ function StepperWizard({ children, initialStep = 0, currentStep: controlledStep,
 						className: require_utils.mergeClassNames("mt-6 flex gap-3", currentStep > 0 ? "justify-between" : "justify-end"),
 						children: [currentStep > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 							onClick: handleBack,
-							className: "rounded-md border-transparent bg-transparent px-3 py-2 text-sm font-medium text-muted-foreground shadow-none hover:bg-surface hover:text-foreground",
+							className: "rounded-md border-transparent bg-transparent px-3 py-2 text-sm font-medium text-ds-2 shadow-none hover:bg-ds-surface-1 hover:text-ds-1",
 							...backButtonProps,
 							children: backButtonText
 						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
@@ -554,7 +637,7 @@ function WizardStepIndicator({ stepIndex, stepNumber, status, isClickable, onSte
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.button, {
 		type: "button",
 		onClick: () => onStepClick(stepIndex),
-		className: require_utils.mergeClassNames("relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background", isClickable ? "cursor-pointer" : "cursor-default"),
+		className: require_utils.mergeClassNames("relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1", isClickable ? "cursor-pointer" : "cursor-default"),
 		animate: status,
 		initial: false,
 		disabled: !isClickable,
@@ -590,7 +673,7 @@ function WizardStepConnector({ isComplete }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "relative mx-2 h-0.5 flex-1 overflow-hidden rounded-full bg-border",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-			className: "absolute inset-y-0 left-0 rounded-full bg-accent",
+			className: "absolute inset-y-0 left-0 rounded-full bg-ds-accent",
 			initial: false,
 			animate: isComplete ? "complete" : "incomplete",
 			variants: {
@@ -639,4 +722,4 @@ Object.defineProperty(exports, "StepperWizardStep", {
 	}
 });
 
-//# sourceMappingURL=stepper-D6qQbZdg.cjs.map
+//# sourceMappingURL=stepper-BpjKyemI.cjs.map