@humain/ui 2.1.62 → 2.1.65

package/dist/index202.js

@@ -1,332 +1,232 @@
-import { cn } from "./index2.js";
-import { Button } from "./index5.js";
-import { Separator } from "./index51.js";
-import { Avatar } from "./index70.js";
-import { Kbd } from "./index106.js";
-import { Breadcrumb as BreadcrumbCompound, BreadcrumbEllipsis, BreadcrumbHomeLink, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./index131.js";
-import { DropdownMenu } from "./index191.js";
+import { cn, extractText } from "./index2.js";
+import { createSafeContext } from "./index21.js";
 import { cva } from "class-variance-authority";
-import { ArrowLeft, MoreHorizontal, Search } from "lucide-react";
+import { Check } from "lucide-react";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/organisms/layout/PageHeader/PageHeader.tsx
-var pageHeaderVariants = cva("flex flex-col w-full", {
-	variants: { variant: {
-		simple: "gap-5",
-		avatar: "gap-5",
-		"banner-avatar": "gap-0",
-		"banner-simple": "gap-0",
-		"banner-avatar-centered": "gap-0",
-		"banner-simple-centered": "gap-0"
-	} },
-	defaultVariants: { variant: "simple" }
+//#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 contentVariants = cva("flex flex-wrap items-start w-full", {
-	variants: { variant: {
-		simple: "gap-4",
-		avatar: "gap-4 md:gap-5",
-		"banner-avatar": "gap-4 md:gap-6",
-		"banner-simple": "gap-4 md:gap-6",
-		"banner-avatar-centered": "flex-col items-center text-center gap-4 md:gap-6",
-		"banner-simple-centered": "flex-col items-center text-center gap-4 md:gap-6"
-	} },
-	defaultVariants: { variant: "simple" }
+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 bannerVariants = cva("relative w-full overflow-hidden bg-gradient-to-br from-secondary to-muted", {
-	variants: { variant: {
-		default: "h-40 md:h-60",
-		centered: "h-40 md:h-60"
+var stepLabelVariants = cva("text-base leading-6", {
+	variants: { status: {
+		complete: "text-card-foreground",
+		active: "text-card-foreground",
+		incomplete: "text-muted-foreground"
 	} },
-	defaultVariants: { variant: "default" }
+	defaultVariants: { status: "incomplete" }
 });
-var MAX_VISIBLE_HEADER_ACTIONS = 2;
-function getPageHeaderActionVariant(action, index, actionCount) {
-	return action.variant ?? (index === actionCount - 1 ? "primary" : "secondary");
+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 StepIndicatorContent({ index, status, shape, bulletType }) {
+	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;
 }
-function isPriorityHeaderAction(action, actionCount) {
-	return getPageHeaderActionVariant(action, action.originalIndex, actionCount) === "primary";
-}
-function splitPageHeaderActions(actions) {
-	const indexedActions = actions.map((action, originalIndex) => ({
-		...action,
-		originalIndex
-	}));
-	if (indexedActions.length <= MAX_VISIBLE_HEADER_ACTIONS) return {
-		visibleActions: indexedActions,
-		overflowActions: []
-	};
-	const defaultVisibleActions = indexedActions.slice(0, MAX_VISIBLE_HEADER_ACTIONS);
-	if (defaultVisibleActions.some((action) => isPriorityHeaderAction(action, indexedActions.length))) return {
-		visibleActions: defaultVisibleActions,
-		overflowActions: indexedActions.slice(MAX_VISIBLE_HEADER_ACTIONS)
-	};
-	const priorityAction = [...indexedActions].reverse().find((action) => isPriorityHeaderAction(action, indexedActions.length));
-	if (!priorityAction) return {
-		visibleActions: defaultVisibleActions,
-		overflowActions: indexedActions.slice(MAX_VISIBLE_HEADER_ACTIONS)
-	};
-	const visibleActions = [indexedActions[0], priorityAction].sort((left, right) => left.originalIndex - right.originalIndex);
-	const visibleIndexes = new Set(visibleActions.map((action) => action.originalIndex));
-	return {
-		visibleActions,
-		overflowActions: indexedActions.filter((action) => !visibleIndexes.has(action.originalIndex))
-	};
-}
-function getOverflowActionItemProps(action) {
-	const disabled = Boolean(action.overflowProps?.disabled || action.buttonProps?.disabled || action.buttonProps?.loading);
-	return {
-		...action.overflowProps,
-		disabled
-	};
-}
-function PageHeaderBreadcrumbs({ breadcrumbs }) {
-	if (!breadcrumbs || breadcrumbs.length === 0) return null;
-	return /* @__PURE__ */ jsx(BreadcrumbCompound, {
-		className: "hidden md:flex delight-fade-in motion-reduce:!animate-none",
-		children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbHomeLink, { href: "/" }) }), breadcrumbs.map((item, index) => {
-			const isLast = index === breadcrumbs.length - 1;
-			const hasEllipsis = breadcrumbs.length > 3;
-			if (hasEllipsis && index === 1) return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) })] }, `ellipsis-${index}`);
-			if (hasEllipsis && index > 1 && !isLast) return null;
-			return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: isLast || item.isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, {
-				href: item.href,
-				children: item.label
-			}) })] }, item.label);
-		})] })
+function StepIndicator({ index, status, shape, bulletType }) {
+	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: /* @__PURE__ */ jsx(StepIndicatorContent, {
+			index,
+			status,
+			shape,
+			bulletType
+		})
 	});
 }
-function PageHeaderBackButton({ breadcrumbs, onBackClick, backLabel }) {
-	if (!onBackClick || !breadcrumbs || breadcrumbs.length === 0) return null;
-	return /* @__PURE__ */ jsx(Button, {
-		appearance: "link",
-		variant: "primary",
-		size: "sm",
-		startIcon: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5" }),
-		onClick: onBackClick,
-		"aria-label": `Go back: ${backLabel}`,
-		className: "md:hidden text-secondary-foreground px-0 hover:no-underline",
-		children: backLabel
+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")
 	});
 }
-function PageHeaderActions({ actions }) {
-	if (!actions || actions.length === 0) return null;
-	const { visibleActions, overflowActions } = splitPageHeaderActions(actions);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-3 delight-stagger motion-reduce:!animate-none",
-		style: { "--delight-delay": "120ms" },
-		children: [visibleActions.map((action) => /* @__PURE__ */ jsx(Button, {
-			variant: action.variant ?? getPageHeaderActionVariant(action, action.originalIndex, actions.length),
-			onClick: action.onClick,
-			...action.buttonProps,
-			children: action.label
-		}, `${action.label}-${action.originalIndex}`)), overflowActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: /* @__PURE__ */ jsx(Button, {
-			appearance: "ghost",
-			size: "icon",
-			"aria-label": "More actions",
-			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-5" })
-		}) }), /* @__PURE__ */ jsx(DropdownMenu.Popup, {
-			align: "end",
-			sideOffset: 4,
-			children: /* @__PURE__ */ jsx(DropdownMenu.Items, { children: overflowActions.map((action) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
-				...getOverflowActionItemProps(action),
-				onClick: action.onClick,
-				variant: action.variant === "destructive" ? "destructive" : "default",
-				children: action.label
-			}, `${action.label}-${action.originalIndex}`)) })
-		})] })]
+StepConnector.displayName = "StepConnector";
+function StepsSubtext({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "steps-subtext",
+		className: cn(stepSubtextVariants(), className),
+		children
 	});
 }
-function PageHeaderSearch({ searchId, searchPlaceholder, searchShortcut, onSearch }) {
-	if (!searchPlaceholder) return null;
-	return /* @__PURE__ */ jsx("search", {
-		className: "relative flex-1 min-w-0 max-w-xs delight-stagger motion-reduce:!animate-none",
-		style: { "--delight-delay": "180ms" },
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "group/search relative",
-			children: [
-				/* @__PURE__ */ jsx(Search, {
-					className: "absolute start-3 top-1/2 -translate-y-1/2 size-5 text-text-quaternary pointer-events-none transition-colors duration-150 group-focus-within/search:text-primary motion-reduce:transition-none",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ jsx("input", {
-					id: searchId,
-					type: "text",
-					placeholder: searchPlaceholder,
-					"aria-label": searchPlaceholder,
-					onChange: (e) => onSearch?.(e.target.value),
-					className: cn("peer w-full rounded-lg border border-border bg-background py-2.5 pe-10 ps-10", "text-base text-foreground placeholder:text-muted-foreground", "shadow-xs transition-[border-color,box-shadow] duration-150 motion-reduce:transition-none", "focus-visible:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary")
-				}),
-				searchShortcut && /* @__PURE__ */ jsx(Kbd, {
-					variant: "outline",
-					size: "xs",
-					className: "absolute end-3 top-1/2 -translate-y-1/2 transition-opacity duration-150 peer-focus-visible:opacity-0 motion-reduce:transition-none",
-					"aria-hidden": "true",
-					children: searchShortcut
-				})
-			]
-		})
+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;
 	});
-}
-function getPageHeaderInitials(name) {
-	if (!name) return "";
-	const words = name.split(" ").filter(Boolean);
-	if (words.length >= 2) return `${words[0][0]}${words[1][0]}`.toUpperCase();
-	return name.slice(0, 2).toUpperCase();
-}
-function PageHeaderAvatar({ hasAvatar, isBanner, avatarSrc, avatarFallback, avatarStatusIcon }) {
-	if (!hasAvatar) return null;
-	if (isBanner) return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative shrink-0 rounded-full ring-4 ring-bg-primary shadow-lg", "size-24 md:size-40", "delight-fade-in motion-reduce:!animate-none"),
-		children: [avatarSrc ? /* @__PURE__ */ jsx("img", {
-			src: avatarSrc,
-			alt: avatarFallback || "",
-			className: "size-full rounded-full object-cover"
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "flex size-full items-center justify-center rounded-full bg-accent text-2xl font-semibold text-muted-foreground md:text-4xl",
-			children: getPageHeaderInitials(avatarFallback)
-		}), avatarStatusIcon === "verified" && /* @__PURE__ */ jsx("div", {
-			className: "absolute bottom-0 end-0 flex size-6 items-center justify-center rounded-full border-2 border-primary bg-primary/10 md:size-10",
-			children: /* @__PURE__ */ jsxs("svg", {
-				className: "size-3 text-primary md:size-5",
-				fill: "currentColor",
-				viewBox: "0 0 20 20",
-				"aria-hidden": "true",
-				children: [/* @__PURE__ */ jsx("title", { children: "Verified" }), /* @__PURE__ */ jsx("path", {
-					fillRule: "evenodd",
-					d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-					clipRule: "evenodd"
-				})]
-			})
-		})]
+	const prevStepStatus = !isFirst ? ctx.getStepStatus(index - 1) : void 0;
+	const connector = !isFirst && /* @__PURE__ */ jsx(StepConnector, {
+		orientation: ctx.orientation,
+		isComplete: prevStepStatus === "complete"
 	});
-	return /* @__PURE__ */ jsx(Avatar, {
-		src: avatarSrc,
-		fallback: avatarFallback,
-		alt: avatarFallback,
-		size: "xl",
-		indicator: avatarStatusIcon
+	const isHorizontal = ctx.orientation === "horizontal";
+	const indicator = /* @__PURE__ */ jsx(StepIndicator, {
+		index,
+		status,
+		shape: ctx.shape,
+		bulletType: ctx.bulletType
 	});
-}
-function PageHeaderTextContent({ title, supportingText, isCentered }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-col min-w-0", isCentered ? "items-center" : "flex-1"),
-		children: [/* @__PURE__ */ jsx("h1", {
-			className: "text-xl font-semibold text-foreground leading-relaxed delight-stagger motion-reduce:!animate-none",
-			style: { "--delight-delay": "0ms" },
-			children: title
-		}), supportingText && /* @__PURE__ */ jsx("p", {
-			className: "text-base text-muted-foreground leading-6 max-w-prose delight-stagger motion-reduce:!animate-none",
-			style: { "--delight-delay": "60ms" },
-			children: supportingText
+	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]
 		})]
 	});
-}
-var PageHeader = React.forwardRef(({ variant = "simple", title, supportingText, breadcrumbs, actions, searchPlaceholder, searchShortcut = "⌘K", onSearch, showDivider = true, avatarSrc, avatarFallback, avatarStatusIcon = "verified", onBackClick, backLabel = "Back", className }, ref) => {
-	const searchId = React.useId();
-	const resolvedVariant = variant ?? "simple";
-	const isBanner = resolvedVariant.startsWith("banner");
-	const isCentered = resolvedVariant.includes("centered");
-	const hasAvatar = resolvedVariant.includes("avatar");
-	if (isBanner) return /* @__PURE__ */ jsxs("header", {
-		ref,
-		"data-slot": "page-header",
-		className: cn(pageHeaderVariants({ variant: resolvedVariant }), className),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: bannerVariants({ variant: isCentered ? "centered" : "default" }),
-					"aria-hidden": "true"
-				}), hasAvatar && /* @__PURE__ */ jsx("div", {
-					className: cn("absolute inset-x-0 px-4 md:px-8", "-bottom-12 md:-bottom-20", isCentered && "flex justify-center"),
-					children: /* @__PURE__ */ jsx(PageHeaderAvatar, {
-						hasAvatar,
-						isBanner,
-						avatarSrc,
-						avatarFallback,
-						avatarStatusIcon
-					})
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: cn("px-4 md:px-8", hasAvatar ? "pt-16 md:pt-24" : "pt-6", isCentered && "flex flex-col items-center"),
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "md:hidden mb-4",
-						children: /* @__PURE__ */ jsx(PageHeaderBackButton, {
-							breadcrumbs,
-							onBackClick,
-							backLabel
-						})
-					}),
-					!isCentered && /* @__PURE__ */ jsx("div", {
-						className: "hidden md:block",
-						children: /* @__PURE__ */ jsx(PageHeaderBreadcrumbs, { breadcrumbs })
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: cn(contentVariants({ variant: resolvedVariant }), "mt-4 md:mt-6"),
-						children: [
-							/* @__PURE__ */ jsx(PageHeaderTextContent, {
-								title,
-								supportingText,
-								isCentered
-							}),
-							/* @__PURE__ */ jsx(PageHeaderActions, { actions }),
-							/* @__PURE__ */ jsx(PageHeaderSearch, {
-								searchId,
-								searchPlaceholder,
-								searchShortcut,
-								onSearch
-							})
-						]
-					})
-				]
-			}),
-			showDivider && /* @__PURE__ */ jsx(Separator, { className: "mt-5 delight-connector-fill motion-reduce:!animate-none" })
-		]
+	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
 	});
-	return /* @__PURE__ */ jsxs("header", {
-		ref,
-		"data-slot": "page-header",
-		className: cn(pageHeaderVariants({ variant: resolvedVariant }), className),
-		children: [
-			breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(PageHeaderBreadcrumbs, { breadcrumbs }), /* @__PURE__ */ jsx(PageHeaderBackButton, {
-				breadcrumbs,
-				onBackClick,
-				backLabel
-			})] }),
-			/* @__PURE__ */ jsxs("div", {
-				className: cn(contentVariants({ variant: resolvedVariant })),
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: cn("flex gap-4 items-center flex-1 min-w-0", hasAvatar && "flex-row"),
-						children: [/* @__PURE__ */ jsx(PageHeaderAvatar, {
-							hasAvatar,
-							isBanner,
-							avatarSrc,
-							avatarFallback,
-							avatarStatusIcon
-						}), /* @__PURE__ */ jsx(PageHeaderTextContent, {
-							title,
-							supportingText,
-							isCentered
-						})]
-					}),
-					/* @__PURE__ */ jsx(PageHeaderActions, { actions }),
-					/* @__PURE__ */ jsx(PageHeaderSearch, {
-						searchId,
-						searchPlaceholder,
-						searchShortcut,
-						onSearch
-					})
-				]
-			}),
-			showDivider && /* @__PURE__ */ jsx(Separator, { className: "delight-connector-fill motion-reduce:!animate-none" })
-		]
+}
+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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", 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
 });
-PageHeader.displayName = "PageHeader";
 //#endregion
-export { PageHeader, bannerVariants, contentVariants, pageHeaderVariants };
+export { StepsCompound as Steps, StepsCompound, StepsItem, StepsSubtext, stepConnectorVariants, stepIndicatorVariants, stepLabelVariants, stepSubtextVariants };
 
 //# sourceMappingURL=index202.js.map