@ctrl-ui/react 0.8.21 → 0.9.1

package/dist/ui/icon-picker.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { ScrollArea } from "./scroll-area.js";
 import { Input } from "./input.js";
 import { Toolbar } from "@base-ui/react/toolbar";
 import { createContext, useContext, useRef, useState } from "react";
@@ -62,7 +63,7 @@ function IconPickerSearch({ placeholder = "Search icons…", "aria-label": ariaL
 		}
 	});
 }
-function IconPickerContent({ className, empty = "No icons found.", "aria-label": ariaLabel = "Icons", ...props }) {
+function IconPickerContent({ className, ref, empty = "No icons found.", "aria-label": ariaLabel = "Icons", ...props }) {
 	const picker = useIconPicker();
 	const buttonsRef = useRef(/* @__PURE__ */ new Map());
 	const normalizedSearch = picker.search.trim().toLocaleLowerCase();
@@ -76,12 +77,16 @@ function IconPickerContent({ className, empty = "No icons found.", "aria-label":
 		const nextIndex = Math.max(0, Math.min(filteredItems.length - 1, currentIndex + direction * picker.columns));
 		buttonsRef.current.get(filteredItems[nextIndex].value)?.focus();
 	};
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "icon-picker",
-		"data-control-family": "icon-picker",
-		"data-slot": "content",
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		lockAxis: "x",
 		className,
-		...props,
+		viewportRef: ref,
+		viewportProps: {
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "content",
+			...props
+		},
 		children: filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "icon-picker",
 			"data-control-family": "icon-picker",

package/dist/ui/level-meter.d.ts

@@ -0,0 +1,31 @@
+import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/level-meter.d.ts
+export type LevelMeterSource = {
+  subscribe: (listener: (levelDb: number) => void) => () => void;
+};
+export type LevelMeterOrientation = "horizontal" | "vertical";
+export type LevelMeterProps = Omit<ComponentProps<"div">, "style"> & {
+  value?: number;
+  source?: LevelMeterSource | null;
+  minDb?: number;
+  maxDb?: number;
+  warningDb?: number;
+  clipDb?: number;
+  orientation?: LevelMeterOrientation;
+  style?: CSSProperties & RangeKnobStyle;
+};
+export type LevelMeterTrackProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+export type LevelMeterBarProps = Omit<ComponentProps<"div">, "style" | "children"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+export type LevelMeterPeakProps = Omit<ComponentProps<"div">, "style" | "children"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+export declare function LevelMeter({ value, source, minDb, maxDb, warningDb, clipDb, orientation, className, style, children, ref, ...props }: LevelMeterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function LevelMeterTrack({ className, ...props }: LevelMeterTrackProps): import("react").JSX.Element;
+export declare function LevelMeterBar({ className, ...props }: LevelMeterBarProps): import("react").JSX.Element;
+export declare function LevelMeterPeak({ className, ...props }: LevelMeterPeakProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/level-meter.js

@@ -0,0 +1,152 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { advanceLevelMeterReading, levelMeterFraction, levelMeterReadingSettled } from "../lib/level-meter-ballistics.js";
+import { useEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/level-meter.tsx
+const ARIA_UPDATE_INTERVAL_MS = 250;
+function createLevelMeterPainter() {
+	let root = null;
+	let scale = {
+		minDb: -60,
+		maxDb: 0
+	};
+	let announcesValue = false;
+	let targetDb = Number.NEGATIVE_INFINITY;
+	let reading = {
+		levelDb: scale.minDb,
+		peakDb: scale.minDb,
+		peakHeldUntilMs: 0
+	};
+	let frame = 0;
+	let lastFrameMs = 0;
+	let lastAnnouncedMs = Number.NEGATIVE_INFINITY;
+	const paint = (element, nowMs, settled) => {
+		element.style.setProperty("--_range-level", `${levelMeterFraction(reading.levelDb, scale)}`);
+		element.style.setProperty("--_range-level-peak", `${levelMeterFraction(reading.peakDb, scale)}`);
+		if (!announcesValue || !settled && nowMs - lastAnnouncedMs < ARIA_UPDATE_INTERVAL_MS) return;
+		lastAnnouncedMs = nowMs;
+		const roundedDb = Math.round(reading.levelDb);
+		element.setAttribute("aria-valuenow", `${roundedDb}`);
+		element.setAttribute("aria-valuetext", `${roundedDb} dB`);
+	};
+	const step = (nowMs) => {
+		frame = 0;
+		if (!root) return;
+		reading = advanceLevelMeterReading(reading, targetDb, nowMs - lastFrameMs, nowMs, scale);
+		lastFrameMs = nowMs;
+		const settled = levelMeterReadingSettled(reading, targetDb, scale);
+		paint(root, nowMs, settled);
+		if (!settled) frame = requestAnimationFrame(step);
+	};
+	const wake = () => {
+		if (frame !== 0 || !root) return;
+		lastFrameMs = performance.now();
+		frame = requestAnimationFrame(step);
+	};
+	return {
+		attach(element, nextScale, nextAnnouncesValue) {
+			root = element;
+			scale = nextScale;
+			announcesValue = nextAnnouncesValue;
+			wake();
+			return () => {
+				cancelAnimationFrame(frame);
+				frame = 0;
+				root = null;
+			};
+		},
+		setTarget(levelDb) {
+			targetDb = levelDb;
+			wake();
+		}
+	};
+}
+function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, clipDb = -6, orientation = "horizontal", className, style, children, ref, ...props }) {
+	const [painter] = useState(createLevelMeterPainter);
+	const rootRef = useRef(null);
+	const labelled = Boolean(props["aria-label"] || props["aria-labelledby"]);
+	const scale = {
+		minDb,
+		maxDb
+	};
+	const zoneStyle = {
+		"--_range-level-warning-start": `${levelMeterFraction(warningDb, scale)}`,
+		"--_range-level-clip-start": `${levelMeterFraction(clipDb, scale)}`,
+		...style
+	};
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		return painter.attach(root, {
+			minDb,
+			maxDb
+		}, labelled);
+	}, [
+		painter,
+		minDb,
+		maxDb,
+		labelled
+	]);
+	useEffect(() => {
+		if (source) return source.subscribe(painter.setTarget);
+		painter.setTarget(value ?? Number.NEGATIVE_INFINITY);
+	}, [
+		painter,
+		source,
+		value
+	]);
+	return useRender({
+		defaultTagName: "div",
+		ref: [ref ?? null, rootRef],
+		props: {
+			...props,
+			role: labelled ? "meter" : void 0,
+			"aria-hidden": labelled ? void 0 : true,
+			"aria-valuemin": labelled ? minDb : void 0,
+			"aria-valuemax": labelled ? maxDb : void 0,
+			"aria-valuenow": labelled ? minDb : void 0,
+			"data-control-ui": "level-meter",
+			"data-control-family": "range",
+			"data-range-kind": "level-meter",
+			"data-slot": "root",
+			"data-orientation": orientation,
+			className: cn("flex", className),
+			style: zoneStyle,
+			children: children ?? /* @__PURE__ */ jsx(LevelMeterTrack, { children: /* @__PURE__ */ jsx(LevelMeterBar, {}) })
+		}
+	});
+}
+function LevelMeterTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "level-meter",
+		"data-control-family": "range",
+		"data-range-kind": "level-meter",
+		"data-slot": "track",
+		className: cn("relative overflow-hidden", className),
+		...props
+	});
+}
+function LevelMeterBar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "level-meter",
+		"data-control-family": "range",
+		"data-range-kind": "level-meter",
+		"data-slot": "bar",
+		className: cn("absolute inset-0", className),
+		...props
+	});
+}
+function LevelMeterPeak({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "level-meter",
+		"data-control-family": "range",
+		"data-range-kind": "level-meter",
+		"data-slot": "peak",
+		className: cn("absolute inset-0", className),
+		...props
+	});
+}
+//#endregion
+export { LevelMeter, LevelMeterBar, LevelMeterPeak, LevelMeterTrack };

