@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/sheet.d.ts

@@ -2,24 +2,23 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.d.ts
-declare function Sheet(props: ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
-declare function SheetClose({ className, ...props }: ComponentProps<typeof Dialog.Close> & {
+export declare function Sheet(props: ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
+export declare function SheetClose({ className, ...props }: ComponentProps<typeof Dialog.Close> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-type SheetContentProps = Omit<ComponentProps<typeof Dialog.Popup>, "style"> & {
+export type SheetContentProps = Omit<ComponentProps<typeof Dialog.Popup>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   side?: "left" | "right";
 };
-declare function SheetContent({ className, children, side, ...props }: SheetContentProps): import("react").JSX.Element;
-declare function SheetHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function SheetContent({ className, children, side, ...props }: SheetContentProps): import("react").JSX.Element;
+export declare function SheetHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title> & {
+export declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function SheetDescription({ className, ...props }: ComponentProps<typeof Dialog.Description> & {
+export declare function SheetDescription({ className, ...props }: ComponentProps<typeof Dialog.Description> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { Sheet, SheetClose, SheetContent, SheetContentProps, SheetDescription, SheetHeader, SheetTitle };
+//#endregion

package/dist/ui/sheet.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.tsx
@@ -18,25 +19,26 @@ function SheetClose({ className, ...props }) {
 	});
 }
 function SheetContent({ className, children, side = "right", ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
 		"data-control-ui": "sheet",
 		"data-popup-kind": "sheet",
 		"data-slot": "backdrop",
 		"data-control-family": "popup",
 		"data-popup-part": "backdrop",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
-		className: "fixed inset-0 z-[70]"
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
+		className: "fixed inset-0 z-(--z-overlay)"
 	}), /* @__PURE__ */ jsx(Dialog.Popup, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		"data-control-ui": "sheet",
 		"data-popup-kind": "sheet",
 		"data-control-family": "popup",
 		"data-slot": "content",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed inset-y-0 z-[71] flex h-full w-3/4 max-w-sm flex-col", side === "left" ? "left-0" : "right-0", className),
+		className: cn("fixed inset-y-0 z-(--z-modal) flex h-full w-3/4 max-w-sm flex-col", side === "left" ? "left-0" : "right-0", className),
 		...props,
 		"data-side": side,
 		children

package/dist/ui/sidebar-menu.d.ts

@@ -2,26 +2,26 @@ import { HoverIndicator, RenderProp, SelectionIndicator } from "../control-props
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/sidebar-menu.d.ts
-declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
-type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
-declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
-type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
-type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
+export type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
+export declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
+export type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
+export type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 } & {
   render?: RenderProp<ComponentProps<"div">>;
 };
-type SidebarGroupContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type SidebarGroupContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 };
-type SidebarMenuActionProps = Omit<ComponentProps<"button">, "style"> & {
+export type SidebarMenuActionProps = Omit<ComponentProps<"button">, "style"> & {
   render?: RenderProp<ComponentProps<"button">>;
   showOnHover?: boolean;
   style?: CSSProperties & SidebarKnobStyle;
 };
-declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): import("react").JSX.Element;
-declare function SidebarMenuAction({ className, render, showOnHover, children, ...props }: SidebarMenuActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
+export declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): import("react").JSX.Element;
+export declare function SidebarMenuAction({ className, render, showOnHover, children, ...props }: SidebarMenuActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 } & {
   render?: RenderProp<ComponentProps<"button">>;
@@ -30,20 +30,19 @@ type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
   variant?: SidebarMenuButtonVariant;
   size?: SidebarMenuButtonSize;
 };
-declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
+export declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type SidebarSelectionIndicator = SelectionIndicator | HoverIndicator;
-declare function SidebarMenu({ className, indicator, style, children, ...props }: ComponentProps<"ul"> & {
+export declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSelectionIndicator = SelectionIndicator | HoverIndicator;
+export declare function SidebarMenu({ className, indicator, style, children, ...props }: ComponentProps<"ul"> & {
   indicator?: SidebarSelectionIndicator;
 } & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
+export declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
-declare function SidebarMenuSub({ className, ...props }: ComponentProps<typeof SidebarMenu>): import("react").JSX.Element;
-//#endregion
-export { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants };
+export declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+export declare function SidebarMenuSub({ className, ...props }: ComponentProps<typeof SidebarMenu>): import("react").JSX.Element;
+//#endregion

package/dist/ui/sidebar-menu.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
@@ -65,7 +65,8 @@ function SidebarGroupLabel({ className, render, children, ...props }) {
 }
 const SidebarMenuContext = createContext("none");
 function SidebarMenu({ className, indicator, style, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("sidebar") ?? "none";
+	const skin = useSkin();
+	const resolvedIndicator = indicator ?? skin.indicators?.sidebar ?? "none";
 	const hasHighlight = resolvedIndicator !== "none";
 	const list = /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "sidebar",
@@ -101,7 +102,7 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden text-start 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", {
+const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: null,

package/dist/ui/sidebar-provider.d.ts

@@ -1,7 +1,7 @@
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, RefObject } from "react";
 //#region src/ui/sidebar-provider.d.ts
-type SidebarStyle = CSSProperties & SidebarKnobStyle & {
+export type SidebarStyle = CSSProperties & SidebarKnobStyle & {
   "--sidebar-width"?: string;
   "--sidebar-width-icon"?: string;
 };
@@ -13,16 +13,41 @@ type SidebarContextProps = {
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  width: number | undefined;
+  minWidth: number;
+  maxWidth: number;
+  setWidth: (width: number) => void;
 };
-declare function useSidebar(): SidebarContextProps;
-type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
+type SidebarElements = {
+  wrapperRef: RefObject<HTMLDivElement | null>;
+  offcanvasRef: RefObject<HTMLDivElement | null>;
+  railRef: RefObject<HTMLElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+};
+export declare const SidebarSurfaceContext: import("react").Context<{
+  side: "left" | "right";
+  collapsible: "offcanvas" | "icon" | "none";
+  railContainer: HTMLDivElement | null;
+} | null>;
+export declare function useSidebarElements(): SidebarElements;
+export declare function useSidebarSurface(): {
+  side: "left" | "right";
+  collapsible: "offcanvas" | "icon" | "none";
+  railContainer: HTMLDivElement | null;
+};
+export declare function useSidebar(): SidebarContextProps;
+export type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  width?: number;
+  onWidthChange?: (width: number) => void;
   persistOpen?: boolean;
   keyboardShortcut?: string | null;
   style?: SidebarStyle;
 };
-declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, persistOpen, keyboardShortcut, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
-//#endregion
-export { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar };
+export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+//#endregion

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-pan-y 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 { 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, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, 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 };