@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/ui/dockable-panel.js

@@ -1,11 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { LiveStatus } from "./live-status.js";
 import { ScrollArea } from "./scroll-area.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { Drawer, DrawerBody, DrawerContent } from "./drawer.js";
-import { clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
-import { createContext, use, useRef, useState } from "react";
+import { clampDockablePanelPosition, dockablePanelSideAt, dockablePanelSideForKey, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
+import { createContext, use, useEffect, useEffectEvent, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/dockable-panel.tsx
 const DockablePanelContext = createContext(null);
@@ -23,24 +24,43 @@ function useControllableState(controlled, defaultValue, onChange) {
 	}
 	return [value, setValue];
 }
-function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, placement: placementProp, defaultPlacement = "right", onPlacementChange, className, style, children, "aria-label": ariaLabel = "Dockable panel", ...props }) {
+function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, placement: placementProp, defaultPlacement = "right", onPlacementChange, finalFocus, className, style, children, "aria-label": ariaLabel = "Dockable panel", ...props }) {
 	const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
 	const [placement, setPlacementState] = useControllableState(placementProp, defaultPlacement, onPlacementChange);
 	const [dragging, setDragging] = useState(false);
 	const [potentialDock, setPotentialDock] = useState(placement);
 	const [dragPosition, setDragPosition] = useState(null);
 	const [dragHeight, setDragHeight] = useState(0);
+	const [announcement, setAnnouncement] = useState("");
 	const isMobile = useIsMobile();
+	const titleId = useId();
 	const panelRef = useRef(null);
 	const potentialDockRef = useRef(placement);
 	const dragRef = useRef(null);
+	const returnFocusRef = useRef(null);
+	const restoreFocusRef = useRef(false);
+	const restoreFocus = useEffectEvent(() => {
+		const target = finalFocus?.current ?? returnFocusRef.current;
+		if (target instanceof HTMLElement && target.isConnected) target.focus();
+	});
+	useEffect(() => {
+		if (open) {
+			returnFocusRef.current = document.activeElement;
+			return;
+		}
+		if (!restoreFocusRef.current) return;
+		restoreFocusRef.current = false;
+		restoreFocus();
+	}, [open]);
 	function setPlacement(next) {
 		setPlacementState(next);
+		setAnnouncement(`Panel docked ${next}.`);
 	}
 	function togglePlacement() {
 		setPlacement(oppositeDockablePanelSide(placement));
 	}
 	function close() {
+		restoreFocusRef.current = panelRef.current?.contains(document.activeElement) ?? false;
 		setOpen(false);
 	}
 	function finishDrag(event, shouldDock) {
@@ -103,11 +123,11 @@ function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, place
 	}
 	const context = {
 		close,
-		dragging,
 		isMobile,
 		placement,
 		setPlacement,
 		togglePlacement,
+		titleId,
 		dragHandleProps: {
 			onPointerDown,
 			onPointerMove,
@@ -168,15 +188,7 @@ function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, place
 				transform: `translate3d(${dragPosition.x}px, ${dragPosition.y}px, 0)`
 			} : style,
 			...props,
-			children: [children, /* @__PURE__ */ jsxs("span", {
-				className: "sr-only",
-				"aria-live": "polite",
-				children: [
-					"Panel docked ",
-					placement,
-					"."
-				]
-			})]
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: announcement })]
 		})]
 	});
 }
@@ -189,23 +201,28 @@ function DockablePanelHeader({ className, ...props }) {
 		...props
 	});
 }
