@ctrl-ui/react 0.8.10 → 0.8.11

package/dist/ui/icon-picker.js

@@ -0,0 +1,140 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Input } from "./input.js";
+import { createContext, useContext, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/ui/icon-picker.tsx
+const IconPickerContext = createContext(null);
+function useIconPicker() {
+	const picker = useContext(IconPickerContext);
+	if (!picker) throw new Error("IconPicker parts must be rendered inside <IconPicker>.");
+	return picker;
+}
+function IconPicker({ items, columns = 8, value, defaultValue, onValueChange, className, style, children, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const [search, setSearch] = useState("");
+	const selectIcon = (selectedValue) => {
+		if (value === void 0) setUncontrolledValue(selectedValue);
+		onValueChange?.(selectedValue);
+	};
+	const pickerStyle = {
+		"--_icon-picker-columns": columns,
+		...style
+	};
+	return /* @__PURE__ */ jsx(IconPickerContext.Provider, {
+		value: {
+			items,
+			columns,
+			selectedValue: value ?? uncontrolledValue,
+			selectIcon,
+			search,
+			setSearch
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "root",
+			className,
+			style: pickerStyle,
+			...props,
+			children
+		})
+	});
+}
+function IconPickerSearch({ placeholder = "Search icons…", "aria-label": ariaLabel = "Search icons", className, onChange, ...props }) {
+	const picker = useIconPicker();
+	return /* @__PURE__ */ jsx(Input, {
+		type: "search",
+		size: "sm",
+		placeholder,
+		"aria-label": ariaLabel,
+		autoComplete: "off",
+		spellCheck: false,
+		className: cn("mx-2 mt-2 w-[calc(100%-var(--spacing)*4)]", className),
+		...props,
+		value: picker.search,
+		onChange: (event) => {
+			onChange?.(event);
+			if (!event.defaultPrevented) picker.setSearch(event.target.value);
+		}
+	});
+}
+function IconPickerContent({ className, empty = "No icons found.", "aria-label": ariaLabel = "Icons", ...props }) {
+	const picker = useIconPicker();
+	const buttonsRef = useRef(/* @__PURE__ */ new Map());
+	const normalizedSearch = picker.search.trim().toLocaleLowerCase();
+	const filteredItems = picker.items.filter((item) => [item.label, ...item.keywords ?? []].some((text) => text.toLocaleLowerCase().includes(normalizedSearch)));
+	const moveGridFocus = (event) => {
+		if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+		const currentIndex = filteredItems.findIndex((item) => buttonsRef.current.get(item.value) === event.target);
+		if (currentIndex < 0) return;
+		event.preventDefault();
+		const direction = event.key === "ArrowDown" ? 1 : -1;
+		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",
+		className,
+		...props,
+		children: filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "empty",
+			role: "status",
+			children: empty
+		}) : /* @__PURE__ */ jsx(Toolbar.Root, {
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "grid",
+			"aria-label": ariaLabel,
+			loopFocus: false,
+			onKeyDownCapture: moveGridFocus,
+			children: filteredItems.map((item) => /* @__PURE__ */ jsx(Toolbar.Button, {
+				type: "button",
+				"aria-label": item.label,
+				"aria-pressed": picker.selectedValue === item.value,
+				"data-control-ui": "icon-picker",
+				"data-control-family": "icon-picker",
+				"data-slot": "icon",
+				ref: (button) => {
+					if (!button) return;
+					buttonsRef.current.set(item.value, button);
+					return () => {
+						buttonsRef.current.delete(item.value);
+					};
+				},
+				onClick: () => picker.selectIcon(item.value),
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: item.icon
+				})
+			}, item.value))
+		})
+	});
+}
+function IconPickerColors({ colors, "aria-label": ariaLabel = "Icon color", ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-control-ui": "icon-picker",
+		"data-control-family": "icon-picker",
+		"data-slot": "colors",
+		"aria-label": ariaLabel,
+		...props,
+		children: colors.map((color) => /* @__PURE__ */ jsx(Radio.Root, {
+			value: color.value,
+			"aria-label": color.label,
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "color",
+			style: { color: color.color },
+			children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+		}, color.value))
+	});
+}
+//#endregion
+export { IconPicker, IconPickerColors, IconPickerContent, IconPickerSearch };

package/dist/ui/markdown-elements.js

@@ -35,17 +35,13 @@ function MarkdownCode({ className, children, node: _node, ...props }) {
 	if (lang === "diff" && value.includes("@@")) return /* @__PURE__ */ jsx(CodeDiff, {
 		patch: value,
 		lang: "diff",
-		diffStyle: "unified",
-		className: "my-4"
-	});
-	return /* @__PURE__ */ jsxs(Code, {
-		className: "my-4",
-		children: [/* @__PURE__ */ jsxs(CodeHeader, { children: [lang ? /* @__PURE__ */ jsx(CodeTitle, { children: lang }) : null, /* @__PURE__ */ jsx(CodeActions, { children: /* @__PURE__ */ jsx(CodeCopy, { value }) })] }), /* @__PURE__ */ jsx(CodeContent, {
-			code: value,
-			lang,
-			highlight: lang ? "auto" : "none"
-		})]
+		diffStyle: "unified"
 	});
+	return /* @__PURE__ */ jsxs(Code, { children: [/* @__PURE__ */ jsxs(CodeHeader, { children: [lang ? /* @__PURE__ */ jsx(CodeTitle, { children: lang }) : null, /* @__PURE__ */ jsx(CodeActions, { children: /* @__PURE__ */ jsx(CodeCopy, { value }) })] }), /* @__PURE__ */ jsx(CodeContent, {
+		code: value,
+		lang,
+		highlight: lang ? "auto" : "none"
+	})] });
 }
 function MarkdownH1({ className, node: _node, ...props }) {
 	return /* @__PURE__ */ jsx("h1", {

package/dist/ui/markdown.d.ts

@@ -1,13 +1,14 @@
 import { MarkdownKnobStyle } from "../knob-contracts/markdown-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/markdown.d.ts
-export type MarkdownProps = Omit<ComponentProps<"div">, "children" | "style"> & {
-  content: string;
+export type MarkdownRootProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & MarkdownKnobStyle;
 };
-export declare function MarkdownRoot({ className, ...props }: Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & MarkdownKnobStyle;
-}): import("react").JSX.Element;
+export type MarkdownProps = Omit<MarkdownRootProps, "children"> & {
+  content: string;
+};
+export declare function MarkdownRoot({ className, ...props }: MarkdownRootProps): import("react").JSX.Element;
+export declare function MarkdownFlow(props: MarkdownRootProps): import("react").JSX.Element;
 export declare function Markdown({ content, className, ...props }: MarkdownProps): import("react").JSX.Element;
 export type MarkdownComponentProps = ComponentProps<typeof Markdown>;
 //#endregion

package/dist/ui/markdown.js

@@ -13,19 +13,27 @@ function MarkdownRoot({ className, ...props }) {
 		...props
 	});
 }
+function MarkdownFlow(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "flow",
+		...props
+	});
+}
 function Markdown({ content, className, ...props }) {
 	return /* @__PURE__ */ jsx(MarkdownRoot, {
 		className,
 		...props,
-		children: /* @__PURE__ */ jsx(Streamdown, {
+		children: /* @__PURE__ */ jsx(MarkdownFlow, { children: /* @__PURE__ */ jsx(Streamdown, {
 			mode: "streaming",
 			parseIncompleteMarkdown: true,
 			controls: false,
 			components: markdownComponents,
-			className: "space-y-4 whitespace-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+			className: "cui-markdown-streamdown [&>[data-control-family]]:[margin-block:revert-layer]",
 			children: content
-		})
+		}) })
 	});
 }
 //#endregion
-export { Markdown, MarkdownRoot };
+export { Markdown, MarkdownFlow, MarkdownRoot };

package/dist/ui/popover.d.ts

@@ -18,6 +18,9 @@ export declare function PopoverTrigger({ className, ...props }: ComponentProps<t
 }): import("react").JSX.Element;
 export declare function PopoverAnchor(props: ComponentProps<typeof Popover$1.Trigger>): import("react").JSX.Element;
 export declare function PopoverContent({ className, children, side, align, sideOffset, collisionPadding, padding, ...props }: PopoverPopupProps): import("react").JSX.Element;
+export declare function PopoverViewport({ children, ref, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function PopoverHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/popover.js

@@ -2,6 +2,7 @@
 import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
+import { useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/ui/popover.tsx
@@ -45,6 +46,40 @@ function PopoverContent({ className, children, side = "bottom", align = "center"
 		})
 	}) });
 }
+function PopoverViewport({ children, ref, ...props }) {
+	const viewportRef = useRef(null);
+	const contentRef = useRef(null);
+	useImperativeHandle(ref, () => {
+		if (!viewportRef.current) throw new Error("PopoverViewport is not mounted.");
+		return viewportRef.current;
+	}, []);
+	useLayoutEffect(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		if (!viewport || !content) return;
+		const updateHeight = () => viewport.style.setProperty("--_popover-viewport-height", `${content.offsetHeight}px`);
+		updateHeight();
+		const observer = new ResizeObserver(updateHeight);
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "popover",
+		"data-control-family": "popup",
+		"data-popup-kind": "popover",
+		"data-slot": "viewport",
+		...props,
+		ref: viewportRef,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "popover",
+			"data-control-family": "popup",
+			"data-popup-kind": "popover",
+			"data-slot": "viewport-content",
+			ref: contentRef,
+			children
+		})
+	});
+}
 function PopoverHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "popover",
@@ -86,4 +121,4 @@ function PopoverClose({ className, ...props }) {
 	});
 }
 //#endregion
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, popoverContentPaddings };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PopoverViewport, popoverContentPaddings };

package/dist/ui/scroll-area.d.ts

@@ -5,6 +5,8 @@ import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/ui/scroll-area.d.ts
 export declare const scrollAreaScrollbarVisibilities: readonly ["scroll", "hover", "always"];
 export type ScrollAreaScrollbarVisibility = (typeof scrollAreaScrollbarVisibilities)[number];
+export declare const scrollAreaScrollbarGutters: readonly ["auto", "stable"];
+export type ScrollAreaScrollbarGutter = (typeof scrollAreaScrollbarGutters)[number];
 export type ScrollAreaLockAxis = "x" | "y" | "both";
 export type ScrollAreaViewportProps = Omit<ComponentProps<"div">, "children" | "className" | "ref"> & {
   "data-control-ui"?: string;
@@ -25,6 +27,7 @@ export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   blurProps?: Pick<ProgressiveBlurProps, "style">;
   lockAxis?: ScrollAreaLockAxis;
   scrollbarVisibility?: ScrollAreaScrollbarVisibility;
+  scrollbarGutter?: ScrollAreaScrollbarGutter;
 };
-export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, scrollbarGutter, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: ScrollAreaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/scroll-area.js

@@ -10,14 +10,20 @@ const scrollAreaScrollbarVisibilities = [
 	"hover",
 	"always"
 ];
-function Scrollbar({ orientation, visibility, thumbStyle }) {
+const scrollAreaScrollbarGutters = ["auto", "stable"];
+function Scrollbar({ orientation, visibility, gutter, thumbStyle }) {
 	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		orientation,
+		keepMounted: gutter === "stable",
 		"data-control-ui": "scroll-area",
 		"data-control-family": "scroll-area",
 		"data-slot": "scrollbar",
 		"data-visibility": visibility,
 		className: cn("m-px flex touch-none select-none", orientation === "vertical" ? "justify-center" : "flex-col"),
+		style: gutter === "stable" ? {
+			position: "relative",
+			inset: "auto"
+		} : void 0,
 		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
 			"data-control-ui": "scroll-area",
 			"data-control-family": "scroll-area",
@@ -68,9 +74,11 @@ function EdgeBlurs({ blurProps, lockX, lockY }) {
 		})
 	] });
 }
-function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "hover", children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility, scrollbarGutter, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
 	const skin = useSkin();
 	const resolvedBlur = blur ?? skin.scrollAreaBlur ?? false;
+	const resolvedVisibility = scrollbarVisibility ?? skin.scrollAreaScrollbarVisibility ?? "hover";
+	const resolvedGutter = scrollbarGutter ?? skin.scrollAreaScrollbarGutter ?? "auto";
 	const lockX = lockAxis === "x" || lockAxis === "both";
 	const lockY = lockAxis === "y" || lockAxis === "both";
 	const { style: viewportPropsStyle, ...resolvedViewportProps } = viewportProps ?? {};
@@ -85,6 +93,7 @@ function ScrollArea({ className, viewportClassName, contentClassName, viewportPr
 		"data-mask": mask || void 0,
 		"data-blur": resolvedBlur || void 0,
 		"data-lock-axis": lockAxis,
+		"data-scrollbar-gutter": resolvedGutter,
 		className: cn("relative overflow-hidden", className),
 		style,
 		children: [
@@ -114,22 +123,28 @@ function ScrollArea({ className, viewportClassName, contentClassName, viewportPr
 			}),
 			!lockY && /* @__PURE__ */ jsx(Scrollbar, {
 				orientation: "vertical",
-				visibility: scrollbarVisibility,
+				visibility: resolvedVisibility,
+				gutter: resolvedGutter,
 				thumbStyle
 			}),
 			!lockX && /* @__PURE__ */ jsx(Scrollbar, {
 				orientation: "horizontal",
-				visibility: scrollbarVisibility,
+				visibility: resolvedVisibility,
+				gutter: resolvedGutter,
 				thumbStyle
 			}),
 			!lockX && !lockY && /* @__PURE__ */ jsx(ScrollArea$1.Corner, {
 				"data-control-ui": "scroll-area",
 				"data-control-family": "scroll-area",
 				"data-slot": "corner",
-				style: cornerStyle
+				style: resolvedGutter === "stable" ? {
+					...cornerStyle,
+					position: "relative",
+					inset: "auto"
+				} : cornerStyle
 			})
 		]
 	});
 }
 //#endregion
-export { ScrollArea, scrollAreaScrollbarVisibilities };
+export { ScrollArea, scrollAreaScrollbarGutters, scrollAreaScrollbarVisibilities };

package/dist/ui/tabs.js

@@ -1,14 +1,18 @@
 "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 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 +20,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 +136,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,7 +154,8 @@ 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
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {