@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/ui/sidebar-provider.js

@@ -1,10 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinSidebarWidth } from "../skin.js";
-import { TooltipProvider } from "./tooltip.js";
+import { useSkin } from "../skin-provider.js";
 import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
+import { TooltipProvider } from "./tooltip.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/sidebar-provider.tsx
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
@@ -12,21 +13,71 @@ const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SIDEBAR_MOBILE_BREAKPOINT = 1024;
+const SidebarElementsContext = createContext(null);
+const SidebarSurfaceContext = createContext(null);
+function useSidebarElements() {
+	const elements = useContext(SidebarElementsContext);
+	if (!elements) throw new Error("Sidebar parts must be used within a SidebarProvider.");
+	return elements;
+}
+function useSidebarSurface() {
+	const surface = useContext(SidebarSurfaceContext);
+	if (!surface) throw new Error("SidebarRail must be used within a Sidebar.");
+	return surface;
+}
+function focusOutsideCollapsedContent({ offcanvasRef, railRef, triggerRef }) {
+	const container = offcanvasRef.current;
+	if (!container?.contains(document.activeElement)) return;
+	const target = railRef.current ?? triggerRef.current;
+	if (target) target.focus({ preventScroll: true });
+	else container.focus({ preventScroll: true });
+}
 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, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, ref, className, style, children, ...props }) {
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, defaultWidth, minWidth = 224, maxWidth = 420, width: widthProp, onWidthChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, ref, className, style, children, ...props }) {
+	const skin = useSkin();
 	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
 	const [openMobile, setOpenMobile] = useState(false);
+	const wrapperRef = useRef(null);
+	const offcanvasRef = useRef(null);
+	const railRef = useRef(null);
+	const triggerRef = useRef(null);
+	const elements = {
+		wrapperRef,
+		offcanvasRef,
+		railRef,
+		triggerRef
+	};
+	const [internalWidth, setInternalWidth] = useState(defaultWidth);
+	function clampWidth(nextWidth) {
+		return Math.min(maxWidth, Math.max(minWidth, nextWidth));
+	}
+	const requestedWidth = widthProp ?? internalWidth;
+	const width = requestedWidth === void 0 ? void 0 : clampWidth(requestedWidth);
+	function setWidth(nextWidth) {
+		const clampedWidth = clampWidth(nextWidth);
+		if (widthProp === void 0) setInternalWidth(clampedWidth);
+		onWidthChange?.(clampedWidth);
+	}
 	const [internalOpen, setInternalOpen] = useState(defaultOpen);
 	const open = openProp ?? internalOpen;
+	useLayoutEffect(() => {
+		if (!open && !isMobile) focusOutsideCollapsedContent({
+			wrapperRef,
+			offcanvasRef,
+			railRef,
+			triggerRef
+		});
+	}, [open, isMobile]);
 	const setOpen = (value) => {
 		const openState = typeof value === "function" ? value(open) : value;
-		if (onOpenChange) onOpenChange(openState);
-		else setInternalOpen(openState);
+		if (!openState && !isMobile) focusOutsideCollapsedContent(elements);
+		if (openProp === void 0) setInternalOpen(openState);
+		onOpenChange?.(openState);
 		if (persistOpen) document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 	};
 	const toggleSidebar = () => isMobile ? setOpenMobile((prev) => !prev) : setOpen(!open);
@@ -52,29 +103,38 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, per
 		isMobile,
 		openMobile,
 		setOpenMobile,
-		toggleSidebar
+		toggleSidebar,
+		width,
+		setWidth,
+		minWidth,
+		maxWidth
 	};
 	const wrapperStyle = {
-		"--sidebar-width": skinSidebarWidth() ?? SIDEBAR_WIDTH,
+		"--sidebar-width": skin.sidebarWidth ?? SIDEBAR_WIDTH,
 		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-		...style
+		...style,
+		...width === void 0 ? {} : { "--sidebar-width": `${width}px` }
 	};
+	const wrapper = useRender({
+		defaultTagName: "div",
+		ref: [ref ?? null, wrapperRef],
+		props: {
+			...props,
+			"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),
+			children
+		}
+	});
 	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
-			})
+		children: /* @__PURE__ */ jsx(SidebarElementsContext.Provider, {
+			value: elements,
+			children: /* @__PURE__ */ jsx(TooltipProvider, { children: wrapper })
 		})
 	});
 }
 //#endregion
-export { SidebarProvider, useSidebar };
+export { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarSurface };

package/dist/ui/sidebar-resize-rail.d.ts

@@ -0,0 +1,8 @@
+import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/sidebar-resize-rail.d.ts
+export type SidebarResizeRailProps = ComponentProps<"div"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+};
+export declare function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown, ...props }: SidebarResizeRailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/ui/sidebar-resize-rail.js

@@ -0,0 +1,192 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/sidebar-resize-rail.tsx
+const DRAG_THRESHOLD_PX = 5;
+const KEYBOARD_STEP_PX = 10;
+function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown, ...props }) {
+	const { open, setOpen, setWidth, toggleSidebar, minWidth, maxWidth } = useSidebar();
+	const { wrapperRef, railRef } = useSidebarElements();
+	const { side, collapsible } = useSidebarSurface();
+	const widthMeasureRef = useRef(null);
+	const cancelGestureRef = useRef(null);
+	const draggedRef = useRef(false);
+	const [measuredWidth, setMeasuredWidth] = useState();
+	useLayoutEffect(() => {
+		const measure = widthMeasureRef.current;
+		if (!measure) return;
+		const updateMeasuredWidth = () => setMeasuredWidth(Math.round(measure.getBoundingClientRect().width));
+		updateMeasuredWidth();
+		const observer = new ResizeObserver(updateMeasuredWidth);
+		observer.observe(measure);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => () => cancelGestureRef.current?.(), []);
+	function clampWidth(nextWidth) {
+		return Math.min(maxWidth, Math.max(minWidth, nextWidth));
+	}
+	function handlePointerDown(event) {
+		onPointerDown?.(event);
+		if (event.defaultPrevented || event.button !== 0) return;
+		const mountedWrapper = wrapperRef.current;
+		const measure = widthMeasureRef.current;
+		if (!mountedWrapper || !measure) return;
+		const wrapper = mountedWrapper;
+		event.preventDefault();
+		cancelGestureRef.current?.();
+		draggedRef.current = false;
+		const handle = event.currentTarget;
+		handle.focus({ preventScroll: true });
+		handle.setPointerCapture(event.pointerId);
+		const pointerId = event.pointerId;
+		const startX = event.clientX;
+		const wrapperBounds = wrapper.getBoundingClientRect();
+		const initialWidth = measure.getBoundingClientRect().width;
+		const previousWidth = wrapper.style.getPropertyValue("--sidebar-width");
+		const previousCursor = document.body.style.cursor;
+		const previousUserSelect = document.body.style.userSelect;
+		const controller = new AbortController();
+		let draftWidth = initialWidth;
+		const initiallyCollapsed = !open && collapsible !== "none";
+		let collapsedDuringDrag = initiallyCollapsed;
+		function restoreWidth() {
+			wrapper.style.setProperty("--sidebar-width", previousWidth);
+		}
+		function endGesture() {
+			controller.abort();
+			document.body.style.cursor = previousCursor;
+			document.body.style.userSelect = previousUserSelect;
+			wrapper.removeAttribute("data-resizing");
+			handle.removeAttribute("data-resizing");
+			if (handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId);
+			cancelGestureRef.current = null;
+		}
+		function cancelGesture() {
+			endGesture();
+			restoreWidth();
+			draggedRef.current = false;
+			if (collapsedDuringDrag !== initiallyCollapsed) setOpen(open);
+		}
+		cancelGestureRef.current = cancelGesture;
+		function updateCollapse(cursorWidth) {
+			const shouldCollapse = collapsible !== "none" && cursorWidth < minWidth;
+			if (shouldCollapse !== collapsedDuringDrag) {
+				collapsedDuringDrag = shouldCollapse;
+				setOpen(!shouldCollapse);
+			}
+			return shouldCollapse;
+		}
+		function movePointer(pointer) {
+			if (pointer.pointerId !== pointerId) return;
+			const withinClickDistance = Math.abs(pointer.clientX - startX) <= DRAG_THRESHOLD_PX;
+			if (!draggedRef.current && withinClickDistance) return;
+			draggedRef.current = true;
+			document.body.style.cursor = "col-resize";
+			document.body.style.userSelect = "none";
+			wrapper.setAttribute("data-resizing", "true");
+			handle.setAttribute("data-resizing", "true");
+			const cursorWidth = side === "left" ? pointer.clientX - wrapperBounds.left : wrapperBounds.right - pointer.clientX;
+			if (updateCollapse(cursorWidth)) return;
+			draftWidth = clampWidth(cursorWidth);
+			wrapper.style.setProperty("--sidebar-width", `${draftWidth}px`);
+		}
+		function finishPointer(pointer) {
+			if (pointer.pointerId !== pointerId) return;
+			endGesture();
+			restoreWidth();
+			if (draggedRef.current && !collapsedDuringDrag) setWidth(draftWidth);
+		}
+		function cancelPointer(pointer) {
+			if (pointer.pointerId === pointerId) cancelGesture();
+		}
+		function cancelWithEscape(keyboard) {
+			if (keyboard.key !== "Escape") return;
+			keyboard.preventDefault();
+			cancelGesture();
+		}
+		window.addEventListener("pointermove", movePointer, { signal: controller.signal });
+		window.addEventListener("pointerup", finishPointer, { signal: controller.signal });
+		window.addEventListener("pointercancel", cancelPointer, { signal: controller.signal });
+		handle.addEventListener("lostpointercapture", cancelPointer, { signal: controller.signal });
+		window.addEventListener("blur", cancelGesture, { signal: controller.signal });
+		window.addEventListener("keydown", cancelWithEscape, { signal: controller.signal });
+	}
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (draggedRef.current) {
+			draggedRef.current = false;
+			return;
+		}
+		if (collapsible !== "none") toggleSidebar();
+	}
+	function resizeWithArrow(expand) {
+		if (isCollapsed) {
+			if (expand) setOpen(true);
+			return;
+		}
+		if (measuredWidth === void 0) return;
+		setWidth(clampWidth(measuredWidth + (expand ? KEYBOARD_STEP_PX : -10)));
+	}
+	function expandToWidth(nextWidth) {
+		if (collapsible !== "none") setOpen(true);
+		setWidth(nextWidth);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		switch (event.key) {
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				if (collapsible !== "none") toggleSidebar();
+				return;
+			case "Home":
+			case "End":
+				event.preventDefault();
+				expandToWidth(event.key === "Home" ? minWidth : maxWidth);
+				return;
+			case "ArrowLeft":
+			case "ArrowRight":
+				event.preventDefault();
+				resizeWithArrow(event.key === (side === "left" ? "ArrowRight" : "ArrowLeft"));
+				return;
+		}
+	}
+	const isCollapsed = !open && collapsible !== "none";
+	const widthDescription = measuredWidth === void 0 ? void 0 : `${measuredWidth} pixels`;
+	return useRender({
+		defaultTagName: "div",
+		ref: [ref ?? null, railRef],
+		props: {
+			...props,
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": props["aria-label"] ?? "Resize sidebar",
+			"aria-valuenow": isCollapsed ? 0 : measuredWidth,
+			"aria-valuemin": collapsible === "none" ? minWidth : 0,
+			"aria-valuemax": maxWidth,
+			"aria-valuetext": isCollapsed ? "collapsed" : widthDescription,
+			tabIndex: 0,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "rail",
+			"data-resizable": "",
+			"data-resize-ready": measuredWidth === void 0 ? void 0 : "",
+			onPointerDown: handlePointerDown,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-none outline-hidden group-data-[side=left]:-right-1 group-data-[side=right]:-left-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-right-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-left-2 lg:block", className),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				ref: widthMeasureRef,
+				"aria-hidden": true,
+				className: "pointer-events-none invisible absolute w-(--sidebar-width)"
+			}), props.children] })
+		}
+	});
+}
+//#endregion
+export { SidebarResizeRail };

package/dist/ui/sidebar.d.ts

@@ -1,31 +1,37 @@
 import { Button } from "./button.js";
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
-import { SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarLayout } from "../skin.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
+import { SidebarResizeRailProps } from "./sidebar-resize-rail.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
-type SidebarRailProps = Omit<ComponentProps<"button">, "style"> & {
+export type SidebarRailProps = (Omit<ComponentProps<"button">, "style"> & {
+  resizable?: false;
   style?: CSSProperties & SidebarKnobStyle;
-};
-type SidebarInsetProps = Omit<ComponentProps<"main">, "style"> & {
+}) | (SidebarResizeRailProps & {
+  resizable: true;
+});
+export type SidebarInsetProps = Omit<ComponentProps<"main">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 };
 type SidebarSurfaceStyle = CSSProperties & SidebarKnobStyle;
-declare function Sidebar({ side, variant, collapsible, ref, className, children, style, ...props }: Omit<ComponentProps<"div">, "style"> & {
+export type SidebarProps = Omit<ComponentProps<"div">, "style"> & {
   side?: "left" | "right";
-  variant?: "sidebar" | "floating" | "inset";
+  variant?: SidebarLayout;
   collapsible?: "offcanvas" | "icon" | "none";
   style?: SidebarSurfaceStyle;
-}): import("react").JSX.Element;
-declare function SidebarTrigger({ className, onClick, size, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
-declare function SidebarRail({ className, ...props }: SidebarRailProps): import("react").JSX.Element;
-declare function SidebarInset({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;
-declare function SidebarHeader({ className, ...props }: ComponentProps<"div"> & {
+};
+export declare function Sidebar({ side, collapsible, ...props }: SidebarProps): import("react").JSX.Element;
+export declare function SidebarTrigger({ className, onClick, size, ref, ...props }: ComponentProps<typeof Button>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function SidebarRail(props: SidebarRailProps): any;
+export declare function SidebarInset({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;
+export declare function SidebarHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> & {
+export declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailProps, type SidebarSelectionIndicator, type SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, type SidebarSelectionIndicator, type SidebarStyle, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

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 { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+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 { 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 }) {
@@ -180,4 +245,4 @@ function SidebarContent({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

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