@ctrl-ui/react 0.8.12 → 0.8.13

package/dist/styles/recipes/button.css

@@ -115,14 +115,15 @@
     padding-inline: 0;
   }
 
-  :where([data-control-family="button"][data-layout="stacked"]) {
+  :where([data-control-family="button"][data-layout="tile"]) {
+    --cui-button-radius: var(--nest-radius, min(var(--radius-control), var(--radius-field)));
     flex-direction: column;
     block-size: auto;
     padding-block: calc(var(--spacing) * 1.5);
     padding-inline: var(--cui-button-padding-inline);
   }
 
-  :where([data-control-family="button"][data-layout="stacked"] > [data-slot="content"]) {
+  :where([data-control-family="button"][data-layout="tile"] > [data-slot="content"]) {
     flex-direction: column;
   }
 

package/dist/styles/recipes/resizable.css

@@ -37,32 +37,6 @@
     cursor: row-resize;
   }
 
-  /* biome-ignore-start lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
-  :where(
-    :root:has(
-        [data-control-family="resizable"][data-slot="handle"][data-axis="vertical"]:not([data-cursor="none"]):is(
-            [data-separator="hover"],
-            [data-separator="active"]
-          )
-      )
-      *
-  ) {
-    cursor: col-resize !important;
-  }
-
-  :where(
-    :root:has(
-        [data-control-family="resizable"][data-slot="handle"][data-axis="horizontal"]:not([data-cursor="none"]):is(
-            [data-separator="hover"],
-            [data-separator="active"]
-          )
-      )
-      *
-  ) {
-    cursor: row-resize !important;
-  }
-  /* biome-ignore-end lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
-
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"]) {
     background-color: var(--border);
   }

package/dist/styles/recipes/scroll-area.css

@@ -170,7 +170,7 @@
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="always"]),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="hover"]:is([data-hovering], [data-scrolling])),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]),
-  :where([data-control-family="scroll-area"][data-slot="root"]:has(> [data-scroll-area-viewport]:focus-visible) > [data-slot="scrollbar"]) {
+  :where([data-control-family="scroll-area"][data-slot="root"] > [data-scroll-area-viewport]:focus-visible ~ [data-slot="scrollbar"]) {
     opacity: 1;
   }
 

package/dist/styles/recipes/sidebar-menu.css

@@ -58,8 +58,7 @@
   }
 
   :where(
-    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
-      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+    [data-control-family="sidebar"][data-slot="menu-button"]:is([data-indicator="slide"], [data-indicator="hover"])[data-active]
       ~ [data-slot="menu-action"]
   ) {
     color: var(--cui-sidebar-menu-button-track-active-foreground);
@@ -134,21 +133,36 @@
   }
 
   :where(
-    [data-control-family="sidebar"][data-indicator="slide"]
-      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
+    [data-control-family="sidebar"][data-slot="menu-button"][data-indicator="slide"]:is(:hover, :active, [data-active], [data-popup-open])
   ) {
     background-color: transparent;
   }
 
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:is([data-indicator="slide"], [data-indicator="hover"])[data-active]) {
+    color: var(--cui-sidebar-menu-button-track-active-foreground);
+  }
+
   :where(
-    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
-      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+    [data-control-family="sidebar"][data-slot="menu-button"][data-indicator="hover"]:focus-visible:not(
+      [data-active],
+      :disabled,
+      [data-disabled],
+      [aria-disabled="true"]
+    )
   ) {
-    color: var(--cui-sidebar-menu-button-track-active-foreground);
+    background-color: var(--cui-sidebar-menu-button-hover-background);
+    color: var(--cui-sidebar-menu-button-hover-foreground);
+    box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
   }
 
   @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
+    :where(
+        [data-control-family="sidebar"][data-slot="menu"][data-indicator="hover"]:has(
+            > [data-slot="menu-item"] > [data-slot="menu-button"]:focus-visible
+          )
+          > [data-slot="menu-item"]
+          > [data-slot="menu-button"][data-indicator="hover"]:hover:not([data-active], :focus-visible)
+      ) {
       background-color: transparent;
       box-shadow: none;
     }

package/dist/styles/recipes/sidebar-parts.css

@@ -1,13 +1,21 @@
 @layer components {
+  :where([data-control-family="sidebar"][data-slot="root"]) {
+    --_sidebar-transition-duration: var(--duration-base);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"]:has(> [data-slot="container"] > div > [data-slot="rail"]:focus-visible)) {
+    --_sidebar-transition-duration: 0s;
+  }
+
   :where([data-control-family="sidebar"][data-slot="container"]) {
     translate: 0;
     transition:
-      width var(--duration-base) var(--ease-standard),
-      translate var(--duration-base) var(--ease-standard);
+      width var(--_sidebar-transition-duration) var(--ease-standard),
+      translate var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-slot="inner"]) {
-    transition: padding var(--duration-base) var(--ease-standard);
+    transition: padding var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-collapsible="offcanvas"][data-side="left"]:dir(ltr) [data-slot="container"]),
@@ -23,10 +31,6 @@
   :where(
     [data-control-family="sidebar"][data-slot="wrapper"][data-resizing]
       [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
-  ),
-  :where(
-    [data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-slot="rail"]:focus-visible)
-      [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
   ) {
     transition: none;
   }

package/dist/styles/recipes/sidebar.css

@@ -96,7 +96,7 @@
 
   :where([data-control-family="sidebar"][data-slot="gap"]) {
     background-color: transparent;
-    transition: width var(--duration-base) var(--ease-standard);
+    transition: width var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {

package/dist/styles/recipes/tabs.css

@@ -93,6 +93,10 @@
     font-weight: var(--font-weight-medium);
   }
 
+  :where([data-control-family="tabs"][data-slot="list"]:not([data-orientation="vertical"], [data-variant="browser"]) [data-slot="tab"]) {
+    flex-grow: 1;
+  }
+
   @media (hover: hover) {
     :where([data-control-family="tabs"][data-slot="tab"]:hover:not([data-disabled])) {
       color: var(--cui-tabs-hover-foreground);

package/dist/ui/button.d.ts

@@ -9,7 +9,7 @@ export type ButtonTone = ControlTone;
 export declare const ButtonTrackContext: import("react").Context<boolean>;
 export declare const buttonShapes: readonly ["default", "circle"];
 export type ButtonShape = (typeof buttonShapes)[number];
-export declare const buttonLayouts: readonly ["inline", "stacked"];
+export declare const buttonLayouts: readonly ["inline", "tile"];
 export type ButtonLayout = (typeof buttonLayouts)[number];
 export type ButtonAppearanceProps = {
   variant?: ButtonVariant;

package/dist/ui/button.js

@@ -9,7 +9,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
-const buttonLayouts = ["inline", "stacked"];
+const buttonLayouts = ["inline", "tile"];
 const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";

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/sidebar-menu.js

@@ -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/package.json

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