@ctrl-ui/react 0.8.10 → 0.8.12

package/dist/ui/button.js

@@ -1,14 +1,15 @@
 "use client";
-import { skinAdornment } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { skinAdornment } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Children, Fragment, createContext, isValidElement, useContext } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
+const buttonLayouts = ["inline", "stacked"];
 const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
@@ -36,7 +37,7 @@ function ButtonBody({ layer, wrap = true, children }) {
 	const content = wrapButtonText(children);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [layer, wrapsContent ? /* @__PURE__ */ jsx(ButtonContent, { children: content }) : content] });
 }
-function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", type = "button", disabled, render, nativeButton, className, children, ...props }) {
+function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", layout = "inline", type = "button", disabled, render, nativeButton, className, children, ...props }) {
 	const skin = useSkin();
 	const layer = skinAdornment(skin, "button", "layer", {
 		variant,
@@ -54,6 +55,7 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 		"data-active": active ? "true" : void 0,
 		"data-icon-only": iconOnly ? "true" : void 0,
 		"data-shape": shape,
+		"data-layout": layout,
 		"data-variant": variant,
 		"data-tone": tone,
 		"data-size": size,
@@ -68,7 +70,7 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 		})
 	});
 }
-function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", render, className, children, ...props }) {
+function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", layout = "inline", render, className, children, ...props }) {
 	const skin = useSkin();
 	const tracksHover = useContext(ButtonTrackContext);
 	return useRender({
@@ -84,6 +86,7 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 			"data-active": active ? "true" : void 0,
 			"data-icon-only": iconOnly ? "true" : void 0,
 			"data-shape": shape,
+			"data-layout": layout,
 			"data-variant": variant,
 			"data-tone": tone,
 			"data-size": size,
@@ -98,7 +101,7 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 		}
 	});
 }
-function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", className, children, ...props }) {
+function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", layout = "inline", className, children, ...props }) {
 	const skin = useSkin();
 	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx("label", {
@@ -111,6 +114,7 @@ function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active
 		"data-active": active ? "true" : void 0,
 		"data-icon-only": iconOnly ? "true" : void 0,
 		"data-shape": shape,
+		"data-layout": layout,
 		"data-variant": variant,
 		"data-tone": tone,
 		"data-size": size,
@@ -125,4 +129,4 @@ function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active
 	});
 }
 //#endregion
-export { Button, ButtonLabel, ButtonLink, ButtonTrackContext, buttonContentClasses, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };
+export { Button, ButtonLabel, ButtonLink, ButtonTrackContext, buttonContentClasses, buttonLayouts, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };

package/dist/ui/card.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/card.tsx
 function Card({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/ui/code-diff.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { highlightToTokens, mergeCodeTokenLineWithEmphasis } from "../lib/code-tokens.js";
 import { ScrollArea } from "./scroll-area.js";
+import { highlightToTokens, mergeCodeTokenLineWithEmphasis } from "../lib/code-tokens.js";
 import { CodeCopy, CodeFloatingCopy, CodeTokenLine } from "./code.js";
 import { buildDiffFromFiles, buildDiffFromPatch, diffRunEnd } from "../lib/diff.js";
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/ui/code.js

@@ -1,10 +1,10 @@
 "use client";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { LiveStatus } from "./live-status.js";
-import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
-import { highlightToTokens } from "../lib/code-tokens.js";
 import { ScrollArea } from "./scroll-area.js";
+import { highlightToTokens } from "../lib/code-tokens.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Children, createContext, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/collapsible.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 //#region src/ui/collapsible.tsx
 function CollapsibleTriggerElement({ triggerProps, open, render, className, children }) {
@@ -52,7 +52,6 @@ function CollapsibleTrigger({ render, className, children, ...props }) {
 }
 function CollapsibleContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
-		className: "h-[var(--collapsible-panel-height)] overflow-hidden data-ending-style:h-0 data-starting-style:h-0",
 		...props,
 		render: (renderProps, state) => /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "collapsible",

package/dist/ui/color-picker.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";

package/dist/ui/combobox.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";

package/dist/ui/context-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute, skinAdornment } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute, skinAdornment } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";

package/dist/ui/drawer.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dropdown-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -0,0 +1,13 @@
+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

package/dist/ui/emoji-icon-picker.js

@@ -0,0 +1,50 @@
+"use client";
+import { PopoverViewport } from "./popover.js";
+import { EmojiPicker } from "./emoji-picker.js";
+import { IconPicker } from "./icon-picker.js";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/emoji-icon-picker.tsx
+function EmojiIconPicker({ children, defaultValue = "emoji", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs, {
+		"data-control-ui": "emoji-icon-picker",
+		"data-control-family": "tabs",
+		"data-slot": "root",
+		defaultValue,
+		...props,
+		children: /* @__PURE__ */ jsx(PopoverViewport, { children })
+	});
+}
+function EmojiIconPickerTabs({ emojiLabel = "Emoji", iconsLabel = "Icons", ...props }) {
+	return /* @__PURE__ */ jsxs(TabsList, {
+		size: "xs",
+		className: "mx-2 mt-2",
+		"aria-label": "Choose emoji or icon",
+		...props,
+		children: [/* @__PURE__ */ jsx(TabsTab, {
+			value: "emoji",
+			children: emojiLabel
+		}), /* @__PURE__ */ jsx(TabsTab, {
+			value: "icons",
+			children: iconsLabel
+		})]
+	});
+}
+function EmojiIconPickerEmoji(props) {
+	return /* @__PURE__ */ jsx(TabsPanel, {
+		value: "emoji",
+		"data-slide": void 0,
+		className: "mt-0",
+		children: /* @__PURE__ */ jsx(EmojiPicker, { ...props })
+	});
+}
+function EmojiIconPickerIcons(props) {
+	return /* @__PURE__ */ jsx(TabsPanel, {
+		value: "icons",
+		"data-slide": void 0,
+		className: "mt-0",
+		children: /* @__PURE__ */ jsx(IconPicker, { ...props })
+	});
+}
+//#endregion
+export { EmojiIconPicker, EmojiIconPickerEmoji, EmojiIconPickerIcons, EmojiIconPickerTabs };

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

@@ -1,16 +1,27 @@
 import { EmojiPickerKnobStyle } from "../knob-contracts/emoji-picker-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
-import { EmojiPicker as EmojiPicker$1 } from "frimousse";
+import { Emoji, 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 declare function EmojiPicker({ className, columns, style, ref, onEmojiSelect, resolveEmojiData, ...props }: EmojiPickerProps): import("react").JSX.Element;
+export declare function EmojiPickerCategories({ "aria-label": ariaLabel, onKeyDown, ...props }: ComponentProps<"div">): import("react").JSX.Element | null;
+export type EmojiPickerRecentProps = ComponentProps<"div"> & {
+  emojis: readonly Emoji[];
+  label?: string;
+};
+export type EmojiPickerReactionsProps = ComponentProps<"div"> & {
+  emojis: readonly Emoji[];
+  onEmojiSelect: (emoji: Emoji) => void;
+};
+export declare function EmojiPickerReactions({ emojis, onEmojiSelect, "aria-label": ariaLabel, onKeyDown, ...props }: EmojiPickerReactionsProps): import("react").JSX.Element;
+export declare function EmojiPickerRecent({ emojis, label, ...props }: EmojiPickerRecentProps): import("react").JSX.Element | null;
 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 declare function EmojiPickerContent({ className, ref, ...props }: EmojiPickerContentProps): import("react").JSX.Element;
 export type EmojiPickerFooterProps = Omit<ComponentProps<"div">, "style" | "children"> & EmojiPickerStyle & {
   placeholder?: string;
 };

package/dist/ui/emoji-picker.js

@@ -1,18 +1,180 @@
 "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";
+import { Toolbar } from "@base-ui/react/toolbar";
+import { createContext, useContext, useImperativeHandle, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FlagIcon, HandIcon, HashIcon, HeartIcon, LeafIcon, LightbulbIcon, PizzaIcon, PlaneIcon, SearchIcon, SmileIcon, VolleyballIcon } from "lucide-react";
+import { EmojiPicker as EmojiPicker$1, defaultEmojiDataResolver } from "frimousse";
 //#region src/ui/emoji-picker.tsx
-function EmojiPicker({ className, columns = 9, ...props }) {
-	return /* @__PURE__ */ jsx(EmojiPicker$1.Root, {
+const EmojiPickerContext = createContext(null);
+function useEmojiPicker() {
+	const picker = useContext(EmojiPickerContext);
+	if (!picker) throw new Error("EmojiPicker parts must be rendered inside <EmojiPicker>.");
+	return picker;
+}
+function EmojiPicker({ className, columns = 8, style, ref, onEmojiSelect, resolveEmojiData = defaultEmojiDataResolver, ...props }) {
+	const rootRef = useRef(null);
+	const viewportRef = useRef(null);
+	const [loadState, setLoadState] = useState({ status: "loading" });
+	const [retryAttempt, setRetryAttempt] = useState(0);
+	useImperativeHandle(ref, () => {
+		if (!rootRef.current) throw new Error("EmojiPicker root is not mounted.");
+		return rootRef.current;
+	});
+	const loadEmojiData = async (locale, options) => {
+		setLoadState({ status: "loading" });
+		try {
+			const data = await resolveEmojiData(locale, options);
+			if (!options.signal?.aborted) setLoadState({
+				status: "ready",
+				data
+			});
+			return data;
+		} catch (error) {
+			if (!options.signal?.aborted) setLoadState({ status: "error" });
+			throw error;
+		}
+	};
+	const retryEmojiData = () => {
+		setLoadState({ status: "loading" });
+		setRetryAttempt((attempt) => attempt + 1);
+	};
+	const selectEmoji = (emoji) => onEmojiSelect?.(emoji);
+	const pickerStyle = {
+		"--_emoji-picker-columns": columns,
+		...style
+	};
+	return /* @__PURE__ */ jsx(EmojiPickerContext.Provider, {
+		value: {
+			columns,
+			rootRef,
+			viewportRef,
+			loadState,
+			retryEmojiData,
+			selectEmoji
+		},
+		children: /* @__PURE__ */ jsx(EmojiPicker$1.Root, {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "root",
+			columns,
+			className: cn("isolate flex flex-col", className),
+			...props,
+			ref: rootRef,
+			style: pickerStyle,
+			onEmojiSelect: selectEmoji,
+			resolveEmojiData: loadEmojiData
+		}, retryAttempt)
+	});
+}
+function stopPickerNavigation(event) {
+	if (event.key !== "Escape" && event.key !== "Tab") event.stopPropagation();
+}
+const categoryIcons = /* @__PURE__ */ new Map([
+	[0, SmileIcon],
+	[1, HandIcon],
+	[3, LeafIcon],
+	[4, PizzaIcon],
+	[5, PlaneIcon],
+	[6, VolleyballIcon],
+	[7, LightbulbIcon],
+	[8, HeartIcon],
+	[9, FlagIcon]
+]);
+function emojiCategoryRows(emojiData, columns) {
+	let rowOffset = 0;
+	return emojiData.categories.flatMap((category) => {
+		const emojiCount = emojiData.emojis.filter((emoji) => emoji.category === category.index).length;
+		if (emojiCount === 0) return [];
+		const startRow = rowOffset;
+		rowOffset += Math.ceil(emojiCount / columns);
+		return [{
+			...category,
+			startRow
+		}];
+	});
+}
+function EmojiPickerCategories({ "aria-label": ariaLabel = "Emoji categories", onKeyDown, ...props }) {
+	const { columns, loadState, rootRef, viewportRef } = useEmojiPicker();
+	if (loadState.status !== "ready") return null;
+	const categories = emojiCategoryRows(loadState.data, columns);
+	const scrollToCategory = (startRow, categoryIndex) => {
+		const root = rootRef.current;
+		const viewport = viewportRef.current;
+		if (!root || !viewport) return;
+		const metrics = getComputedStyle(root);
+		const rowHeight = Number.parseFloat(metrics.getPropertyValue("--frimousse-row-height"));
+		const headerHeight = Number.parseFloat(metrics.getPropertyValue("--frimousse-category-header-height"));
+		viewport.scrollTo({ top: startRow * rowHeight + categoryIndex * headerHeight });
+	};
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "categories",
+		"aria-label": ariaLabel,
+		...props,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			stopPickerNavigation(event);
+		},
+		children: categories.map((category, categoryIndex) => {
+			const CategoryIcon = categoryIcons.get(category.index) ?? HashIcon;
+			return /* @__PURE__ */ jsx(Toolbar.Button, {
+				type: "button",
+				"aria-label": category.label,
+				"data-control-ui": "emoji-picker",
+				"data-control-family": "emoji-picker",
+				"data-slot": "category",
+				onClick: () => scrollToCategory(category.startRow, categoryIndex),
+				children: /* @__PURE__ */ jsx(CategoryIcon, { "aria-hidden": "true" })
+			}, category.index);
+		})
+	});
+}
+function EmojiPickerReactions({ emojis, onEmojiSelect, "aria-label": ariaLabel = "Reactions", onKeyDown, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		"aria-label": ariaLabel,
 		"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
+		"data-variant": "reactions",
+		...props,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			stopPickerNavigation(event);
+		},
+		children: emojis.map((emoji) => /* @__PURE__ */ jsx(Toolbar.Button, {
+			type: "button",
+			"aria-label": emoji.label,
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "emoji",
+			onClick: () => onEmojiSelect(emoji),
+			children: emoji.emoji
+		}, emoji.emoji))
+	});
+}
+function EmojiPickerRecent({ emojis, label = "Recently used", ...props }) {
+	const picker = useEmojiPicker();
+	if (emojis.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "recent",
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "recent-label",
+			children: label
+		}), /* @__PURE__ */ jsx(EmojiPickerReactions, {
+			"data-control-ui": "emoji-picker",
+			"data-slot": "recent-grid",
+			emojis: emojis.slice(0, picker.columns),
+			"aria-label": label,
+			onEmojiSelect: picker.selectEmoji
+		})]
 	});
 }
 function EmojiPickerSearch({ className, placeholder = "Search emoji…", "aria-label": ariaLabel = "Search emoji", ...props }) {
@@ -49,6 +211,7 @@ function EmojiPickerRow({ children, className, ...props }) {
 }
 function EmojiPickerEmoji({ emoji, className, ...props }) {
 	return /* @__PURE__ */ jsx("button", {
+		type: "button",
 		"data-control-ui": "emoji-picker",
 		"data-control-family": "emoji-picker",
 		"data-slot": "emoji",
@@ -68,14 +231,30 @@ function EmojiPickerCategoryHeader({ category, className, ...props }) {
 		children: category.label
 	});
 }
-function EmojiPickerContent({ className, ...props }) {
-	return /* @__PURE__ */ jsxs(EmojiPicker$1.Viewport, {
+function EmojiPickerContent({ className, ref, ...props }) {
+	const { viewportRef, loadState, retryEmojiData } = useEmojiPicker();
+	useImperativeHandle(ref, () => {
+		if (!viewportRef.current) throw new Error("EmojiPicker viewport is not mounted.");
+		return viewportRef.current;
+	});
+	return /* @__PURE__ */ jsx(EmojiPicker$1.Viewport, {
 		"data-control-ui": "emoji-picker",
 		"data-control-family": "emoji-picker",
 		"data-slot": "content",
-		className: cn("relative flex-1 outline-none", className),
+		className: cn("relative min-h-0 flex-1 outline-none", className),
 		...props,
-		children: [
+		ref: viewportRef,
+		children: loadState.status === "error" ? /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "error",
+			role: "alert",
+			children: [/* @__PURE__ */ jsx("span", { children: "Couldn’t load emoji." }), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: retryEmojiData,
+				children: "Try again"
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(EmojiPicker$1.Loading, {
 				"data-control-ui": "emoji-picker",
 				"data-control-family": "emoji-picker",
@@ -101,7 +280,7 @@ function EmojiPickerContent({ className, ...props }) {
 					CategoryHeader: EmojiPickerCategoryHeader
 				}
 			})
-		]
+		] })
 	});
 }
 function EmojiPickerFooter({ className, placeholder = "Pick an emoji…", ...props }) {
@@ -111,7 +290,7 @@ function EmojiPickerFooter({ className, placeholder = "Pick an emoji…", ...pro
 		"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", {
+		children: /* @__PURE__ */ jsx(EmojiPicker$1.ActiveEmoji, { children: ({ emoji }) => emoji ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			"data-control-ui": "emoji-picker",
 			"data-control-family": "emoji-picker",
 			"data-slot": "footer-emoji",
@@ -133,4 +312,4 @@ function EmojiPickerFooter({ className, placeholder = "Pick an emoji…", ...pro
 	});
 }
 //#endregion
-export { EmojiPicker, EmojiPickerContent, EmojiPickerFooter, EmojiPickerSearch };
+export { EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerFooter, EmojiPickerReactions, EmojiPickerRecent, EmojiPickerSearch };

package/dist/ui/empty.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/empty.tsx
 function Empty({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/ui/hover-card.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";

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

@@ -0,0 +1,35 @@
+import { ControlledChoice } from "../control-props.js";
+import { IconPickerKnobStyle } from "../knob-contracts/icon-picker-knobs.js";
+import { Input } from "./input.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/icon-picker.d.ts
+export type IconPickerItem = {
+  value: string;
+  label: string;
+  icon: ReactNode;
+  keywords?: readonly string[];
+};
+export type IconPickerColor = {
+  value: string;
+  label: string;
+  color: string;
+};
+type IconPickerStyle = {
+  style?: CSSProperties & IconPickerKnobStyle;
+};
+export type IconPickerProps = Omit<ComponentProps<"div">, "style" | "defaultValue" | "onChange"> & IconPickerStyle & ControlledChoice & {
+  items: readonly IconPickerItem[];
+  columns?: number;
+};
+export declare function IconPicker({ items, columns, value, defaultValue, onValueChange, className, style, children, ...props }: IconPickerProps): import("react").JSX.Element;
+export type IconPickerSearchProps = Omit<ComponentProps<typeof Input>, "value" | "defaultValue" | "onValueChange">;
+export declare function IconPickerSearch({ placeholder, "aria-label": ariaLabel, className, onChange, ...props }: IconPickerSearchProps): import("react").JSX.Element;
+export type IconPickerContentProps = Omit<ComponentProps<"div">, "style" | "children"> & IconPickerStyle & {
+  empty?: ReactNode;
+};
+export declare function IconPickerContent({ className, empty, "aria-label": ariaLabel, ...props }: IconPickerContentProps): import("react").JSX.Element;
+export type IconPickerColorsProps = Omit<ComponentProps<"div">, "style" | "defaultValue" | "onChange" | "children"> & IconPickerStyle & ControlledChoice & {
+  colors: readonly IconPickerColor[];
+};
+export declare function IconPickerColors({ colors, "aria-label": ariaLabel, ...props }: IconPickerColorsProps): import("react").JSX.Element;
+//#endregion