@ctrl-ui/react 0.8.0

package/dist/ui/sidebar.js

@@ -0,0 +1,362 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinIndicator, skinSidebarLayout, skinSidebarWidth } from "../skin.js";
+import { Button } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { Suspense, createContext, lazy, useContext, useEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+//#region src/ui/sidebar.tsx
+const sidebarMenuButtonVariants = ["default", "outline"];
+const sidebarMenuButtonSizes = [
+	"default",
+	"sm",
+	"lg"
+];
+const TrackHighlight = lazy(() => import("../extensions/track-highlight.js").then((module) => ({ default: module.TrackHighlight })));
+const SIDEBAR_COOKIE_MAX_AGE = 604800;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_MOBILE_BREAKPOINT = 1024;
+const sidebarTriggerWidth = {
+	xs: "w-[var(--control-h-xs)]",
+	sm: "w-[var(--control-h-sm)]",
+	md: "w-[var(--control-h-md)]",
+	lg: "w-[var(--control-h-lg)]"
+};
+const SidebarContext = createContext(null);
+function useSidebar() {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, ref, className, style, children, ...props }) {
+	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
+	const [openMobile, setOpenMobile] = useState(false);
+	const [_open, _setOpen] = useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = (value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else _setOpen(openState);
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	};
+	const toggleSidebar = () => isMobile ? setOpenMobile((prev) => !prev) : setOpen(!open);
+	const toggleRef = useRef(toggleSidebar);
+	useEffect(() => {
+		toggleRef.current = toggleSidebar;
+	});
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleRef.current();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, []);
+	const contextValue = {
+		state: open ? "expanded" : "collapsed",
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	};
+	const wrapperStyle = {
+		"--sidebar-width": skinSidebarWidth() ?? SIDEBAR_WIDTH,
+		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+		...style
+	};
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delay: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-control-ui": "sidebar",
+				"data-control-family": "sidebar",
+				"data-slot": "wrapper",
+				style: wrapperStyle,
+				className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, className, children, style, ...props }) {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	const resolvedVariant = variant ?? skinSidebarLayout() ?? "sidebar";
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "root",
+		"data-surface": "panel",
+		className: cn("flex h-full w-(--sidebar-width) flex-col", className),
+		style,
+		...props,
+		children
+	});
+	if (isMobile) {
+		const mobileSheetStyle = {
+			"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+			...style
+		};
+		return /* @__PURE__ */ jsx(Sheet, {
+			open: openMobile,
+			onOpenChange: setOpenMobile,
+			children: /* @__PURE__ */ jsxs(SheetContent, {
+				ref,
+				"data-control-ui": "sidebar",
+				"data-control-family": "sidebar",
+				"data-slot": "root",
+				"data-surface": "panel",
+				side,
+				className: "w-(--sidebar-width) gap-0 p-0",
+				style: mobileSheetStyle,
+				children: [/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "sr-only",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+				}), /* @__PURE__ */ jsx("div", {
+					"data-control-ui": "sidebar",
+					"data-control-family": "sidebar",
+					"data-slot": "inner",
+					className: "flex h-full w-full flex-col",
+					children
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group peer hidden lg:block",
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "root",
+		"data-surface": "panel",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": resolvedVariant,
+		"data-side": side,
+		style,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "gap",
+			className: cn("relative w-(--sidebar-width)", "group-data-[collapsible=offcanvas]:w-0", resolvedVariant === "floating" || resolvedVariant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
+		}), /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "container",
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) lg:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", resolvedVariant === "floating" || resolvedVariant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-control-ui": "sidebar",
+				"data-control-family": "sidebar",
+				"data-slot": "inner",
+				className: "flex h-full w-full flex-col",
+				children
+			})
+		})]
+	});
+}
+function SidebarTrigger({ className, onClick, size = "sm", ...props }) {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-control-ui": "sidebar",
+		"data-slot": "trigger",
+		variant: "ghost",
+		size,
+		className: cn(sidebarTriggerWidth[size], "px-0", className),
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+}
+function SidebarRail({ className, ...props }) {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: toggleSidebar,
+		title: "Toggle Sidebar",
+		className: cn("absolute inset-y-0 z-20 hidden -translate-x-1/2 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 lg:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", className),
+		...props
+	});
+}
+function SidebarInset({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "inset",
+		className: cn("relative flex w-full flex-1 flex-col", className),
+		...props
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "header",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "footer",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function SidebarContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-control-ui": "sidebar",
+		"data-slot": "content",
+		className: cn("min-h-0 flex-1 group-data-[collapsible=icon]:overflow-hidden", className),
+		lockAxis: "x",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "content-stack",
+			className: "flex flex-col",
+			children
+		})
+	});
+}
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "group",
+		className: cn("relative flex w-full min-w-0 flex-col", className),
+		...props
+	});
+}
+function SidebarGroupLabel({ className, render, children, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "group-label",
+			className: cn("flex h-[var(--control-h-sm)] shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-[var(--control-h-sm)] group-data-[collapsible=icon]:opacity-0", className),
+			children
+		}
+	});
+}
+const SidebarMenuContext = createContext("none");
+function SidebarMenu({ className, indicator, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("sidebar") ?? "none";
+	const sliding = resolvedIndicator === "slide";
+	const list = /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu",
+		"data-indicator": resolvedIndicator,
+		className: cn("flex w-full min-w-0 flex-col", sliding ? void 0 : className),
+		...props,
+		children: /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
+			value: resolvedIndicator,
+			children
+		})
+	});
+	if (!sliding) return list;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu-track",
+		"data-indicator": resolvedIndicator,
+		className: cn("relative isolate", className),
+		children: [/* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(TrackHighlight, {
+				itemSelector: "[data-control-ui=\"sidebar\"][data-slot=\"menu-button\"]",
+				activeSelector: "[data-control-ui=\"sidebar\"][data-slot=\"menu-button\"][data-active]"
+			})
+		}), list]
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu-item",
+		className: cn("group/menu-item relative", className),
+		...props
+	});
+}
+const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: null,
+			outline: null
+		},
+		size: {
+			default: "group-data-[collapsible=icon]:size-[var(--control-h-md)]!",
+			sm: "group-data-[collapsible=icon]:size-[var(--control-h-sm)]!",
+			lg: "group-data-[collapsible=icon]:size-[var(--control-h-lg)]!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }) {
+	const { isMobile, state } = useSidebar();
+	const button = useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "menu-button",
+			"data-size": size,
+			"data-variant": variant,
+			"data-active": isActive || void 0,
+			className: cn(sidebarMenuButtonClasses({
+				variant,
+				size
+			}), className),
+			children
+		}
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		children: tooltip
+	})] });
+}
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/skeleton.d.ts

@@ -0,0 +1,8 @@
+import { SkeletonKnobStyle } from "../knob-contracts/skeleton-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/skeleton.d.ts
+declare function Skeleton({ className, ...props }: Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & SkeletonKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { Skeleton };

package/dist/ui/skeleton.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "skeleton",
+		"data-control-family": "skeleton",
+		"data-slot": "root",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Skeleton };

package/dist/ui/slider.d.ts

@@ -0,0 +1,24 @@
+import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
+import { CSSProperties } from "react";
+//#region src/ui/slider.d.ts
+type SliderVariant = "default" | "plain";
+type SliderProps = Omit<{
+  variant?: SliderVariant;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  label?: string;
+  showValue?: boolean;
+  formatValue?: (value: number) => string;
+  className?: string;
+  "aria-label"?: string;
+}, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+declare function Slider({ className, variant, label, showValue, formatValue, value, defaultValue, onValueChange, min, max, step, disabled, style, ...props }: SliderProps): import("react").JSX.Element;
+//#endregion
+export { Slider, SliderProps, SliderVariant };

package/dist/ui/slider.js

@@ -0,0 +1,114 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+//#region src/ui/slider.tsx
+const MAX_VISIBLE_STEP_TICKS = 50;
+function tickPositions(min, max, step) {
+	if (typeof step !== "number" || step <= 0 || !Number.isFinite(step)) return [];
+	const range = max - min;
+	if (range <= 0) return [];
+	const stepCount = Math.round(range / step);
+	if (stepCount <= 1 || stepCount > MAX_VISIBLE_STEP_TICKS) return [];
+	return Array.from({ length: stepCount - 1 }, (_, i) => (i + 1) / stepCount * 100);
+}
+function displaySliderValue(values, formatValue) {
+	const value = values[0];
+	if (value === void 0) return "";
+	return formatValue ? formatValue(value) : Math.round(value);
+}
+function Slider({ className, variant = "default", label, showValue, formatValue, value, defaultValue, onValueChange, min = 0, max = 100, step, disabled, style, ...props }) {
+	const showValueResolved = showValue ?? Boolean(label);
+	const labeled = variant === "plain" && (label !== void 0 || showValue === true);
+	const ticks = labeled ? tickPositions(min, max, step) : [];
+	const trackStyle = style;
+	const indicatorStyle = style;
+	const thumbStyle = style;
+	return /* @__PURE__ */ jsxs(Slider$1.Root, {
+		"data-control-ui": "slider",
+		"data-range-kind": "slider",
+		"data-slot": "root",
+		"data-control-family": "range",
+		"data-variant": variant,
+		"data-labeled": labeled ? "true" : void 0,
+		value,
+		defaultValue,
+		min,
+		max,
+		step,
+		disabled,
+		onValueChange: onValueChange ? (next) => onValueChange(Array.isArray(next) ? next[0] : next) : void 0,
+		className: cn("group relative flex w-full cursor-pointer touch-none select-none items-center data-[disabled]:cursor-not-allowed", className),
+		style,
+		...props,
+		children: [/* @__PURE__ */ jsx(Slider$1.Control, {
+			"data-control-ui": "slider",
+			"data-control-family": "range",
+			"data-range-kind": "slider",
+			"data-slot": "control",
+			"data-labeled": labeled ? "true" : void 0,
+			className: "flex w-full items-center",
+			children: /* @__PURE__ */ jsxs(Slider$1.Track, {
+				"data-control-ui": "slider",
+				"data-control-family": "range",
+				"data-range-kind": "slider",
+				"data-slot": "track",
+				"data-variant": variant,
+				"data-labeled": labeled ? "true" : void 0,
+				className: "relative w-full grow overflow-hidden",
+				style: trackStyle,
+				children: [
+					/* @__PURE__ */ jsx(Slider$1.Indicator, {
+						"data-control-ui": "slider",
+						"data-control-family": "range",
+						"data-range-kind": "slider",
+						"data-slot": "indicator",
+						"data-variant": variant,
+						style: indicatorStyle
+					}),
+					ticks.map((pct) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						"data-control-ui": "slider",
+						"data-control-family": "range",
+						"data-range-kind": "slider",
+						"data-slot": "tick",
+						className: "pointer-events-none absolute bottom-0",
+						style: { left: `${pct}%` }
+					}, pct)),
+					/* @__PURE__ */ jsx(Slider$1.Thumb, {
+						"data-control-ui": "slider",
+						"data-control-family": "range",
+						"data-range-kind": "slider",
+						"data-slot": "thumb",
+						"data-variant": variant,
+						className: cn("block", variant === "plain" && "after:absolute after:-inset-3 after:content-['']"),
+						style: thumbStyle
+					})
+				]
+			})
+		}), labeled && /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "slider",
+			"data-control-family": "range",
+			"data-range-kind": "slider",
+			"data-slot": "label-overlay",
+			className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-between",
+			children: [label ? /* @__PURE__ */ jsx(Slider$1.Label, {
+				"data-control-ui": "slider",
+				"data-control-family": "range",
+				"data-range-kind": "slider",
+				"data-slot": "label",
+				className: "select-none",
+				children: label
+			}) : /* @__PURE__ */ jsx("span", {}), showValueResolved && /* @__PURE__ */ jsx(Slider$1.Value, {
+				"data-control-ui": "slider",
+				"data-control-family": "range",
+				"data-range-kind": "slider",
+				"data-slot": "value",
+				className: "select-none",
+				children: (_, values) => displaySliderValue(values, formatValue)
+			})]
+		})]
+	});
+}
+//#endregion
+export { Slider };

package/dist/ui/spinner.d.ts

@@ -0,0 +1,12 @@
+import { ControlSize } from "../control-variants.js";
+import { SpinnerKnobStyle } from "../knob-contracts/spinner-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/spinner.d.ts
+type SpinnerProps = Omit<ComponentProps<"span"> & {
+  size?: ControlSize;
+}, "style"> & {
+  style?: CSSProperties & SpinnerKnobStyle;
+};
+declare function Spinner({ size, className, ...props }: SpinnerProps): import("react").JSX.Element;
+//#endregion
+export { Spinner, SpinnerProps };

package/dist/ui/spinner.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+//#region src/ui/spinner.tsx
+function Spinner({ size = "sm", className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-control-ui": "spinner",
+		"data-control-family": "spinner",
+		"data-slot": "root",
+		className: cn("inline-flex", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Loader2, {
+			"aria-hidden": "true",
+			"data-control-ui": "spinner",
+			"data-control-family": "spinner",
+			"data-slot": "indicator",
+			"data-size": size
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading"
+		})]
+	});
+}
+//#endregion
+export { Spinner };

package/dist/ui/stepper.d.ts

@@ -0,0 +1,58 @@
+import { StepperKnobStyle } from "../knob-contracts/stepper-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/stepper.d.ts
+type StepperOrientation = "horizontal" | "vertical";
+type StepperContentMode = "current" | "all";
+type StepperState = "neutral" | "complete" | "current" | "upcoming";
+type StepperProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number) => void;
+  orientation?: StepperOrientation;
+  contentMode?: StepperContentMode;
+  responsive?: boolean;
+} & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperListProps = ComponentProps<"ol"> & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperItemProps = Omit<ComponentProps<"li">, "value"> & {
+  step: number;
+  disabled?: boolean;
+  invalid?: boolean;
+} & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperSeparatorProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperTitleProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperDescriptionProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+type StepperContentProps = ComponentProps<"section"> & {
+  step: number;
+  keepMounted?: boolean;
+} & {
+  style?: CSSProperties & StepperKnobStyle;
+};
+declare function Stepper({ value, defaultValue, onValueChange, orientation, contentMode, responsive, id, className, children, ...props }: StepperProps): import("react").JSX.Element;
+declare function StepperList({ className, ...props }: StepperListProps): import("react").JSX.Element;
+declare function StepperItem({ step, disabled, invalid, className, children, ...props }: StepperItemProps): import("react").JSX.Element;
+declare function StepperTrigger({ disabled: disabledProp, className, onClick, type, ...props }: StepperTriggerProps): import("react").JSX.Element;
+declare function StepperIndicator({ className, children, ...props }: StepperIndicatorProps): import("react").JSX.Element;
+declare function StepperSeparator({ className, ...props }: StepperSeparatorProps): import("react").JSX.Element;
+declare function StepperTitle({ className, ...props }: StepperTitleProps): import("react").JSX.Element;
+declare function StepperDescription({ className, ...props }: StepperDescriptionProps): import("react").JSX.Element;
+declare function StepperContent({ step, keepMounted, className, ...props }: StepperContentProps): import("react").JSX.Element | null;
+//#endregion
+export { Stepper, StepperContent, StepperContentMode, StepperContentProps, StepperDescription, StepperDescriptionProps, StepperIndicator, StepperIndicatorProps, StepperItem, StepperItemProps, StepperList, StepperListProps, StepperOrientation, StepperProps, StepperSeparator, StepperSeparatorProps, StepperState, StepperTitle, StepperTitleProps, StepperTrigger, StepperTriggerProps };