-function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }) {
+function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, dragLabel = "Drag panel", dockHintLabel = "Drag, or use arrow keys to dock", ...props }) {
 	const context = useDockablePanelContext();
+	const hintId = useId();
 	if (context.isMobile) return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "drag-handle",
 		className: cn("flex min-w-0 flex-1 items-center self-stretch", className),
+		...props,
 		children
 	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
+	function dockWithKeyboard(event) {
+		const next = dockablePanelSideForKey(event.key, context.placement);
+		if (!next) return;
+		event.preventDefault();
+		if (!event.repeat) context.setPlacement(next);
+	}
+	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "drag-handle",
-		"aria-label": "Drag panel",
-		"aria-pressed": context.dragging,
-		className: cn("flex min-w-0 flex-1 cursor-grab touch-none items-center self-stretch active:cursor-grabbing", className),
+		className: cn("relative flex min-w-0 flex-1 cursor-grab touch-none items-center self-stretch active:cursor-grabbing", className),
 		onPointerDown: (event) => {
 			onPointerDown?.(event);
 			if (!event.defaultPrevented) context.dragHandleProps.onPointerDown(event);
@@ -223,16 +240,39 @@ function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPo
 			if (!event.defaultPrevented) context.dragHandleProps.onPointerCancel(event);
 		},
 		...props,
-		children
+		children: [
+			children,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-control-ui": "dockable-panel",
+				"data-control-family": "dockable-panel",
+				"data-slot": "drag-button",
+				"aria-label": dragLabel,
+				"aria-labelledby": context.titleId,
+				"aria-describedby": hintId,
+				"aria-keyshortcuts": "ArrowLeft ArrowRight Enter Space",
+				className: "pointer-events-none absolute inset-0",
+				onKeyDown: dockWithKeyboard
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: hintId,
+				hidden: true,
+				children: dockHintLabel
+			})
+		]
 	});
 }
-function DockablePanelTitle({ className, ...props }) {
+function DockablePanelTitle({ className, children, ...props }) {
+	const { titleId } = useDockablePanelContext();
 	return /* @__PURE__ */ jsx("h2", {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "title",
 		className: cn("truncate", className),
-		...props
+		title: typeof children === "string" ? children : void 0,
+		...props,
+		id: titleId,
+		children
 	});
 }
 function DockablePanelActions({ className, ...props }) {
@@ -240,7 +280,7 @@ function DockablePanelActions({ className, ...props }) {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "actions",
-		className: cn("ml-auto flex shrink-0 items-center", className),
+		className: cn("ms-auto flex shrink-0 items-center", className),
 		...props
 	});
 }

package/dist/ui/dropdown-menu.js

@@ -30,7 +30,7 @@ function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface
 		children
 	});
 }
-function DropdownMenuContent({ className, children, side = "bottom", sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {
+function DropdownMenuContent({ className, children, side, sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skin.id,
@@ -76,7 +76,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 	});
 }
 function DropdownMenuLabel({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
 		"data-control-ui": "dropdown-menu",
 		"data-slot": "label",
 		"data-control-family": "popup",
@@ -162,6 +162,7 @@ function DropdownMenuSubTrigger({ className, children, ...props }) {
 			"data-control-ui": "dropdown-menu",
 			"data-control-family": "popup",
 			"data-slot": "sub-trigger-indicator",
+			"data-icon-dir": "inline",
 			"aria-hidden": "true",
 			children: "›"
 		})]
@@ -171,7 +172,6 @@ function DropdownMenuSubContent(props) {
 	return /* @__PURE__ */ jsx(DropdownMenuContent, {
 		"data-control-ui": "dropdown-menu",
 		"data-slot": "sub-content",
-		side: "right",
 		sideOffset: 0,
 		alignOffset: -3,
 		...props
@@ -183,6 +183,7 @@ function DropdownMenuShortcut(props) {
 		"data-control-family": "popup",
 		"data-popup-part": "shortcut",
 		"data-slot": "shortcut",
+		"aria-hidden": "true",
 		...props
 	});
 }

package/dist/ui/dropzone.d.ts

@@ -57,12 +57,12 @@ export declare function useDropzoneContext(): DropzoneContextValue;
 export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
 export declare function DropzoneArea({ className, ...props }: DropzoneAreaProps): import("react").JSX.Element;
 export declare function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneInputProps): import("react").JSX.Element;
-export declare function DropzoneTrigger({ className, children, onClick, disabled, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
+export declare function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
 export declare function DropzoneOverlay({ scope, className, children, ...props }: DropzoneOverlayProps): import("react").JSX.Element;
 export declare function DropzoneFileList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneFileListProps): import("react").JSX.Element;
 export declare function DropzoneRejectionList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneRejectionListProps): import("react").JSX.Element;
 export declare function DropzoneStatus({ className, children, role, "aria-live": ariaLive, ...props }: DropzoneStatusProps): import("react").JSX.Element;
-export declare function DropzoneRemove({ file, children, onClick, disabled, ...props }: DropzoneRemoveProps): import("react").JSX.Element;
+export declare function DropzoneRemove({ file, children, onClick, disabled, ref, ...props }: DropzoneRemoveProps): import("react").JSX.Element;
 export declare function DropzoneClear({ children, onClick, disabled, ...props }: DropzoneClearProps): import("react").JSX.Element;
 //#endregion
 export { type DropzoneAccept, type DropzoneDropDetails, DropzoneErrorCode, type DropzoneErrorCodeValue, type DropzoneEvent, type DropzoneFileError, type DropzoneFileRejection, type DropzoneGetFilesFromEvent, type DropzonePolicy, type DropzoneSelectionMode, type DropzoneValidator, type DropzoneValidatorResult, type DropzoneValueChangeDetails, type DropzoneValueChangeReason, type DropzoneVisualState, type UseDropzoneOptions, type UseDropzoneReturn, formatDropzoneFileSize, useDropzone };

package/dist/ui/dropzone.js

@@ -9,6 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlert, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
 //#region src/ui/dropzone.tsx
 const DropzoneContext = createContext(null);
+const DropzoneFocusContext = createContext(null);
 const fileRenderKeys = /* @__PURE__ */ new WeakMap();
 let nextFileRenderKey = 0;
 function getFileRenderKey(file) {
@@ -24,8 +25,48 @@ function useDropzoneContext() {
 	if (!context) throw new Error("Dropzone parts must be used inside Dropzone.");
 	return context;
 }
+function createFocusTargets() {
+	const triggers = /* @__PURE__ */ new Set();
+	const removes = /* @__PURE__ */ new Set();
+	const inDocumentOrder = (nodes) => [...nodes].filter((node) => !node.matches(":disabled")).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+	return {
+		register(kind, node) {
+			const nodes = kind === "trigger" ? triggers : removes;
+			nodes.add(node);
+			return () => {
+				nodes.delete(node);
+			};
+		},
+		focusAfterRemoval(control, all) {
+			const siblings = all ? [] : inDocumentOrder(removes);
+			const index = siblings.indexOf(control);
+			(siblings[index + 1] ?? siblings[index - 1] ?? inDocumentOrder(triggers)[0])?.focus();
+		}
+	};
+}
+function useFocusTargetRef(kind, ref) {
+	const focusTargets = useContext(DropzoneFocusContext);
+	return (node) => {
+		const unregister = focusTargets?.register(kind, node);
+		let release;
+		if (typeof ref === "function") {
+			const cleanup = ref(node);
+			release = typeof cleanup === "function" ? cleanup : () => ref(null);
+		} else if (ref) {
+			ref.current = node;
+			release = () => {
+				ref.current = null;
+			};
+		}
+		return () => {
+			unregister?.();
+			release?.();
+		};
+	};
+}
 function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
 	const [globalOverlayCount, setGlobalOverlayCount] = useState(0);
+	const [focusTargets] = useState(createFocusTargets);
 	const [registerGlobalOverlay] = useState(() => () => {
 		let registered = true;
 		setGlobalOverlayCount((count) => count + 1);
@@ -55,15 +96,18 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag,
 	const empty = dropzone.value.length === 0 && dropzone.fileRejections.length === 0;
 	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
 		value: context,
-		children: /* @__PURE__ */ jsx("div", {
-			...props,
-			"data-control-ui": "dropzone",
-			"data-control-family": "dropzone",
-			"data-slot": "root",
-			"data-disabled": dropzone.disabled ? "true" : void 0,
-			"data-empty": empty ? "true" : void 0,
-			className: cn("min-w-0", className),
-			children
+		children: /* @__PURE__ */ jsx(DropzoneFocusContext.Provider, {
+			value: focusTargets,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				"data-control-ui": "dropzone",
+				"data-control-family": "dropzone",
+				"data-slot": "root",
+				"data-disabled": dropzone.disabled ? "true" : void 0,
+				"data-empty": empty ? "true" : void 0,
+				className: cn("min-w-0", className),
+				children
+			})
 		})
 	});
 }
@@ -89,26 +133,32 @@ function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby":
 	});
 	return /* @__PURE__ */ jsx("input", {
 		...inputProps,
+		tabIndex: -1,
 		"data-control-ui": "dropzone",
 		"data-control-family": "dropzone",
 		"data-slot": "input",
 		className: cn("sr-only", className)
 	});
 }
-function DropzoneTrigger({ className, children, onClick, disabled, ...props }) {
+function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props }) {
 	const context = useDropzoneContext();
-	const triggerDisabled = disabled || context.disabled || context.isProcessing;
+	const triggerRef = useFocusTargetRef("trigger", ref);
+	const triggerDisabled = disabled || context.disabled;
+	const busy = context.isProcessing && !triggerDisabled;
 	return /* @__PURE__ */ jsx("button", {
 		...props,
+		ref: triggerRef,
 		type: "button",
 		disabled: triggerDisabled,
+		"aria-disabled": busy ? "true" : void 0,
 		"data-control-ui": "dropzone",
 		"data-control-family": "dropzone",
 		"data-slot": "trigger",
 		"data-state": context.visualState,
-		"data-disabled": triggerDisabled ? "true" : void 0,
-		className: cn("flex w-full cursor-pointer flex-col items-center justify-center disabled:cursor-not-allowed", className),
+		"data-disabled": triggerDisabled || busy ? "true" : void 0,
+		className: cn("flex w-full cursor-pointer flex-col items-center justify-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed", className),
 		onClick: (event) => {
+			if (busy) return;
 			onClick?.(event);
 			if (!event.defaultPrevented) context.open();
 		},
@@ -193,10 +243,13 @@ function DropzoneStatus({ className, children, role = "status", "aria-live": ari
 		children: children ? children(context) : getDropzoneStatusMessage(context)
 	});
 }
-function DropzoneRemove({ file, children, onClick, disabled, ...props }) {
+function DropzoneRemove({ file, children, onClick, disabled, ref, ...props }) {
 	const context = useDropzoneContext();
+	const focusTargets = useContext(DropzoneFocusContext);
+	const removeRef = useFocusTargetRef("remove", ref);
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
+		ref: removeRef,
 		type: "button",
 		variant: props.variant ?? "quiet",
 		size: props.size ?? "sm",
@@ -205,13 +258,16 @@ function DropzoneRemove({ file, children, onClick, disabled, ...props }) {
 		disabled: disabled || context.disabled || context.isProcessing,
 		onClick: (event) => {
 			onClick?.(event);
-			if (!event.defaultPrevented) context.removeFile(file);
+			if (event.defaultPrevented) return;
+			focusTargets?.focusAfterRemoval(event.currentTarget, false);
+			context.removeFile(file);
 		},
 		children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
 	});
 }
 function DropzoneClear({ children, onClick, disabled, ...props }) {
 	const context = useDropzoneContext();
+	const focusTargets = useContext(DropzoneFocusContext);
 	const empty = context.value.length === 0 && context.fileRejections.length === 0;
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
@@ -221,7 +277,9 @@ function DropzoneClear({ children, onClick, disabled, ...props }) {
 		disabled: disabled || context.disabled || context.isProcessing || empty,
 		onClick: (event) => {
 			onClick?.(event);
-			if (!event.defaultPrevented) context.reset();
+			if (event.defaultPrevented) return;
+			focusTargets?.focusAfterRemoval(event.currentTarget, true);
+			context.reset();
 		},
 		children: children ?? "Clear all"
 	});
@@ -234,6 +292,7 @@ function DropzoneFeedback({ state }) {
 			"data-control-ui": "dropzone",
 			"data-control-family": "dropzone",
 			"data-slot": "feedback-spinner",
+			"data-motion-essential": "",
 			"aria-hidden": "true"
 		});
 		message = "Checking files…";

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

@@ -0,0 +1,18 @@
+import { EmojiPickerKnobStyle } from "../knob-contracts/emoji-picker-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { EmojiPicker as EmojiPicker$1 } from "frimousse";
+//#region src/ui/emoji-picker.d.ts
+type EmojiPickerStyle = {
+  style?: CSSProperties & EmojiPickerKnobStyle;
+};
+export type EmojiPickerProps = Omit<ComponentProps<typeof EmojiPicker$1.Root>, "style"> & EmojiPickerStyle;
+export declare function EmojiPicker({ className, columns, ...props }: EmojiPickerProps): import("react").JSX.Element;
+export type EmojiPickerSearchProps = Omit<ComponentProps<typeof EmojiPicker$1.Search>, "style"> & EmojiPickerStyle;
+export declare function EmojiPickerSearch({ className, placeholder, "aria-label": ariaLabel, ...props }: EmojiPickerSearchProps): import("react").JSX.Element;
+export type EmojiPickerContentProps = Omit<ComponentProps<typeof EmojiPicker$1.Viewport>, "style"> & EmojiPickerStyle;
+export declare function EmojiPickerContent({ className, ...props }: EmojiPickerContentProps): import("react").JSX.Element;
+export type EmojiPickerFooterProps = Omit<ComponentProps<"div">, "style" | "children"> & EmojiPickerStyle & {
+  placeholder?: string;
+};
+export declare function EmojiPickerFooter({ className, placeholder, ...props }: EmojiPickerFooterProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/emoji-picker.js

@@ -0,0 +1,136 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Spinner } from "./spinner.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import { EmojiPicker as EmojiPicker$1 } from "frimousse";
+//#region src/ui/emoji-picker.tsx
+function EmojiPicker({ className, columns = 9, ...props }) {
+	return /* @__PURE__ */ jsx(EmojiPicker$1.Root, {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "root",
+		columns,
+		className: cn("isolate flex h-72 w-fit flex-col", className),
+		...props
+	});
+}
+function EmojiPickerSearch({ className, placeholder = "Search emoji…", "aria-label": ariaLabel = "Search emoji", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "search",
+		className: "flex items-center",
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			"aria-hidden": "true",
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "search-icon"
+		}), /* @__PURE__ */ jsx(EmojiPicker$1.Search, {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "search-input",
+			placeholder,
+			"aria-label": ariaLabel,
+			className: cn("min-w-0 flex-1", className),
+			...props
+		})]
+	});
+}
+function EmojiPickerRow({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "row",
+		className: cn("scroll-my-1", className),
+		...props,
+		children
+	});
+}
+function EmojiPickerEmoji({ emoji, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "emoji",
+		"data-active": emoji.isActive ? "" : void 0,
+		className: cn("flex items-center justify-center", className),
+		...props,
+		children: emoji.emoji
+	});
+}
+function EmojiPickerCategoryHeader({ category, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "category-header",
+		className,
+		...props,
+		children: category.label
+	});
+}
+function EmojiPickerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(EmojiPicker$1.Viewport, {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "content",
+		className: cn("relative flex-1 outline-none", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(EmojiPicker$1.Loading, {
+				"data-control-ui": "emoji-picker",
+				"data-control-family": "emoji-picker",
+				"data-slot": "loading",
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(Spinner, { label: "Loading emoji" })
+			}),
+			/* @__PURE__ */ jsx(EmojiPicker$1.Empty, {
+				"data-control-ui": "emoji-picker",
+				"data-control-family": "emoji-picker",
+				"data-slot": "empty",
+				className: "absolute inset-0 flex items-center justify-center",
+				children: "No emoji found."
+			}),
+			/* @__PURE__ */ jsx(EmojiPicker$1.List, {
+				"data-control-ui": "emoji-picker",
+				"data-control-family": "emoji-picker",
+				"data-slot": "list",
+				className: "select-none",
+				components: {
+					Row: EmojiPickerRow,
+					Emoji: EmojiPickerEmoji,
+					CategoryHeader: EmojiPickerCategoryHeader
+				}
+			})
+		]
+	});
+}
+function EmojiPickerFooter({ className, placeholder = "Pick an emoji…", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "footer",
+		className: cn("flex min-w-0 items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx(EmojiPicker$1.ActiveEmoji, { children: ({ emoji }) => emoji ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "footer-emoji",
+			className: "flex-none",
+			children: emoji.emoji
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "footer-label",
+			className: "truncate",
+			children: emoji.label
+		})] }) : /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "footer-placeholder",
+			className: "truncate",
+			children: placeholder
+		}) })
+	});
+}
+//#endregion
+export { EmojiPicker, EmojiPickerContent, EmojiPickerFooter, EmojiPickerSearch };

package/dist/ui/empty.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { EmptyKnobStyle } from "../knob-contracts/empty-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/empty.d.ts
@@ -17,12 +18,13 @@ export type EmptyDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
 };
 export type EmptyTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & EmptyKnobStyle;
 };
 export declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
 export declare function EmptyHeader({ className, ...props }: EmptyHeaderProps): import("react").JSX.Element;
 export declare function EmptyMedia({ className, ...props }: EmptyMediaProps): import("react").JSX.Element;
-export declare function EmptyTitle({ className, ...props }: EmptyTitleProps): import("react").JSX.Element;
+export declare function EmptyTitle({ render, ...props }: EmptyTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function EmptyDescription({ className, ...props }: EmptyDescriptionProps): import("react").JSX.Element;
 export declare function EmptyContent({ className, ...props }: EmptyContentProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/empty.js

@@ -1,5 +1,7 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/empty.tsx
 function Empty({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -28,13 +30,16 @@ function EmptyMedia({ className, ...props }) {
 		...props
 	});
 }
-function EmptyTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "empty",
-		"data-control-family": "empty",
-		"data-slot": "title",
-		className,
-		...props
+function EmptyTitle({ render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "empty",
+			"data-control-family": "empty",
+			"data-slot": "title"
+		}
 	});
 }
 function EmptyDescription({ className, ...props }) {

package/dist/ui/gradient-editor.d.ts

@@ -39,7 +39,7 @@ export type GradientEditorTypeSelectProps = {
 export declare function GradientEditor({ defaultStops, defaultType, defaultAngle, onValueChange, className, children, value: _value, ...props }: GradientEditorProps): import("react").JSX.Element;
 export declare function GradientEditorPreview({ className, style, "aria-label": ariaLabel, ...props }: GradientEditorPreviewProps): import("react").JSX.Element;
 export declare function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorTrackProps): import("react").JSX.Element;
-export declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorStopProps): import("react").JSX.Element;
+export declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: GradientEditorStopProps): import("react").JSX.Element;
 export declare function GradientEditorStopAdd({ className, children, ...props }: GradientEditorStopAddProps): import("react").JSX.Element;
 export declare function GradientEditorStopColor(): import("react").JSX.Element | null;
 export declare function GradientEditorTypeSelect({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: GradientEditorTypeSelectProps): import("react").JSX.Element;