@ctrl-ui/react 0.9.5 → 0.9.6

package/dist/ui/rich-tooltip.js

@@ -146,7 +146,7 @@ function useAnchorScroll(anchor, open, enabled) {
 	]);
 }
 const richTooltipContentSelector = "[data-control-ui=\"rich-tooltip\"][data-slot=\"content\"]";
-function RichTooltipContent({ className, children, side = "bottom", align = "center", sideOffset = 10, anchor, collisionPadding = 12, arrow = true, scrollAnchorIntoView = true, ...props }) {
+function RichTooltipContent({ className, children, side = "bottom", align = "center", sideOffset = 10, anchor, collisionPadding = 12, arrow = true, scrollAnchorIntoView = true, container, ...props }) {
 	const skin = useSkin();
 	const { tone, inTour, nextRef, descriptionId, progressId } = useRichTooltipContext();
 	const isSurface = tone === "surface";
@@ -159,42 +159,45 @@ function RichTooltipContent({ className, children, side = "bottom", align = "cen
 		if (openedWithoutInteraction && focusIsElsewhere) return false;
 		return inTour && nextRef.current ? nextRef.current : true;
 	};
-	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
-		"data-control-ui": "rich-tooltip",
-		"data-popup-kind": "rich-tooltip",
-		"data-control-family": "popup",
-		"data-slot": "positioner",
-		"data-skin": skin.id,
-		"data-effects": controlEffectsAttribute(skin.effects),
-		side,
-		align,
-		sideOffset,
-		anchor,
-		collisionPadding,
-		className: "z-(--z-popup)",
-		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Popover.Positioner, {
 			"data-control-ui": "rich-tooltip",
 			"data-popup-kind": "rich-tooltip",
 			"data-control-family": "popup",
-			"data-slot": "content",
-			"data-tone": tone,
-			"data-surface": isSurface ? "floating" : void 0,
-			"data-popup-part": isSurface ? "surface" : void 0,
-			className: cn("relative grid w-80 max-w-[calc(100vw-2rem)]", className),
-			initialFocus,
-			"aria-describedby": describedBy,
-			...props,
-			children: [children, arrow ? /* @__PURE__ */ jsx(Popover.Arrow, {
+			"data-slot": "positioner",
+			"data-skin": skin.id,
+			"data-effects": controlEffectsAttribute(skin.effects),
+			side,
+			align,
+			sideOffset,
+			anchor,
+			collisionPadding,
+			className: "z-(--z-popup)",
+			children: /* @__PURE__ */ jsxs(Popover.Popup, {
 				"data-control-ui": "rich-tooltip",
 				"data-popup-kind": "rich-tooltip",
 				"data-control-family": "popup",
-				"data-slot": "arrow",
+				"data-slot": "content",
 				"data-tone": tone,
-				className: "flex",
-				children: /* @__PURE__ */ jsx(PopupArrowShape, {})
-			}) : null]
+				"data-surface": isSurface ? "floating" : void 0,
+				"data-popup-part": isSurface ? "surface" : void 0,
+				className: cn("relative grid w-80 max-w-[calc(100vw-2rem)]", className),
+				initialFocus,
+				"aria-describedby": describedBy,
+				...props,
+				children: [children, arrow ? /* @__PURE__ */ jsx(Popover.Arrow, {
+					"data-control-ui": "rich-tooltip",
+					"data-popup-kind": "rich-tooltip",
+					"data-control-family": "popup",
+					"data-slot": "arrow",
+					"data-tone": tone,
+					className: "flex",
+					children: /* @__PURE__ */ jsx(PopupArrowShape, {})
+				}) : null]
+			})
 		})
-	}) });
+	});
 }
 function RichTooltipMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/ui/swap.d.ts

