@choice-ui/react 1.3.10

package/dist/cjs/components/emoji-picker/src/components/emoji-category-header.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const React = require("react");
+const tv = require("../tv.cjs");
+const EmojiCategoryHeader = React.forwardRef(
+  function EmojiCategoryHeader2({ title, variant = "dark", style, ...props }, ref) {
+    const tv$1 = tv.emojiTv({ variant });
+    return /* @__PURE__ */ require$$0.jsx(
+      "div",
+      {
+        ref,
+        className: tv$1.categoryHeader(),
+        style,
+        ...props,
+        children: title
+      }
+    );
+  }
+);
+exports.EmojiCategoryHeader = EmojiCategoryHeader;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const React = require("react");
+const tv = require("../tv.cjs");
+const EmojiEmpty = React.memo(function EmojiEmpty2({ variant = "dark" }) {
+  const tv$1 = tv.emojiEmptyTv({ variant });
+  return /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.container(), children: [
+    /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.title(), children: "No emoji found" }),
+    /* @__PURE__ */ require$$0.jsx("p", { className: tv$1.description(), children: "You can search for an emoji by name or use the search bar to find it." })
+  ] });
+});
+exports.EmojiEmpty = EmojiEmpty;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const tv = require("../tv.cjs");
+function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
+  var _a, _b;
+  const tv$1 = tv.emojiFooterTv({ variant });
+  return /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.footer(), children: [
+    /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.emojiPreview(), children: ((_a = hoveredEmoji || selectedEmoji) == null ? void 0 : _a.emoji) || /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.emojiPreviewEmpty() }) }),
+    /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.emojiInfo(), children: [
+      /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || "Pick an emoji..." }),
+      hoveredEmoji || selectedEmoji ? /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.emojiCode(), children: [
+        ":",
+        (_b = hoveredEmoji || selectedEmoji) == null ? void 0 : _b.nameUrl,
+        ":"
+      ] }) : /* @__PURE__ */ require$$0.jsx(require$$0.Fragment, {})
+    ] })
+  ] });
+}
+exports.EmojiFooter = EmojiFooter;

