@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/sidebar.js

@@ -1,13 +1,17 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinSidebarLayout } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
-import { SidebarProvider, useSidebar } from "./sidebar-provider.js";
+import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
+import { SidebarResizeRail } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
+import { createPortal } from "react-dom";
 //#region src/ui/sidebar.tsx
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const sidebarTriggerWidth = {
@@ -16,19 +20,64 @@ const sidebarTriggerWidth = {
 	md: "w-[var(--control-h-md)]",
 	lg: "w-[var(--control-h-lg)]"
 };
-function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, className, children, style, ...props }) {
+function Sidebar({ side = "left", collapsible = "offcanvas", ...props }) {
+	const [railContainer, setRailContainer] = useState(null);
+	return /* @__PURE__ */ jsx(SidebarSurfaceContext.Provider, {
+		value: {
+			side,
+			collapsible,
+			railContainer
+		},
+		children: /* @__PURE__ */ jsx(SidebarSurface, {
+			...props,
+			railContainerRef: setRailContainer
+		})
+	});
+}
+function SidebarSurface({ variant, ref, className, children, style, railContainerRef, ...props }) {
+	const { side, collapsible } = useSidebarSurface();
+	const { offcanvasRef } = useSidebarElements();
+	const skin = useSkin();
 	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-	const resolvedVariant = variant ?? skinSidebarLayout() ?? "sidebar";
-	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+	const resolvedVariant = variant ?? skin.sidebarLayout ?? "sidebar";
+	const container = useRender({
+		defaultTagName: "div",
+		ref: collapsible === "offcanvas" ? [ref ?? null, offcanvasRef] : ref,
+		props: {
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "container",
+			tabIndex: -1,
+			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),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				"data-control-ui": "sidebar",
+				"data-control-family": "sidebar",
+				"data-slot": "inner",
+				className: "flex h-full w-full flex-col",
+				inert: state === "collapsed" && collapsible === "offcanvas",
+				children
+			}), /* @__PURE__ */ jsx("div", {
+				ref: railContainerRef,
+				className: "contents"
+			})] })
+		}
+	});
+	if (collapsible === "none") return /* @__PURE__ */ jsxs("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),
+		"data-variant": resolvedVariant,
+		"data-side": side,
+		className: cn("group relative flex h-full w-(--sidebar-width) flex-col", className),
 		style,
 		...props,
-		children
+		children: [children, /* @__PURE__ */ jsx("div", {
+			ref: railContainerRef,
+			className: "contents"
+		})]
 	});
 	if (isMobile) {
 		const mobileSheetStyle = {
@@ -51,6 +100,7 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 					"data-control-family": "sidebar",
 					"data-slot": "root",
 					"data-surface": "panel",
+					"data-variant": resolvedVariant,
 					"data-mobile": "",
 					"data-side": side,
 					className: cn("flex min-h-0 flex-1 flex-col", className),
@@ -68,7 +118,7 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group peer hidden lg:block",
+		className: cn("group peer hidden lg:block", side === "right" && "order-last"),
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
 		"data-slot": "root",
@@ -83,57 +133,72 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 			"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
-			})
-		})]
+		}), container]
 	});
 }
-function SidebarTrigger({ className, onClick, size = "sm", ...props }) {
+function SidebarTrigger({ className, onClick, size = "sm", ref, ...props }) {
 	const { toggleSidebar, isMobile, openMobile, open } = useSidebar();
-	return /* @__PURE__ */ jsxs(Button, {
-		"data-control-ui": "sidebar",
-		"data-slot": "trigger",
-		"data-sidebar-trigger": "",
-		variant: "ghost",
-		"aria-expanded": isMobile ? openMobile : open,
-		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"
-		})]
+	const { triggerRef, railRef } = useSidebarElements();
+	return useRender({
+		defaultTagName: "button",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size
+		}),
+		ref: [ref ?? null, triggerRef],
+		props: {
+			...props,
+			"data-control-ui": "sidebar",
+			"data-slot": "trigger",
+			"data-sidebar-trigger": "",
+			"aria-expanded": isMobile ? openMobile : open,
+			className: cn(sidebarTriggerWidth[size], "px-0", className),
+			onClick: (event) => {
+				onClick?.(event);
+				if (event.defaultPrevented) return;
+				toggleSidebar();
+				if (!isMobile && !open) railRef.current?.focus({ preventScroll: true });
+			},
+			children: /* @__PURE__ */ jsxs(Fragment$1, { 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 SidebarRail(props) {
+	const { isMobile } = useSidebar();
+	const { railContainer } = useSidebarSurface();
+	if (isMobile || !railContainer) return null;
+	if (props.resizable) {
+		const { resizable, ...resizeProps } = props;
+		return createPortal(/* @__PURE__ */ jsx(SidebarResizeRail, { ...resizeProps }), railContainer);
+	}
+	const { resizable, ...toggleProps } = props;
+	return createPortal(/* @__PURE__ */ jsx(SidebarToggleRail, { ...toggleProps }), railContainer);
+}
+function SidebarToggleRail({ className, ref, onClick, ...props }) {
+	const { toggleSidebar, open } = useSidebar();
+	const { railRef } = useSidebarElements();
+	return useRender({
+		defaultTagName: "button",
+		ref: [ref ?? null, railRef],
+		props: {
+			...props,
+			type: "button",
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "rail",
+			"aria-label": props["aria-label"] ?? "Toggle Sidebar",
+			"aria-expanded": open,
+			tabIndex: -1,
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) 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)
+		}
 	});
 }
 function SidebarInset({ className, ...props }) {

package/dist/ui/skeleton.d.ts

@@ -1,8 +1,11 @@
 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"> & {
+export declare const skeletonVariants: readonly ["shimmer", "pulse", "none"];
+export type SkeletonVariant = (typeof skeletonVariants)[number];
+export type SkeletonProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & SkeletonKnobStyle;
-}): import("react").JSX.Element;
-//#endregion
-export { Skeleton };
+  variant?: SkeletonVariant;
+};
+export declare function Skeleton({ variant, className, ...props }: SkeletonProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/skeleton.js

@@ -1,13 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/skeleton.tsx
-function Skeleton({ className, ...props }) {
+const skeletonVariants = [
+	"shimmer",
+	"pulse",
+	"none"
+];
+function Skeleton({ variant = "shimmer", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
 		"data-control-ui": "skeleton",
 		"data-control-family": "skeleton",
 		"data-slot": "root",
+		"data-variant": variant,
 		className,
 		...props
 	});
 }
 //#endregion
-export { Skeleton };
+export { Skeleton, skeletonVariants };

package/dist/ui/slider.d.ts

@@ -1,12 +1,14 @@
 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<{
+export type SliderVariant = "default" | "plain";
+export type SliderProps = Omit<{
   variant?: SliderVariant;
   value?: number;
   defaultValue?: number;
   onValueChange?: (value: number) => void;
+  onValueCommitted?: (value: number) => void;
+  orientation?: "horizontal" | "vertical";
   min?: number;
   max?: number;
   step?: number;
@@ -19,6 +21,5 @@ type SliderProps = Omit<{
 }, "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 };
+export declare function Slider({ className, variant, label, showValue, formatValue, value, defaultValue, onValueChange, onValueCommitted, orientation, min, max, step, disabled, style, "aria-label": ariaLabel, ...props }: SliderProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/slider.js

@@ -17,19 +17,17 @@ function displaySliderValue(values, formatValue) {
 	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 }) {
+function Slider({ className, variant = "default", label, showValue, formatValue, value, defaultValue, onValueChange, onValueCommitted, orientation = "horizontal", min = 0, max = 100, step, disabled, style, "aria-label": ariaLabel, ...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,
+		orientation,
 		"data-labeled": labeled ? "true" : void 0,
 		value,
 		defaultValue,
@@ -37,8 +35,9 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 		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),
+		onValueChange,
+		onValueCommitted,
+		className: cn("group relative flex cursor-pointer select-none items-center data-[disabled]:cursor-not-allowed", orientation === "vertical" ? "min-h-20 w-fit touch-pan-x" : "w-full touch-pan-y", className),
 		style,
 		...props,
 		children: [/* @__PURE__ */ jsx(Slider$1.Control, {
@@ -47,7 +46,7 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 			"data-range-kind": "slider",
 			"data-slot": "control",
 			"data-labeled": labeled ? "true" : void 0,
-			className: "flex w-full items-center",
+			className: cn("flex items-center", orientation === "vertical" ? "h-full" : "w-full"),
 			children: /* @__PURE__ */ jsxs(Slider$1.Track, {
 				"data-control-ui": "slider",
 				"data-control-family": "range",
@@ -55,8 +54,8 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 				"data-slot": "track",
 				"data-variant": variant,
 				"data-labeled": labeled ? "true" : void 0,
-				className: "relative w-full grow overflow-hidden",
-				style: trackStyle,
+				className: cn("relative grow", orientation === "vertical" ? "h-full" : "w-full"),
+				style,
 				children: [
 					/* @__PURE__ */ jsx(Slider$1.Indicator, {
 						"data-control-ui": "slider",
@@ -64,7 +63,7 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 						"data-range-kind": "slider",
 						"data-slot": "indicator",
 						"data-variant": variant,
-						style: indicatorStyle
+						style
 					}),
 					ticks.map((pct) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
@@ -72,17 +71,21 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 						"data-control-family": "range",
 						"data-range-kind": "slider",
 						"data-slot": "tick",
-						className: "pointer-events-none absolute bottom-0",
-						style: { left: `${pct}%` }
+						className: "pointer-events-none absolute",
+						style: orientation === "vertical" ? { bottom: `${pct}%` } : {
+							left: `${pct}%`,
+							bottom: 0
+						}
 					}, pct)),
 					/* @__PURE__ */ jsx(Slider$1.Thumb, {
+						"aria-label": ariaLabel,
 						"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
+						style
 					})
 				]
 			})

package/dist/ui/spinner.d.ts

@@ -2,11 +2,10 @@ 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"> & {
+export 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 };
+export declare function Spinner({ size, className, ...props }: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/stepper.d.ts

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

package/dist/ui/switch.d.ts

@@ -1,7 +1,7 @@
 import { SwitchKnobStyle } from "../knob-contracts/switch-knobs.js";
 import { CSSProperties, ReactNode } from "react";
 //#region src/ui/switch.d.ts
-type SwitchProps = Omit<{
+export type SwitchProps = Omit<{
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -21,6 +21,5 @@ type SwitchProps = Omit<{
 }, "style"> & {
   style?: CSSProperties & SwitchKnobStyle;
 };
-declare function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, ...props }: SwitchProps): import("react").JSX.Element;
-//#endregion
-export { Switch, SwitchProps };
+export declare function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, style, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/switch.js

@@ -1,9 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useSwitchDrag } from "./use-switch-drag.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/ui/switch.tsx
-function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, ...props }) {
+function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, style, ...props }) {
+	const { thumbRef, dragProps, dragProgress } = useSwitchDrag();
+	const dragStyle = { "--_switch-drag-progress": dragProgress ?? 0 };
 	const hasStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
 	const hasIcon = icon !== void 0 || hasStateIcons;
 	const singleIcon = hasStateIcons ? void 0 : icon;
@@ -13,6 +16,12 @@ function Switch({ className, checked, defaultChecked, onCheckedChange, disabled,
 		"data-control-ui": "switch",
 		"data-control-family": "switch",
 		"data-slot": "root",
+		"data-dragging": dragProgress !== null ? "" : void 0,
+		"data-drag-checked": dragProgress === null ? void 0 : dragProgress >= .5,
+		style: {
+			...style,
+			...dragStyle
+		},
 		checked,
 		defaultChecked,
 		onCheckedChange,
@@ -26,7 +35,9 @@ function Switch({ className, checked, defaultChecked, onCheckedChange, disabled,
 		render: /* @__PURE__ */ jsx("button", { type: "button" }),
 		className: cn("relative inline-flex shrink-0 cursor-pointer items-center", "data-[disabled]:cursor-not-allowed", className),
 		...props,
+		...dragProps,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			ref: thumbRef,
 			"data-control-ui": "switch",
 			"data-control-family": "switch",
 			"data-slot": "thumb",

package/dist/ui/table-of-contents.d.ts

@@ -1,22 +1,21 @@
 import { TableOfContentsKnobStyle } from "../knob-contracts/table-of-contents-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/table-of-contents.d.ts
-type TocItem = {
+export type TocItem = {
   href: string;
   label: string;
   level?: number;
   children?: TocItem[];
 };
-declare const tableOfContentsVariants: readonly ["background", "trail", "both"];
-type TableOfContentsVariant = (typeof tableOfContentsVariants)[number];
-type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">, "style"> & {
+export declare const tableOfContentsVariants: readonly ["background", "trail", "both"];
+export type TableOfContentsVariant = (typeof tableOfContentsVariants)[number];
+export type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">, "style"> & {
   style?: CSSProperties & TableOfContentsKnobStyle;
 } & {
   items: TocItem[];
   label?: string;
   variant?: TableOfContentsVariant;
 };
-declare function useVisibleSections(ids: string[]): string[];
-declare function TableOfContents({ items, label, variant, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
-//#endregion
-export { TableOfContents, TableOfContentsProps, TableOfContentsVariant, TocItem, tableOfContentsVariants, useVisibleSections };
+export declare function useVisibleSections(ids: string[]): string[];
+export declare function TableOfContents({ items, label, variant, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
+//#endregion

package/dist/ui/table-of-contents.js

@@ -114,7 +114,7 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 					"data-control-ui": "table-of-contents",
 					"data-control-family": "table-of-contents",
 					"data-slot": "rail",
-					className: "pointer-events-none absolute inset-y-0 left-0 -z-20 w-px"
+					className: "pointer-events-none absolute inset-y-0 start-0 -z-20"
 				}),
 				/* @__PURE__ */ jsx(TrackHighlight, {
 					"data-variant": variant,
@@ -127,7 +127,7 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 						"data-control-ui": "table-of-contents",
 						"data-control-family": "table-of-contents",
 						"data-slot": "trail",
-						className: "absolute inset-y-0 left-0 w-0.5"
+						className: "absolute inset-y-0 start-0"
 					})
 				}),
 				/* @__PURE__ */ jsx(TocList, {
@@ -149,6 +149,7 @@ function TocList({ items, activeSet, variant, root = false }) {
 		children: items.map((item) => {
 			const targetId = item.href.replace(/^#/, "");
 			const isActive = activeSet.has(targetId);
+			const itemStyle = { "--_toc-depth": item.depth };
 			return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
 				"data-control-ui": "table-of-contents",
 				"data-control-family": "table-of-contents",
@@ -160,6 +161,7 @@ function TocList({ items, activeSet, variant, root = false }) {
 				"aria-current": isActive ? "location" : void 0,
 				href: item.href,
 				className: "block",
+				style: itemStyle,
 				children: item.label
 			}), item.children && /* @__PURE__ */ jsx(TocList, {
 				items: item.children,