import { cn, extractText } from "./index3.js";
import { createSafeContext } from "./index21.js";
import { cva } from "class-variance-authority";
import { Check } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/content/Steps/Steps.tsx
var stepIndicatorVariants = cva("flex items-center justify-center shrink-0 size-[38px] font-medium text-lg transition-all duration-200 ease-out motion-reduce:transition-none", {
	variants: {
		shape: {
			rounded: "rounded-lg",
			round: "rounded-full"
		},
		status: {
			complete: "bg-primary text-primary-foreground shadow-sm",
			active: "bg-primary-foreground border-2 border-primary text-primary shadow-sm",
			incomplete: "bg-accent text-muted-foreground"
		}
	},
	defaultVariants: {
		shape: "rounded",
		status: "incomplete"
	}
});
var stepConnectorVariants = cva("shrink-0 transition-colors duration-200 ease-out motion-reduce:transition-none", {
	variants: {
		orientation: {
			horizontal: "h-0.5 flex-1 min-w-4 mx-2 mt-[18px]",
			vertical: "w-0.5 h-[30px] my-1 ml-[18px]"
		},
		status: {
			complete: "bg-primary",
			incomplete: "bg-border"
		}
	},
	defaultVariants: {
		orientation: "horizontal",
		status: "incomplete"
	}
});
var stepLabelVariants = cva("text-base leading-6", {
	variants: { status: {
		complete: "text-card-foreground",
		active: "text-card-foreground",
		incomplete: "text-muted-foreground"
	} },
	defaultVariants: { status: "incomplete" }
});
var stepSubtextVariants = cva("text-sm leading-5 text-muted-foreground");
var [StepsContext, useStepsContext] = createSafeContext("Steps");
/** Per-item index context — injected by Steps parent via Children.map or flat API */
var StepIndexContext = React.createContext(0);
function StepIndicator({ index, status, shape, bulletType }) {
	const renderContent = () => {
		if (bulletType === "icon") {
			if (status === "complete") return /* @__PURE__ */ jsx(Check, { className: "size-[22px] delight-check-draw" });
			if (status === "active") return /* @__PURE__ */ jsx("div", { className: cn("size-5 bg-primary", shape === "rounded" ? "rounded-sm" : "rounded-full") });
			return /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-current" });
		}
		return index + 1;
	};
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "steps-indicator",
		"aria-hidden": "true",
		className: cn(stepIndicatorVariants({
			shape,
			status
		}), status === "complete" && "delight-check-bounce", status === "active" && "delight-pulse-once"),
		children: renderContent()
	});
}
StepIndicator.displayName = "StepIndicator";
function StepConnector({ orientation, isComplete }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "steps-connector",
		"aria-hidden": "true",
		className: cn(stepConnectorVariants({
			orientation,
			status: isComplete ? "complete" : "incomplete"
		}), isComplete && "delight-connector-fill")
	});
}
StepConnector.displayName = "StepConnector";
function StepsSubtext({ children, className }) {
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "steps-subtext",
		className: cn(stepSubtextVariants(), className),
		children
	});
}
StepsSubtext.displayName = "Steps.Subtext";
function StepsItem({ status: statusOverride, onClick, children, className }) {
	const ctx = useStepsContext();
	const index = React.useContext(StepIndexContext);
	const status = statusOverride ?? ctx.getStepStatus(index);
	const isFirst = index === 0;
	const handleClick = onClick ?? (ctx.onStepClick ? () => ctx.onStepClick?.(index) : void 0);
	let label = null;
	let subtext = null;
	React.Children.forEach(children, (child) => {
		if (React.isValidElement(child) && child.type === StepsSubtext) subtext = child;
		else if (child != null && child !== false) label = child;
	});
	const prevStepStatus = !isFirst ? ctx.getStepStatus(index - 1) : void 0;
	const connector = !isFirst && /* @__PURE__ */ jsx(StepConnector, {
		orientation: ctx.orientation,
		isComplete: prevStepStatus === "complete"
	});
	const isHorizontal = ctx.orientation === "horizontal";
	const indicator = /* @__PURE__ */ jsx(StepIndicator, {
		index,
		status,
		shape: ctx.shape,
		bulletType: ctx.bulletType
	});
	const labelElement = /* @__PURE__ */ jsxs("div", {
		"data-slot": "steps-label",
		className: cn("flex flex-col", isHorizontal ? "items-center gap-0.5 text-center w-0 whitespace-nowrap" : "items-start gap-0.5 ml-2.5"),
		children: [/* @__PURE__ */ jsx("span", {
			className: stepLabelVariants({ status }),
			children: label
		}), subtext]
	});
	const content = isHorizontal ? /* @__PURE__ */ jsxs("div", {
		className: "flex w-full items-start",
		children: [connector, /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col items-center",
			children: [indicator, labelElement]
		})]
	}) : /* @__PURE__ */ jsxs("div", {
		className: "flex flex-col items-start",
		children: [connector, /* @__PURE__ */ jsxs("div", {
			className: "flex items-center",
			children: [indicator, labelElement]
		})]
	});
	const labelText = React.useMemo(() => extractText(label), [label]);
	const statusSuffix = status === "complete" ? ", completed" : status === "active" ? ", current" : "";
	return /* @__PURE__ */ jsx("li", {
		"data-slot": "steps-item",
		"aria-current": status === "active" ? "step" : void 0,
		"aria-label": !handleClick && labelText ? `Step ${index + 1}: ${labelText}${statusSuffix}` : void 0,
		className: cn(isHorizontal && !isFirst && "flex-1", !handleClick && className),
		children: handleClick ? /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: handleClick,
			"aria-label": `Step ${index + 1}: ${labelText || ""}${statusSuffix}`,
			className: cn("cursor-pointer", isHorizontal && "w-full", className, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"),
			children: content
		}) : content
	});
}
StepsItem.displayName = "Steps.Item";
/**
* Steps displays a multi-step progress indicator for wizards and workflows.
* Supports horizontal/vertical orientation, numbered or icon bullets, and clickable steps.
*
* @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps
* @example
* ```tsx
* <Steps
*   steps={[{ label: 'Details' }, { label: 'Payment' }, { label: 'Confirm' }]}
*   currentStep={1}
*   orientation="horizontal"
* />
* ```
*/
function Steps({ steps, currentStep = 0, orientation = "horizontal", shape = "rounded", bulletType = "text", onStepClick, children, className }) {
	const getStepStatus = React.useCallback((index) => {
		if (index < currentStep) return "complete";
		if (index === currentStep) return "active";
		return "incomplete";
	}, [currentStep]);
	const contextValue = React.useMemo(() => ({
		orientation,
		shape,
		bulletType,
		onStepClick,
		getStepStatus
	}), [
		orientation,
		shape,
		bulletType,
		onStepClick,
		getStepStatus
	]);
	const useCompoundAPI = !steps && React.Children.count(children) > 0;
	const renderFlatAPI = () => {
		if (!steps || steps.length === 0) return null;
		return steps.map((step, index) => /* @__PURE__ */ jsx(StepIndexContext.Provider, {
			value: index,
			children: /* @__PURE__ */ jsxs(StepsItem, { children: [step.label, step.subtext && /* @__PURE__ */ jsx(StepsSubtext, { children: step.subtext })] })
		}, `${index}-${step.label}`));
	};
	const renderCompoundAPI = () => {
		return React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(StepIndexContext.Provider, {
			value: index,
			children: child
		}));
	};
	return /* @__PURE__ */ jsx(StepsContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx("nav", {
			"aria-label": "Progress steps",
			"data-slot": "steps",
			tabIndex: 0,
			className: cn("overflow-x-auto", className),
			children: /* @__PURE__ */ jsx("ol", {
				"data-slot": "steps-list",
				className: cn("flex", orientation === "horizontal" ? "flex-row items-start" : "flex-col items-start"),
				children: useCompoundAPI ? renderCompoundAPI() : renderFlatAPI()
			})
		})
	});
}
Steps.displayName = "Steps";
/**
* @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps
*/
var StepsCompound = Object.assign(Steps, {
	Item: StepsItem,
	Subtext: StepsSubtext
});
//#endregion
export { StepsCompound, StepsItem, StepsSubtext, stepConnectorVariants, stepIndicatorVariants, stepLabelVariants, stepSubtextVariants };

//# sourceMappingURL=index457.js.map