@ctrl-ui/react 0.8.11 → 0.8.13

package/dist/ui/resizable.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { createContext, useContext, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group, Panel, Separator } from "react-resizable-panels";
 //#region src/ui/resizable.tsx
@@ -13,6 +13,32 @@ const FLOATING_ARROW_DIRECTIONS = {
 	ArrowLeft: -1,
 	ArrowRight: 1
 };
+function useResizeCursor(handleRef, disableCursor) {
+	useEffect(() => {
+		const handle = handleRef.current;
+		if (!handle || disableCursor) return;
+		const ownerDocument = handle.ownerDocument;
+		const cursorStyle = ownerDocument.createElement("style");
+		function updateCursor() {
+			const state = handle?.getAttribute("data-separator");
+			if (state === "hover" || state === "active") {
+				const cursor = handle?.getAttribute("data-axis") === "vertical" ? "col-resize" : "row-resize";
+				cursorStyle.textContent = `*, *:hover { cursor: ${cursor} !important; }`;
+				if (!cursorStyle.isConnected) ownerDocument.head.append(cursorStyle);
+			} else cursorStyle.remove();
+		}
+		const observer = new MutationObserver(updateCursor);
+		observer.observe(handle, {
+			attributes: true,
+			attributeFilter: ["data-separator", "data-axis"]
+		});
+		updateCursor();
+		return () => {
+			observer.disconnect();
+			cursorStyle.remove();
+		};
+	}, [handleRef, disableCursor]);
+}
 function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", disableCursor = false, children, ...props }) {
 	return /* @__PURE__ */ jsx(ResizableGroupContext.Provider, {
 		value: {
@@ -44,6 +70,8 @@ function ResizablePanel({ className, ...props }) {
 }
 function ResizableHandle({ className, variant = "solid", withHandle, children, "aria-label": ariaLabel = "Resize panel", ...props }) {
 	const { orientation, disableCursor } = useContext(ResizableGroupContext);
+	const handleRef = useRef(null);
+	useResizeCursor(handleRef, disableCursor);
 	const axis = orientation === "horizontal" ? "vertical" : "horizontal";
 	return /* @__PURE__ */ jsxs(Separator, {
 		"data-control-ui": "resizable",
@@ -55,6 +83,7 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, "
 		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px touch-pan-y" : "h-px touch-pan-x", className),
 		"aria-label": ariaLabel,
 		...props,
+		elementRef: handleRef,
 		children: [withHandle ? /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "resizable",
 			"data-control-family": "resizable",
@@ -72,6 +101,8 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 	const [focused, setFocused] = useState(false);
 	const [resizing, setResizing] = useState(false);
 	const panelRef = useRef(null);
+	const handleRef = useRef(null);
+	useResizeCursor(handleRef, false);
 	const resizeRef = useRef(null);
 	const size = controlledSize ?? uncontrolledSize;
 	const growthPerPointerPx = side === "right" ? -1 : 1;
@@ -144,6 +175,7 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 			}),
 			children,
 			/* @__PURE__ */ jsx("div", {
+				ref: handleRef,
 				role: "separator",
 				tabIndex: 0,
 				"aria-label": handleLabel,
@@ -163,6 +195,7 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 				onPointerMove: updateResize,
 				onPointerUp: endResize,
 				onPointerCancel: endResize,
+				onLostPointerCapture: endResize,
 				onPointerEnter: () => setHovered(true),
 				onPointerLeave: () => setHovered(false),
 				onFocus: () => setFocused(true),

package/dist/ui/rich-tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { prefersReducedMotion } from "../lib/motion.js";
 import { PopupArrowShape } from "../popup-parts.js";

package/dist/ui/select.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";

package/dist/ui/sheet.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.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";

package/dist/ui/sidebar-menu.js

@@ -5,8 +5,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { createContext, useContext, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-menu.tsx
 const sidebarMenuButtonVariants = ["default", "outline"];
 const sidebarMenuButtonSizes = [
@@ -66,7 +66,7 @@ const SidebarMenuContext = createContext("none");
 function SidebarMenu({ className, indicator, style, children, ...props }) {
 	const skin = useSkin();
 	const resolvedIndicator = indicator ?? skin.indicators?.sidebar ?? "none";
-	const hasHighlight = resolvedIndicator !== "none";
+	const hasHighlight = resolvedIndicator === "slide";
 	const list = /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
@@ -131,7 +131,8 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 			"data-size": size,
 			"data-variant": variant,
 			"data-active": isActive || void 0,
-			"data-track-item": indicator !== "none" ? "" : void 0,
+			"data-indicator": indicator,
+			"data-track-item": indicator === "slide" ? "" : void 0,
 			className: cn("peer/menu-button flex items-center overflow-hidden text-start disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", className),
 			children
 		}

package/dist/ui/sidebar-provider.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
-import { TooltipProvider } from "./tooltip.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, useId, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-provider.tsx
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
 const SIDEBAR_WIDTH = "16rem";

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

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 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;

package/dist/ui/sidebar.js

@@ -8,9 +8,9 @@ import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements,
 import { SidebarResizeRail } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, 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 { useRender } from "@base-ui/react/use-render";
 import { createPortal } from "react-dom";
 //#region src/ui/sidebar.tsx
 const SIDEBAR_WIDTH_MOBILE = "18rem";

package/dist/ui/tabs.d.ts

@@ -32,6 +32,10 @@ export type TabsPanelProps = Omit<ComponentProps<"div">, "style"> & {
   value: string;
   keepMounted?: boolean;
 };
+export type TabsSurfaceProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & TabsKnobStyle;
+};
+export declare function TabsSurface({ className, ...props }: TabsSurfaceProps): import("react").JSX.Element;
 export declare function Tabs<TValue extends string = string>({ className, onValueChange, children, ...props }: TabsProps<TValue>): import("react").JSX.Element;
 export declare function TabsList({ size, variant, className, children, style, ...props }: TabsListProps): import("react").JSX.Element;
 export declare function TabsTab({ className, ...props }: TabsTabProps): import("react").JSX.Element;

package/dist/ui/tabs.js

@@ -4,6 +4,16 @@ import { Children, Fragment, createContext, isValidElement, useContext, useEffec
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/ui/tabs.tsx
+function TabsSurface({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "tabs",
+		"data-control-family": "tabs",
+		"data-slot": "surface",
+		"data-surface": "panel",
+		className,
+		...props
+	});
+}
 function refreshTabsPanelHeight(panel) {
 	if (panel.node.inert || panel.node.hidden) return;
 	panel.height = panel.node.getBoundingClientRect().height;
@@ -160,4 +170,4 @@ function TabsPanel({ className, value, ref, ...props }) {
 	});
 }
 //#endregion
-export { Tabs, TabsList, TabsPanel, TabsTab };
+export { Tabs, TabsList, TabsPanel, TabsSurface, TabsTab };

package/dist/ui/timeline.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/timeline.tsx
 function Timeline({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {

package/dist/ui/toast.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";

package/dist/ui/toggle.d.ts

@@ -15,6 +15,6 @@ export type ToggleGroupProps<TValue extends string = string> = Omit<ComponentPro
   orientation?: "horizontal" | "vertical";
   indicator?: HoverIndicator;
 };
-export declare function Toggle({ variant, size, tone, active, iconOnly, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
+export declare function Toggle({ variant, size, tone, active, iconOnly, layout, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
 export declare function ToggleGroup<TValue extends string = string>({ className, orientation, indicator, children, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
 //#endregion

package/dist/ui/toggle.js

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 //#region src/ui/toggle.tsx
-function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, iconOnly = false, showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
+function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, iconOnly = false, layout = "inline", showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
 	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx(Toggle$1, {
 		"data-track-item": tracksHover ? "" : void 0,
@@ -31,6 +31,7 @@ function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, ic
 				"data-tone": tone,
 				"data-size": size,
 				"data-icon-only": iconOnly ? "true" : void 0,
+				"data-layout": layout,
 				className: cn(buttonStructureClasses, renderProps.className, className),
 				children: /* @__PURE__ */ jsxs("span", {
 					"data-control-ui": "toggle",

package/dist/ui/toolbar.d.ts

@@ -1,6 +1,6 @@
 import { ToolbarKnobStyle } from "../knob-contracts/toolbar-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/toolbar.d.ts
 export type ToolbarVariant = "default" | "inverse" | "floating";
 export type ToolbarLinkVariant = "default" | "track";

package/dist/ui/toolbar.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/toolbar.tsx
 function Toolbar({ orientation = "horizontal", variant = "default", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Toolbar$1.Root, {

package/dist/ui/tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { PopupArrowShape } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/tree.js

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
-import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/tree.tsx
 const TYPEAHEAD_TIMEOUT = 500;

package/dist/ui/trigger-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";

package/dist/user-ask.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { useUserAsk } from "./hooks/use-user-ask.js";
 import { Button } from "./ui/button.js";
-import { Kbd } from "./ui/kbd.js";
 import { LiveStatus } from "./ui/live-status.js";
+import { useUserAsk } from "./hooks/use-user-ask.js";
+import { Kbd } from "./ui/kbd.js";
 import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";

package/package.json

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