@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.1

package/dist/components/Select/Select.js

@@ -0,0 +1,219 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/Select/Select.tsx
+/**
+* Groups the select parts and owns value + popup state. This is Base UI's
+* `Select.Root` re-exported unchanged, so every root feature is available:
+* `value`/`defaultValue`/`onValueChange(value, details)`, `multiple`,
+* `items` (lets `SelectValue` display labels instead of raw values),
+* `name`/`required`/`disabled`/`readOnly` form wiring, and object values via
+* `isItemEqualToValue`/`itemToStringLabel`/`itemToStringValue`.
+*/
+const Select$1 = Select.Root;
+function ChevronDownIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+function ChevronUpIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+	});
+}
+function CheckIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
+	});
+}
+/**
+* Visible label for the select — Base UI associates it with the trigger
+* automatically, and clicking it focuses the trigger without opening the
+* popup. Renders a `<div>`. When no visible label is rendered, give the
+* trigger an accessible name with `aria-label` instead.
+*/
+const SelectLabel = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Select.Label, {
+	ref,
+	className: cn("cursor-default font-sans text-sm font-medium text-foreground", className),
+	...rest
+}));
+SelectLabel.displayName = "SelectLabel";
+const triggerBaseClasses = "inline-flex cursor-pointer items-center justify-between gap-2 rounded-md whitespace-nowrap select-none font-sans text-foreground transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-readonly:cursor-default data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const triggerVariantClasses = {
+	outline: "border border-border bg-background hover:bg-primary-50 data-popup-open:bg-primary-50",
+	ghost: "border border-transparent bg-transparent hover:bg-primary-50 data-popup-open:bg-primary-50"
+};
+const triggerSizeClasses = {
+	sm: "h-8 px-2.5 text-sm",
+	md: "h-10 px-3 text-sm",
+	lg: "h-12 px-4 text-base [&_svg:not([class*='size-'])]:size-5"
+};
+/**
+* Class list for an element styled as the select trigger — for select-shaped
+* controls that don't come from Base UI (custom comboboxes, fake dropdowns
+* in previews) so every value-picker in the product shares one look.
+*/
+function selectTriggerVariants({ variant = "outline", size = "md", fullWidth = false, className } = {}) {
+	return cn(triggerBaseClasses, triggerVariantClasses[variant], triggerSizeClasses[size], fullWidth && "w-full", className);
+}
+function mergeAnchorWidth(anchorWidth, style) {
+	if (anchorWidth == null) return style;
+	const anchorStyle = { width: anchorWidth };
+	return typeof style === "function" ? (state) => ({
+		...anchorStyle,
+		...style(state)
+	}) : {
+		...anchorStyle,
+		...style ?? {}
+	};
+}
+/**
+* The button that shows the current value and opens the popup. Place a
+* `SelectValue` inside it and the dropdown chevron is appended
+* automatically. The trigger's accessible name comes from a sibling
+* `SelectLabel` (or a composed `Field.Label`); without one, pass
+* `aria-label`.
+*/
+const SelectTrigger = forwardRef(({ variant = "outline", size = "md", fullWidth = false, anchorWidth, icon, style, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Select.Trigger, {
+	ref,
+	className: cn(selectTriggerVariants({
+		variant,
+		size,
+		fullWidth
+	}), className),
+	style: mergeAnchorWidth(anchorWidth, style),
+	...rest,
+	children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+		"aria-hidden": "true",
+		className: "flex text-muted-foreground",
+		children: icon ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	})]
+}));
+SelectTrigger.displayName = "SelectTrigger";
+/**
+* The selected value's text inside the trigger. Set `placeholder` for the
+* empty state (rendered muted). With `items` on the root it shows the
+* matching label instead of the raw value; pass a function as `children`
+* to format the value yourself — the multi-select "+N more" pattern lives
+* there.
+*/
+const SelectValue = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Select.Value, {
+	ref,
+	className: cn("min-w-0 truncate text-primary data-placeholder:text-muted-foreground", className),
+	...rest
+}));
+SelectValue.displayName = "SelectValue";
+const popupSurfaceClasses = "relative overflow-clip rounded-md border border-border bg-background font-sans text-sm text-foreground shadow-md outline-none";
+const popupBehaviorClasses = "flex max-h-[min(var(--select-max-height,9999px),var(--available-height))] flex-col min-w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+const listClasses = "min-h-0 scroll-py-6 overflow-y-auto p-1";
+const scrollArrowBaseClasses = "z-[1] flex h-6 w-full cursor-default items-center justify-center bg-background text-muted-foreground";
+const scrollUpArrowClasses = cn(scrollArrowBaseClasses, "top-0");
+const scrollDownArrowClasses = cn(scrollArrowBaseClasses, "bottom-0");
+/**
+* The floating option list, with the portal, positioning, list, and
+* hover-scroll arrow plumbing folded in. Always drops below the trigger and
+* flips above it only when the space below runs out — never sideways. Long
+* lists scroll inside the popup, up to `maxHeight`.
+*/
+const SelectPopup = forwardRef(({ align = "center", sideOffset = 4, alignOffset = 0, collisionPadding, maxHeight, container, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(Select.Portal, {
+	container,
+	children: /* @__PURE__ */ jsx(Select.Positioner, {
+		side: "bottom",
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		alignItemWithTrigger: false,
+		collisionAvoidance: {
+			side: "flip",
+			fallbackAxisSide: "none"
+		},
+		className: "z-50 select-none",
+		style: maxHeight != null ? { "--select-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+		children: /* @__PURE__ */ jsxs(Select.Popup, {
+			ref,
+			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+					className: scrollUpArrowClasses,
+					children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+				}),
+				/* @__PURE__ */ jsx(Select.List, {
+					className: listClasses,
+					children
+				}),
+				/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+					className: scrollDownArrowClasses,
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+				})
+			]
+		})
+	})
+}));
+SelectPopup.displayName = "SelectPopup";
+const itemClasses = "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 font-sans text-sm text-foreground outline-none select-none scroll-my-1 data-highlighted:bg-primary-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+/**
+* One option in the popup. Children render as the option's label (wrapped in
+* Base UI's `ItemText`); a check mark appears at the item's right edge while
+* selected. Set `label` when children aren't plain text so keyboard
+* typeahead has something to match, and `disabled` for unavailable options.
+*/
+const SelectItem = forwardRef(({ className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Select.Item, {
+	ref,
+	className: cn(itemClasses, className),
+	...rest,
+	children: [/* @__PURE__ */ jsx(Select.ItemText, { children }), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+		className: "absolute right-2 flex size-4 items-center justify-center text-primary",
+		children: /* @__PURE__ */ jsx(CheckIcon, {})
+	})]
+}));
+SelectItem.displayName = "SelectItem";
+/** Groups related options under a `SelectGroupLabel`, announced together by assistive technology. */
+const SelectGroup = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Select.Group, {
+	ref,
+	className,
+	...rest
+}));
+SelectGroup.displayName = "SelectGroup";
+/** Heading for a `SelectGroup` — visually a meta caption, wired to the group via `aria-labelledby`. */
+const SelectGroupLabel = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Select.GroupLabel, {
+	ref,
+	className: cn("px-2 py-1.5 font-sans text-xs font-medium text-muted-foreground", className),
+	...rest
+}));
+SelectGroupLabel.displayName = "SelectGroupLabel";
+/** Divider between option groups, exposed to screen readers as a separator. */
+const SelectSeparator = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Select.Separator, {
+	ref,
+	className: cn("-mx-1 my-1 h-px bg-border", className),
+	...rest
+}));
+SelectSeparator.displayName = "SelectSeparator";
+//#endregion
+export { Select$1 as Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+import { Select, SelectAlign, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectPopup, SelectPopupProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectTriggerSize, SelectTriggerVariant, SelectTriggerVariantsOptions, SelectValue, SelectValueProps, selectTriggerVariants } from "./Select.js";
+export { Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, selectTriggerVariants };

package/dist/components/Select/index.js

@@ -0,0 +1,2 @@
+import { Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants } from "./Select.js";
+export { Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Skeleton/Skeleton.d.ts
+type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+type SkeletonAnimation = "pulse" | "wave" | "none";
+interface SkeletonRenderState extends Record<string, unknown> {
+  /** Whether the placeholder is currently concealing its content. */
+  loading: boolean;
+}
+interface SkeletonVariantsOptions {
+  /** Shape recipe for text, avatars, sharp media, or rounded surfaces. */
+  variant?: SkeletonVariant;
+  /** Indeterminate motion. All animation stops when reduced motion is requested. */
+  animation?: SkeletonAnimation;
+  /** Apply placeholder appearance; `false` keeps only the structural wrapper classes. */
+  loading?: boolean;
+  /** Additional classes merged after the Skeleton recipe. */
+  className?: string;
+}
+/** Class list for an element styled as a Skeleton placeholder. */
+declare function skeletonVariants({ variant, animation, loading, className }?: SkeletonVariantsOptions): string;
+interface SkeletonBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "className"> {
+  /** Shape of the placeholder. `text` has a usable 16px minimum height and fills its container; other shapes infer dimensions from children or `className`/`style`. */
+  variant?: SkeletonVariant;
+  /** `pulse` is the calm default, `wave` adds directional progress, and `none` is static. Motion is disabled automatically for `prefers-reduced-motion`. */
+  animation?: SkeletonAnimation;
+  /** Show the placeholder and make wrapped content inert. Set to `false` to reveal the content without replacing the host element. */
+  loading?: boolean;
+  /** Optional content whose dimensions the placeholder should preserve. Interactive descendants cannot be focused or activated while loading. */
+  children?: ReactNode;
+  /** Replace the rendered `div` or inspect `{ loading }` in a render callback. */
+  render?: useRender.RenderProp<SkeletonRenderState>;
+  /** Additional classes for dimensions, layout, or a context-specific semantic background. */
+  className?: string;
+}
+type SkeletonProps = SkeletonBaseProps;
+declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonBaseProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonRenderState, SkeletonVariant, SkeletonVariantsOptions, skeletonVariants };

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,44 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef, version } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Skeleton/Skeleton.tsx
+const rootClasses = "relative inline-block align-middle";
+const loadingClasses = "overflow-hidden bg-muted text-transparent select-none [&>*]:invisible";
+const variantClasses = {
+	text: "min-h-4 w-full rounded-md",
+	circular: "aspect-square rounded-full",
+	rectangular: "rounded-none",
+	rounded: "rounded-md"
+};
+const animationClasses = {
+	pulse: "motion-safe:animate-pulse",
+	wave: "before:pointer-events-none before:absolute before:inset-0 before:-translate-x-full before:bg-[linear-gradient(90deg,transparent,var(--color-surface),transparent)] before:content-[''] motion-safe:before:animate-skeleton-wave motion-safe:before:will-change-transform",
+	none: ""
+};
+const supportsBooleanInert = Number.parseInt(version, 10) >= 19;
+/** Class list for an element styled as a Skeleton placeholder. */
+function skeletonVariants({ variant = "text", animation = "pulse", loading = true, className } = {}) {
+	return cn(rootClasses, loading && loadingClasses, loading && variantClasses[variant], loading && animationClasses[animation], className);
+}
+const Skeleton = forwardRef(({ variant = "text", animation = "pulse", loading = true, render, className, ...rest }, ref) => {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		state: { loading },
+		props: {
+			"aria-hidden": loading || void 0,
+			inert: loading ? supportsBooleanInert ? true : "true" : void 0,
+			className: skeletonVariants({
+				variant,
+				animation,
+				loading,
+				className
+			}),
+			...rest
+		}
+	});
+});
+Skeleton.displayName = "Skeleton";
+//#endregion
+export { Skeleton, skeletonVariants };

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonRenderState, SkeletonVariant, SkeletonVariantsOptions, skeletonVariants } from "./Skeleton.js";
+export { Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, skeletonVariants };

package/dist/components/Skeleton/index.js

@@ -0,0 +1,2 @@
+import { Skeleton, skeletonVariants } from "./Skeleton.js";
+export { Skeleton, skeletonVariants };

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,161 @@
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Stepper/Stepper.d.ts
+type StepperOrientation = "horizontal" | "vertical";
+type StepperSize = "sm" | "md" | "lg";
+interface StepperTriggerVariantsOptions {
+  size?: StepperSize;
+  className?: string;
+}
+/**
+ * Class list for an element laid out and focus-styled as a StepperTrigger.
+ *
+ * Use it when a foreign interactive element must sit in a step's place — e.g.
+ * a router link that re-enters a completed step:
+ *
+ *   <a href="/checkout/plan" className={stepperTriggerVariants()}>
+ *     <StepperIndicator />
+ *     <StepperTitle>Choose plan</StepperTitle>
+ *   </a>
+ */
+declare function stepperTriggerVariants({ size, className }?: StepperTriggerVariantsOptions): string;
+interface StepperProps extends Omit<ComponentPropsWithoutRef<"ol">, "className"> {
+  /**
+   * Zero-based index of the current step. Steps before it read as completed,
+   * steps after it as upcoming (per-item `completed` overrides). Set it to
+   * the step count once the flow finishes so every step reads completed.
+   * The stepper holds no internal state — the surrounding flow owns the step.
+   */
+  value?: number;
+  /**
+   * Called with a step's index when its `StepperTrigger` is activated.
+   * Update `value` from it (gate the update to keep a step unreachable).
+   * Without triggers the stepper is a static indicator and this never fires.
+   */
+  onValueChange?: (value: number, event: MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Enforce sequential order (the NN/g wizard default): triggers on steps
+   * after the current one are blocked, while completed steps stay
+   * revisitable. Blocked steps keep the upcoming look — only the explicit
+   * `disabled` prop fades a step. Set `false` for free navigation.
+   */
+  linear?: boolean;
+  /** Layout axis. Vertical suits long labels, descriptions, and inline step content. */
+  orientation?: StepperOrientation;
+  /**
+   * Indicator diameter: `sm` 24px · `md` 32px · `lg` 40px. `sm` sits exactly
+   * on the WCAG 2.5.8 24px target-size floor — with triggers, the label
+   * extends the target, but prefer `md`+ for touch-first surfaces.
+   */
+  size?: StepperSize;
+  /** Visually-hidden status appended to completed steps (USWDS wording). Localize it with the page. */
+  completedLabel?: string;
+  /** Visually-hidden status appended to upcoming steps. Localize it with the page. */
+  incompleteLabel?: string;
+  /** Visually-hidden status appended to invalid steps. Localize it with the page. */
+  invalidLabel?: string;
+  /** Replace the rendered `ol`. Preserve list semantics — they give screen-reader users the "step 2 of 4" position for free. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the root recipe, e.g. `max-w-md`. */
+  className?: string;
+}
+/**
+ * Progress through a multi-step flow, marked up as an ordered list with
+ * `aria-current="step"` on the current step and visually-hidden state text on
+ * the others. It defaults to `aria-label="Progress"`; pass a localized
+ * `aria-label` (or `aria-labelledby`) when the page language isn't English.
+ */
+declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLOListElement>>;
+interface StepperItemProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
+  /** Zero-based position of this step. Drives the derived state and the number the indicator shows. */
+  index: number;
+  /**
+   * Override the derived completed state — e.g. mark a skipped optional step
+   * incomplete with `completed={false}`, or a finished later step in a free
+   * flow with `completed`. Omit to derive from the stepper's `value`.
+   */
+  completed?: boolean;
+  /** Fade the step and block its trigger. For sequence-enforcement leave it to `linear` instead, which blocks without fading. */
+  disabled?: boolean;
+  /** Mark the step as failed: destructive styling, an error glyph, and the `invalidLabel` status for screen readers. */
+  invalid?: boolean;
+  /** Replace the rendered `li`. Preserve list-item semantics. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the item recipe. */
+  className?: string;
+}
+/**
+ * One step in the flow. When it holds no `StepperTrigger` the item itself
+ * carries `aria-current="step"` (the USWDS static-indicator pattern); with a
+ * trigger, the trigger takes over so keyboard focus announces the state.
+ */
+declare const StepperItem: import("react").ForwardRefExoticComponent<StepperItemProps & import("react").RefAttributes<HTMLLIElement>>;
+interface StepperTriggerProps extends Omit<ComponentPropsWithoutRef<"button">, "className"> {
+  /** Replace the rendered `button`, e.g. `render={<a href="…" />}` when steps are routed pages. Keep it interactive — static steps simply omit the trigger. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the trigger recipe. */
+  className?: string;
+}
+/**
+ * Makes a step navigable: activating it calls the stepper's `onValueChange`
+ * with this step's index. Under `linear` (the default) upcoming steps are
+ * blocked automatically; completed steps stay revisitable, which is the
+ * universal wizard convention. Carries `aria-current="step"` on the current
+ * step so the state is announced on focus, not only while browsing the list.
+ */
+declare const StepperTrigger: import("react").ForwardRefExoticComponent<StepperTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface StepperIndicatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className" | "children"> {
+  /**
+   * Custom glyph — an icon, a spinner, a letter. It replaces the default
+   * number/check/error glyph in every state (state still shows through the
+   * fill colors and the visually-hidden status text). Mark decorative glyphs
+   * `aria-hidden` yourself; the defaults already are.
+   */
+  children?: ReactNode;
+  /** Replace the rendered `span`. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the indicator recipe, e.g. `size-3` with an empty fragment as children for a dots-only stepper. */
+  className?: string;
+}
+/**
+ * The step's circular marker: the step number, a check once completed, an
+ * error glyph when invalid. Numbers and glyphs are decorative — the
+ * visually-hidden status text rendered alongside them (`completedLabel` /
+ * `incompleteLabel` / `invalidLabel`) plus the list position carry the state
+ * for screen readers, following the USWDS step indicator.
+ */
+declare const StepperIndicator: import("react").ForwardRefExoticComponent<StepperIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface StepperTitleProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Replace the rendered `span`. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the title recipe, e.g. `sr-only` to keep labels for assistive technology in a compact stepper. */
+  className?: string;
+}
+/** The step's label. Carbon guidance: keep it to one or two words. */
+declare const StepperTitle: import("react").ForwardRefExoticComponent<StepperTitleProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface StepperDescriptionProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Replace the rendered `span`. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the description recipe. */
+  className?: string;
+}
+/**
+ * Secondary line under the title: helper copy, or the "Optional" marker the
+ * W3C multi-page-forms guidance asks for on skippable steps.
+ */
+declare const StepperDescription: import("react").ForwardRefExoticComponent<StepperDescriptionProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface StepperSeparatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Replace the rendered `span`. Keep it hidden from assistive technology — connectors are purely visual. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the separator recipe. */
+  className?: string;
+}
+/**
+ * Connector after a step (omit it on the last item). It fills toward the
+ * next step horizontally and hangs below the indicator vertically — where it
+ * tracks the item's height, so inline step content stretches it. The line
+ * turns primary once its step completes.
+ */
+declare const StepperSeparator: import("react").ForwardRefExoticComponent<StepperSeparatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Stepper, StepperDescription, StepperDescriptionProps, StepperIndicator, StepperIndicatorProps, StepperItem, StepperItemProps, StepperOrientation, StepperProps, StepperSeparator, StepperSeparatorProps, StepperSize, StepperTitle, StepperTitleProps, StepperTrigger, StepperTriggerProps, StepperTriggerVariantsOptions, stepperTriggerVariants };