@choice-ui/react 1.9.0 → 1.9.1

package/dist/components/colors/src/color-slider/context.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, MutableRefObject, RefObject } from 'react';
+import { PickerSliderType } from '../types/colors';
+import { ColorSliderTv } from './tv';
+export interface ColorSliderContextValue {
+    position: number;
+    disabled: boolean;
+    type: PickerSliderType;
+    hue: number;
+    thumbSize: number;
+    trackWidth: number;
+    trackHeight: number;
+    thumbWrapperStyle: CSSProperties;
+    thumbStyle: CSSProperties;
+    trackStyle: CSSProperties;
+    thumbRef: RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLInputElement>;
+    isDragging: MutableRefObject<boolean>;
+    handlePointerDown: (e: React.PointerEvent) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    tv: ReturnType<typeof ColorSliderTv>;
+}
+export declare const ColorSliderContext: import('react').Context<ColorSliderContextValue | null>;
+export declare function useColorSlider(): ColorSliderContextValue;

package/dist/components/colors/src/color-slider/context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const ColorSliderContext = createContext(null);
+function useColorSlider() {
+  const context = useContext(ColorSliderContext);
+  if (!context) {
+    throw new Error("ColorSlider compound components must be used within ColorSlider");
+  }
+  return context;
+}
+export {
+  ColorSliderContext,
+  useColorSlider
+};

package/dist/components/colors/src/color-slider/index.d.ts

@@ -1 +1,3 @@
 export * from './color-slider';
+export * from './context';
+export * from './components';

package/dist/components/colors/src/color-slider/tv.d.ts

@@ -6,6 +6,7 @@ export declare const ColorSliderTv: import('tailwind-variants').TVReturnType<{
     };
 }, {
     root: string;
+    thumbWrapper: string;
     thumb: string;
     thumbInput: string;
 }, undefined, {
@@ -16,6 +17,7 @@ export declare const ColorSliderTv: import('tailwind-variants').TVReturnType<{
     };
 }, {
     root: string;
+    thumbWrapper: string;
     thumb: string;
     thumbInput: string;
 }, import('tailwind-variants').TVReturnType<{
@@ -26,6 +28,7 @@ export declare const ColorSliderTv: import('tailwind-variants').TVReturnType<{
     };
 }, {
     root: string;
+    thumbWrapper: string;
     thumb: string;
     thumbInput: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-slider/tv.js

@@ -2,7 +2,8 @@ import { tcv } from "../../../../shared/utils/tcx/tcx.js";
 const ColorSliderTv = tcv({
   slots: {
     root: "relative touch-none rounded-full select-none",
-    thumb: "absolute top-1/2 box-border origin-center rounded-full",
+    thumbWrapper: "absolute top-1/2 box-border origin-center",
+    thumb: "rounded-full absolute -translate-y-1/2 -translate-x-1/2 left-1/2 top-1/2 w-[calc(var(--thumb-size)-2px)] h-[calc(var(--thumb-size)-2px)]",
     thumbInput: "absolute inset-0 cursor-default opacity-0"
   },
   variants: {

package/dist/components/colors/src/color-solid-paint/color-solid-paint.js

@@ -59,7 +59,7 @@ const ColorSolidPaint = forwardRef(
     const handleNativeColorChange = useEventCallback((rgb) => {
       onColorChange == null ? void 0 : onColorChange(rgb);
     });
-    const sliderTrackSize = useMemo(() => {
+    const sliderWidth = useMemo(() => {
       const getPadding = () => {
         if (!features.alpha && !features.nativePicker) {
           return 32;
@@ -69,10 +69,7 @@ const ColorSolidPaint = forwardRef(
         padding += features.nativePicker ? 48 : 0;
         return padding;
       };
-      return {
-        width: ((features == null ? void 0 : features.containerWidth) ?? 240) - getPadding(),
-        height: 16
-      };
+      return ((features == null ? void 0 : features.containerWidth) ?? 240) - getPadding();
     }, [features.containerWidth, features.alpha, features.nativePicker]);
     const styles = ColorSolidPaintTv({
       alpha: features.alpha,
@@ -235,7 +232,7 @@ const ColorSolidPaint = forwardRef(
                       onChangeEnd,
                       onChange: onChangeEnd,
                       type: "hue",
-                      trackSize: sliderTrackSize,
+                      width: sliderWidth,
                       updateSourceRef
                     }
                   ),
@@ -246,7 +243,7 @@ const ColorSolidPaint = forwardRef(
                       alpha: opacity,
                       onAlphaChange,
                       type: "alpha",
-                      trackSize: sliderTrackSize,
+                      width: sliderWidth,
                       onChangeStart,
                       onChangeEnd
                     }

package/dist/components/colors/src/color-solid-paint/solid-paint-alpha-slider.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { ColorSlider } from "../color-slider/color-slider.js";
 const SolidPaintAlphaSlider = (props) => {
-  const { hue, alpha, onAlphaChange, onChangeStart, onChangeEnd, trackSize } = props;
+  const { hue, alpha, onAlphaChange, onChangeStart, onChangeEnd, width } = props;
   return /* @__PURE__ */ jsx(
     ColorSlider,
     {
@@ -9,7 +9,7 @@ const SolidPaintAlphaSlider = (props) => {
       onChange: onAlphaChange,
       type: "alpha",
       hue,
-      trackSize,
+      width,
       onChangeStart,
       onChangeEnd
     }

package/dist/components/colors/src/color-solid-paint/solid-paint-hue-slider.js

@@ -9,7 +9,7 @@ const SolidPaintHueSlider = (props) => {
     setHue,
     color,
     onColorChange,
-    trackSize,
+    width,
     onChangeStart,
     onChangeEnd,
     updateSourceRef
@@ -32,7 +32,7 @@ const SolidPaintHueSlider = (props) => {
       position: hue / 360,
       onChange: handleHueChange,
       type: "hue",
-      trackSize,
+      width,
       onChangeStart,
       onChangeEnd: () => {
         onChangeEnd == null ? void 0 : onChangeEnd();

package/dist/components/colors/src/simple-color-picker/simple-color-picker.js

@@ -43,16 +43,13 @@ const SimpleColorPicker = forwardRef(
       hsb: true,
       ...featureProps
     };
-    const sliderTrackSize = useMemo(() => {
+    const sliderWidth = useMemo(() => {
       const getPadding = () => {
         let padding = 0;
         padding += 32;
         return padding;
       };
-      return {
-        width: 240 - getPadding(),
-        height: 16
-      };
+      return 240 - getPadding();
     }, []);
     const styles = ColorSolidPaintTv({
       alpha: true,
@@ -104,7 +101,7 @@ const SimpleColorPicker = forwardRef(
                     onChangeEnd,
                     onChange: onChangeEnd,
                     type: "hue",
-                    trackSize: sliderTrackSize,
+                    width: sliderWidth,
                     updateSourceRef
                   }
                 ),
@@ -115,7 +112,7 @@ const SimpleColorPicker = forwardRef(
                     alpha: opacity,
                     onAlphaChange,
                     type: "alpha",
-                    trackSize: sliderTrackSize,
+                    width: sliderWidth,
                     onChangeStart,
                     onChangeEnd
                   }

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

@@ -7,6 +7,12 @@ interface DropdownProps {
      * @default true
      */
     autoSelectFirstItem?: boolean;
+    /**
+     * Whether to avoid collisions by flipping or shifting the dropdown position.
+     * When false, the dropdown will strictly follow the placement direction.
+     * @default true
+     */
+    avoidCollisions?: boolean;
     children?: React.ReactNode;
     disabledNested?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;

package/dist/components/dropdown/dist/index.js

@@ -13,6 +13,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
   const {
     children,
     autoSelectFirstItem = true,
+    avoidCollisions = true,
     disabledNested = false,
     offset: offsetDistance = DEFAULT_OFFSET,
     placement = "bottom-start",
@@ -53,7 +54,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     }
     onOpenChange == null ? void 0 : onOpenChange(newOpen);
   });
-  const { nodeId, item, isNested } = useMenuTree({
+  const { nodeId, item, isNested, tree } = useMenuTree({
     disabledNested,
     handleOpenChange,
     isControlledOpen
@@ -77,11 +78,14 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     });
   });
   const lastPositionRef = useRef(null);
-  const middleware = useMemo(
-    () => [
-      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
-      flip(),
-      shift(),
+  const middleware = useMemo(() => {
+    const baseMiddleware = [
+      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 })
+    ];
+    if (avoidCollisions) {
+      baseMiddleware.push(flip(), shift());
+    }
+    baseMiddleware.push(
       size({
         padding: 4,
         apply({ elements, availableHeight, rects }) {
@@ -104,9 +108,9 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
           }
         }
       })
-    ],
-    [isNested, offsetDistance, matchTriggerWidth, scrollRef]
-  );
+    );
+    return baseMiddleware;
+  }, [isNested, offsetDistance, matchTriggerWidth, scrollRef, avoidCollisions]);
   const { refs, floatingStyles, context, isPositioned } = useFloating({
     nodeId,
     open: isControlledOpen,
@@ -165,11 +169,17 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     bubbles: true,
     escapeKey: true
   });
+  const handleNavigate = useEventCallback((index) => {
+    setActiveIndex(index);
+    if (tree && index !== null) {
+      tree.events.emit("navigate", { nodeId, index });
+    }
+  });
   const listNavigation = useListNavigation(context, {
     listRef: elementsRef,
     activeIndex,
     nested: isNested,
-    onNavigate: setActiveIndex,
+    onNavigate: handleNavigate,
     loop: true
   });
   const typeahead = useTypeahead(context, {

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

@@ -15,12 +15,24 @@ type VirtualItem = {
     emojis: EmojiData[];
     type: "emojis";
 };
+interface CategoryNames {
+    activities: string;
+    animalsNature: string;
+    flags: string;
+    foodDrink: string;
+    frequentlyUsed: string;
+    objects: string;
+    smileysPeople: string;
+    symbols: string;
+    travelPlaces: string;
+}
 interface UseEmojiDataProps {
+    categoryNames?: CategoryNames;
     columns: number;
     searchQuery: string;
     showFrequentlyUsed: boolean;
 }
-declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed }: UseEmojiDataProps): {
+declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed, categoryNames, }: UseEmojiDataProps): {
     categorizedData: VirtualItem[];
     categoryIndexMap: Map<EmojiCategory, number>;
     searchResults: {
@@ -52,6 +64,22 @@ interface EmojiPickerProps {
     showFooter?: boolean;
     value?: EmojiData | null;
     variant?: "default" | "dark" | "light";
+    i18n?: {
+        noEmojisFoundTitle?: string;
+        noEmojisFoundDescription?: string;
+        footerPickAnEmoji?: string;
+        categories?: {
+            frequentlyUsed: string;
+            smileysPeople: string;
+            animalsNature: string;
+            foodDrink: string;
+            travelPlaces: string;
+            activities: string;
+            objects: string;
+            symbols: string;
+            flags: string;
+        };
+    };
 }
 declare const EmojiPicker: React.NamedExoticComponent<EmojiPickerProps>;
 

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

@@ -141,7 +141,7 @@ var emojiFooterTv = tcv({
 var emojiEmptyTv = tcv({
   slots: {
     container: "flex h-32 flex-col items-center justify-center p-4 text-center",
-    title: "text-heading-display",
+    title: "text-body-large-strong",
     description: "mt-2 w-32"
   },
   variants: {
@@ -179,13 +179,20 @@ var EmojiCategoryHeader = forwardRef(
     );
   }
 );
-function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
+var EmojiFooter = memo(function EmojiFooter2({
+  hoveredEmoji,
+  selectedEmoji,
+  variant = "dark",
+  i18n = {
+    pickAnEmoji: "Pick an emoji..."
+  }
+}) {
   var _a, _b;
   const tv = emojiFooterTv({ variant });
   return /* @__PURE__ */ jsxs("div", { className: tv.footer(), children: [
     /* @__PURE__ */ jsx("div", { className: tv.emojiPreview(), children: ((_a = hoveredEmoji || selectedEmoji) == null ? void 0 : _a.emoji) || /* @__PURE__ */ jsx("div", { className: tv.emojiPreviewEmpty() }) }),
     /* @__PURE__ */ jsxs("div", { className: tv.emojiInfo(), children: [
-      /* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || "Pick an emoji..." }),
+      /* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || i18n.pickAnEmoji }),
       hoveredEmoji || selectedEmoji ? /* @__PURE__ */ jsxs("div", { className: tv.emojiCode(), children: [
         ":",
         (_b = hoveredEmoji || selectedEmoji) == null ? void 0 : _b.nameUrl,
@@ -193,7 +200,7 @@ function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
       ] }) : /* @__PURE__ */ jsx(Fragment, {})
     ] })
   ] });
-}
+});
 var EmojiItem = memo(function EmojiItem2(props) {
   const { emoji, onSelect, onHover, selected = false, variant = "dark" } = props;
   return /* @__PURE__ */ jsx(
@@ -209,11 +216,17 @@ var EmojiItem = memo(function EmojiItem2(props) {
     }
   );
 });
-var EmojiEmpty = memo(function EmojiEmpty2({ variant = "dark" }) {
+var EmojiEmpty = memo(function EmojiEmpty2({
+  variant = "dark",
+  i18n = {
+    title: "No emoji found",
+    description: "You can search for an emoji by name or use the search bar to find it."
+  }
+}) {
   const tv = emojiEmptyTv({ variant });
   return /* @__PURE__ */ jsxs("div", { className: tv.container(), children: [
-    /* @__PURE__ */ jsx("div", { className: tv.title(), children: "No emoji found" }),
-    /* @__PURE__ */ jsx("p", { className: tv.description(), children: "You can search for an emoji by name or use the search bar to find it." })
+    /* @__PURE__ */ jsx("div", { className: tv.title(), children: i18n.title }),
+    /* @__PURE__ */ jsx("p", { className: tv.description(), children: i18n.description })
   ] });
 });
 var emojis = [
@@ -11727,15 +11740,15 @@ var emojis = [
   }
 ];
 var categories = [
-  { id: "frequently_used", name: "Frequently used" },
-  { id: "smileys_people", name: "Smileys & People", range: [1, 460] },
-  { id: "animals_nature", name: "Animals & Nature", range: [465, 591] },
-  { id: "food_drink", name: "Food & Drink", range: [592, 712] },
-  { id: "travel_places", name: "Travel & Places", range: [713, 922] },
-  { id: "activities", name: "Activities", range: [923, 1001] },
-  { id: "objects", name: "Objects", range: [1002, 1234] },
-  { id: "symbols", name: "Symbols", range: [1235, 1451] },
-  { id: "flags", name: "Flags", range: [1452, 1719] }
+  { id: "frequently_used" },
+  { id: "smileys_people", range: [1, 460] },
+  { id: "animals_nature", range: [465, 591] },
+  { id: "food_drink", range: [592, 712] },
+  { id: "travel_places", range: [713, 922] },
+  { id: "activities", range: [923, 1001] },
+  { id: "objects", range: [1002, 1234] },
+  { id: "symbols", range: [1235, 1451] },
+  { id: "flags", range: [1452, 1719] }
 ];
 var STORAGE_KEY = "emoji-picker-frequently-used";
 function getEmojiCategory(id) {
@@ -11769,7 +11782,34 @@ function saveFrequentlyUsedEmoji(emojiId) {
   } catch {
   }
 }
-function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
+var defaultCategoryNames = {
+  frequentlyUsed: "Frequently used",
+  smileysPeople: "Smileys & People",
+  animalsNature: "Animals & Nature",
+  foodDrink: "Food & Drink",
+  travelPlaces: "Travel & Places",
+  activities: "Activities",
+  objects: "Objects",
+  symbols: "Symbols",
+  flags: "Flags"
+};
+var categoryIdToI18nKey = {
+  frequently_used: "frequentlyUsed",
+  smileys_people: "smileysPeople",
+  animals_nature: "animalsNature",
+  food_drink: "foodDrink",
+  travel_places: "travelPlaces",
+  activities: "activities",
+  objects: "objects",
+  symbols: "symbols",
+  flags: "flags"
+};
+function useEmojiData({
+  searchQuery,
+  columns,
+  showFrequentlyUsed,
+  categoryNames = defaultCategoryNames
+}) {
   const [frequentlyUsed, setFrequentlyUsed] = useState([]);
   useEffect(() => {
     if (showFrequentlyUsed) {
@@ -11799,7 +11839,7 @@ function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
       items.push({
         type: "header",
         category: "frequently_used",
-        title: "Frequently used"
+        title: categoryNames.frequentlyUsed
       });
       for (let i = 0; i < frequentlyUsed.length; i += columns) {
         items.push({
@@ -11814,10 +11854,11 @@ function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
         (emoji) => emoji.id >= category.range[0] && emoji.id <= category.range[1]
       );
       if (categoryEmojis.length > 0) {
+        const i18nKey = categoryIdToI18nKey[category.id];
         items.push({
           type: "header",
           category: category.id,
-          title: category.name
+          title: i18nKey ? categoryNames[i18nKey] : category.id
         });
         for (let i = 0; i < categoryEmojis.length; i += columns) {
           items.push({
@@ -11828,7 +11869,7 @@ function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
       }
     });
     return items;
-  }, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed]);
+  }, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed, categoryNames]);
   const categoryIndexMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     categorizedData.forEach((item, index) => {
@@ -11884,6 +11925,8 @@ function useEmojiScroll({
   const [currentVisibleCategory, setCurrentVisibleCategory] = useState("frequently_used");
   const isScrollingToTarget = useRef(false);
   const isInternalUpdate = useRef(false);
+  const scrollingTimeoutRef = useRef(null);
+  const internalUpdateTimeoutRef = useRef(null);
   const virtualizer = useVirtualizer({
     count: categorizedData.length,
     getScrollElement: () => scrollRef.current,
@@ -11948,7 +11991,10 @@ function useEmojiScroll({
         align: "start",
         behavior: "auto"
       });
-      setTimeout(() => {
+      if (scrollingTimeoutRef.current) {
+        clearTimeout(scrollingTimeoutRef.current);
+      }
+      scrollingTimeoutRef.current = setTimeout(() => {
         isScrollingToTarget.current = false;
       }, 100);
     }
@@ -11961,17 +12007,33 @@ function useEmojiScroll({
         align: "center",
         behavior: "auto"
       });
-      setTimeout(() => {
+      if (scrollingTimeoutRef.current) {
+        clearTimeout(scrollingTimeoutRef.current);
+      }
+      scrollingTimeoutRef.current = setTimeout(() => {
         isScrollingToTarget.current = false;
       }, 100);
     }
   });
   const markInternalUpdate = useEventCallback(() => {
     isInternalUpdate.current = true;
-    setTimeout(() => {
+    if (internalUpdateTimeoutRef.current) {
+      clearTimeout(internalUpdateTimeoutRef.current);
+    }
+    internalUpdateTimeoutRef.current = setTimeout(() => {
       isInternalUpdate.current = false;
     }, 50);
   });
+  useEffect(() => {
+    return () => {
+      if (scrollingTimeoutRef.current) {
+        clearTimeout(scrollingTimeoutRef.current);
+      }
+      if (internalUpdateTimeoutRef.current) {
+        clearTimeout(internalUpdateTimeoutRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     if (value && !searchQuery.trim() && !isInternalUpdate.current) {
       scrollToEmoji(value);
@@ -11996,17 +12058,6 @@ function useEmojiScroll({
     PADDING
   };
 }
-var categoriesWithIcons = [
-  { id: "frequently_used", name: "Frequently used", icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {}) },
-  { id: "smileys_people", name: "Smileys & People", icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
-  { id: "animals_nature", name: "Animals & Nature", icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
-  { id: "food_drink", name: "Food & Drink", icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
-  { id: "travel_places", name: "Travel & Places", icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
-  { id: "activities", name: "Activities", icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
-  { id: "objects", name: "Objects", icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
-  { id: "symbols", name: "Symbols", icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
-  { id: "flags", name: "Flags", icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
-];
 var EmojiPicker = memo(function EmojiPicker2({
   value,
   onChange,
@@ -12019,11 +12070,49 @@ var EmojiPicker = memo(function EmojiPicker2({
   showSearch = true,
   showFooter = true,
   children,
-  variant = "dark"
+  variant = "dark",
+  i18n = {
+    noEmojisFoundTitle: "No emoji found",
+    noEmojisFoundDescription: "You can search for an emoji by name or use the search bar to find it.",
+    footerPickAnEmoji: "Pick an emoji...",
+    categories: {
+      frequentlyUsed: "Frequently used",
+      smileysPeople: "Smileys & People",
+      animalsNature: "Animals & Nature",
+      foodDrink: "Food & Drink",
+      travelPlaces: "Travel & Places",
+      activities: "Activities",
+      objects: "Objects",
+      symbols: "Symbols",
+      flags: "Flags"
+    }
+  }
 }) {
   const [searchQuery, setSearchQuery] = useState("");
   const [hoveredEmoji, setHoveredEmoji] = useState(null);
+  const safeColumns = Math.max(1, columns);
   const tv = emojiTv({ variant });
+  const categoriesWithIcons = useMemo(
+    () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      return [
+        {
+          id: "frequently_used",
+          name: (_a = i18n.categories) == null ? void 0 : _a.frequentlyUsed,
+          icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {})
+        },
+        { id: "smileys_people", name: (_b = i18n.categories) == null ? void 0 : _b.smileysPeople, icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
+        { id: "animals_nature", name: (_c = i18n.categories) == null ? void 0 : _c.animalsNature, icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
+        { id: "food_drink", name: (_d = i18n.categories) == null ? void 0 : _d.foodDrink, icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
+        { id: "travel_places", name: (_e = i18n.categories) == null ? void 0 : _e.travelPlaces, icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
+        { id: "activities", name: (_f = i18n.categories) == null ? void 0 : _f.activities, icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
+        { id: "objects", name: (_g = i18n.categories) == null ? void 0 : _g.objects, icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
+        { id: "symbols", name: (_h = i18n.categories) == null ? void 0 : _h.symbols, icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
+        { id: "flags", name: (_i = i18n.categories) == null ? void 0 : _i.flags, icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
+      ];
+    },
+    [i18n.categories]
+  );
   const {
     categorizedData,
     categoryIndexMap,
@@ -12031,8 +12120,9 @@ var EmojiPicker = memo(function EmojiPicker2({
     findEmojiPosition
   } = useEmojiData({
     searchQuery,
-    columns,
-    showFrequentlyUsed
+    columns: safeColumns,
+    showFrequentlyUsed,
+    categoryNames: i18n.categories
   });
   const {
     scrollRef,
@@ -12048,7 +12138,7 @@ var EmojiPicker = memo(function EmojiPicker2({
     findEmojiPosition,
     searchQuery,
     value,
-    columns
+    columns: safeColumns
   });
   const availableCategories = useMemo(() => {
     return categoriesWithIcons.filter((category) => {
@@ -12057,7 +12147,7 @@ var EmojiPicker = memo(function EmojiPicker2({
       }
       return true;
     });
-  }, [showFrequentlyUsed]);
+  }, [categoriesWithIcons, showFrequentlyUsed]);
   const handleEmojiSelect = useEventCallback((emoji) => {
     markInternalUpdate();
     addToFrequentlyUsed(emoji.id);
@@ -12073,7 +12163,7 @@ var EmojiPicker = memo(function EmojiPicker2({
   const rootStyle = {
     "--emoji-height": `${height}px`,
     "--emoji-padding": `${PADDING2}px`,
-    "--emoji-columns": `${columns}`
+    "--emoji-columns": `${safeColumns}`
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -12176,7 +12266,16 @@ var EmojiPicker = memo(function EmojiPicker2({
                         },
                         virtualItem.key
                       );
-                    }) : /* @__PURE__ */ jsx(EmojiEmpty, { variant })
+                    }) : /* @__PURE__ */ jsx(
+                      EmojiEmpty,
+                      {
+                        variant,
+                        i18n: {
+                          title: i18n.noEmojisFoundTitle,
+                          description: i18n.noEmojisFoundDescription
+                        }
+                      }
+                    )
                   }
                 )
               }
@@ -12188,7 +12287,10 @@ var EmojiPicker = memo(function EmojiPicker2({
           {
             hoveredEmoji,
             selectedEmoji: value || null,
-            variant
+            variant,
+            i18n: {
+              pickAnEmoji: i18n.footerPickAnEmoji
+            }
           }
         ),
         children