@choice-ui/react 1.9.9 → 2.0.1

package/dist/components/button/dist/index.d.ts

@@ -1,22 +1,15 @@
 import { HTMLProps } from 'react';
-import { TooltipProps } from '../../tooltip/src';
 import * as react from 'react';
 
-interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, "size"> {
+interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "size" | "as"> {
     active?: boolean;
+    as?: React.ElementType;
     asChild?: boolean;
     className?: string;
     focused?: boolean;
     loading?: boolean;
     readOnly?: boolean;
-    /**
-     * @default "default"
-     */
     size?: "default" | "large";
-    tooltip?: TooltipProps;
-    /**
-     * @default "primary"
-     */
     variant?: "primary" | "secondary" | "solid" | "destructive" | "secondary-destruct" | "inverse" | "success" | "link" | "link-danger" | "ghost" | "dark" | "reset";
 }
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/dist/index.js

@@ -1,10 +1,9 @@
-import { LoaderCircle } from "@choiceform/icons-react";
 import { Slot } from "../../slot/dist/index.js";
-import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, isValidElement, cloneElement, useMemo } from "react";
+import { LoaderCircle } from "@choiceform/icons-react";
+import { forwardRef, useMemo, isValidElement, cloneElement } from "react";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { isMultiElement } from "../../../shared/utils/assertion.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+import { isMultiElement } from "../../../shared/utils/assertion.js";
 var buttonTv = tcv({
   slots: {
     button: [
@@ -75,6 +74,10 @@ var buttonTv = tcv({
     focused: {
       true: "",
       false: ""
+    },
+    multiElement: {
+      true: "",
+      false: ""
     }
   },
   compoundVariants: [
@@ -123,10 +126,15 @@ var buttonTv = tcv({
       variant: ["link", "link-danger", "ghost"],
       disabled: true,
       class: {
-        button: [
-          "text-disabled-foreground pointer-events-none",
-          "data-[multi-element=true]:border-default-boundary"
-        ]
+        button: ["text-disabled-foreground pointer-events-none"]
+      }
+    },
+    {
+      variant: ["link", "link-danger", "ghost"],
+      disabled: true,
+      multiElement: true,
+      class: {
+        button: ["border-default-boundary"]
       }
     },
     {
@@ -244,7 +252,8 @@ var buttonTv = tcv({
     active: false,
     disabled: false,
     loading: false,
-    focused: false
+    focused: false,
+    multiElement: false
   }
 });
 var Button = forwardRef(function Button2(props, ref) {
@@ -259,13 +268,25 @@ var Button = forwardRef(function Button2(props, ref) {
     loading,
     asChild,
     children,
-    tooltip,
+    as,
     "aria-label": ariaLabel,
     onClick,
     ...rest
   } = props;
-  const Button3 = asChild ? Slot : "button";
-  const tv = buttonTv({ variant, size, active, disabled, loading, focused, className });
+  const As = as ?? "button";
+  const AsComponent = asChild ? Slot : As;
+  const elementProps = !asChild && As === "button" ? { type: rest.type ?? "button" } : {};
+  const tv = useMemo(
+    () => buttonTv({
+      variant,
+      size,
+      active,
+      disabled,
+      loading,
+      focused
+    }),
+    [variant, size, active, disabled, loading, focused]
+  );
   const content = isValidElement(children) ? cloneElement(children, {
     children: children.props.children
   }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -279,23 +300,21 @@ var Button = forwardRef(function Button2(props, ref) {
     return props["aria-label"];
   }, [children, props]);
   const handleClick = readOnly ? void 0 : onClick;
-  const button = /* @__PURE__ */ jsx(
-    Button3,
+  return /* @__PURE__ */ jsx(
+    AsComponent,
     {
-      ...rest,
       ref,
-      type: rest.type || "button",
+      className: tcx(tv.button({ multiElement: isMultiElement(content) }), className),
+      ...elementProps,
+      ...rest,
       disabled: disabled || loading,
       onClick: handleClick,
-      className: tcx(tv.button(), className),
-      "data-multi-element": isMultiElement(content),
       "aria-disabled": disabled || loading,
       "aria-busy": loading,
       "aria-label": ariaLabelProps,
       children: content
     }
   );
-  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
 });
 Button.displayName = "Button";
 export {

package/dist/components/code-block/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { default as React__default, ReactNode, HTMLProps, RefObject } from 'react';
 import * as React from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface CodeBlockContextValue {
     codeExpanded: boolean;
@@ -14,7 +13,7 @@ interface CodeBlockContextValue {
     isExpanded: boolean;
     language: string;
     lineCount: number;
-    lineThreshold: number;
+    lineThreshold?: number;
     needsScroll: boolean;
     scrollRef?: RefObject<HTMLDivElement>;
     variant?: "default" | "light" | "dark";
@@ -51,35 +50,33 @@ interface CodeBlockFooterProps extends CodeBlockInjectedProps {
 }
 interface CodeBlockContentProps extends CodeBlockInjectedProps {
     className?: string;
-    code: string;
     language?: string;
     withScrollArea?: boolean;
+    children?: string;
 }
 interface CodeBlockCodeProps extends HTMLProps<HTMLDivElement> {
     className?: string;
-    code: string;
-    /** 从 CodeBlock 传递的 context */
+    children?: string;
     codeBlock?: CodeBlockContextValue;
     codeBlockId?: string;
     language?: string;
-    /** 手动指定主题，覆盖自动检测 */
     variant?: "light" | "dark";
 }
 
+declare const CodeBlock: React__default.NamedExoticComponent<CodeBlockProps> & {
+    Code: React__default.NamedExoticComponent<CodeBlockCodeProps>;
+    Content: React__default.NamedExoticComponent<CodeBlockContentProps>;
+    Footer: React__default.NamedExoticComponent<CodeBlockFooterProps>;
+    Header: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
+};
+
 declare const CodeBlockCode: React.NamedExoticComponent<CodeBlockCodeProps>;
 
 declare const CodeBlockHeader: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
 
 declare const CodeBlockFooter: React.NamedExoticComponent<CodeBlockFooterProps>;
 
-declare function CodeBlockContent(props: CodeBlockContentProps): react_jsx_runtime.JSX.Element | null;
-
-declare const CodeBlock: React__default.NamedExoticComponent<CodeBlockProps> & {
-    Code: React__default.NamedExoticComponent<CodeBlockCodeProps>;
-    Content: typeof CodeBlockContent;
-    Footer: React__default.NamedExoticComponent<CodeBlockFooterProps>;
-    Header: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
-};
+declare const CodeBlockContent: React.NamedExoticComponent<CodeBlockContentProps>;
 
 declare function getDefaultFilenameForLanguage(language: string): string;
 

package/dist/components/code-block/dist/index.js

@@ -1,4 +1,4 @@
-import React__default, { memo, useState, useEffect } from "react";
+import React__default, { memo, useState, useEffect, useRef, useCallback } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 import { codeToHtml } from "shiki";
 import { useEventCallback } from "usehooks-ts";
@@ -34,13 +34,34 @@ function useCodeBlock({
     if (!code || typeof code !== "string") {
       return;
     }
-    try {
-      if (typeof navigator !== "undefined" && navigator.clipboard) {
+    const onSuccess = () => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    };
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      try {
         await navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
+        onSuccess();
+        return;
+      } catch {
+      }
+    }
+    const textArea = document.createElement("textarea");
+    try {
+      textArea.value = code;
+      textArea.style.cssText = "position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;background:transparent;";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      const successful = document.execCommand("copy");
+      if (successful) {
+        onSuccess();
+      }
+    } catch {
+    } finally {
+      if (textArea.parentNode) {
+        textArea.parentNode.removeChild(textArea);
       }
-    } catch (error) {
     }
   });
   return {
@@ -56,12 +77,15 @@ function useScrollDetection({
   scrollRef,
   contentRef,
   isExpanded,
-  codeExpanded,
-  children
+  codeExpanded
 }) {
   const [needsScroll, setNeedsScroll] = useState(false);
-  useEffect(() => {
-    const checkScrollNeeded = () => {
+  const debounceRef = useRef(null);
+  const checkScrollNeeded = useCallback(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
       if (!scrollRef.current || !contentRef.current) {
         setNeedsScroll(false);
         return;
@@ -71,50 +95,30 @@ function useScrollDetection({
         const content = contentRef.current;
         const hasScroll = content.scrollHeight > viewport.clientHeight;
         setNeedsScroll(hasScroll);
-      } catch (error) {
+      } catch {
         setNeedsScroll(false);
       }
-    };
+    }, 50);
+  }, [scrollRef, contentRef]);
+  useEffect(() => {
     const timeoutId = setTimeout(checkScrollNeeded, 100);
     window.addEventListener("resize", checkScrollNeeded);
     let resizeObserver = null;
-    if (typeof ResizeObserver !== "undefined") {
+    if (typeof ResizeObserver !== "undefined" && contentRef.current) {
       resizeObserver = new ResizeObserver(checkScrollNeeded);
-      if (contentRef.current) {
-        resizeObserver.observe(contentRef.current);
-      }
+      resizeObserver.observe(contentRef.current);
     }
     return () => {
       clearTimeout(timeoutId);
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
       window.removeEventListener("resize", checkScrollNeeded);
       resizeObserver == null ? void 0 : resizeObserver.disconnect();
     };
-  }, [scrollRef, contentRef, isExpanded, codeExpanded, children]);
+  }, [checkScrollNeeded, isExpanded, codeExpanded]);
   return needsScroll;
 }
-function useLineCount(children) {
-  const [lineCount, setLineCount] = useState(0);
-  useEffect(() => {
-    try {
-      const codeContent = React__default.Children.toArray(children).map((child) => {
-        var _a;
-        if (React__default.isValidElement(child) && ((_a = child.props) == null ? void 0 : _a.code) && typeof child.props.code === "string") {
-          return child.props.code;
-        }
-        return "";
-      }).join("");
-      if (codeContent) {
-        const lines = codeContent.split("\n").length;
-        setLineCount(lines);
-      } else {
-        setLineCount(0);
-      }
-    } catch (error) {
-      setLineCount(0);
-    }
-  }, [children]);
-  return lineCount;
-}
 function useTheme() {
   const [theme, setTheme] = useState(() => {
     if (typeof window === "undefined") return "light";
@@ -176,34 +180,46 @@ var codeBlockCodeTv = tcv({
   base: "text-message-code w-fit min-w-full bg-transparent font-mono [&>pre]:!bg-transparent [&>pre]:px-4 [&>pre]:py-4"
 });
 var CodeBlockCode = memo(function CodeBlockCode2(props) {
-  const { code, language = "tsx", className, variant: variantProp, codeBlock, ...rest } = props;
+  const { children, language = "tsx", className, variant: variantProp, codeBlock, ...rest } = props;
   const systemTheme = useTheme();
   const resolvedVariant = variantProp ?? ((codeBlock == null ? void 0 : codeBlock.variant) === "default" ? void 0 : codeBlock == null ? void 0 : codeBlock.variant);
   const theme = resolvedVariant ?? systemTheme;
   const [highlightedHtml, setHighlightedHtml] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     async function highlight() {
-      if (!code) {
-        setHighlightedHtml("<pre><code></code></pre>");
+      if (!children) {
+        if (isMounted) setHighlightedHtml("<pre><code></code></pre>");
         return;
       }
       const resolvedLang = resolveLanguage(language);
+      const themeConfig = theme === "light" ? "github-light" : "github-dark";
       try {
-        const html = await codeToHtml(code, {
+        const html = await codeToHtml(children, {
           lang: resolvedLang,
-          theme: theme === "light" ? "github-light" : "github-dark"
+          theme: themeConfig
         });
-        setHighlightedHtml(html);
+        if (isMounted) setHighlightedHtml(html);
       } catch {
-        const html = await codeToHtml(code, {
-          lang: "text",
-          theme: theme === "light" ? "github-light" : "github-dark"
-        });
-        setHighlightedHtml(html);
+        try {
+          const html = await codeToHtml(children, {
+            lang: "text",
+            theme: themeConfig
+          });
+          if (isMounted) setHighlightedHtml(html);
+        } catch {
+          if (isMounted) {
+            const escaped = children.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+            setHighlightedHtml(`<pre><code>${escaped}</code></pre>`);
+          }
+        }
       }
     }
     highlight();
-  }, [code, language, theme]);
+    return () => {
+      isMounted = false;
+    };
+  }, [children, language, theme]);
   const classNames = codeBlockCodeTv({ className });
   return highlightedHtml ? /* @__PURE__ */ jsx(
     "div",
@@ -217,10 +233,29 @@ var CodeBlockCode = memo(function CodeBlockCode2(props) {
     {
       className: tcx("min-w-0", classNames),
       ...rest,
-      children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) })
+      children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) })
     }
   );
 });
+function extractCodeFromChildren(children) {
+  if (!children) return "";
+  try {
+    return React__default.Children.toArray(children).map((child) => {
+      var _a, _b;
+      if (React__default.isValidElement(child)) {
+        if (((_a = child.props) == null ? void 0 : _a.code) && typeof child.props.code === "string") {
+          return child.props.code;
+        }
+        if (((_b = child.props) == null ? void 0 : _b.children) && typeof child.props.children === "string") {
+          return child.props.children;
+        }
+      }
+      return "";
+    }).filter(Boolean).join("");
+  } catch {
+    return "";
+  }
+}
 var icons = {
   js: /* @__PURE__ */ jsxs(
     "svg",
@@ -908,9 +943,8 @@ var CodeBlockHeader = memo(function CodeBlockHeader2(props) {
     handleCopy,
     variant
   } = codeBlock;
-  if (!handleExpand || !handleCopy) {
-    return null;
-  }
+  const canExpand = Boolean(handleExpand);
+  const canCopy = Boolean(handleCopy);
   const tv = codeBlockHeaderTv({ isExpanded, variant });
   let icon = null;
   try {
@@ -934,17 +968,17 @@ var CodeBlockHeader = memo(function CodeBlockHeader2(props) {
       children
     ] }),
     /* @__PURE__ */ jsxs("div", { className: tv.actions(), children: [
-      isExpanded && /* @__PURE__ */ jsx(
+      isExpanded && canCopy && /* @__PURE__ */ jsx(
         IconButton,
         {
           className: tv.button(),
           variant: variant === "dark" ? "dark" : "ghost",
-          onClick: () => handleCopy(),
+          onClick: () => handleCopy == null ? void 0 : handleCopy(),
           tooltip: { content: copyTooltipContent },
           children: copied ? /* @__PURE__ */ jsx(Check, { className: "text-success-foreground" }) : /* @__PURE__ */ jsx(ClipboardSmall, {})
         }
       ),
-      expandable && /* @__PURE__ */ jsx(
+      expandable && canExpand && /* @__PURE__ */ jsx(
         IconButton,
         {
           className: tv.button(),
@@ -972,9 +1006,10 @@ var codeBlockFooterTv = tcv({
       },
       false: {
         footer: [
-          "bg-secondary-background/90 absolute inset-x-0 bottom-0 z-3",
+          "bg-secondary-background/80 absolute inset-x-0 bottom-0 z-3",
           "opacity-0 group-hover:opacity-100",
-          "hover:bg-tertiary-background"
+          "hover:bg-tertiary-background",
+          "backdrop-blur-xs"
         ]
       }
     }
@@ -988,7 +1023,7 @@ var CodeBlockFooter = memo(function CodeBlockFooter2(props) {
   if (!codeBlock) return null;
   const { isExpanded, codeExpanded, handleCodeExpand, lineCount, lineThreshold, needsScroll } = codeBlock;
   const tv = codeBlockFooterTv({ codeExpanded });
-  if (!(lineCount > lineThreshold || needsScroll || codeExpanded) || !isExpanded) {
+  if (lineThreshold && !(lineCount > lineThreshold || needsScroll || codeExpanded) || !isExpanded) {
     return null;
   }
   return /* @__PURE__ */ jsx(
@@ -1000,24 +1035,26 @@ var CodeBlockFooter = memo(function CodeBlockFooter2(props) {
     }
   );
 });
+var LINE_HEIGHT_PX = 16;
+var HEIGHT_PADDING_PX = 32 + 40;
 var codeBlockTv = tcv({
   slots: {
-    code: "overflow-hidden",
+    code: "overflow-hidden min-h-0 flex-1",
     content: "flex w-fit flex-col overflow-clip p-[inherit]"
   }
 });
-function CodeBlockContent(props) {
-  const { code, className, codeBlock, withScrollArea = true } = props;
+var CodeBlockContent = memo(function CodeBlockContent2(props) {
+  const { className, codeBlock, withScrollArea = true, children } = props;
   if (!codeBlock) return null;
   const { language, isExpanded, codeExpanded, scrollRef, contentRef, lineCount, lineThreshold } = codeBlock;
   if (!isExpanded) {
     return null;
   }
-  if (typeof code !== "string") {
+  if (typeof children !== "string") {
     return null;
   }
   const tv = codeBlockTv();
-  const shouldLimitHeight = lineCount > lineThreshold && !codeExpanded;
+  const shouldLimitHeight = lineThreshold && lineCount > lineThreshold && !codeExpanded;
   return /* @__PURE__ */ jsx(Fragment, { children: withScrollArea ? /* @__PURE__ */ jsx(
     ScrollArea,
     {
@@ -1030,7 +1067,7 @@ function CodeBlockContent(props) {
         {
           ref: scrollRef,
           style: {
-            maxHeight: shouldLimitHeight ? `${lineThreshold * 14 + 32}px` : "none"
+            maxHeight: shouldLimitHeight ? `${lineThreshold * LINE_HEIGHT_PX + HEIGHT_PADDING_PX}px` : "none"
           },
           children: /* @__PURE__ */ jsx(
             ScrollArea.Content,
@@ -1040,9 +1077,9 @@ function CodeBlockContent(props) {
               children: /* @__PURE__ */ jsx(
                 CodeBlockCode,
                 {
-                  code,
                   language,
-                  codeBlock
+                  codeBlock,
+                  children
                 }
               )
             }
@@ -1053,19 +1090,19 @@ function CodeBlockContent(props) {
   ) : /* @__PURE__ */ jsx("div", { className: tcx(tv.content(), className), children: /* @__PURE__ */ jsx(
     CodeBlockCode,
     {
-      code,
       language,
-      codeBlock
+      codeBlock,
+      children
     }
   ) }) });
-}
+});
 var CodeBlockRoot = memo(function CodeBlock(props) {
   const {
     children,
     className,
     filename,
     language = "code",
-    lineThreshold = 20,
+    lineThreshold,
     expandable = true,
     defaultExpanded = true,
     defaultCodeExpanded = false,
@@ -1077,7 +1114,6 @@ var CodeBlockRoot = memo(function CodeBlock(props) {
     resize: "smooth",
     initial: "smooth"
   });
-  const codeContentRef = React__default.useRef("");
   const {
     isExpanded,
     codeExpanded,
@@ -1092,34 +1128,25 @@ var CodeBlockRoot = memo(function CodeBlock(props) {
     onCodeExpandChange,
     scrollToBottom
   });
+  const codeContent = React__default.useMemo(() => extractCodeFromChildren(children), [children]);
+  const lineCount = React__default.useMemo(
+    () => codeContent ? codeContent.split("\n").length : 0,
+    [codeContent]
+  );
   const handleCopy = React__default.useCallback(
     (code) => {
-      const codeToUse = code || codeContentRef.current;
+      const codeToUse = code || codeContent;
       if (codeToUse) {
         originalHandleCopy(codeToUse);
       }
     },
-    [originalHandleCopy]
+    [originalHandleCopy, codeContent]
   );
-  React__default.useEffect(() => {
-    try {
-      React__default.Children.forEach(children, (child) => {
-        if (React__default.isValidElement(child) && child.props) {
-          if (child.props.code && typeof child.props.code === "string") {
-            codeContentRef.current = child.props.code;
-          }
-        }
-      });
-    } catch {
-    }
-  }, [children]);
-  const lineCount = useLineCount(children);
   const needsScroll = useScrollDetection({
     scrollRef,
     contentRef,
     isExpanded,
-    codeExpanded,
-    children
+    codeExpanded
   });
   const contextValue = React__default.useMemo(
     () => ({
@@ -1178,7 +1205,7 @@ var CodeBlockRoot = memo(function CodeBlock(props) {
     "div",
     {
       className: tcx(
-        "group/code-block relative overflow-hidden rounded-lg",
+        "group/code-block relative flex flex-col overflow-hidden rounded-lg",
         variant === "default" && "bg-secondary-background",
         variant === "light" && "bg-gray-100",
         variant === "dark" && "bg-gray-700",

package/dist/components/command/dist/index.d.ts

@@ -43,10 +43,6 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
     keywords?: string[];
     onSelect?: (value: string) => void;
     prefixElement?: ReactNode;
-    /**
-     * When true, this item will be set as the selected item and scrolled into view.
-     */
-    selected?: boolean;
     shortcut?: {
         keys?: ReactNode;
         modifier?: KbdKey | KbdKey[] | undefined;
@@ -58,9 +54,6 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
 interface CommandListProps extends ScrollAreaProps {
     children: React.ReactNode;
     className?: string;
-    classNames?: {
-        content?: string;
-    };
     label?: string;
 }
 
@@ -113,11 +106,6 @@ interface CommandProps extends Omit<react__default.HTMLAttributes<HTMLDivElement
      * Event handler called when the selected item of the menu changes.
      */
     onChange?: (value: string) => void;
-    /**
-     * Optionally set to `true` to enable selection mode.
-     * When enabled, items with `selected` prop will be scrolled into view on mount.
-     */
-    selection?: boolean;
     /**
      * Optionally set to `false` to turn off the automatic filtering and sorting.
      * If `false`, you must conditionally render valid items based on the search query yourself.
@@ -152,7 +140,6 @@ type Context = {
     labelId: string;
     listId: string;
     listInnerRef: react__default.MutableRefObject<HTMLDivElement | null>;
-    selection?: boolean;
     size?: "default" | "large";
     store: Store;
     value: (id: string, value?: string, keywords?: string[]) => void;

package/dist/components/emoji-picker/dist/index.d.ts

@@ -49,6 +49,7 @@ interface EmojiPickerProps {
     showCategories?: boolean;
     showFrequentlyUsed?: boolean;
     showSearch?: boolean;
+    showFooter?: boolean;
     value?: EmojiData | null;
     variant?: "default" | "dark" | "light";
 }

package/dist/components/emoji-picker/dist/index.js

@@ -12017,6 +12017,7 @@ var EmojiPicker = memo(function EmojiPicker2({
   showCategories = true,
   showFrequentlyUsed = true,
   showSearch = true,
+  showFooter = true,
   children,
   variant = "dark"
 }) {
@@ -12063,6 +12064,7 @@ var EmojiPicker = memo(function EmojiPicker2({
     onChange == null ? void 0 : onChange(emoji);
   });
   const handleEmojiHover = useEventCallback((emoji) => {
+    if (!showFooter) return;
     setHoveredEmoji(emoji);
   });
   const handleCategoryClick = useEventCallback((category) => {
@@ -12079,7 +12081,7 @@ var EmojiPicker = memo(function EmojiPicker2({
       className: tv.container({ className }),
       style: rootStyle,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
+        (showSearch || showCategories) && /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
           showSearch && /* @__PURE__ */ jsx(
             SearchInput,
             {
@@ -12181,7 +12183,7 @@ var EmojiPicker = memo(function EmojiPicker2({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        showFooter && /* @__PURE__ */ jsx(
           EmojiFooter,
           {
             hoveredEmoji,