@choice-ui/react 1.7.8 → 1.8.0

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

package/dist/components/emoji-picker/src/components/emoji-empty.d.ts

@@ -1,5 +1,9 @@
 interface EmojiEmptyProps {
     variant?: "default" | "dark" | "light";
+    i18n?: {
+        title?: string;
+        description?: string;
+    };
 }
 export declare const EmojiEmpty: import('react').NamedExoticComponent<EmojiEmptyProps>;
 export {};

package/dist/components/emoji-picker/src/components/emoji-empty.js

@@ -1,11 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { emojiEmptyTv } from "../tv.js";
-const EmojiEmpty = memo(function EmojiEmpty2({ variant = "dark" }) {
+const 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 })
   ] });
 });
 export {

package/dist/components/emoji-picker/src/components/emoji-footer.d.ts

@@ -3,6 +3,9 @@ interface EmojiFooterProps {
     hoveredEmoji: EmojiData | null;
     selectedEmoji: EmojiData | null;
     variant?: "default" | "dark" | "light";
+    i18n?: {
+        pickAnEmoji?: string;
+    };
 }
-export declare function EmojiFooter({ hoveredEmoji, selectedEmoji, variant }: EmojiFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare const EmojiFooter: import('react').NamedExoticComponent<EmojiFooterProps>;
 export {};

package/dist/components/emoji-picker/src/components/emoji-footer.js

@@ -1,12 +1,20 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo } from "react";
 import { emojiFooterTv } from "../tv.js";
-function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
+const 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,
@@ -14,7 +22,7 @@ function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
       ] }) : /* @__PURE__ */ jsx(Fragment, {})
     ] })
   ] });
-}
+});
 export {
   EmojiFooter
 };

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

@@ -13,6 +13,22 @@ export 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;
+        };
+    };
 }
 export declare const EmojiPicker: React.NamedExoticComponent<EmojiPickerProps>;
 export default EmojiPicker;

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

@@ -12,17 +12,6 @@ import { EmojiCategoryHeader } from "./components/emoji-category-header.js";
 import { EmojiItem } from "./components/emoji-item.js";
 import { EmojiEmpty } from "./components/emoji-empty.js";
 import { EmojiFooter } from "./components/emoji-footer.js";
-const 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, {}) }
-];
 const EmojiPicker = memo(function EmojiPicker2({
   value,
   onChange,
@@ -35,11 +24,49 @@ const 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,
@@ -48,8 +75,9 @@ const EmojiPicker = memo(function EmojiPicker2({
     findEmojiByChar
   } = useEmojiData({
     searchQuery,
-    columns,
-    showFrequentlyUsed
+    columns: safeColumns,
+    showFrequentlyUsed,
+    categoryNames: i18n.categories
   });
   const {
     scrollRef,
@@ -65,7 +93,7 @@ const EmojiPicker = memo(function EmojiPicker2({
     findEmojiPosition,
     searchQuery,
     value,
-    columns
+    columns: safeColumns
   });
   const availableCategories = useMemo(() => {
     return categoriesWithIcons.filter((category) => {
@@ -74,7 +102,7 @@ const EmojiPicker = memo(function EmojiPicker2({
       }
       return true;
     });
-  }, [showFrequentlyUsed]);
+  }, [categoriesWithIcons, showFrequentlyUsed]);
   const handleEmojiSelect = useEventCallback((emoji) => {
     markInternalUpdate();
     addToFrequentlyUsed(emoji.id);
@@ -90,7 +118,7 @@ const EmojiPicker = memo(function EmojiPicker2({
   const rootStyle = {
     "--emoji-height": `${height}px`,
     "--emoji-padding": `${PADDING}px`,
-    "--emoji-columns": `${columns}`
+    "--emoji-columns": `${safeColumns}`
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -193,7 +221,16 @@ const EmojiPicker = memo(function EmojiPicker2({
                         },
                         virtualItem.key
                       );
-                    }) : /* @__PURE__ */ jsx(EmojiEmpty, { variant })
+                    }) : /* @__PURE__ */ jsx(
+                      EmojiEmpty,
+                      {
+                        variant,
+                        i18n: {
+                          title: i18n.noEmojisFoundTitle,
+                          description: i18n.noEmojisFoundDescription
+                        }
+                      }
+                    )
                   }
                 )
               }
@@ -205,7 +242,10 @@ const EmojiPicker = memo(function EmojiPicker2({
           {
             hoveredEmoji,
             selectedEmoji: value || null,
-            variant
+            variant,
+            i18n: {
+              pickAnEmoji: i18n.footerPickAnEmoji
+            }
           }
         ),
         children

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

@@ -1,3 +1,3 @@
 export { useEmojiData } from './use-emoji-data';
 export { useEmojiScroll } from './use-emoji-scroll';
-export type { EmojiData, EmojiCategory, VirtualItem } from './use-emoji-data';
+export type { EmojiData, EmojiCategory, VirtualItem, CategoryNames } from './use-emoji-data';

package/dist/components/emoji-picker/src/hooks/use-emoji-data.d.ts

@@ -16,47 +16,50 @@ export type VirtualItem = {
 };
 export declare const categories: readonly [{
     readonly id: "frequently_used";
-    readonly name: "Frequently used";
 }, {
     readonly id: "smileys_people";
-    readonly name: "Smileys & People";
     readonly range: readonly [1, 460];
 }, {
     readonly id: "animals_nature";
-    readonly name: "Animals & Nature";
     readonly range: readonly [465, 591];
 }, {
     readonly id: "food_drink";
-    readonly name: "Food & Drink";
     readonly range: readonly [592, 712];
 }, {
     readonly id: "travel_places";
-    readonly name: "Travel & Places";
     readonly range: readonly [713, 922];
 }, {
     readonly id: "activities";
-    readonly name: "Activities";
     readonly range: readonly [923, 1001];
 }, {
     readonly id: "objects";
-    readonly name: "Objects";
     readonly range: readonly [1002, 1234];
 }, {
     readonly id: "symbols";
-    readonly name: "Symbols";
     readonly range: readonly [1235, 1451];
 }, {
     readonly id: "flags";
-    readonly name: "Flags";
     readonly range: readonly [1452, 1719];
 }];
 export declare function getEmojiCategory(id: number): EmojiCategory;
+export 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;
 }
-export declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed }: UseEmojiDataProps): {
+export declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed, categoryNames, }: UseEmojiDataProps): {
     categorizedData: VirtualItem[];
     categoryIndexMap: Map<EmojiCategory, number>;
     searchResults: {

package/dist/components/emoji-picker/src/hooks/use-emoji-data.js

@@ -2,15 +2,15 @@ import { useState, useEffect, useMemo } from "react";
 import { emojis } from "../utils/emoji-data.js";
 import { isBrowser } from "../../../../shared/utils/ssr.js";
 const 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] }
 ];
 const STORAGE_KEY = "emoji-picker-frequently-used";
 function getEmojiCategory(id) {
@@ -44,7 +44,34 @@ function saveFrequentlyUsedEmoji(emojiId) {
   } catch {
   }
 }
-function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
+const defaultCategoryNames = {
+  frequentlyUsed: "Frequently used",
+  smileysPeople: "Smileys & People",
+  animalsNature: "Animals & Nature",
+  foodDrink: "Food & Drink",
+  travelPlaces: "Travel & Places",
+  activities: "Activities",
+  objects: "Objects",
+  symbols: "Symbols",
+  flags: "Flags"
+};
+const 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) {
@@ -74,7 +101,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({
@@ -89,10 +116,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({
@@ -103,7 +131,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) => {

package/dist/components/emoji-picker/src/hooks/use-emoji-scroll.js

@@ -17,6 +17,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,
@@ -81,7 +83,10 @@ function useEmojiScroll({
         align: "start",
         behavior: "auto"
       });
-      setTimeout(() => {
+      if (scrollingTimeoutRef.current) {
+        clearTimeout(scrollingTimeoutRef.current);
+      }
+      scrollingTimeoutRef.current = setTimeout(() => {
         isScrollingToTarget.current = false;
       }, 100);
     }
@@ -94,17 +99,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);

package/dist/components/emoji-picker/src/tv.js

@@ -132,7 +132,7 @@ const emojiFooterTv = tcv({
 const 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: {

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

@@ -14,7 +14,7 @@ interface IconButtonProps extends Omit<HTMLProps<HTMLElement>, "size" | "as"> {
     readOnly?: boolean;
     size?: "default" | "large" | "reset";
     tooltip?: TooltipProps;
-    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "reset";
+    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "submit" | "reset";
 }
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLElement>>;
 

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

@@ -28,6 +28,12 @@ var iconButtonTv = tcv({
       highlight: {},
       ghost: {},
       dark: { button: "text-white" },
+      submit: {
+        button: [
+          "bg-[var(--theme-submit-btn-bg)] text-[var(--theme-submit-btn-text)]",
+          "focus-visible:border-transparent"
+        ]
+      },
       reset: {}
     },
     active: {
@@ -141,6 +147,29 @@ var iconButtonTv = tcv({
       variant: "dark",
       disabled: true,
       class: { button: "text-gray-500" }
+    },
+    {
+      variant: "submit",
+      class: {
+        button: "focus-visible:shadow-focus"
+      }
+    },
+    {
+      variant: "submit",
+      focused: true,
+      class: {
+        button: ["shadow-focus", "border-transparent"]
+      }
+    },
+    {
+      variant: "submit",
+      loading: true,
+      class: { button: "opacity-70" }
+    },
+    {
+      variant: "submit",
+      disabled: true,
+      class: { button: "opacity-50" }
     }
   ],
   defaultVariants: {

package/dist/components/textarea/dist/index.js

@@ -507,7 +507,9 @@ var TextareaTv = tcv({
         container: "bg-gray-700",
         textarea: "text-white placeholder:text-white/40"
       },
-      reset: {}
+      reset: {
+        container: "rounded-none border-0"
+      }
     },
     resize: {
       auto: {},

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

@@ -10,6 +10,7 @@ interface TooltipProps {
     className?: string;
     content?: React.ReactNode;
     disabled?: boolean;
+    interactive?: boolean;
     offset?: number;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
@@ -23,6 +24,7 @@ interface TooltipProps {
     withArrow?: boolean;
 }
 interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
+    interactive?: boolean;
     portalId?: string;
     variant?: "default" | "light";
     withArrow?: boolean;

package/dist/components/tooltip/dist/index.js

@@ -128,7 +128,15 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
 });
 var TooltipContent = forwardRef(
   function TooltipContent2(props, propRef) {
-    const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
+    const {
+      className,
+      withArrow = true,
+      variant = "default",
+      children,
+      portalId,
+      interactive = true,
+      ...rest
+    } = props;
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setFloating, propRef]);
     const { isInstantPhase, currentId } = useDelayGroup(state.context, {
@@ -157,19 +165,27 @@ var TooltipContent = forwardRef(
     });
     const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
     if (state.disabled || !isMounted) return null;
+    const floatingProps = state.getFloatingProps(rest);
     return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        style: state.floatingStyles,
-        ...state.getFloatingProps(rest),
+        style: {
+          ...state.floatingStyles,
+          pointerEvents: interactive ? void 0 : "none"
+        },
+        ...floatingProps,
         className: "z-tooltip",
         children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: tcx(tv.root({ className })),
             "data-state": state.open ? "open" : "closed",
-            style: styles,
+            style: {
+              ...styles,
+              pointerEvents: interactive ? void 0 : "none",
+              cursor: interactive ? void 0 : "default"
+            },
             children: [
               children,
               withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })
@@ -272,7 +288,8 @@ function TooltipRoot(props) {
     withArrow = true,
     variant = "default",
     offset: offset2 = 8,
-    portalId = PORTAL_ROOT_ID
+    portalId = PORTAL_ROOT_ID,
+    interactive = true
   } = props;
   const tooltip = useTooltip({
     placement,
@@ -291,6 +308,7 @@ function TooltipRoot(props) {
           variant,
           portalId,
           className,
+          interactive,
           children: [
             content,
             shortcut && /* @__PURE__ */ jsx(

package/dist/components/tooltip/src/components/tooltip-content.js

@@ -7,7 +7,15 @@ import { TooltipArrow } from "./tooltip-arrow.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const TooltipContent = forwardRef(
   function TooltipContent2(props, propRef) {
-    const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
+    const {
+      className,
+      withArrow = true,
+      variant = "default",
+      children,
+      portalId,
+      interactive = true,
+      ...rest
+    } = props;
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setFloating, propRef]);
     const { isInstantPhase, currentId } = useDelayGroup(state.context, {
@@ -36,19 +44,27 @@ const TooltipContent = forwardRef(
     });
     const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
     if (state.disabled || !isMounted) return null;
+    const floatingProps = state.getFloatingProps(rest);
     return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        style: state.floatingStyles,
-        ...state.getFloatingProps(rest),
+        style: {
+          ...state.floatingStyles,
+          pointerEvents: interactive ? void 0 : "none"
+        },
+        ...floatingProps,
         className: "z-tooltip",
         children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: tcx(tv.root({ className })),
             "data-state": state.open ? "open" : "closed",
-            style: styles,
+            style: {
+              ...styles,
+              pointerEvents: interactive ? void 0 : "none",
+              cursor: interactive ? void 0 : "default"
+            },
             children: [
               children,
               withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })

package/dist/components/tooltip/src/tooltip.js

@@ -17,7 +17,8 @@ function TooltipRoot(props) {
     withArrow = true,
     variant = "default",
     offset = 8,
-    portalId = PORTAL_ROOT_ID
+    portalId = PORTAL_ROOT_ID,
+    interactive = true
   } = props;
   const tooltip = useTooltip({
     placement,
@@ -36,6 +37,7 @@ function TooltipRoot(props) {
           variant,
           portalId,
           className,
+          interactive,
           children: [
             content,
             shortcut && /* @__PURE__ */ jsx(

package/dist/components/tooltip/src/types.d.ts

@@ -4,6 +4,7 @@ import { KbdKey } from '../../kbd/src';
 export interface TooltipOptions {
     disabled?: boolean;
     initialOpen?: boolean;
+    interactive?: boolean;
     offset?: number;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
@@ -32,6 +33,7 @@ export interface TooltipProps {
     className?: string;
     content?: React.ReactNode;
     disabled?: boolean;
+    interactive?: boolean;
     offset?: number;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
@@ -45,6 +47,7 @@ export interface TooltipProps {
     withArrow?: boolean;
 }
 export interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
+    interactive?: boolean;
     portalId?: string;
     variant?: "default" | "light";
     withArrow?: boolean;

package/dist/components/virtual-select/dist/index.d.ts

@@ -0,0 +1,48 @@
+import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
+import { FloatingFocusManagerProps } from '@floating-ui/react';
+import { default as React } from 'react';
+interface VirtualSelectOption<T = unknown> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    data?: T;
+}
+interface VirtualSelectProps<T = unknown> {
+    className?: string;
+    closeOnEscape?: boolean;
+    disabled?: boolean;
+    emptyText?: string;
+    focusManagerProps?: Partial<FloatingFocusManagerProps>;
+    matchTriggerWidth?: boolean;
+    maxHeight?: number;
+    onChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    options: VirtualSelectOption<T>[];
+    overscan?: number;
+    placeholder?: string;
+    placement?: "bottom-start" | "bottom-end";
+    portalId?: string;
+    readOnly?: boolean;
+    renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
+    renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
+    root?: HTMLElement | null;
+    searchPlaceholder?: string;
+    size?: "default" | "large";
+    value?: string | null;
+    variant?: "default" | "light" | "reset";
+}
+interface VirtualSelectComponentType {
+    <T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
+    displayName?: string;
+    Content: typeof MenuContextContent;
+    Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
+    Item: typeof MenuContextItem;
+    Search: typeof MenuSearch;
+    Trigger: typeof MenuTrigger;
+    Value: typeof MenuValue;
+}
+declare const VirtualSelect: VirtualSelectComponentType;
+
+export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.7.8",
+  "version": "1.8.0",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",
   "source": "./app/index.ts",
   "main": "./dist/index.js",
-  "types": "./app/index.ts",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "README.md",
@@ -14,7 +14,7 @@
   ],
   "exports": {
     ".": {
-      "types": "./app/index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./styles/*": "./dist/styles/*",
@@ -22,36 +22,10 @@
     "./llms.txt": "./dist/llms.txt"
   },
   "publishConfig": {
-    "access": "public",
-    "types": "./dist/index.d.ts",
-    "main": "./dist/index.js",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js"
-      },
-      "./styles/*": "./dist/styles/*",
-      "./tailwind.css": "./dist/tailwind.css",
-      "./llms.txt": "./dist/llms.txt"
-    }
-  },
-  "scripts": {
-    "build": "pnpm run clean && pnpm --filter @choice-ui/shared build && vite build",
-    "build:watch": "vite build --watch",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-    "lint:types": "tsc",
-    "clean": "rimraf dist",
-    "prepublishOnly": "pnpm run build",
-    "plop": "pnpm dlx plop",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "madge": "npx madge --circular --extensions ts app/"
+    "access": "public"
   },
   "dependencies": {
     "@choiceform/icons-react": "^1.3.8",
-    "@choice-ui/design-tokens": "workspace:*",
     "classnames": "^2.5.1",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.0",
@@ -85,7 +59,8 @@
     "remark-breaks": "^4.0.0",
     "remark-math": "^6.0.0",
     "harden-react-markdown": "^1.0.4",
-    "shiki": "^3.9.2"
+    "shiki": "^3.9.2",
+    "@choice-ui/design-tokens": "0.2.13"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -136,5 +111,18 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "pnpm run clean && pnpm --filter @choice-ui/shared build && vite build",
+    "build:watch": "vite build --watch",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "lint:types": "tsc",
+    "clean": "rimraf dist",
+    "plop": "pnpm dlx plop",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "madge": "npx madge --circular --extensions ts app/"
   }
-}
+}