@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/ui/morphing-panel.js

@@ -182,12 +182,14 @@ function MorphingPanelHeader({ className, ...props }) {
 		className: cn("flex shrink-0 items-center", className)
 	});
 }
-function MorphingPanelBody({ className, ...props }) {
+const morphingPanelBodyPaddings = ["default", "none"];
+function MorphingPanelBody({ className, padding = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-control-ui": "morphing-panel",
 		"data-control-family": "morphing-panel",
 		"data-slot": "body",
+		"data-padding": padding,
 		className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain", className)
 	});
 }
@@ -201,4 +203,4 @@ function MorphingPanelFooter({ className, ...props }) {
 	});
 }
 //#endregion
-export { MorphingPanel, MorphingPanelBody, MorphingPanelClose, MorphingPanelContent, MorphingPanelFooter, MorphingPanelHeader, MorphingPanelPositioner, MorphingPanelTrigger };
+export { MorphingPanel, MorphingPanelBody, MorphingPanelClose, MorphingPanelContent, MorphingPanelFooter, MorphingPanelHeader, MorphingPanelPositioner, MorphingPanelTrigger, morphingPanelBodyPaddings };

package/dist/ui/rich-tooltip.d.ts

@@ -48,8 +48,9 @@ export type RichTooltipContentProps = Omit<ComponentProps<typeof Popover.Popup>,
   collisionPadding?: ComponentProps<typeof Popover.Positioner>["collisionPadding"];
   arrow?: boolean;
   scrollAnchorIntoView?: boolean;
+  container?: ComponentProps<typeof Popover.Portal>["container"];
 };
-export declare function RichTooltipContent({ className, children, side, align, sideOffset, anchor, collisionPadding, arrow, scrollAnchorIntoView, ...props }: RichTooltipContentProps): import("react").JSX.Element;
+export declare function RichTooltipContent({ className, children, side, align, sideOffset, anchor, collisionPadding, arrow, scrollAnchorIntoView, container, ...props }: RichTooltipContentProps): import("react").JSX.Element;
 export declare function RichTooltipMedia({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

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/select.js

@@ -81,7 +81,7 @@ function SelectValue({ children, ...props }) {
 		children
 	});
 }
-function SelectContent({ className, children, alignItemWithTrigger = false, ...props }) {
+function SelectContent({ className, children, alignItemWithTrigger, ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 		"data-skin": skin.id,
@@ -89,7 +89,7 @@ function SelectContent({ className, children, alignItemWithTrigger = false, ...p
 		side: "bottom",
 		align: "start",
 		sideOffset: 6,
-		alignItemWithTrigger,
+		alignItemWithTrigger: alignItemWithTrigger ?? skin.selectAlignItemWithTrigger ?? false,
 		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Select$1.Popup, {
 			"data-control-ui": "select",

package/dist/ui/sidebar-mobile.js

@@ -14,7 +14,7 @@ function SidebarMobileNav({ variant = "bar", "aria-label": label = "Mobile navig
 		"data-slot": "mobile-nav-container",
 		"data-layout": layout,
 		"data-variant": variant,
-		className: "shrink-0 lg:hidden",
+		className: "shrink-0 sidebar:hidden",
 		style,
 		children: /* @__PURE__ */ jsx("nav", {
 			...props,

package/dist/ui/sidebar-provider.d.ts

@@ -6,6 +6,7 @@ export type SidebarStyle = CSSProperties & SidebarKnobStyle & {
   "--sidebar-width-icon"?: string;
 };
 export type SidebarLayoutMode = "viewport" | "contained";
+export type SidebarWrapperSurface = "transparent" | "background";
 type SidebarContextProps = {
   state: "expanded" | "collapsed";
   open: boolean;
@@ -55,9 +56,10 @@ export type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
   persistOpen?: boolean;
   keyboardShortcut?: string | null;
   layout?: SidebarLayoutMode;
+  surface?: SidebarWrapperSurface;
   skipLinkLabel?: string;
   contentId?: string;
   style?: SidebarStyle;
 };
-export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, layout, skipLinkLabel, contentId: contentIdProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, layout, surface, skipLinkLabel, contentId: contentIdProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/sidebar-provider.js

@@ -9,7 +9,7 @@ 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_KEYBOARD_SHORTCUT = "b";
-const SIDEBAR_MOBILE_BREAKPOINT = "--breakpoint-lg";
+const SIDEBAR_MOBILE_BREAKPOINT = "--breakpoint-sidebar";
 const SidebarElementsContext = createContext(null);
 const SidebarSurfaceContext = createContext(null);
 function useSidebarElements() {
@@ -35,7 +35,7 @@ function useSidebar() {
 	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
 	return context;
 }
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, defaultWidth, minWidth = 224, maxWidth = 420, width: widthProp, onWidthChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, layout = "viewport", skipLinkLabel = "Skip to content", contentId: contentIdProp, ref, className, style, children, ...props }) {
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, defaultWidth, minWidth = 224, maxWidth = 420, width: widthProp, onWidthChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, layout = "viewport", surface = "transparent", skipLinkLabel = "Skip to content", contentId: contentIdProp, ref, className, style, children, ...props }) {
 	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
 	const [openMobile, setOpenMobile] = useState(false);
 	if (!isMobile && openMobile) setOpenMobile(false);
@@ -135,6 +135,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 			"data-control-family": "sidebar",
 			"data-slot": "wrapper",
 			"data-layout": layout,
+			"data-surface": surface,
 			style: wrapperStyle,
 			className: cn("group/sidebar-wrapper relative flex w-full", layout === "contained" ? "h-full min-h-0 overflow-hidden" : "min-h-svh", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("a", {

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

@@ -183,7 +183,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			onPointerDown: handlePointerDown,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
-			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-pan-y group-data-[side=left]:-end-1 group-data-[side=right]:-start-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-end-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-start-2 lg:block", className),
+			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-pan-y group-data-[side=left]:-end-1 group-data-[side=right]:-start-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-end-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-start-2 sidebar:block", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				ref: widthMeasureRef,
 				"aria-hidden": true,

package/dist/ui/sidebar.d.ts

@@ -8,11 +8,11 @@ import { SidebarMobileNav, SidebarMobileNavItem, SidebarMobileNavProps, SidebarM
 import { SidebarLayoutMode, SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
-export type SidebarRailProps = (Omit<ComponentProps<"button">, "style"> & {
-  resizable?: false;
+export type SidebarRailProps = (SidebarResizeRailProps & {
+  resizable?: true;
+}) | (Omit<ComponentProps<"button">, "style"> & {
+  resizable: false;
   style?: CSSProperties & SidebarKnobStyle;
-}) | (SidebarResizeRailProps & {
-  resizable: true;
 });
 export type SidebarInsetProps = Omit<ComponentProps<"main">, "style" | "id"> & {
   render?: RenderProp<ComponentProps<"main">>;
@@ -33,7 +33,8 @@ export declare function SidebarTrigger({ className, onClick, size, label, ref, .
 }): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function SidebarRail(props: SidebarRailProps): any;
 export declare function SidebarInset({ className, render, ref, ...props }: SidebarInsetProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare function SidebarHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function SidebarHeader({ className, divider, ...props }: ComponentProps<"div"> & {
+  divider?: boolean;
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
 export declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> & {

package/dist/ui/sidebar.js

@@ -53,7 +53,7 @@ function SidebarSurface({ variant, mobileVariant = "sheet", label = "Navigation"
 			"data-control-family": "sidebar",
 			"data-slot": "container",
 			tabIndex: -1,
-			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) lg:flex", side === "left" ? "start-0" : "end-0", padded ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
+			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) sidebar:flex", side === "left" ? "start-0" : "end-0", padded ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "sidebar",
 				"data-control-family": "sidebar",
@@ -94,7 +94,7 @@ function SidebarSurface({ variant, mobileVariant = "sheet", label = "Navigation"
 		})]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group peer hidden lg:block", side === "right" && "order-last"),
+		className: cn("group peer hidden sidebar:block", side === "right" && "order-last"),
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
 		"data-slot": "root",
@@ -232,12 +232,12 @@ function SidebarRail(props) {
 	const { isMobile } = useSidebar();
 	const { railContainer } = useSidebarSurface();
 	if (isMobile || !railContainer) return null;
-	if (props.resizable) {
-		const { resizable, ...resizeProps } = props;
-		return createPortal(/* @__PURE__ */ jsx(SidebarResizeRail, { ...resizeProps }), railContainer);
+	if (props.resizable === false) {
+		const { resizable, ...toggleProps } = props;
+		return createPortal(/* @__PURE__ */ jsx(SidebarToggleRail, { ...toggleProps }), railContainer);
 	}
-	const { resizable, ...toggleProps } = props;
-	return createPortal(/* @__PURE__ */ jsx(SidebarToggleRail, { ...toggleProps }), railContainer);
+	const { resizable, ...resizeProps } = props;
+	return createPortal(/* @__PURE__ */ jsx(SidebarResizeRail, { ...resizeProps }), railContainer);
 }
 function SidebarToggleRail({ className, ref, onClick, ...props }) {
 	const { toggleSidebar, open } = useSidebar();
@@ -259,7 +259,7 @@ function SidebarToggleRail({ className, ref, onClick, ...props }) {
 				if (!event.defaultPrevented) toggleSidebar();
 			},
 			title: props.title ?? "Toggle sidebar",
-			className: cn("absolute inset-y-0 z-20 hidden -translate-x-1/2 rtl:translate-x-1/2 group-data-[side=left]:-end-4 group-data-[side=right]:start-0 lg:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", className)
+			className: cn("absolute inset-y-0 z-20 hidden -translate-x-1/2 rtl:translate-x-1/2 group-data-[side=left]:-end-4 group-data-[side=right]:start-0 sidebar:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", className)
 		}
 	});
 }
@@ -281,11 +281,12 @@ function SidebarInset({ className, render, ref, ...props }) {
 		}
 	});
 }
-function SidebarHeader({ className, ...props }) {
+function SidebarHeader({ className, divider = false, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
 		"data-slot": "header",
+		"data-divider": divider ? "" : void 0,
 		className: cn("flex flex-col", className),
 		...props
 	});

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/tabs.d.ts

@@ -37,7 +37,7 @@ export type TabsSurfaceProps = Omit<ComponentProps<"div">, "style"> & {
 };
 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 TabsList({ size, variant, className, children, ...props }: TabsListProps): import("react").JSX.Element;
 export declare function TabsTab({ className, ...props }: TabsTabProps): import("react").JSX.Element;
 export declare function TabsPanel({ className, value, ref, ...props }: TabsPanelProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/tabs.js

@@ -109,12 +109,6 @@ function Tabs({ className, onValueChange, children, ...props }) {
 		})
 	});
 }
-const controlHeights = {
-	xs: "var(--control-h-xs)",
-	sm: "var(--control-h-sm)",
-	md: "var(--control-h-md)",
-	lg: "var(--control-h-lg)"
-};
 function countTabs(children) {
 	return Children.toArray(children).reduce((count, child) => {
 		if (!isValidElement(child)) return count;
@@ -123,12 +117,8 @@ function countTabs(children) {
 		return count;
 	}, 0);
 }
-function TabsList({ size = "sm", variant = "default", className, children, style, ...props }) {
+function TabsList({ size = "sm", variant = "default", className, children, ...props }) {
 	const isSingle = countTabs(children) === 1;
-	const controlStyle = {
-		"--_tabs-trigger-h": controlHeights[size],
-		...style
-	};
 	return /* @__PURE__ */ jsxs(Tabs$1.List, {
 		"data-control-ui": "tabs",
 		"data-control-family": "tabs",
@@ -137,13 +127,12 @@ function TabsList({ size = "sm", variant = "default", className, children, style
 		"data-variant": variant,
 		"data-single": isSingle ? "true" : void 0,
 		className: cn(variant === "browser" && "gap-0 p-0 px-(--_tabs-browser-inset) pt-(--cui-tabs-list-padding)", className),
-		style: controlStyle,
 		...props,
 		children: [children, isSingle ? null : /* @__PURE__ */ jsx(Tabs$1.Indicator, {
 			"data-control-ui": "tabs",
 			"data-control-family": "tabs",
 			"data-slot": "indicator",
-			className: variant === "browser" ? "top-auto bottom-0 left-(--_tabs-browser-indicator-x) z-0 h-(--_tabs-trigger-h) w-(--_tabs-browser-indicator-width) transform-none" : void 0
+			className: variant === "browser" ? "top-auto bottom-0 left-(--_tabs-browser-indicator-x) z-0 h-(--cui-tabs-trigger-height) w-(--_tabs-browser-indicator-width) transform-none" : void 0
 		})]
 	});
 }

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)
 	});
@@ -41,7 +41,7 @@ function TimelineSeparator({ className, ...props }) {
 		"data-control-family": "timeline",
 		"data-slot": "separator",
 		...props,
-		className: cn("absolute top-5 bottom-0 start-[calc(0.5rem-0.5px)] col-start-1 w-px group-last/timeline-item:hidden", className)
+		className: cn("absolute top-5 bottom-0 col-start-1 group-last/timeline-item:hidden", className)
 	});
 }
 function TimelineContent({ className, ...props }) {

package/dist/ui/typography.d.ts

@@ -30,21 +30,27 @@ export type TypeSize = keyof typeof sizeClassNames;
 export type TypeTone = keyof typeof toneClassNames;
 export type TextWeight = keyof typeof weightClassNames;
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export type HeadingProps = ComponentProps<"h1"> & {
+type TypeFace = {
+  /** Sets the text in the monospace face, for code, paths, and identifiers. */
+  mono?: boolean;
+  /** Uses tabular figures so changing numbers keep their width. */
+  numeric?: boolean;
+};
+export type HeadingProps = ComponentProps<"h1"> & TypeFace & {
   level: HeadingLevel;
   size?: TypeSize;
   weight?: TextWeight;
   tone?: TypeTone;
 };
-export declare function headingClassName({ level, size, weight, tone, className }: HeadingProps): string;
-export declare function Heading({ level, size, weight, tone, className, ...props }: HeadingProps): import("react").JSX.Element;
+export declare function headingClassName({ level, size, weight, tone, mono, numeric, className }: HeadingProps): string;
+export declare function Heading({ level, size, weight, tone, mono, numeric, className, ...props }: HeadingProps): import("react").JSX.Element;
 export type TextTag = "p" | "span" | "div" | "small" | "strong" | "em" | "code" | "li" | "dt" | "dd" | "figcaption" | "legend" | "blockquote";
-export type TextProps = HTMLAttributes<HTMLElement> & {
+export type TextProps = HTMLAttributes<HTMLElement> & TypeFace & {
   ref?: Ref<HTMLElement>;
   as?: TextTag;
   size?: TypeSize;
   weight?: TextWeight;
   tone?: TypeTone;
 };
-export declare function Text({ as: Tag, size, weight, tone, className, ref, ...props }: TextProps): import("react").JSX.Element;
+export declare function Text({ as: Tag, size, weight, tone, mono, numeric, className, ref, ...props }: TextProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/typography.js

@@ -35,10 +35,17 @@ const headingSizeByLevel = {
 	5: "heading-4",
 	6: "heading-4"
 };
-function headingClassName({ level, size = headingSizeByLevel[level], weight, tone = "default", className }) {
-	return cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className);
+function faceClassNames({ mono, numeric }) {
+	return cn(mono && "font-mono", numeric && "tabular-nums");
 }
-function Heading({ level, size, weight, tone, className, ...props }) {
+function headingClassName({ level, size = headingSizeByLevel[level], weight, tone = "default", mono, numeric, className }) {
+	return cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], faceClassNames({
+		mono,
+		numeric
+	}), className);
+}
+const programmaticFocusTarget = "[&[tabindex='-1']]:outline-none";
+function Heading({ level, size, weight, tone, mono, numeric, className, ...props }) {
 	const Tag = `h${level}`;
 	return /* @__PURE__ */ jsx(Tag, {
 		"data-control-ui": "typography",
@@ -49,7 +56,9 @@ function Heading({ level, size, weight, tone, className, ...props }) {
 			size,
 			weight,
 			tone,
-			className
+			mono,
+			numeric,
+			className: cn(programmaticFocusTarget, className)
 		}),
 		...props
 	});
@@ -58,13 +67,16 @@ function attachRef(ref, node) {
 	if (typeof ref === "function") return ref(node);
 	if (ref) ref.current = node;
 }
-function Text({ as: Tag = "span", size = "body", weight, tone = "default", className, ref, ...props }) {
+function Text({ as: Tag = "span", size = "body", weight, tone = "default", mono, numeric, className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Tag, {
 		ref: ref ? (node) => attachRef(ref, node) : void 0,
 		"data-control-ui": "typography",
 		"data-control-family": "typography",
 		"data-slot": "text",
-		className: cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className),
+		className: cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], faceClassNames({
+			mono,
+			numeric
+		}), className),
 		...props
 	});
 }

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/biome-preset.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./node_modules/@ctrl-ui/react/lint/no-component-style-classes.grit"]
+}

package/lint/class-policy.mjs

@@ -0,0 +1,17 @@
+const controlUiImportPath = `(?:@ctrl-ui/react|[^'"]*components/control-ui)/`;
+
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+export function controlUiImportPattern(importSources = []) {
+  return `(?:${[controlUiImportPath, ...importSources.map(escapeRegExp)].join("|")})`;
+}
+
+export const componentStyleClass = String.raw`[^\s"'\x60]!(?:[\s"'\x60]|$)|(?:^|[\s"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:foreground|muted|primary|secondary|accent|destructive|success|warning|info|card|popover|sidebar|background|canvas|current|inherit|transparent|white|black|[a-z]+-\d{2,3}|\[(?:#|oklch|rgb|hsl|lab|lch|color|var))|font-|leading-|tracking-|border|divide-|rounded|shadow|ring\b|ring-|outline|opacity-|backdrop-|fill-|stroke-|decoration-|underline|line-through|italic|uppercase|lowercase|capitalize|tabular-nums|(?:hover|focus|focus-visible|focus-within|active|disabled|open|checked|dark|placeholder|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)`;
+
+export const rawTypeClass = String.raw`(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b|(?:^|[^\w-])text-\[\d[^\]]*\]`;
+
+export const componentStyleMessage =
+  "Control UI component styled through className: color, type, padding, borders, radius, shadows, state styles and !important belong to the component. Use its props or a --cui-* knob; keep className for layout (flex, gap, width, margin, placement).";
+
+export const rawTypeMessage =
+  "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.";