@ctrl-ui/react 0.8.19 → 0.8.21

package/dist/ui/morphing-panel.d.ts

@@ -1,11 +1,13 @@
+import { ButtonProps } from "./button.js";
 import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from "./collapsible.js";
 import { MorphingPanelKnobStyle } from "../knob-contracts/morphing-panel-knobs.js";
-import { CSSProperties } from "react";
+import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/morphing-panel.d.ts
 export type MorphingPanelDimensions = {
   width: string;
   height: string;
 };
+export type MorphingPanelAnchor = "center" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
 export type MorphingPanelProps = Omit<CollapsibleProps, "style"> & {
   collapsedSize: MorphingPanelDimensions;
   expandedSize: MorphingPanelDimensions;
@@ -14,10 +16,25 @@ export type MorphingPanelProps = Omit<CollapsibleProps, "style"> & {
 export type MorphingPanelTriggerProps = Omit<CollapsibleTriggerProps, "style"> & {
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-export type MorphingPanelContentProps = Omit<CollapsibleContentProps, "style"> & {
+export type MorphingPanelContentProps = Omit<CollapsibleContentProps, "style" | "autoFocus"> & {
+  /** Move focus into the surface on opening, for example for an inline confirmation. */
+  autoFocus?: boolean;
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-export declare function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }: MorphingPanelProps): import("react").JSX.Element;
+export type MorphingPanelPositionerProps = ComponentProps<"div"> & {
+  anchor?: MorphingPanelAnchor;
+};
+export type MorphingPanelPartProps = ComponentProps<"div"> & {
+  style?: CSSProperties & MorphingPanelKnobStyle;
+};
+export type MorphingPanelCloseProps = ButtonProps;
+/** Give this container a bounded area; the chosen edge stays fixed throughout resizing. */
+export declare function MorphingPanelPositioner({ anchor, className, ...props }: MorphingPanelPositionerProps): import("react").JSX.Element;
+export declare function MorphingPanel({ collapsedSize, expandedSize, open: openProp, defaultOpen, onOpenChange, onKeyDown, className, style, ...props }: MorphingPanelProps): import("react").JSX.Element;
 export declare function MorphingPanelTrigger({ render, className, children, ...props }: MorphingPanelTriggerProps): import("react").JSX.Element;
-export declare function MorphingPanelContent({ className, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
+export declare function MorphingPanelContent({ autoFocus, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
+export declare function MorphingPanelClose({ onClick, ...props }: MorphingPanelCloseProps): import("react").JSX.Element;
+export declare function MorphingPanelHeader({ className, ...props }: MorphingPanelPartProps): import("react").JSX.Element;
+export declare function MorphingPanelBody({ className, ...props }: MorphingPanelPartProps): import("react").JSX.Element;
+export declare function MorphingPanelFooter({ className, ...props }: MorphingPanelPartProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/morphing-panel.js

@@ -1,27 +1,81 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/morphing-panel.tsx
+const MorphingPanelContext = createContext(null);
+function useMorphingPanel() {
+	const context = useContext(MorphingPanelContext);
+	if (!context) throw new Error("MorphingPanel parts must be rendered inside <MorphingPanel>.");
+	return context;
+}
+function createCloseDetails(reason, event, trigger) {
+	return {
+		reason,
+		event,
+		trigger,
+		isCanceled: false,
+		isPropagationAllowed: false,
+		cancel() {
+			this.isCanceled = true;
+		},
+		allowPropagation() {
+			this.isPropagationAllowed = true;
+		}
+	};
+}
+/** Give this container a bounded area; the chosen edge stays fixed throughout resizing. */
+function MorphingPanelPositioner({ anchor = "center", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "morphing-panel",
+		"data-control-family": "morphing-panel",
+		"data-slot": "positioner",
+		"data-anchor": anchor,
+		className: cn("grid min-h-0 min-w-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)]", className)
+	});
+}
 function MorphingPanelTriggerElement({ triggerProps, open, render, className, children }) {
-	const panelState = open ? "open" : "closed";
+	const { triggerRef } = useMorphingPanel();
 	return useRender({
 		defaultTagName: "button",
 		render,
+		ref: triggerRef,
 		state: { open },
 		props: {
 			...triggerProps,
 			"data-control-ui": "morphing-panel",
 			"data-control-family": "morphing-panel",
 			"data-slot": "trigger",
-			"data-state": panelState,
+			"data-state": open ? "open" : "closed",
 			className: cn(triggerProps.className, className),
 			children
 		}
 	});
 }
-function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }) {
+function MorphingPanel({ collapsedSize, expandedSize, open: openProp, defaultOpen = false, onOpenChange, onKeyDown, className, style, ...props }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const open = openProp ?? uncontrolledOpen;
+	const triggerRef = useRef(null);
+	const contentRef = useRef(null);
+	const wasOpen = useRef(open);
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		if (wasOpen.current && !open && content?.contains(content.ownerDocument.activeElement)) triggerRef.current?.focus({ preventScroll: true });
+		wasOpen.current = open;
+	}, [open]);
+	function changeOpen(nextOpen, details) {
+		onOpenChange?.(nextOpen, details);
+		if (!details.isCanceled && openProp === void 0) setUncontrolledOpen(nextOpen);
+	}
+	function close(reason, event) {
+		const details = createCloseDetails(reason, event, triggerRef.current ?? void 0);
+		if (open) changeOpen(false, details);
+		return details;
+	}
 	const dimensions = {
 		"--_morphing-panel-collapsed-height": collapsedSize.height,
 		"--_morphing-panel-collapsed-width": collapsedSize.width,
@@ -29,29 +83,36 @@ function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props
 		"--_morphing-panel-expanded-width": expandedSize.width,
 		...style
 	};
-	return /* @__PURE__ */ jsx(Collapsible.Root, {
-		className,
-		style: dimensions,
-		render: (renderProps, state) => {
-			const panelState = state.open ? "open" : "closed";
-			const panelSize = state.open ? "expanded" : "collapsed";
-			const panelStyle = {
-				...renderProps.style,
-				height: `var(--_morphing-panel-${panelSize}-height)`,
-				width: `min(var(--_morphing-panel-${panelSize}-width), 100%)`
-			};
-			return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(MorphingPanelContext.Provider, {
+		value: {
+			open,
+			triggerRef,
+			contentRef,
+			close
+		},
+		children: /* @__PURE__ */ jsx(Collapsible.Root, {
+			...props,
+			open,
+			onOpenChange: changeOpen,
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented || event.key !== "Escape" || !open) return;
+				const details = close("escape-key", event.nativeEvent);
+				if (!details.isCanceled) event.preventDefault();
+				if (!details.isPropagationAllowed) event.stopPropagation();
+			},
+			className,
+			style: dimensions,
+			render: (renderProps, state) => /* @__PURE__ */ jsx("div", {
 				...renderProps,
 				"data-control-ui": "morphing-panel",
 				"data-control-family": "morphing-panel",
 				"data-slot": "root",
-				"data-state": panelState,
+				"data-state": state.open ? "open" : "closed",
 				"data-surface": "panel",
-				style: panelStyle,
-				className: cn("relative isolate max-w-full overflow-hidden", renderProps.className)
-			});
-		},
-		...props
+				className: cn("relative isolate min-h-0 min-w-0 max-h-full max-w-full overflow-hidden", renderProps.className)
+			})
+		})
 	});
 }
 function MorphingPanelTrigger({ render, className, children, ...props }) {
@@ -67,22 +128,77 @@ function MorphingPanelTrigger({ render, className, children, ...props }) {
 		})
 	});
 }
-function MorphingPanelContent({ className, ...props }) {
+function MorphingPanelContentElement({ renderProps, open, autoFocus }) {
+	const { contentRef } = useMorphingPanel();
+	useEffect(() => {
+		if (open && autoFocus) contentRef.current?.focus({ preventScroll: true });
+	}, [
+		open,
+		autoFocus,
+		contentRef
+	]);
+	return useRender({
+		defaultTagName: "div",
+		ref: contentRef,
+		props: {
+			...renderProps,
+			tabIndex: renderProps.tabIndex ?? -1,
+			inert: !open || renderProps.inert,
+			"data-control-ui": "morphing-panel",
+			"data-control-family": "morphing-panel",
+			"data-slot": "content",
+			"data-state": open ? "open" : "closed",
+			className: cn("absolute inset-0 flex min-h-0 min-w-0 flex-col overflow-y-auto overscroll-contain", renderProps.className)
+		}
+	});
+}
+function MorphingPanelContent({ autoFocus = false, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Panel, {
-		className,
-		render: (renderProps, state) => {
-			const panelState = state.open ? "open" : "closed";
-			return /* @__PURE__ */ jsx("div", {
-				...renderProps,
-				"data-control-ui": "morphing-panel",
-				"data-control-family": "morphing-panel",
-				"data-slot": "content",
-				"data-state": panelState,
-				className: cn("absolute inset-0 overflow-hidden", renderProps.className)
-			});
-		},
-		...props
+		...props,
+		render: (renderProps, state) => /* @__PURE__ */ jsx(MorphingPanelContentElement, {
+			renderProps,
+			open: state.open,
+			autoFocus
+		})
+	});
+}
+function MorphingPanelClose({ onClick, ...props }) {
+	const { close } = useMorphingPanel();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		"data-morphing-panel-close": "",
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) close("close-press", event.nativeEvent);
+		}
+	});
+}
+function MorphingPanelHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "morphing-panel",
+		"data-control-family": "morphing-panel",
+		"data-slot": "header",
+		className: cn("flex shrink-0 items-center", className)
+	});
+}
+function MorphingPanelBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "morphing-panel",
+		"data-control-family": "morphing-panel",
+		"data-slot": "body",
+		className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain", className)
+	});
+}
+function MorphingPanelFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "morphing-panel",
+		"data-control-family": "morphing-panel",
+		"data-slot": "footer",
+		className: cn("flex shrink-0 flex-wrap items-center justify-end gap-2", className)
 	});
 }
 //#endregion
-export { MorphingPanel, MorphingPanelContent, MorphingPanelTrigger };
+export { MorphingPanel, MorphingPanelBody, MorphingPanelClose, MorphingPanelContent, MorphingPanelFooter, MorphingPanelHeader, MorphingPanelPositioner, MorphingPanelTrigger };

package/dist/ui/resize-handle.d.ts

@@ -0,0 +1,11 @@
+import { ResizeHandleKnobStyle } from "../knob-contracts/resize-handle-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/resize-handle.d.ts
+export declare const resizeHandleDirections: readonly ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+export type ResizeHandleDirection = (typeof resizeHandleDirections)[number];
+export type ResizeHandleProps = Omit<ComponentProps<"button">, "style"> & {
+  direction: ResizeHandleDirection;
+  style?: CSSProperties & ResizeHandleKnobStyle;
+};
+export declare function ResizeHandle({ direction, className, ...props }: ResizeHandleProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/resize-handle.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/resize-handle.tsx
+const resizeHandleDirections = [
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w",
+	"nw"
+];
+function ResizeHandle({ direction, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "resize-handle",
+		"data-control-family": "resize-handle",
+		"data-slot": "root",
+		"data-direction": direction,
+		className: cn("absolute touch-none", className),
+		...props
+	});
+}
+//#endregion
+export { ResizeHandle, resizeHandleDirections };

