@ctrl-ui/react 0.8.13 → 0.8.15

package/dist/ui/dialog.js

@@ -73,6 +73,16 @@ function DialogHeader({ className, ...props }) {
 		...props
 	});
 }
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "dialog",
+		"data-slot": "body",
+		className: cn("grid", className),
+		...props
+	});
+}
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "dialog",
@@ -104,4 +114,4 @@ function DialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

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

@@ -44,7 +44,7 @@ export declare function DropdownMenuPortal(props: Menu.Portal.Props): import("re
 export declare function DropdownMenuGroup(props: DropdownMenuGroupProps): import("react").JSX.Element;
 export declare function DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
 export declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): import("react").JSX.Element;
-export declare function DropdownMenuRadioItem({ className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ className, children, value, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
 export declare function DropdownMenuSub(props: DropdownMenuSubProps): import("react").JSX.Element;
 export declare function DropdownMenuSubTrigger({ className, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
 export declare function DropdownMenuSubContent(props: DropdownMenuSubContentProps): import("react").JSX.Element;

package/dist/ui/dropdown-menu.js

@@ -2,8 +2,10 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { popupItemFocusProps } from "../lib/popup-item-focus.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.tsx
 const dropdownMenuTriggerVariants = ["surface", "ghost"];
@@ -62,7 +64,7 @@ function DropdownMenuItem({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		className: cn(popupItemStructureClasses, className),
-		...props
+		...mergeProps(popupItemFocusProps, props)
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
@@ -103,7 +105,7 @@ function DropdownMenuCheckboxItem({ className, children, ...props }) {
 		"data-popup-part": "item",
 		"data-slot": "checkbox-item",
 		className: cn("relative", popupItemStructureClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})
@@ -118,14 +120,15 @@ function DropdownMenuRadioGroup(props) {
 		...props
 	});
 }
-function DropdownMenuRadioItem({ className, children, ...props }) {
+function DropdownMenuRadioItem({ className, children, value, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		value,
 		"data-control-ui": "dropdown-menu",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		"data-slot": "radio-item",
 		className: cn("relative", popupItemStructureClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})

package/dist/ui/gradient-editor.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { useColorArea } from "../hooks/use-color-area.js";
 import { formatGradient } from "../lib/color.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerContent, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "./color-picker.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/item.js

@@ -38,7 +38,7 @@ function Item({ variant = "default", render, className, children, ...props }) {
 			"data-control-family": "item",
 			"data-slot": "root",
 			"data-variant": variant,
-			className: cn("flex items-center [&[href]]:cursor-pointer", className),
+			className: cn("flex flex-wrap items-center [&[href]]:cursor-pointer", className),
 			children
 		}
 	});

package/dist/ui/responsive-dialog.d.ts

@@ -1,4 +1,4 @@
-import { DialogCloseProps, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger } from "./dialog.js";
+import { DialogBody, DialogCloseProps, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger } from "./dialog.js";
 import { ComponentProps } from "react";
 //#region src/ui/responsive-dialog.d.ts
 export type ResponsiveDialogProps = DialogProps;
@@ -11,6 +11,7 @@ export declare function ResponsiveDialogTrigger(props: Omit<ComponentProps<typeo
 export declare function ResponsiveDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
 export declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, closeLabel, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
 export declare function ResponsiveDialogHeader(props: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
+export declare function ResponsiveDialogBody(props: ComponentProps<typeof DialogBody>): import("react").JSX.Element;
 export declare function ResponsiveDialogFooter(props: ComponentProps<typeof DialogFooter>): import("react").JSX.Element;
 export declare function ResponsiveDialogTitle(props: ComponentProps<typeof DialogTitle>): import("react").JSX.Element;
 export declare function ResponsiveDialogDescription(props: ComponentProps<typeof DialogDescription>): import("react").JSX.Element;

package/dist/ui/responsive-dialog.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.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
@@ -94,6 +94,9 @@ function ResponsiveDialogContent({ className, dialogClassName, drawerClassName,
 function ResponsiveDialogHeader(props) {
 	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerHeader, { ...props }) : /* @__PURE__ */ jsx(DialogHeader, { ...props });
 }
+function ResponsiveDialogBody(props) {
+	return /* @__PURE__ */ jsx(DialogBody, { ...props });
+}
 function ResponsiveDialogFooter(props) {
 	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerFooter, { ...props }) : /* @__PURE__ */ jsx(DialogFooter, { ...props });
 }
@@ -104,4 +107,4 @@ function ResponsiveDialogDescription(props) {
 	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerDescription, { ...props }) : /* @__PURE__ */ jsx(DialogDescription, { ...props });
 }
 //#endregion
-export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };
+export { ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };

package/dist/ui/select.d.ts

@@ -1,8 +1,8 @@
 import { ControlledChoice } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
-import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/ui/select.d.ts

package/dist/ui/select.js

@@ -4,8 +4,10 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
+import { popupItemFocusProps } from "../lib/popup-item-focus.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/ui/select.tsx
 const selectTriggerVariants = ["surface", "ghost"];
@@ -118,7 +120,7 @@ function SelectItem({ className, children, disabled, ...props }) {
 		"data-popup-part": "item",
 		disabled,
 		className: cn(popupItemStructureClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
 			"data-control-ui": "select",
 			"data-control-family": "popup",

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

@@ -47,7 +47,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 		const pointerId = event.pointerId;
 		const startX = event.clientX;
 		const anchoredLeft = anchoredToLeftEdge(handle);
-		const wrapperBounds = wrapper.getBoundingClientRect();
+		const sidebarBounds = (handle.closest("[data-control-family=\"sidebar\"][data-slot=\"root\"]") ?? wrapper).getBoundingClientRect();
 		const initialWidth = measure.getBoundingClientRect().width;
 		const previousWidth = wrapper.style.getPropertyValue("--sidebar-width");
 		const previousCursor = document.body.style.cursor;
@@ -92,7 +92,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			document.body.style.userSelect = "none";
 			wrapper.setAttribute("data-resizing", "true");
 			handle.setAttribute("data-resizing", "true");
-			const cursorWidth = anchoredLeft ? pointer.clientX - wrapperBounds.left : wrapperBounds.right - pointer.clientX;
+			const cursorWidth = anchoredLeft ? pointer.clientX - sidebarBounds.left : sidebarBounds.right - pointer.clientX;
 			if (updateCollapse(cursorWidth)) return;
 			draftWidth = clampWidth(cursorWidth);
 			wrapper.style.setProperty("--sidebar-width", `${draftWidth}px`);

package/dist/ui/tabs.js

@@ -18,6 +18,9 @@ function refreshTabsPanelHeight(panel) {
 	if (panel.node.inert || panel.node.hidden) return;
 	panel.height = panel.node.getBoundingClientRect().height;
 }
+function setTabsPanelsStarting(panels, starting) {
+	for (const panel of panels) panel.toggleAttribute("data-slide-starting", starting);
+}
 const TabsPanelsContext = createContext(null);
 function useTabsPanels() {
 	const context = useContext(TabsPanelsContext);
@@ -31,17 +34,20 @@ function setRef(ref, value) {
 function Tabs({ className, onValueChange, children, ...props }) {
 	const rootRef = useRef(null);
 	const activePanelRef = useRef(null);
+	const startingPanelsRef = useRef([]);
+	const previousHeightRef = useRef(null);
 	const clearPreviousHeightFrame = useRef(0);
 	const [exitingValue, setExitingValue] = useState(null);
 	const [holdPreviousHeight] = useState(() => (height) => {
-		const root = rootRef.current;
-		if (!root) return;
-		root.style.setProperty("--aui-slide-prev-height", height);
+		if (!rootRef.current) return;
+		previousHeightRef.current = height;
 		cancelAnimationFrame(clearPreviousHeightFrame.current);
 		clearPreviousHeightFrame.current = requestAnimationFrame(() => {
 			clearPreviousHeightFrame.current = requestAnimationFrame(() => {
-				root.style.removeProperty("--aui-slide-prev-height");
-				root.removeAttribute("data-slide-starting");
+				previousHeightRef.current = null;
+				activePanelRef.current?.node.style.removeProperty("--_tabs-prev-height");
+				setTabsPanelsStarting(startingPanelsRef.current, false);
+				startingPanelsRef.current = [];
 			});
 		});
 	});
@@ -49,10 +55,14 @@ function Tabs({ className, onValueChange, children, ...props }) {
 	const [registerPanel] = useState(() => (value, node) => {
 		if (!(node && !node.inert && !node.hidden)) return;
 		const previousPanel = activePanelRef.current;
-		const root = rootRef.current;
-		if (root && previousPanel && previousPanel.value !== value) {
-			root.setAttribute("data-slide-starting", "");
-			holdPreviousHeight(root.style.getPropertyValue("--aui-slide-prev-height") || `${previousPanel.height}px`);
+		const switchingPanels = rootRef.current && previousPanel && previousPanel.value !== value;
+		if (switchingPanels) {
+			setTabsPanelsStarting(startingPanelsRef.current, false);
+			startingPanelsRef.current = [previousPanel.node, node];
+			setTabsPanelsStarting(startingPanelsRef.current, true);
+			const previousHeight = previousHeightRef.current || `${previousPanel.height}px`;
+			node.style.setProperty("--_tabs-prev-height", previousHeight);
+			holdPreviousHeight(previousHeight);
 			setExitingValue(previousPanel.value);
 		}
 		activePanelRef.current = {
@@ -60,11 +70,12 @@ function Tabs({ className, onValueChange, children, ...props }) {
 			node,
 			height: node.getBoundingClientRect().height
 		};
-		if (root) {
-			root.style.setProperty("--_tabs-panel-top", `${node.offsetTop}px`);
-			root.style.setProperty("--_tabs-panel-left", `${node.offsetLeft}px`);
-			root.style.setProperty("--_tabs-panel-width", `${node.offsetWidth}px`);
-			root.style.setProperty("--_tabs-panel-height", `${node.offsetHeight}px`);
+		if (switchingPanels) {
+			const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = node;
+			previousPanel.node.style.setProperty("--_tabs-panel-top", `${offsetTop}px`);
+			previousPanel.node.style.setProperty("--_tabs-panel-left", `${offsetLeft}px`);
+			previousPanel.node.style.setProperty("--_tabs-panel-width", `${offsetWidth}px`);
+			previousPanel.node.style.setProperty("--_tabs-panel-height", `${offsetHeight}px`);
 		}
 		return () => {
 			const currentPanel = activePanelRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {