@ctrl-ui/react 0.8.0 → 0.8.1

package/dist/ui/toggle.d.ts

@@ -1,4 +1,4 @@
-import { ControlledMultiChoice } from "../control-props.js";
+import { ControlledMultiChoice, HoverIndicator } from "../control-props.js";
 import { ButtonProps } from "./button.js";
 import { ComponentProps } from "react";
 //#region src/ui/toggle.d.ts
@@ -13,8 +13,9 @@ type ToggleGroupProps<TValue extends string = string> = Omit<ComponentProps<"div
   multiple?: boolean;
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
+  indicator?: HoverIndicator;
 };
 declare function Toggle({ variant, size, tone, active, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
-declare function ToggleGroup<TValue extends string = string>({ className, orientation, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
+declare function ToggleGroup<TValue extends string = string>({ className, orientation, indicator, children, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
 //#endregion
 export { Toggle, ToggleGroup, ToggleGroupProps, ToggleProps };

package/dist/ui/toggle.js

@@ -1,12 +1,17 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { buttonContentClasses, buttonStructureClasses } from "./button.js";
+import { skinIndicator } from "../skin.js";
+import { ButtonTrackContext, buttonContentClasses, buttonStructureClasses, buttonTrackStructureClasses } from "./button.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { useContext } from "react";
 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, 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,
 		pressed,
 		defaultPressed,
 		onPressedChange,
@@ -56,15 +61,22 @@ function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, sh
 		children
 	});
 }
-function ToggleGroup({ className, orientation = "horizontal", ...props }) {
-	return /* @__PURE__ */ jsx(ToggleGroup$1, {
-		"data-control-ui": "toggle",
-		"data-control-family": "button",
-		"data-slot": "group",
-		"data-orientation": orientation,
-		orientation,
-		className: cn("inline-flex items-center", orientation === "vertical" && "flex-col", className),
-		...props
+function ToggleGroup({ className, orientation = "horizontal", indicator, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("toggle-group") ?? "none";
+	const tracksHover = resolvedIndicator === "hover";
+	return /* @__PURE__ */ jsx(ButtonTrackContext, {
+		value: tracksHover,
+		children: /* @__PURE__ */ jsxs(ToggleGroup$1, {
+			"data-control-ui": "toggle",
+			"data-control-family": "button",
+			"data-slot": "group",
+			"data-orientation": orientation,
+			"data-track": resolvedIndicator,
+			orientation,
+			className: cn(buttonTrackStructureClasses, "inline-flex items-center data-[track=hover]:gap-0", orientation === "vertical" && "flex-col", className),
+			...props,
+			children: [children, tracksHover ? /* @__PURE__ */ jsx(TrackHighlight, { className: "z-0" }) : null]
+		})
 	});
 }
 //#endregion

package/dist/ui/tree.js

@@ -1,13 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { skinIndicator } from "../skin.js";
-import { Children, Suspense, createContext, isValidElement, lazy, useContext, useRef, useState } from "react";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { Children, createContext, isValidElement, useContext, 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 { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/tree.tsx
-const TrackHighlight = lazy(() => import("../extensions/track-highlight.js").then((module) => ({ default: module.TrackHighlight })));
 const TYPEAHEAD_TIMEOUT = 500;
 const TreeContext = createContext(null);
 function useTree() {
@@ -211,17 +211,14 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 		toggleExpanded,
 		setFocusedValue
 	};
-	const rootStyle = style;
 	const sliding = resolvedIndicator === "slide";
 	const list = /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "tree",
 		"data-control-family": "tree",
-		"data-indicator": resolvedIndicator,
-		"data-slot": "root",
+		"data-slot": "list",
 		role: "tree",
 		"aria-multiselectable": selectionMode === "multiple" || void 0,
-		className: cn("flex flex-col", sliding ? void 0 : className),
-		style: sliding ? void 0 : rootStyle,
+		className: "flex flex-col",
 		onKeyDown: (event) => {
 			onKeyDown?.(event);
 			handleTreeKeyDown(event, contextValue, typeahead);
@@ -238,21 +235,18 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 	});
 	return /* @__PURE__ */ jsx(TreeContext.Provider, {
 		value: contextValue,
-		children: sliding ? /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			"data-control-ui": "tree",
 			"data-control-family": "tree",
-			"data-slot": "track",
+			"data-slot": "root",
 			"data-indicator": resolvedIndicator,
-			className: cn("relative isolate", className),
-			style: rootStyle,
-			children: [/* @__PURE__ */ jsx(Suspense, {
-				fallback: null,
-				children: /* @__PURE__ */ jsx(TrackHighlight, {
-					itemSelector: "[data-control-ui=tree][data-slot=item-trigger]",
-					activeSelector: "[data-control-ui=tree][data-slot=item-trigger][data-selected]"
-				})
-			}), list]
-		}) : list
+			className: cn(sliding && "relative isolate", className),
+			style,
+			children: [sliding ? /* @__PURE__ */ jsx(TrackHighlight, {
+				itemSelector: "[data-control-ui=tree][data-slot=item-trigger]",
+				activeSelector: "[data-control-ui=tree][data-slot=item-trigger][data-selected]"
+			}) : null, list]
+		})
 	});
 }
 function TreeItem({ value, disabled = false, label, className, style, children, ref, ...props }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Control UI components, blocks, and primitives with the Refined skin, as a versioned package.",
   "license": "MIT",
   "repository": {
@@ -50,6 +50,7 @@
     "prosemirror-view": "^1.42.2",
     "react": "^19.2.8",
     "react-day-picker": "^10.0.1",
+    "react-email": "^6.9.5",
     "react-phone-number-input": "^3.4.17",
     "react-resizable-panels": "^4.12.2",
     "shiki": "^4.4.3",
@@ -91,6 +92,9 @@
     "react-day-picker": {
       "optional": true
     },
+    "react-email": {
+      "optional": true
+    },
     "react-phone-number-input": {
       "optional": true
     },