package/dist/ui/markdown-elements.d.ts

@@ -11,6 +11,7 @@ type MarkdownElementProps<Tag extends keyof JSX.IntrinsicElements> = ComponentPr
 } & {
   style?: CSSProperties & MarkdownKnobStyle;
 };
+export declare function MarkdownInput({ type, checked, className, node: _node, ...props }: MarkdownElementProps<"input">): JSX.Element;
 export declare function MarkdownInlineCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
 export declare function MarkdownPre({ children, node: _node }: MarkdownElementProps<"pre">): JSX.Element;
 export declare function MarkdownCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
@@ -23,7 +24,7 @@ export declare function MarkdownH6({ className, node: _node, ...props }: Markdow
 export declare function MarkdownP({ className, node: _node, ...props }: MarkdownElementProps<"p">): JSX.Element;
 export declare function MarkdownUl({ className, node: _node, ...props }: MarkdownElementProps<"ul">): JSX.Element;
 export declare function MarkdownOl({ className, node: _node, ...props }: MarkdownElementProps<"ol">): JSX.Element;
-export declare function MarkdownLi({ className, node: _node, ...props }: MarkdownElementProps<"li">): JSX.Element;
+export declare function MarkdownLi({ id, className, node: _node, ...props }: MarkdownElementProps<"li">): JSX.Element;
 export declare function MarkdownA({ className, node: _node, ...props }: MarkdownElementProps<"a">): JSX.Element;
 export declare function MarkdownBlockquote({ className, node: _node, ...props }: MarkdownElementProps<"blockquote">): JSX.Element;
 export declare function MarkdownHr({ className, node: _node, ...props }: MarkdownElementProps<"hr">): JSX.Element;
@@ -33,6 +34,7 @@ export declare function MarkdownTable({ className, children, node: _node, ...pro
 export declare function MarkdownTh({ className, node: _node, ...props }: MarkdownElementProps<"th">): JSX.Element;
 export declare function MarkdownTd({ className, node: _node, ...props }: MarkdownElementProps<"td">): JSX.Element;
 export declare const markdownComponents: {
+  input: typeof MarkdownInput;
   code: typeof MarkdownCode;
   inlineCode: typeof MarkdownInlineCode;
   h1: typeof MarkdownH1;

package/dist/ui/markdown-elements.js

@@ -1,9 +1,31 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { ScrollArea } from "./scroll-area.js";
+import { Heading } from "./typography.js";
 import { Code, CodeActions, CodeContent, CodeCopy, CodeHeader, CodeTitle } from "./code.js";
+import { Checkbox } from "./checkbox.js";
 import { CodeDiff } from "./code-diff.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { markdownHeadingAttributes } from "./markdown-heading.js";
+import { createContext, use, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/markdown-elements.tsx
+const MarkdownTaskLabelContext = createContext(void 0);
+function MarkdownInput({ type, checked, className, node: _node, ...props }) {
+	const labelId = use(MarkdownTaskLabelContext);
+	if (type !== "checkbox") return /* @__PURE__ */ jsx("input", {
+		type,
+		checked,
+		className,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Checkbox, {
+		checked: Boolean(checked),
+		readOnly: true,
+		className,
+		"aria-label": labelId ? void 0 : "Task item",
+		"aria-labelledby": labelId
+	});
+}
 function textValue(children) {
 	return Array.isArray(children) ? children.join("") : String(children ?? "");
 }
@@ -21,7 +43,7 @@ function MarkdownInlineCode({ className, children, node: _node, ...props }) {
 	});
 }
 function MarkdownPre({ children, node: _node }) {
-	return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 function MarkdownCode({ className, children, node: _node, ...props }) {
 	const lang = languageFromClassName(className);
@@ -44,56 +66,68 @@ function MarkdownCode({ className, children, node: _node, ...props }) {
 	})] });
 }
 function MarkdownH1({ className, node: _node, ...props }) {
-	return /* @__PURE__ */ jsx("h1", {
+	const { class: headingClass } = markdownHeadingAttributes(1);
+	return /* @__PURE__ */ jsx(Heading, {
+		level: 1,
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "h1",
-		className,
+		className: cn(headingClass, className),
 		...props
 	});
 }
 function MarkdownH2({ className, node: _node, ...props }) {
-	return /* @__PURE__ */ jsx("h2", {
+	const { class: headingClass } = markdownHeadingAttributes(2);
+	return /* @__PURE__ */ jsx(Heading, {
+		level: 2,
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "h2",
-		className,
+		className: cn(headingClass, className),
 		...props
 	});
 }
 function MarkdownH3({ className, node: _node, ...props }) {
-	return /* @__PURE__ */ jsx("h3", {
+	const { class: headingClass } = markdownHeadingAttributes(3);
+	return /* @__PURE__ */ jsx(Heading, {
+		level: 3,
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "h3",
-		className,
+		className: cn(headingClass, className),
 		...props
 	});
 }
 function MarkdownH4({ className, node: _node, ...props }) {
-	return /* @__PURE__ */ jsx("h4", {
+	const { class: headingClass } = markdownHeadingAttributes(4);
+	return /* @__PURE__ */ jsx(Heading, {
+		level: 4,
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "h4",
-		className,
+		className: cn(headingClass, className),
 		...props
 	});
 }
 function MarkdownH5({ className, node: _node, ...props }) {
-	return /* @__PURE__ */ jsx("h5", {
+	const { class: headingClass } = markdownHeadingAttributes(5);
+	return /* @__PURE__ */ jsx(Heading, {
+		level: 5,
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "h5",
-		className,
+		className: cn(headingClass, className),
 		...props
 	});
 }
 function MarkdownH6({ className, node: _node, ...props }) {
-	return /* @__PURE__ */ jsx("h6", {
+	const { class: headingClass } = markdownHeadingAttributes(6);
+	return /* @__PURE__ */ jsx(Heading, {
+		level: 6,
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "h6",
-		className,
+		className: cn(headingClass, className),
 		...props
 	});
 }
@@ -124,13 +158,18 @@ function MarkdownOl({ className, node: _node, ...props }) {
 		...props
 	});
 }
-function MarkdownLi({ className, node: _node, ...props }) {
-	return /* @__PURE__ */ jsx("li", {
-		"data-control-ui": "markdown",
-		"data-control-family": "markdown",
-		"data-slot": "list-item",
-		className,
-		...props
+function MarkdownLi({ id, className, node: _node, ...props }) {
+	const labelId = useId();
+	return /* @__PURE__ */ jsx(MarkdownTaskLabelContext, {
+		value: id ?? labelId,
+		children: /* @__PURE__ */ jsx("li", {
+			id: id ?? labelId,
+			"data-control-ui": "markdown",
+			"data-control-family": "markdown",
+			"data-slot": "list-item",
+			className,
+			...props
+		})
 	});
 }
 function MarkdownA({ className, node: _node, ...props }) {
@@ -215,6 +254,7 @@ function MarkdownTd({ className, node: _node, ...props }) {
 	});
 }
 const markdownComponents = {
+	input: MarkdownInput,
 	code: MarkdownCode,
 	inlineCode: MarkdownInlineCode,
 	h1: MarkdownH1,
@@ -237,4 +277,4 @@ const markdownComponents = {
 	td: MarkdownTd
 };
 //#endregion
-export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };
+export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownInput, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };

package/dist/ui/markdown-heading.d.ts

@@ -0,0 +1,9 @@
+import { HeadingLevel } from "./typography.js";
+//#region src/ui/markdown-heading.d.ts
+export declare function markdownHeadingAttributes(level: HeadingLevel): {
+  "data-control-ui": string;
+  "data-control-family": string;
+  "data-slot": string;
+  class: string;
+};
+//#endregion

package/dist/ui/markdown-heading.js

@@ -0,0 +1,25 @@
+import { headingClassName } from "./typography.js";
+//#region src/ui/markdown-heading.ts
+const headingSizes = {
+	1: "heading-2",
+	2: "heading-3",
+	3: "heading-4",
+	4: "body",
+	5: "body",
+	6: "body"
+};
+function markdownHeadingAttributes(level) {
+	return {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": `h${level}`,
+		class: headingClassName({
+			level,
+			size: headingSizes[level],
+			weight: level >= 4 ? "semibold" : void 0,
+			className: level >= 4 ? "leading-tight" : void 0
+		})
+	};
+}
+//#endregion
+export { markdownHeadingAttributes };

package/dist/ui/resizable.js

@@ -208,26 +208,41 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 }
 function GripIcon({ className }) {
 	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 4 16",
-		width: "4",
-		height: "16",
+		viewBox: "0 0 6 10",
+		width: "6",
+		height: "10",
 		fill: "currentColor",
 		"aria-hidden": "true",
 		className,
 		children: [
 			/* @__PURE__ */ jsx("circle", {
-				cx: "2",
-				cy: "3",
+				cx: "1",
+				cy: "1",
 				r: "1"
 			}),
 			/* @__PURE__ */ jsx("circle", {
-				cx: "2",
-				cy: "8",
+				cx: "5",
+				cy: "1",
 				r: "1"
 			}),
 			/* @__PURE__ */ jsx("circle", {
-				cx: "2",
-				cy: "13",
+				cx: "1",
+				cy: "5",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "5",
+				cy: "5",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "1",
+				cy: "9",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "5",
+				cy: "9",
 				r: "1"
 			})
 		]

package/dist/ui/sidebar-provider.js

@@ -1,16 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useSkin } from "../skin-provider.js";
 import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
 import { TooltipProvider } from "./tooltip.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
-import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 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_WIDTH = "16rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SIDEBAR_MOBILE_BREAKPOINT = "--breakpoint-lg";
 const SidebarElementsContext = createContext(null);
@@ -39,7 +36,6 @@ function useSidebar() {
 	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 }) {
-	const skin = useSkin();
 	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
 	const [openMobile, setOpenMobile] = useState(false);
 	if (!isMobile && openMobile) setOpenMobile(false);
@@ -88,10 +84,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 		if (persistOpen) document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 	};
 	const toggleSidebar = () => isMobile ? setOpenMobile((prev) => !prev) : setOpen(!open);
-	const toggleRef = useRef(toggleSidebar);
-	useEffect(() => {
-		toggleRef.current = toggleSidebar;
-	});
+	const toggleSidebarFromShortcut = useEffectEvent(toggleSidebar);
 	useEffect(() => {
 		if (keyboardShortcut === null) return;
 		const shortcut = keyboardShortcut.toLowerCase();
@@ -101,7 +94,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 			const target = event.target;
 			if (target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select") !== null)) return;
 			event.preventDefault();
-			toggleRef.current();
+			toggleSidebarFromShortcut();
 		};
 		window.addEventListener("keydown", handleKeyDown);
 		return () => window.removeEventListener("keydown", handleKeyDown);
@@ -124,8 +117,6 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 		contentId
 	};
 	const wrapperStyle = {
-		"--sidebar-width": skin.sidebarWidth ?? SIDEBAR_WIDTH,
-		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
 		...style,
 		...width === void 0 ? {} : { "--sidebar-width": `${width}px` }
 	};

package/dist/ui/typography.d.ts

@@ -34,6 +34,7 @@ export type HeadingProps = ComponentProps<"h1"> & {
   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 type TextTag = "p" | "span" | "div" | "small" | "strong" | "em" | "code" | "li" | "dt" | "dd" | "figcaption" | "legend" | "blockquote";
 export type TextProps = HTMLAttributes<HTMLElement> & {

package/dist/ui/typography.js

@@ -33,13 +33,22 @@ const headingSizeByLevel = {
 	5: "heading-4",
 	6: "heading-4"
 };
-function Heading({ level, size = headingSizeByLevel[level], weight, tone = "default", className, ...props }) {
+function headingClassName({ level, size = headingSizeByLevel[level], weight, tone = "default", className }) {
+	return cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className);
+}
+function Heading({ level, size, weight, tone, className, ...props }) {
 	const Tag = `h${level}`;
 	return /* @__PURE__ */ jsx(Tag, {
 		"data-control-ui": "typography",
 		"data-control-family": "typography",
 		"data-slot": "heading",
-		className: cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className),
+		className: headingClassName({
+			level,
+			size,
+			weight,
+			tone,
+			className
+		}),
 		...props
 	});
 }
@@ -58,4 +67,4 @@ function Text({ as: Tag = "span", size = "body", weight, tone = "default", class
 	});
 }
 //#endregion
-export { Heading, Text };
+export { Heading, Text, headingClassName };

package/dist/user-ask.js

@@ -4,7 +4,7 @@ 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 { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+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";
 //#region src/user-ask.tsx
@@ -30,21 +30,17 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, questionStatusLabel
 	});
 	const titleId = useId();
 	const panelRef = useRef(null);
-	const [hasNavigated, setHasNavigated] = useState(false);
-	const questionStatus = hasNavigated && ask.activeQuestion ? questionStatusLabel(ask.activeIndex + 1, ask.questions.length, ask.activeQuestion.title) : "";
+	const questionStatus = ask.hasNavigated && ask.activeQuestion ? questionStatusLabel(ask.activeIndex + 1, ask.questions.length, ask.activeQuestion.title) : "";
 	useEffect(() => {
 		if (autoFocus) panelRef.current?.focus();
 	}, [autoFocus]);
-	const lastActiveIndex = useRef(ask.activeIndex);
 	useEffect(() => {
-		if (lastActiveIndex.current === ask.activeIndex) return;
-		lastActiveIndex.current = ask.activeIndex;
-		setHasNavigated(true);
+		if (!ask.hasNavigated) return;
 		const panel = panelRef.current;
 		const active = document.activeElement;
 		const activeIsUsable = active instanceof HTMLElement && panel?.contains(active) && active.checkVisibility();
 		if (panel && !activeIsUsable) panel.focus();
-	}, [ask.activeIndex]);
+	}, [ask.activeIndex, ask.hasNavigated]);
 	return /* @__PURE__ */ jsx(UserAskContext.Provider, {
 		value: {
 			...ask,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.21",
+  "version": "0.9.1",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.8.0",
+    "@tanstack/charts": "^1.1.0",
     "@tanstack/react-virtual": "^3.14.13",
     "@tiptap/core": "3.31.4",
     "@tiptap/extension-image": "3.31.4",
@@ -71,6 +72,9 @@
     "zod": "^4.6.5"
   },
   "peerDependenciesMeta": {
+    "@tanstack/charts": {
+      "optional": true
+    },
     "@tanstack/react-virtual": {
       "optional": true
     },

package/dist/ui/emoji-icon-picker.d.ts

@@ -1,13 +0,0 @@
-import { EmojiPicker } from "./emoji-picker.js";
-import { IconPicker } from "./icon-picker.js";
-import { Tabs, TabsList } from "./tabs.js";
-import { ComponentProps } from "react";
-//#region src/ui/emoji-icon-picker.d.ts
-export declare function EmojiIconPicker({ children, defaultValue, ...props }: ComponentProps<typeof Tabs<"emoji" | "icons">>): import("react").JSX.Element;
-export declare function EmojiIconPickerTabs({ emojiLabel, iconsLabel, ...props }: Omit<ComponentProps<typeof TabsList>, "children"> & {
-  emojiLabel?: string;
-  iconsLabel?: string;
-}): import("react").JSX.Element;
-export declare function EmojiIconPickerEmoji(props: ComponentProps<typeof EmojiPicker>): import("react").JSX.Element;
-export declare function EmojiIconPickerIcons(props: ComponentProps<typeof IconPicker>): import("react").JSX.Element;
-//#endregion