@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/ui/icon-picker.js

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

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

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

package/dist/ui/markdown-elements.js

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

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

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

package/dist/ui/markdown-heading.js

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

package/dist/ui/resizable.js

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

package/dist/ui/sidebar-provider.js

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

package/dist/ui/typography.d.ts

@@ -34,6 +34,7 @@ export type HeadingProps = ComponentProps<"h1"> & {
   weight?: TextWeight;
   tone?: TypeTone;
 };
+export declare function headingClassName({ level, size, weight, tone, className }: HeadingProps): string;
 export declare function Heading({ level, size, weight, tone, className, ...props }: HeadingProps): import("react").JSX.Element;
 export type TextTag = "p" | "span" | "div" | "small" | "strong" | "em" | "code" | "li" | "dt" | "dd" | "figcaption" | "legend" | "blockquote";
 export type TextProps = HTMLAttributes<HTMLElement> & {

package/dist/ui/typography.js

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

package/dist/user-ask.js

@@ -4,7 +4,7 @@ import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { useUserAsk } from "./hooks/use-user-ask.js";
 import { Kbd } from "./ui/kbd.js";
-import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";
 //#region src/user-ask.tsx
@@ -30,21 +30,17 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, questionStatusLabel
 	});
 	const titleId = useId();
 	const panelRef = useRef(null);
-	const [hasNavigated, setHasNavigated] = useState(false);
-	const questionStatus = hasNavigated && ask.activeQuestion ? questionStatusLabel(ask.activeIndex + 1, ask.questions.length, ask.activeQuestion.title) : "";
+	const questionStatus = ask.hasNavigated && ask.activeQuestion ? questionStatusLabel(ask.activeIndex + 1, ask.questions.length, ask.activeQuestion.title) : "";
 	useEffect(() => {
 		if (autoFocus) panelRef.current?.focus();
 	}, [autoFocus]);
-	const lastActiveIndex = useRef(ask.activeIndex);
 	useEffect(() => {
-		if (lastActiveIndex.current === ask.activeIndex) return;
-		lastActiveIndex.current = ask.activeIndex;
-		setHasNavigated(true);
+		if (!ask.hasNavigated) return;
 		const panel = panelRef.current;
 		const active = document.activeElement;
 		const activeIsUsable = active instanceof HTMLElement && panel?.contains(active) && active.checkVisibility();
 		if (panel && !activeIsUsable) panel.focus();
-	}, [ask.activeIndex]);
+	}, [ask.activeIndex, ask.hasNavigated]);
 	return /* @__PURE__ */ jsx(UserAskContext.Provider, {
 		value: {
 			...ask,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.20",
+  "version": "0.9.0",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {
@@ -35,8 +35,8 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.8.0",
+    "@tanstack/charts": "^1.1.0",
     "@tanstack/react-virtual": "^3.14.13",
-    "@xyflow/react": "^12.12.0",
     "@tiptap/core": "3.31.4",
     "@tiptap/extension-image": "3.31.4",
     "@tiptap/extension-list": "3.31.4",
@@ -46,6 +46,7 @@
     "@tiptap/pm": "3.31.4",
     "@tiptap/react": "3.31.4",
     "@tiptap/starter-kit": "3.31.4",
+    "@xyflow/react": "^12.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -71,7 +72,7 @@
     "zod": "^4.6.5"
   },
   "peerDependenciesMeta": {
-    "@xyflow/react": {
+    "@tanstack/charts": {
       "optional": true
     },
     "@tanstack/react-virtual": {
@@ -104,6 +105,9 @@
     "@tiptap/starter-kit": {
       "optional": true
     },
+    "@xyflow/react": {
+      "optional": true
+    },
     "cmdk": {
       "optional": true
     },

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

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

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

@@ -1,50 +0,0 @@
-"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 };