package/dist/ui/responsive-dialog.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";
-import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
 import { createContext, useContext, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/responsive-dialog.tsx

package/dist/ui/sidebar-menu.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
-import { TrackHighlight } from "../extensions/track-highlight.js";
 import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -0,0 +1,17 @@
+import { RenderProp } from "../control-props.js";
+import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
+import { SidebarMenuButtonProps } from "./sidebar-menu.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/sidebar-mobile.d.ts
+export type SidebarMobileNavProps = Omit<ComponentProps<"nav">, "style"> & {
+  variant?: "bar" | "floating";
+  style?: CSSProperties & SidebarKnobStyle;
+};
+export declare function SidebarMobileNav({ variant, "aria-label": label, className, style, ...props }: SidebarMobileNavProps): import("react").JSX.Element;
+export declare function SidebarMobileNavItem({ onClick, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+export type SidebarMobileTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  render?: RenderProp<ComponentProps<"button">>;
+  style?: CSSProperties & SidebarKnobStyle;
+};
+export declare function SidebarMobileTrigger({ render, children, onClick, ref, ...props }: SidebarMobileTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/ui/sidebar-mobile.js

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useSidebar, useSidebarElements } from "./sidebar-provider.js";
+import { SidebarMenuButton } from "./sidebar-menu.js";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MenuIcon } from "lucide-react";
+//#region src/ui/sidebar-mobile.tsx
+function SidebarMobileNav({ variant = "bar", "aria-label": label = "Mobile navigation", className, style, ...props }) {
+	const { layout } = useSidebar();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "mobile-nav-container",
+		"data-layout": layout,
+		"data-variant": variant,
+		className: "shrink-0 lg:hidden",
+		style,
+		children: /* @__PURE__ */ jsx("nav", {
+			...props,
+			"aria-label": label,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "mobile-nav",
+			"data-variant": variant,
+			className: cn("flex items-center", className)
+		})
+	});
+}
+function SidebarMobileNavItem({ onClick, ...props }) {
+	const { setOpenMobile } = useSidebar();
+	return /* @__PURE__ */ jsx(SidebarMenuButton, {
+		...props,
+		"data-mobile-nav-item": "",
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) setOpenMobile(false);
+		}
+	});
+}
+function SidebarMobileTrigger({ render, children, onClick, ref, ...props }) {
+	const { openMobile, setOpenMobile, sidebarId } = useSidebar();
+	const { activeTriggerRef } = useSidebarElements();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		ref,
+		props: {
+			type: "button",
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "mobile-trigger",
+			"data-mobile-nav-item": "",
+			"data-sidebar-trigger": "",
+			"aria-haspopup": "dialog",
+			"aria-expanded": openMobile,
+			"aria-controls": openMobile ? sidebarId : void 0,
+			onClick: (event) => {
+				onClick?.(event);
+				if (event.defaultPrevented) return;
+				activeTriggerRef.current = event.currentTarget;
+				setOpenMobile(!openMobile);
+			},
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: "Menu" })] })
+		}
+	});
+}
+//#endregion
+export { SidebarMobileNav, SidebarMobileNavItem, SidebarMobileTrigger };

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

@@ -28,6 +28,7 @@ type SidebarElements = {
   offcanvasRef: RefObject<HTMLDivElement | null>;
   railRef: RefObject<HTMLElement | null>;
   triggerRef: RefObject<HTMLButtonElement | null>;
+  activeTriggerRef: RefObject<HTMLButtonElement | null>;
   insetRef: RefObject<HTMLElement | null>;
 };
 export declare const SidebarSurfaceContext: import("react").Context<{

package/dist/ui/sidebar-provider.js

@@ -42,16 +42,19 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 	const skin = useSkin();
 	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
 	const [openMobile, setOpenMobile] = useState(false);
+	if (!isMobile && openMobile) setOpenMobile(false);
 	const wrapperRef = useRef(null);
 	const offcanvasRef = useRef(null);
 	const railRef = useRef(null);
 	const triggerRef = useRef(null);
+	const activeTriggerRef = useRef(null);
 	const insetRef = useRef(null);
 	const elements = {
 		wrapperRef,
 		offcanvasRef,
 		railRef,
 		triggerRef,
+		activeTriggerRef,
 		insetRef
 	};
 	const sidebarId = useId();

package/dist/ui/sidebar.d.ts

@@ -4,6 +4,7 @@ import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
 import { SidebarLayout } from "../skin.js";
 import { SidebarResizeRailProps } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuBadge, SidebarMenuBadgeProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarMobileNav, SidebarMobileNavItem, SidebarMobileNavProps, SidebarMobileTrigger, SidebarMobileTriggerProps } from "./sidebar-mobile.js";
 import { SidebarLayoutMode, SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
@@ -22,6 +23,7 @@ export type SidebarProps = Omit<ComponentProps<"div">, "style"> & {
   side?: "left" | "right";
   variant?: SidebarLayout;
   collapsible?: "offcanvas" | "icon" | "none";
+  mobileVariant?: "sheet" | "drawer";
   label?: string;
   style?: SidebarSurfaceStyle;
 };
@@ -39,4 +41,4 @@ export declare function SidebarFooter({ className, ...props }: ComponentProps<"d
 }): import("react").JSX.Element;
 export declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 //#endregion
-export { SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarLayoutMode, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, type SidebarSelectionIndicator, type SidebarStyle, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarLayoutMode, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarMobileNav, SidebarMobileNavItem, type SidebarMobileNavProps, SidebarMobileTrigger, type SidebarMobileTriggerProps, SidebarProvider, type SidebarProviderProps, type SidebarSelectionIndicator, type SidebarStyle, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };