@ctrl-ui/react 0.8.10 → 0.8.12

package/dist/ui/tabs.js

@@ -1,14 +1,28 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { Children, Fragment, createContext, isValidElement, useContext, useRef, useState } from "react";
+import { Children, Fragment, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
 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;
+}
 const TabsPanelsContext = createContext(null);
-function useRegisterTabsPanel() {
-	const registerPanel = useContext(TabsPanelsContext);
-	if (!registerPanel) throw new Error("TabsPanel must be rendered inside <Tabs>.");
-	return registerPanel;
+function useTabsPanels() {
+	const context = useContext(TabsPanelsContext);
+	if (!context) throw new Error("TabsPanel must be rendered inside <Tabs>.");
+	return context;
 }
 function setRef(ref, value) {
 	if (typeof ref === "function") return ref(value);
@@ -16,30 +30,61 @@ function setRef(ref, value) {
 }
 function Tabs({ className, onValueChange, children, ...props }) {
 	const rootRef = useRef(null);
-	const panelsRef = useRef(/* @__PURE__ */ new Map());
-	const clearPrevHeight = useRef(0);
+	const activePanelRef = 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);
+		cancelAnimationFrame(clearPreviousHeightFrame.current);
+		clearPreviousHeightFrame.current = requestAnimationFrame(() => {
+			clearPreviousHeightFrame.current = requestAnimationFrame(() => {
+				root.style.removeProperty("--aui-slide-prev-height");
+				root.removeAttribute("data-slide-starting");
+			});
+		});
+	});
+	useEffect(() => () => cancelAnimationFrame(clearPreviousHeightFrame.current), []);
 	const [registerPanel] = useState(() => (value, node) => {
-		if (!node) return;
-		panelsRef.current.set(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`);
+			setExitingValue(previousPanel.value);
+		}
+		activePanelRef.current = {
+			value,
+			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`);
+		}
 		return () => {
-			if (panelsRef.current.get(value) === node) panelsRef.current.delete(value);
+			const currentPanel = activePanelRef.current;
+			if (currentPanel && currentPanel.node === node) refreshTabsPanelHeight(currentPanel);
 		};
 	});
 	const handleValueChange = (value) => {
-		const root = rootRef.current;
-		if (root) for (const panel of panelsRef.current.values()) {
-			if (panel.inert || panel.hidden) continue;
-			root.style.setProperty("--aui-slide-prev-height", `${panel.getBoundingClientRect().height}px`);
-			cancelAnimationFrame(clearPrevHeight.current);
-			clearPrevHeight.current = requestAnimationFrame(() => {
-				clearPrevHeight.current = requestAnimationFrame(() => root.style.removeProperty("--aui-slide-prev-height"));
-			});
-			break;
+		const activePanel = activePanelRef.current;
+		if (activePanel) {
+			refreshTabsPanelHeight(activePanel);
+			holdPreviousHeight(`${activePanel.height}px`);
+			setExitingValue(activePanel.value);
 		}
 		onValueChange?.(value);
 	};
 	return /* @__PURE__ */ jsx(TabsPanelsContext.Provider, {
-		value: registerPanel,
+		value: {
+			registerPanel,
+			exitingValue
+		},
 		children: /* @__PURE__ */ jsx(Tabs$1.Root, {
 			"data-control-ui": "tabs",
 			"data-control-family": "tabs",
@@ -101,7 +146,7 @@ function TabsTab({ className, ...props }) {
 	});
 }
 function TabsPanel({ className, value, ref, ...props }) {
-	const registerPanel = useRegisterTabsPanel();
+	const { registerPanel, exitingValue } = useTabsPanels();
 	const panelRef = (node) => {
 		const unregister = registerPanel(value, node);
 		const cleanup = setRef(ref, node);
@@ -119,9 +164,10 @@ function TabsPanel({ className, value, ref, ...props }) {
 		"data-control-family": "tabs",
 		"data-slot": "panel",
 		"data-slide": "panel",
-		className: cn("data-[hidden]:hidden [&[hidden]]:hidden", className),
+		"data-slide-exiting": exitingValue === value ? "" : void 0,
+		className: cn("data-[hidden]:hidden [&[hidden]]:hidden [&[inert]:not([data-slide=panel][data-slide-exiting][data-ending-style])]:hidden [&[inert][data-ending-style]]:m-0", "not-supports-[anchor-name:--aui-slide-panel]:[&[inert]]:hidden not-supports-[anchor-scope:--aui-slide-panel]:[&[inert]]:hidden", className),
 		...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.10",
+  "version": "0.8.12",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {