@ctrl-ui/react 0.8.9 → 0.8.11

package/dist/styles/recipes/tabs.css

@@ -1,5 +1,6 @@
 @layer components {
   :where([data-control-family="tabs"][data-slot="root"]) {
+    position: relative;
     --cui-tabs-trigger-radius: var(--radius-control);
     --cui-tabs-list-padding: calc(var(--spacing) * 1);
     --cui-tabs-list-radius: calc(
@@ -178,6 +179,109 @@
     outline-style: none;
   }
 
+  @supports ((anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-slide-exiting][data-ending-style]) {
+      display: block;
+      position: absolute;
+      top: var(--_tabs-panel-top);
+      left: var(--_tabs-panel-left);
+      right: auto;
+      bottom: auto;
+      width: var(--_tabs-panel-width);
+      height: var(--_tabs-panel-height);
+      margin: 0;
+      overflow: clip;
+      animation: aui-slide-exit-hold var(--duration-slow) var(--ease-emphasized) both;
+    }
+
+    @supports (height: anchor-size(height)) {
+      :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-slide-exiting][data-ending-style]) {
+        height: anchor-size(height);
+      }
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="right"]
+      ) {
+      translate: -100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="left"]
+      ) {
+      translate: 100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="down"]
+      ) {
+      translate: 0 -100%;
+    }
+
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="up"]) {
+      translate: 0 100%;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"]:has(> [data-slot="panel"][data-starting-style])
+          > [data-slot="panel"][inert][data-ending-style]
+      ) {
+      translate: 0 0;
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][data-starting-style]) {
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]) {
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][inert]) {
+      translate: 0 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="right"]
+      ) {
+      translate: 100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="left"]
+      ) {
+      translate: -100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="down"]
+      ) {
+      translate: 0 100%;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="up"]
+      ) {
+      translate: 0 -100%;
+    }
+
+    @supports (height: calc-size(auto, size)) {
+      :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]:not([inert])) {
+        height: var(--aui-slide-prev-height, calc-size(auto, size));
+      }
+    }
+  }
+
+  :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"] > [data-slot="panel"]) {
+    min-width: 0;
+    flex: 1;
+  }
+
   :where(
     [data-control-family="tabs"][data-slot="list"][data-orientation="horizontal"]:not([data-variant="browser"]) ~ [data-slot="panel"]
   ) {

package/dist/styles/recipes/tree.css

@@ -93,7 +93,6 @@
 
   :where([data-control-family="tree"][data-slot="item-content"]) {
     height: var(--collapsible-panel-height);
-    overflow: hidden;
     opacity: 1;
     transition-property: height, opacity;
     transition-duration: var(--duration-base);
@@ -102,9 +101,22 @@
 
   :where([data-control-family="tree"][data-slot="item-content"]:is([data-starting-style], [data-ending-style])) {
     height: 0;
+    overflow: clip;
     opacity: 0;
   }
 
+  @supports (transition-behavior: allow-discrete) {
+    :where([data-control-family="tree"][data-slot="item-content"]) {
+      transition-property: height, opacity, overflow;
+      transition-timing-function: var(--ease-emphasized), var(--ease-emphasized), step-end;
+      transition-behavior: normal, normal, allow-discrete;
+    }
+
+    :where([data-control-family="tree"][data-slot="item-content"][data-ending-style]) {
+      transition-timing-function: var(--ease-emphasized), var(--ease-emphasized), step-start;
+    }
+  }
+
   :where([data-control-family="tree"][data-slot="item-group"]) {
     translate: 0 0;
     transition: translate var(--duration-base) var(--ease-emphasized);

package/dist/ui/app-shell.d.ts

@@ -0,0 +1,16 @@
+import { SidebarProviderProps } from "./sidebar-provider.js";
+import { SidebarInsetProps } from "./sidebar.js";
+import { AppShellHeaderKnobStyle } from "../knob-contracts/app-shell-header-knobs.js";
+import { PageScroll } from "./page-layout.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/app-shell.d.ts
+export type AppShellProps = SidebarProviderProps & {
+  scroll?: PageScroll;
+};
+export declare function AppShell({ scroll, layout, className, ...props }: AppShellProps): import("react").JSX.Element;
+export declare function AppShellContent({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;
+export type AppShellHeaderProps = Omit<ComponentProps<"header">, "style"> & {
+  style?: CSSProperties & AppShellHeaderKnobStyle;
+};
+export declare function AppShellHeader({ className, ...props }: AppShellHeaderProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/app-shell.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SidebarProvider } from "./sidebar-provider.js";
+import { SidebarInset } from "./sidebar.js";
+import { PageScrollContext, usePageScroll } from "./page-layout.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/app-shell.tsx
+function AppShell({ scroll = "auto", layout = "viewport", className, ...props }) {
+	const resolvedScroll = usePageScroll(scroll);
+	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {
+		value: resolvedScroll,
+		children: /* @__PURE__ */ jsx(SidebarProvider, {
+			"data-app-shell": "",
+			"data-scroll": resolvedScroll,
+			layout,
+			className: cn(layout === "viewport" && (resolvedScroll === "page" ? "min-h-dvh" : "h-dvh min-h-0 overflow-hidden"), className),
+			...props
+		})
+	});
+}
+function AppShellContent({ className, ...props }) {
+	const scroll = usePageScroll();
+	return /* @__PURE__ */ jsx(SidebarInset, {
+		"data-app-shell-content": "",
+		className: cn("min-h-0", scroll !== "page" && "overflow-hidden", className),
+		...props
+	});
+}
+function AppShellHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-control-ui": "app-shell",
+		"data-control-family": "app-shell-header",
+		"data-slot": "root",
+		className: cn("sticky top-0 z-30 flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+//#endregion
+export { AppShell, AppShellContent, AppShellHeader };

package/dist/ui/collapsible.js

@@ -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/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 { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs.js";
+import { EmojiPicker } from "./emoji-picker.js";
+import { IconPicker } from "./icon-picker.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 { 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 { Toolbar } from "@base-ui/react/toolbar";
+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/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