package/dist/cjs/components/emoji-picker/src/components/emoji-item.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const React = require("react");
+const tv = require("../tv.cjs");
+const EmojiItem = React.memo(function EmojiItem2(props) {
+  const { emoji, onSelect, onHover, selected = false, variant = "dark" } = props;
+  return /* @__PURE__ */ require$$0.jsx(
+    "button",
+    {
+      className: tv.emojiItemTv({ variant, selected }),
+      onClick: () => onSelect(emoji),
+      onMouseEnter: () => onHover == null ? void 0 : onHover(emoji),
+      onMouseLeave: () => onHover == null ? void 0 : onHover(null),
+      title: `${emoji.name} (${emoji.emoji})`,
+      type: "button",
+      children: emoji.emoji
+    }
+  );
+});
+exports.EmojiItem = EmojiItem;

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

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const require$$0 = require("react/jsx-runtime");
+const iconsReact = require("@choiceform/icons-react");
+const index$2 = require("../../scroll-area/dist/index.cjs");
+const index = require("../../search-input/dist/index.cjs");
+const index$1 = require("../../segmented/dist/index.cjs");
+const React = require("react");
+const usehooksTs = require("usehooks-ts");
+const tv = require("./tv.cjs");
+const useEmojiData = require("./hooks/use-emoji-data.cjs");
+const useEmojiScroll = require("./hooks/use-emoji-scroll.cjs");
+const emojiCategoryHeader = require("./components/emoji-category-header.cjs");
+const emojiItem = require("./components/emoji-item.cjs");
+const emojiEmpty = require("./components/emoji-empty.cjs");
+const emojiFooter = require("./components/emoji-footer.cjs");
+const categoriesWithIcons = [
+  { id: "frequently_used", name: "Frequently used", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiFrequentlyUsed, {}) },
+  { id: "smileys_people", name: "Smileys & People", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiSmileysPeople, {}) },
+  { id: "animals_nature", name: "Animals & Nature", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiAnimalsNature, {}) },
+  { id: "food_drink", name: "Food & Drink", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiFoodDrink, {}) },
+  { id: "travel_places", name: "Travel & Places", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiTravelPlaces, {}) },
+  { id: "activities", name: "Activities", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiActivity, {}) },
+  { id: "objects", name: "Objects", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiObjects, {}) },
+  { id: "symbols", name: "Symbols", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiSymbols, {}) },
+  { id: "flags", name: "Flags", icon: /* @__PURE__ */ require$$0.jsx(iconsReact.EmojiFlags, {}) }
+];
+const EmojiPicker = React.memo(function EmojiPicker2({
+  value,
+  onChange,
+  className,
+  searchPlaceholder = "Search emoji...",
+  height = 384,
+  columns = 8,
+  showCategories = true,
+  showFrequentlyUsed = true,
+  showSearch = true,
+  children,
+  variant = "dark"
+}) {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [hoveredEmoji, setHoveredEmoji] = React.useState(null);
+  const tv$1 = tv.emojiTv({ variant });
+  const {
+    categorizedData,
+    categoryIndexMap,
+    addToFrequentlyUsed,
+    findEmojiPosition
+  } = useEmojiData.useEmojiData({
+    searchQuery,
+    columns,
+    showFrequentlyUsed
+  });
+  const {
+    scrollRef,
+    virtualizer,
+    currentVisibleCategory,
+    contentStyle,
+    scrollToCategory,
+    markInternalUpdate,
+    PADDING
+  } = useEmojiScroll.useEmojiScroll({
+    categorizedData,
+    categoryIndexMap,
+    findEmojiPosition,
+    searchQuery,
+    value,
+    columns
+  });
+  const availableCategories = React.useMemo(() => {
+    return categoriesWithIcons.filter((category) => {
+      if (category.id === "frequently_used") {
+        return showFrequentlyUsed;
+      }
+      return true;
+    });
+  }, [showFrequentlyUsed]);
+  const handleEmojiSelect = usehooksTs.useEventCallback((emoji) => {
+    markInternalUpdate();
+    addToFrequentlyUsed(emoji.id);
+    onChange == null ? void 0 : onChange(emoji);
+  });
+  const handleEmojiHover = usehooksTs.useEventCallback((emoji) => {
+    setHoveredEmoji(emoji);
+  });
+  const handleCategoryClick = usehooksTs.useEventCallback((category) => {
+    scrollToCategory(category);
+  });
+  const rootStyle = {
+    "--emoji-height": `${height}px`,
+    "--emoji-padding": `${PADDING}px`,
+    "--emoji-columns": `${columns}`
+  };
+  return /* @__PURE__ */ require$$0.jsxs(
+    "div",
+    {
+      className: tv$1.container({ className }),
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.header(), children: [
+          showSearch && /* @__PURE__ */ require$$0.jsx(
+            index.SearchInput,
+            {
+              autoFocus: true,
+              variant,
+              placeholder: searchPlaceholder,
+              value: searchQuery,
+              onChange: (value2) => setSearchQuery(value2)
+            }
+          ),
+          showCategories && /* @__PURE__ */ require$$0.jsx(
+            index$1.Segmented,
+            {
+              variant,
+              value: searchQuery.trim() ? void 0 : currentVisibleCategory,
+              onChange: (value2) => handleCategoryClick(value2),
+              children: availableCategories.map((category) => /* @__PURE__ */ require$$0.jsx(
+                index$1.Segmented.Item,
+                {
+                  value: category.id,
+                  tooltip: {
+                    content: category.name,
+                    placement: "top"
+                  },
+                  children: category.icon
+                },
+                category.id
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ require$$0.jsx(
+          index$2.ScrollArea,
+          {
+            variant,
+            className: tv$1.scroll(),
+            children: /* @__PURE__ */ require$$0.jsx(
+              index$2.ScrollArea.Viewport,
+              {
+                ref: scrollRef,
+                className: "h-full",
+                children: /* @__PURE__ */ require$$0.jsx(
+                  index$2.ScrollArea.Content,
+                  {
+                    className: tv$1.content(),
+                    style: contentStyle,
+                    children: categorizedData.length > 0 ? virtualizer.getVirtualItems().map((virtualItem) => {
+                      const item = categorizedData[virtualItem.index];
+                      if (!item) return null;
+                      if (item.type === "header") {
+                        return /* @__PURE__ */ require$$0.jsx(
+                          emojiCategoryHeader.EmojiCategoryHeader,
+                          {
+                            title: item.title,
+                            variant,
+                            "data-index": virtualItem.index,
+                            ref: virtualizer.measureElement,
+                            style: {
+                              height: `${virtualItem.size}px`,
+                              transform: `translateY(${virtualItem.start + PADDING}px)`
+                            }
+                          },
+                          virtualItem.key
+                        );
+                      }
+                      const style = {
+                        height: `${virtualItem.size}px`,
+                        transform: `translateY(${virtualItem.start + PADDING}px)`
+                      };
+                      return /* @__PURE__ */ require$$0.jsx(
+                        "div",
+                        {
+                          "data-index": virtualItem.index,
+                          ref: virtualizer.measureElement,
+                          className: tv$1.row(),
+                          style,
+                          children: item.emojis.map((emoji) => {
+                            const isSelected = (value == null ? void 0 : value.id) === emoji.id;
+                            return /* @__PURE__ */ require$$0.jsx(
+                              emojiItem.EmojiItem,
+                              {
+                                emoji,
+                                onSelect: handleEmojiSelect,
+                                onHover: handleEmojiHover,
+                                selected: isSelected,
+                                variant
+                              },
+                              emoji.id
+                            );
+                          })
+                        },
+                        virtualItem.key
+                      );
+                    }) : /* @__PURE__ */ require$$0.jsx(emojiEmpty.EmojiEmpty, { variant })
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ require$$0.jsx(
+          emojiFooter.EmojiFooter,
+          {
+            hoveredEmoji,
+            selectedEmoji: value || null,
+            variant
+          }
+        ),
+        children
+      ]
+    }
+  );
+});
+exports.EmojiPicker = EmojiPicker;
+exports.default = EmojiPicker;

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

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const emojiData = require("../utils/emoji-data.cjs");
+const ssr = require("../../../../shared/utils/ssr.cjs");
+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] }
+];
+const STORAGE_KEY = "emoji-picker-frequently-used";
+function getEmojiCategory(id) {
+  for (const category of categories) {
+    if ("range" in category && category.range && id >= category.range[0] && id <= category.range[1]) {
+      return category.id;
+    }
+  }
+  return "symbols";
+}
+function getFrequentlyUsedEmojis() {
+  if (!ssr.isBrowser) return [];
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) return [];
+    const ids = JSON.parse(stored);
+    return ids.map((id) => emojiData.emojis.find((emoji) => emoji.id === id)).filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+function saveFrequentlyUsedEmoji(emojiId) {
+  if (!ssr.isBrowser) return;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    let ids = stored ? JSON.parse(stored) : [];
+    ids = ids.filter((id) => id !== emojiId);
+    ids.unshift(emojiId);
+    ids = ids.slice(0, 24);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+  } catch {
+  }
+}
+function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
+  const [frequentlyUsed, setFrequentlyUsed] = React.useState([]);
+  React.useEffect(() => {
+    if (showFrequentlyUsed) {
+      setFrequentlyUsed(getFrequentlyUsedEmojis());
+    }
+  }, [showFrequentlyUsed]);
+  const searchResults = React.useMemo(() => {
+    if (!searchQuery.trim()) return [];
+    const query = searchQuery.toLowerCase().trim();
+    return emojiData.emojis.filter(
+      (emoji) => emoji.name.toLowerCase().includes(query) || emoji.emoji.includes(query) || emoji.nameUrl.toLowerCase().includes(query)
+    );
+  }, [searchQuery]);
+  const categorizedData = React.useMemo(() => {
+    if (searchQuery.trim()) {
+      const items2 = [];
+      for (let i = 0; i < searchResults.length; i += columns) {
+        items2.push({
+          type: "emojis",
+          emojis: searchResults.slice(i, i + columns)
+        });
+      }
+      return items2;
+    }
+    const items = [];
+    if (showFrequentlyUsed && frequentlyUsed.length > 0) {
+      items.push({
+        type: "header",
+        category: "frequently_used",
+        title: "Frequently used"
+      });
+      for (let i = 0; i < frequentlyUsed.length; i += columns) {
+        items.push({
+          type: "emojis",
+          emojis: frequentlyUsed.slice(i, i + columns)
+        });
+      }
+    }
+    categories.slice(1).forEach((category) => {
+      if (!("range" in category) || !category.range) return;
+      const categoryEmojis = emojiData.emojis.filter(
+        (emoji) => emoji.id >= category.range[0] && emoji.id <= category.range[1]
+      );
+      if (categoryEmojis.length > 0) {
+        items.push({
+          type: "header",
+          category: category.id,
+          title: category.name
+        });
+        for (let i = 0; i < categoryEmojis.length; i += columns) {
+          items.push({
+            type: "emojis",
+            emojis: categoryEmojis.slice(i, i + columns)
+          });
+        }
+      }
+    });
+    return items;
+  }, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed]);
+  const categoryIndexMap = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    categorizedData.forEach((item, index) => {
+      if (item.type === "header") {
+        map.set(item.category, index);
+      }
+    });
+    return map;
+  }, [categorizedData]);
+  const addToFrequentlyUsed = (emojiId) => {
+    if (showFrequentlyUsed) {
+      saveFrequentlyUsedEmoji(emojiId);
+      setFrequentlyUsed(getFrequentlyUsedEmojis());
+    }
+  };
+  const findEmojiPosition = (emoji) => {
+    for (let i = 0; i < categorizedData.length; i++) {
+      const item = categorizedData[i];
+      if (item.type === "emojis") {
+        const emojiIndex = item.emojis.findIndex((e) => e.id === emoji.id);
+        if (emojiIndex !== -1) {
+          return { itemIndex: i, emojiIndex };
+        }
+      }
+    }
+    return null;
+  };
+  const findEmojiByChar = (emojiChar) => {
+    return emojiData.emojis.find((emoji) => emoji.emoji === emojiChar) || null;
+  };
+  return {
+    categorizedData,
+    categoryIndexMap,
+    searchResults,
+    frequentlyUsed,
+    addToFrequentlyUsed,
+    findEmojiPosition,
+    findEmojiByChar
+  };
+}
+exports.categories = categories;
+exports.getEmojiCategory = getEmojiCategory;
+exports.useEmojiData = useEmojiData;

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

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const reactVirtual = require("@tanstack/react-virtual");
+const usehooksTs = require("usehooks-ts");
+const useEmojiData = require("./use-emoji-data.cjs");
+const ROW_HEIGHT = 32;
+const HEADER_HEIGHT = 32;
+const PADDING = 8;
+function useEmojiScroll({
+  categorizedData,
+  categoryIndexMap,
+  findEmojiPosition,
+  searchQuery,
+  value,
+  columns
+}) {
+  const scrollRef = React.useRef(null);
+  const [currentVisibleCategory, setCurrentVisibleCategory] = React.useState("frequently_used");
+  const isScrollingToTarget = React.useRef(false);
+  const isInternalUpdate = React.useRef(false);
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: categorizedData.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: React.useCallback(
+      (index) => {
+        const item = categorizedData[index];
+        return (item == null ? void 0 : item.type) === "header" ? HEADER_HEIGHT : ROW_HEIGHT;
+      },
+      [categorizedData]
+    ),
+    overscan: 5
+  });
+  React.useEffect(() => {
+    if (searchQuery.trim()) return;
+    if (isScrollingToTarget.current) return;
+    const visibleItems = virtualizer.getVirtualItems();
+    if (visibleItems.length === 0) return;
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+    const scrollTop = scrollElement.scrollTop;
+    const viewportHeight = scrollElement.clientHeight;
+    const viewportCenter = scrollTop + viewportHeight / 2;
+    let currentCategory = "frequently_used";
+    let minDistance = Infinity;
+    for (const item of visibleItems) {
+      const data = categorizedData[item.index];
+      if ((data == null ? void 0 : data.type) === "header") {
+        const itemTop = item.start + PADDING;
+        const itemCenter = itemTop + item.size / 2;
+        const distance = Math.abs(itemCenter - viewportCenter);
+        if (distance < minDistance) {
+          minDistance = distance;
+          currentCategory = data.category;
+        }
+      }
+    }
+    if (minDistance === Infinity) {
+      for (const item of visibleItems) {
+        const data = categorizedData[item.index];
+        if ((data == null ? void 0 : data.type) === "emojis" && data.emojis.length > 0) {
+          const itemTop = item.start + PADDING;
+          const itemCenter = itemTop + item.size / 2;
+          const distance = Math.abs(itemCenter - viewportCenter);
+          if (distance < minDistance) {
+            minDistance = distance;
+            const firstEmoji = data.emojis[0];
+            currentCategory = useEmojiData.getEmojiCategory(firstEmoji.id);
+          }
+        }
+      }
+    }
+    if (currentCategory !== currentVisibleCategory) {
+      setCurrentVisibleCategory(currentCategory);
+    }
+  }, [virtualizer.getVirtualItems(), categorizedData, searchQuery, currentVisibleCategory]);
+  const scrollToCategory = usehooksTs.useEventCallback((category) => {
+    setCurrentVisibleCategory(category);
+    const categoryIndex = categoryIndexMap.get(category);
+    if (categoryIndex !== void 0) {
+      isScrollingToTarget.current = true;
+      virtualizer.scrollToIndex(categoryIndex, {
+        align: "start",
+        behavior: "auto"
+      });
+      setTimeout(() => {
+        isScrollingToTarget.current = false;
+      }, 100);
+    }
+  });
+  const scrollToEmoji = usehooksTs.useEventCallback((emoji) => {
+    const position = findEmojiPosition(emoji);
+    if (position) {
+      isScrollingToTarget.current = true;
+      virtualizer.scrollToIndex(position.itemIndex, {
+        align: "center",
+        behavior: "auto"
+      });
+      setTimeout(() => {
+        isScrollingToTarget.current = false;
+      }, 100);
+    }
+  });
+  const markInternalUpdate = usehooksTs.useEventCallback(() => {
+    isInternalUpdate.current = true;
+    setTimeout(() => {
+      isInternalUpdate.current = false;
+    }, 50);
+  });
+  React.useEffect(() => {
+    if (value && !searchQuery.trim() && !isInternalUpdate.current) {
+      scrollToEmoji(value);
+    }
+  }, [value, scrollToEmoji, searchQuery]);
+  const contentStyle = React.useMemo(() => {
+    return {
+      height: `${virtualizer.getTotalSize() + PADDING * 2}px`,
+      width: `${ROW_HEIGHT * columns + PADDING * 2}px`
+    };
+  }, [columns, virtualizer]);
+  return {
+    scrollRef,
+    virtualizer,
+    currentVisibleCategory,
+    contentStyle,
+    scrollToCategory,
+    scrollToEmoji,
+    markInternalUpdate,
+    ROW_HEIGHT,
+    HEADER_HEIGHT,
+    PADDING
+  };
+}
+exports.useEmojiScroll = useEmojiScroll;