@@ -0,0 +1,14 @@
+import { SwapKnobStyle } from "../knob-contracts/swap-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/swap.d.ts
+export type SwapItemState = "active" | "exiting" | "inactive";
+export type SwapProps = Omit<ComponentProps<"span">, "style"> & {
+  value: string;
+  style?: CSSProperties & SwapKnobStyle;
+};
+export declare function Swap({ value, children, ...props }: SwapProps): import("react").JSX.Element;
+export type SwapItemProps = Omit<ComponentProps<"span">, "ref"> & {
+  value: string;
+};
+export declare function SwapItem({ value, children, ...props }: SwapItemProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/swap.js

@@ -0,0 +1,69 @@
+"use client";
+import { Children, createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/swap.tsx
+const SwapContext = createContext(null);
+function useSwap() {
+	const context = useContext(SwapContext);
+	if (!context) throw new Error("SwapItem must be rendered inside <Swap>.");
+	return context;
+}
+function fitRootToItem(item) {
+	const root = item.parentElement;
+	if (!root) return;
+	const observer = new ResizeObserver(([entry]) => {
+		const [borderBox] = entry.borderBoxSize;
+		root.style.setProperty("--_swap-inline-size", `${borderBox.inlineSize}px`);
+	});
+	observer.observe(item);
+	return () => observer.disconnect();
+}
+function Swap({ value, children, ...props }) {
+	const [transition, setTransition] = useState({
+		value,
+		previous: null
+	});
+	if (transition.value !== value) setTransition({
+		value,
+		previous: transition.value
+	});
+	return /* @__PURE__ */ jsx(SwapContext.Provider, {
+		value: transition,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "swap",
+			"data-control-family": "swap",
+			"data-slot": "root",
+			"data-swapped": transition.previous === null ? void 0 : "",
+			...props,
+			children
+		})
+	});
+}
+function itemState({ value, previous }, itemValue) {
+	if (itemValue === value) return "active";
+	if (itemValue === previous) return "exiting";
+	return "inactive";
+}
+function wrapLabelText(children) {
+	return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "swap",
+		"data-control-family": "swap",
+		"data-slot": "label",
+		children: child
+	}) : child);
+}
+function SwapItem({ value, children, ...props }) {
+	const state = itemState(useSwap(), value);
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "swap",
+		"data-control-family": "swap",
+		"data-slot": "item",
+		"data-state": state,
+		"aria-hidden": state === "active" ? void 0 : true,
+		...props,
+		ref: state === "active" ? fitRootToItem : void 0,
+		children: wrapLabelText(children)
+	});
+}
+//#endregion
+export { Swap, SwapItem };

package/dist/ui/timeline.d.ts

@@ -2,7 +2,7 @@ import { RenderProp } from "../control-props.js";
 import { TimelineKnobStyle } from "../knob-contracts/timeline-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/timeline.d.ts
-export type TimelineState = "neutral" | "pending" | "running" | "success" | "error";
+export type TimelineState = "neutral" | "pending" | "running" | "waiting" | "success" | "error";
 export type TimelineProps = ComponentProps<"ol"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };

package/dist/ui/timeline.js

@@ -18,7 +18,7 @@ function TimelineItem({ state = "neutral", className, ...props }) {
 		"data-control-family": "timeline",
 		"data-slot": "item",
 		"data-state": state,
-		"aria-current": state === "running" ? "step" : void 0,
+		"aria-current": state === "running" || state === "waiting" ? "step" : void 0,
 		...props,
 		className: cn("group/timeline-item relative grid min-w-0 grid-cols-[1rem_minmax(0,1fr)]", className)
 	});

package/dist/user-ask.js

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

package/lint/no-raw-type-classes.grit

@@ -2,6 +2,6 @@ language js(typescript, jsx)
 
 JsxAttribute(name=$name, initializer=$value) as $attr where {
   $name <: `className`,
-  $value <: contains r".*\btext-(?:micro|caption|label|body|body-lg|heading-[1-4]|display)\b.*",
-  register_diagnostic(span=$attr, message="Type rung in className: render text through <Text>/<Heading>, or size the control with its size prop or --cui-*-font-size knob.", severity="warn")
+  $value <: contains r".*(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b.*|.*(?:^|[^\w-])text-\[\d[^\]]*\].*",
+  register_diagnostic(span=$attr, message="Text size in className: render text through <Text>/<Heading> on the type scale, or size the control with its size prop or --cui-*-font-size knob.", severity="error")
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
   "keywords": [
     "react",
@@ -53,7 +53,7 @@
     "lint": "biome lint ."
   },
   "peerDependencies": {
-    "@base-ui/react": "^1.8.0",
+    "@base-ui/react": "^1.9.0",
     "@tanstack/charts": "^1.1.0",
     "@tanstack/react-virtual": "^3.14.13",
     "@tiptap/core": "3.31.4",