@mantine/emoji 0.0.0-stage → 9.8.0

package/cjs/components/EmojiPicker/EmojiPickerCategoryNav.cjs

@@ -0,0 +1,38 @@
+"use client";
+const require_categories = require("../../categories.cjs");
+const require_EmojiPicker_context = require("./EmojiPicker.context.cjs");
+let react = require("react");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPickerCategoryNav.tsx
+const EmojiPickerCategoryNav = (0, react.memo)(function EmojiPickerCategoryNav({ categories, onCategoryClick }) {
+	const ctx = require_EmojiPicker_context.useEmojiPickerContext();
+	const { dir } = (0, _mantine_core.useDirection)();
+	const [tabStopId, setTabStopId] = (0, react.useState)(null);
+	const tabStopIndex = Math.max(categories.findIndex((category) => category.id === tabStopId), 0);
+	const handleKeyDown = (0, _mantine_core.createScopedKeydownHandler)({
+		siblingSelector: "[data-category-nav-button]",
+		parentSelector: "[data-category-nav]",
+		orientation: "horizontal",
+		loop: true,
+		dir
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...ctx.getStyles("categoryNav"),
+		"data-category-nav": true,
+		children: categories.map((category, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+			...ctx.getStyles("categoryNavButton"),
+			"aria-label": category.label,
+			title: category.label,
+			tabIndex: index === tabStopIndex ? 0 : -1,
+			"data-category-nav-button": true,
+			onFocus: () => setTabStopId(category.id),
+			onKeyDown: handleKeyDown,
+			onClick: () => onCategoryClick(category.id),
+			children: require_categories.getCanonicalCategoryIcon(category.id) || "📁"
+		}, category.id))
+	});
+});
+exports.EmojiPickerCategoryNav = EmojiPickerCategoryNav;
+
+//# sourceMappingURL=EmojiPickerCategoryNav.cjs.map

package/cjs/components/EmojiPicker/EmojiPickerCategoryNav.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategoryNav.cjs","names":["memo","useEmojiPickerContext","useDirection","useState","createScopedKeydownHandler","UnstyledButton","getCanonicalCategoryIcon"],"sources":["../../../src/components/EmojiPicker/EmojiPickerCategoryNav.tsx"],"sourcesContent":["import { memo, useState } from 'react';\nimport { createScopedKeydownHandler, UnstyledButton, useDirection } from '@mantine/core';\nimport { getCanonicalCategoryIcon } from '../../categories';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\nexport interface EmojiPickerNavCategory {\n  id: string;\n  label: string;\n}\n\ninterface EmojiPickerCategoryNavProps {\n  categories: EmojiPickerNavCategory[];\n  onCategoryClick: (categoryId: string) => void;\n}\n\nexport const EmojiPickerCategoryNav = memo(function EmojiPickerCategoryNav({\n  categories,\n  onCategoryClick,\n}: EmojiPickerCategoryNavProps) {\n  const ctx = useEmojiPickerContext();\n  const { dir } = useDirection();\n  const [tabStopId, setTabStopId] = useState<string | null>(null);\n  const tabStopIndex = Math.max(\n    categories.findIndex((category) => category.id === tabStopId),\n    0\n  );\n\n  const handleKeyDown = createScopedKeydownHandler({\n    siblingSelector: '[data-category-nav-button]',\n    parentSelector: '[data-category-nav]',\n    orientation: 'horizontal',\n    loop: true,\n    dir,\n  });\n\n  return (\n    <div {...ctx.getStyles('categoryNav')} data-category-nav>\n      {categories.map((category, index) => (\n        <UnstyledButton\n          key={category.id}\n          {...ctx.getStyles('categoryNavButton')}\n          aria-label={category.label}\n          title={category.label}\n          tabIndex={index === tabStopIndex ? 0 : -1}\n          data-category-nav-button\n          onFocus={() => setTabStopId(category.id)}\n          onKeyDown={handleKeyDown}\n          onClick={() => onCategoryClick(category.id)}\n        >\n          {getCanonicalCategoryIcon(category.id) || '📁'}\n        </UnstyledButton>\n      ))}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAeA,MAAa,0BAAA,GAAyBA,MAAAA,KAAAA,CAAK,SAAS,uBAAuB,EACzE,YACA,mBAC8B;CAC9B,MAAM,MAAMC,4BAAAA,sBAAsB;CAClC,MAAM,EAAE,SAAA,GAAQC,cAAAA,aAAAA,CAAa;CAC7B,MAAM,CAAC,WAAW,iBAAA,GAAgBC,MAAAA,SAAAA,CAAwB,IAAI;CAC9D,MAAM,eAAe,KAAK,IACxB,WAAW,WAAW,aAAa,SAAS,OAAO,SAAS,GAC5D,CACF;CAEA,MAAM,iBAAA,GAAgBC,cAAAA,2BAAAA,CAA2B;EAC/C,iBAAiB;EACjB,gBAAgB;EAChB,aAAa;EACb,MAAM;EACN;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI,IAAI,UAAU,aAAa;EAAG,qBAAA;EACpC,UAAA,WAAW,KAAK,UAAU,UACzB,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD;GAEE,GAAI,IAAI,UAAU,mBAAmB;GACrC,cAAY,SAAS;GACrB,OAAO,SAAS;GAChB,UAAU,UAAU,eAAe,IAAI;GACvC,4BAAA;GACA,eAAe,aAAa,SAAS,EAAE;GACvC,WAAW;GACX,eAAe,gBAAgB,SAAS,EAAE;GAEzCC,UAAAA,mBAAAA,yBAAyB,SAAS,EAAE,KAAK;EAC5B,GAXT,SAAS,EAWA,CACjB;CACE,CAAA;AAET,CAAC"}

package/cjs/components/EmojiPicker/EmojiPickerGrid.cjs

@@ -0,0 +1,131 @@
+"use client";
+const require_EmojiPicker_context = require("./EmojiPicker.context.cjs");
+const require_EmojiButton = require("./EmojiButton.cjs");
+let react = require("react");
+let _mantine_core = require("@mantine/core");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPickerGrid.tsx
+const HEADER_HEIGHT = 32;
+const DEFAULT_SCROLL_AREA_HEIGHT = 300;
+function getEmojiIndexFromEvent(event) {
+	const target = event.target.closest("[data-emoji-index]");
+	return target ? Number(target.dataset.emojiIndex) : -1;
+}
+function EmojiPickerGrid({ items, itemOffsets, columns, skinTone, focusedIndex, focusedItemIndex, idPrefix, gridId, onActiveDescendantChange, emojiSize, emptyContent, onKeyDown, onPointerIndex, onEmojiClick, scrollToItemRef, scrollAreaProps }) {
+	const ctx = require_EmojiPicker_context.useEmojiPickerContext();
+	const viewportRef = (0, react.useRef)(null);
+	const lastPointerRef = (0, react.useRef)(null);
+	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: items.length,
+		getScrollElement: () => viewportRef.current,
+		estimateSize: (index) => items[index].type === "header" ? HEADER_HEIGHT : emojiSize,
+		overscan: 10
+	});
+	(0, react.useEffect)(() => {
+		virtualizer.measure();
+	}, [emojiSize, virtualizer]);
+	(0, react.useEffect)(() => {
+		scrollToItemRef.current = (itemIndex, align) => {
+			virtualizer.scrollToIndex(itemIndex, { align });
+		};
+	}, [virtualizer, scrollToItemRef]);
+	const virtualItems = virtualizer.getVirtualItems();
+	const focusedItemMounted = focusedIndex !== -1 && virtualItems.some((item) => item.index === focusedItemIndex);
+	const hasEmojis = items.length > 0;
+	const activeDescendant = hasEmojis && focusedItemMounted ? `${idPrefix}-${focusedIndex}` : void 0;
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		onActiveDescendantChange(activeDescendant);
+	}, [activeDescendant, onActiveDescendantChange]);
+	const handleMouseMove = (event) => {
+		const last = lastPointerRef.current;
+		if (last && last.x === event.clientX && last.y === event.clientY) return;
+		lastPointerRef.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const index = getEmojiIndexFromEvent(event);
+		if (index !== -1) onPointerIndex(index);
+	};
+	const handleMouseDown = (event) => {
+		if (getEmojiIndexFromEvent(event) !== -1) event.preventDefault();
+	};
+	const handleClick = (event) => {
+		const index = getEmojiIndexFromEvent(event);
+		if (index !== -1) onEmojiClick(index);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea, {
+		scrollbars: "y",
+		...scrollAreaProps,
+		...ctx.getStyles("content", { style: {
+			height: DEFAULT_SCROLL_AREA_HEIGHT,
+			...scrollAreaProps?.style
+		} }),
+		viewportRef,
+		viewportProps: {
+			...scrollAreaProps?.viewportProps,
+			...hasEmojis ? {
+				id: gridId,
+				role: "grid",
+				tabIndex: 0,
+				"aria-label": ctx.labels.emojis,
+				"aria-colcount": columns,
+				"aria-activedescendant": activeDescendant,
+				onKeyDown,
+				onMouseMove: handleMouseMove,
+				onMouseDown: handleMouseDown,
+				onClick: handleClick
+			} : { tabIndex: -1 }
+		},
+		children: hasEmojis ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				height: virtualizer.getTotalSize(),
+				width: "100%",
+				position: "relative"
+			},
+			children: virtualItems.map((virtualItem) => {
+				const item = items[virtualItem.index];
+				const positionStyle = {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: virtualItem.size,
+					transform: `translateY(${virtualItem.start}px)`
+				};
+				if (item.type === "header") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "row",
+					...ctx.getStyles("categoryLabel", { style: positionStyle }),
+					"data-category": item.categoryId,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						role: "columnheader",
+						"aria-colspan": columns,
+						children: item.label
+					})
+				}, `header-${item.categoryId}`);
+				const emojiOffset = itemOffsets[virtualItem.index];
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "row",
+					...ctx.getStyles("grid", { style: positionStyle }),
+					children: item.emojis.map((emoji, colIndex) => {
+						const emojiIndex = emojiOffset + colIndex;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiButton.EmojiButton, {
+							emoji,
+							skinTone,
+							emojiIndex,
+							focused: emojiIndex === focusedIndex,
+							id: `${idPrefix}-${emojiIndex}`
+						}, emoji.id);
+					})
+				}, `row-${virtualItem.index}`);
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...ctx.getStyles("empty"),
+			children: emptyContent
+		})
+	});
+}
+exports.EmojiPickerGrid = EmojiPickerGrid;
+
+//# sourceMappingURL=EmojiPickerGrid.cjs.map

package/cjs/components/EmojiPicker/EmojiPickerGrid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerGrid.cjs","names":["useEmojiPickerContext","useRef","useVirtualizer","ScrollArea","EmojiButton"],"sources":["../../../src/components/EmojiPicker/EmojiPickerGrid.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { ScrollArea, ScrollAreaProps } from '@mantine/core';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport type { FlattenedRowItem } from '../../types';\nimport { EmojiButton } from './EmojiButton';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\nexport type EmojiPickerScrollToItem = (itemIndex: number, align: 'auto' | 'start') => void;\n\ninterface EmojiPickerGridProps {\n  items: FlattenedRowItem[];\n  itemOffsets: number[];\n  columns: number;\n  skinTone: number;\n  focusedIndex: number;\n  focusedItemIndex: number;\n  idPrefix: string;\n  gridId: string;\n  onActiveDescendantChange: (id: string | undefined) => void;\n  emojiSize: number;\n  emptyContent: React.ReactNode;\n  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerIndex: (index: number) => void;\n  onEmojiClick: (index: number) => void;\n  scrollToItemRef: React.RefObject<EmojiPickerScrollToItem | null>;\n  scrollAreaProps?: ScrollAreaProps;\n}\n\nconst HEADER_HEIGHT = 32;\nconst DEFAULT_SCROLL_AREA_HEIGHT = 300;\n\nfunction getEmojiIndexFromEvent(event: React.SyntheticEvent) {\n  const target = (event.target as HTMLElement).closest<HTMLElement>('[data-emoji-index]');\n  return target ? Number(target.dataset.emojiIndex) : -1;\n}\n\nexport function EmojiPickerGrid({\n  items,\n  itemOffsets,\n  columns,\n  skinTone,\n  focusedIndex,\n  focusedItemIndex,\n  idPrefix,\n  gridId,\n  onActiveDescendantChange,\n  emojiSize,\n  emptyContent,\n  onKeyDown,\n  onPointerIndex,\n  onEmojiClick,\n  scrollToItemRef,\n  scrollAreaProps,\n}: EmojiPickerGridProps) {\n  const ctx = useEmojiPickerContext();\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const lastPointerRef = useRef<{ x: number; y: number } | null>(null);\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => viewportRef.current,\n    estimateSize: (index) => (items[index].type === 'header' ? HEADER_HEIGHT : emojiSize),\n    overscan: 10,\n  });\n\n  useEffect(() => {\n    virtualizer.measure();\n  }, [emojiSize, virtualizer]);\n\n  useEffect(() => {\n    scrollToItemRef.current = (itemIndex, align) => {\n      virtualizer.scrollToIndex(itemIndex, { align });\n    };\n  }, [virtualizer, scrollToItemRef]);\n\n  const virtualItems = virtualizer.getVirtualItems();\n  const focusedItemMounted =\n    focusedIndex !== -1 && virtualItems.some((item) => item.index === focusedItemIndex);\n  const hasEmojis = items.length > 0;\n  const activeDescendant =\n    hasEmojis && focusedItemMounted ? `${idPrefix}-${focusedIndex}` : undefined;\n\n  useIsomorphicEffect(() => {\n    onActiveDescendantChange(activeDescendant);\n  }, [activeDescendant, onActiveDescendantChange]);\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const last = lastPointerRef.current;\n    if (last && last.x === event.clientX && last.y === event.clientY) {\n      return;\n    }\n    lastPointerRef.current = { x: event.clientX, y: event.clientY };\n    const index = getEmojiIndexFromEvent(event);\n    if (index !== -1) {\n      onPointerIndex(index);\n    }\n  };\n\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (getEmojiIndexFromEvent(event) !== -1) {\n      event.preventDefault();\n    }\n  };\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    const index = getEmojiIndexFromEvent(event);\n    if (index !== -1) {\n      onEmojiClick(index);\n    }\n  };\n\n  return (\n    <ScrollArea\n      scrollbars=\"y\"\n      {...scrollAreaProps}\n      {...ctx.getStyles('content', {\n        style: { height: DEFAULT_SCROLL_AREA_HEIGHT, ...scrollAreaProps?.style },\n      })}\n      viewportRef={viewportRef}\n      viewportProps={{\n        ...scrollAreaProps?.viewportProps,\n        ...(hasEmojis\n          ? {\n              id: gridId,\n              role: 'grid',\n              tabIndex: 0,\n              'aria-label': ctx.labels.emojis,\n              'aria-colcount': columns,\n              'aria-activedescendant': activeDescendant,\n              onKeyDown,\n              onMouseMove: handleMouseMove,\n              onMouseDown: handleMouseDown,\n              onClick: handleClick,\n            }\n          : { tabIndex: -1 }),\n      }}\n    >\n      {hasEmojis ? (\n        <div style={{ height: virtualizer.getTotalSize(), width: '100%', position: 'relative' }}>\n          {virtualItems.map((virtualItem) => {\n            const item = items[virtualItem.index];\n            const positionStyle: React.CSSProperties = {\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: virtualItem.size,\n              transform: `translateY(${virtualItem.start}px)`,\n            };\n\n            if (item.type === 'header') {\n              return (\n                <div\n                  key={`header-${item.categoryId}`}\n                  role=\"row\"\n                  {...ctx.getStyles('categoryLabel', { style: positionStyle })}\n                  data-category={item.categoryId}\n                >\n                  <span role=\"columnheader\" aria-colspan={columns}>\n                    {item.label}\n                  </span>\n                </div>\n              );\n            }\n\n            const emojiOffset = itemOffsets[virtualItem.index];\n\n            return (\n              <div\n                key={`row-${virtualItem.index}`}\n                role=\"row\"\n                {...ctx.getStyles('grid', { style: positionStyle })}\n              >\n                {item.emojis.map((emoji, colIndex) => {\n                  const emojiIndex = emojiOffset + colIndex;\n                  return (\n                    <EmojiButton\n                      key={emoji.id}\n                      emoji={emoji}\n                      skinTone={skinTone}\n                      emojiIndex={emojiIndex}\n                      focused={emojiIndex === focusedIndex}\n                      id={`${idPrefix}-${emojiIndex}`}\n                    />\n                  );\n                })}\n              </div>\n            );\n          })}\n        </div>\n      ) : (\n        <div {...ctx.getStyles('empty')}>{emptyContent}</div>\n      )}\n    </ScrollArea>\n  );\n}\n"],"mappings":"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"}

package/cjs/components/EmojiPicker/EmojiPickerPreview.cjs

@@ -0,0 +1,24 @@
+"use client";
+const require_emoji_grid_utils = require("../../utils/emoji-grid-utils.cjs");
+const require_EmojiPicker_context = require("./EmojiPicker.context.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPickerPreview.tsx
+function EmojiPickerPreview({ emoji, skinTone, withPreview, children }) {
+	const ctx = require_EmojiPicker_context.useEmojiPickerContext();
+	const displayEmoji = emoji ? require_emoji_grid_utils.applySkinTone(emoji, skinTone) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...ctx.getStyles("preview"),
+		role: withPreview ? "group" : void 0,
+		"aria-label": withPreview ? ctx.labels.preview : void 0,
+		children: [withPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			...ctx.getStyles("previewEmoji"),
+			children: displayEmoji?.emoji
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			...ctx.getStyles("previewName"),
+			children: displayEmoji?.name
+		})] }), children]
+	});
+}
+exports.EmojiPickerPreview = EmojiPickerPreview;
+
+//# sourceMappingURL=EmojiPickerPreview.cjs.map

package/cjs/components/EmojiPicker/EmojiPickerPreview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerPreview.cjs","names":["useEmojiPickerContext","applySkinTone"],"sources":["../../../src/components/EmojiPicker/EmojiPickerPreview.tsx"],"sourcesContent":["import type { EmojiPickerEmoji } from '../../types';\nimport { applySkinTone } from '../../utils';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\ninterface EmojiPickerPreviewProps {\n  emoji: EmojiPickerEmoji | null;\n  skinTone: number;\n  withPreview: boolean;\n  children?: React.ReactNode;\n}\n\nexport function EmojiPickerPreview({\n  emoji,\n  skinTone,\n  withPreview,\n  children,\n}: EmojiPickerPreviewProps) {\n  const ctx = useEmojiPickerContext();\n  const displayEmoji = emoji ? applySkinTone(emoji, skinTone) : null;\n\n  return (\n    <div\n      {...ctx.getStyles('preview')}\n      role={withPreview ? 'group' : undefined}\n      aria-label={withPreview ? ctx.labels.preview : undefined}\n    >\n      {withPreview && (\n        <>\n          <span {...ctx.getStyles('previewEmoji')}>{displayEmoji?.emoji}</span>\n          <span {...ctx.getStyles('previewName')}>{displayEmoji?.name}</span>\n        </>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAWA,SAAgB,mBAAmB,EACjC,OACA,UACA,aACA,YAC0B;CAC1B,MAAM,MAAMA,4BAAAA,sBAAsB;CAClC,MAAM,eAAe,QAAQC,yBAAAA,cAAc,OAAO,QAAQ,IAAI;CAE9D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI,IAAI,UAAU,SAAS;EAC3B,MAAM,cAAc,UAAU,KAAA;EAC9B,cAAY,cAAc,IAAI,OAAO,UAAU,KAAA;EAHjD,UAAA,CAKG,eACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,IAAI,UAAU,cAAc;GAAI,UAAA,cAAc;EAAY,CAAA,GACpE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,IAAI,UAAU,aAAa;GAAI,UAAA,cAAc;EAAW,CAAA,CAClE,EAAA,CAAA,GAEH,QACE;;AAET"}

package/cjs/components/EmojiPicker/EmojiPickerSearch.cjs

@@ -0,0 +1,57 @@
+"use client";
+const require_EmojiPicker_context = require("./EmojiPicker.context.cjs");
+let react = require("react");
+let _mantine_core = require("@mantine/core");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPickerSearch.tsx
+const RESET_WRAPPER_CONTEXT = {
+	offsetTop: false,
+	offsetBottom: false,
+	describedBy: void 0,
+	inputId: void 0,
+	labelId: void 0,
+	getStyles: null
+};
+function EmojiPickerSearch({ query, onQueryChange, placeholder, autoFocus, inputRef, onKeyDown, controls, activeDescendant, searchInputProps }) {
+	const ctx = require_EmojiPicker_context.useEmojiPickerContext();
+	const localRef = (0, react.useRef)(null);
+	const mergedRef = (0, _mantine_hooks.useMergedRef)(localRef, inputRef);
+	(0, react.useEffect)(() => {
+		if (autoFocus) localRef.current?.focus({ preventScroll: true });
+	}, []);
+	const handleClear = () => {
+		onQueryChange("");
+		localRef.current?.focus();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...ctx.getStyles("search"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.InputWrapperContext, {
+			value: RESET_WRAPPER_CONTEXT,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input, {
+				...ctx.getStyles("searchInput"),
+				ref: mergedRef,
+				size: ctx.size,
+				value: query,
+				onChange: (event) => onQueryChange(event.currentTarget.value),
+				placeholder: placeholder || ctx.labels.search,
+				role: "searchbox",
+				"aria-label": ctx.labels.search,
+				"aria-controls": controls,
+				"aria-activedescendant": activeDescendant,
+				onKeyDown,
+				rightSectionPointerEvents: "all",
+				rightSection: query ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.CloseButton, {
+					size: "sm",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: handleClear,
+					"aria-label": ctx.labels.clearSearch
+				}) : void 0,
+				...searchInputProps
+			})
+		})
+	});
+}
+exports.EmojiPickerSearch = EmojiPickerSearch;
+
+//# sourceMappingURL=EmojiPickerSearch.cjs.map

package/cjs/components/EmojiPicker/EmojiPickerSearch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerSearch.cjs","names":["useEmojiPickerContext","useRef","useMergedRef","InputWrapperContext","Input","CloseButton"],"sources":["../../../src/components/EmojiPicker/EmojiPickerSearch.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { CloseButton, Input, InputProps, InputWrapperContext } from '@mantine/core';\nimport { useMergedRef } from '@mantine/hooks';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\ninterface EmojiPickerSearchProps {\n  query: string;\n  onQueryChange: (value: string) => void;\n  placeholder?: string;\n  autoFocus?: boolean;\n  inputRef?: React.Ref<HTMLInputElement>;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  controls?: string;\n  activeDescendant?: string;\n  searchInputProps?: InputProps;\n}\n\nconst RESET_WRAPPER_CONTEXT = {\n  offsetTop: false,\n  offsetBottom: false,\n  describedBy: undefined,\n  inputId: undefined,\n  labelId: undefined,\n  getStyles: null,\n};\n\nexport function EmojiPickerSearch({\n  query,\n  onQueryChange,\n  placeholder,\n  autoFocus,\n  inputRef,\n  onKeyDown,\n  controls,\n  activeDescendant,\n  searchInputProps,\n}: EmojiPickerSearchProps) {\n  const ctx = useEmojiPickerContext();\n  const localRef = useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRef(localRef, inputRef);\n\n  useEffect(() => {\n    if (autoFocus) {\n      localRef.current?.focus({ preventScroll: true });\n    }\n  }, []);\n\n  const handleClear = () => {\n    onQueryChange('');\n    localRef.current?.focus();\n  };\n\n  return (\n    <div {...ctx.getStyles('search')}>\n      <InputWrapperContext value={RESET_WRAPPER_CONTEXT}>\n        <Input\n          {...ctx.getStyles('searchInput')}\n          ref={mergedRef}\n          size={ctx.size}\n          value={query}\n          onChange={(event) => onQueryChange(event.currentTarget.value)}\n          placeholder={placeholder || ctx.labels.search}\n          role=\"searchbox\"\n          aria-label={ctx.labels.search}\n          aria-controls={controls}\n          aria-activedescendant={activeDescendant}\n          onKeyDown={onKeyDown}\n          rightSectionPointerEvents=\"all\"\n          rightSection={\n            query ? (\n              <CloseButton\n                size=\"sm\"\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={handleClear}\n                aria-label={ctx.labels.clearSearch}\n              />\n            ) : undefined\n          }\n          {...searchInputProps}\n        />\n      </InputWrapperContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,MAAM,wBAAwB;CAC5B,WAAW;CACX,cAAc;CACd,aAAa,KAAA;CACb,SAAS,KAAA;CACT,SAAS,KAAA;CACT,WAAW;AACb;AAEA,SAAgB,kBAAkB,EAChC,OACA,eACA,aACA,WACA,UACA,WACA,UACA,kBACA,oBACyB;CACzB,MAAM,MAAMA,4BAAAA,sBAAsB;CAClC,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAC9C,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAa,UAAU,QAAQ;CAEjD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,WACF,SAAS,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CAEnD,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoB;EACxB,cAAc,EAAE;EAChB,SAAS,SAAS,MAAM;CAC1B;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI,IAAI,UAAU,QAAQ;EAC7B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,qBAAD;GAAqB,OAAO;GAC1B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IACE,GAAI,IAAI,UAAU,aAAa;IAC/B,KAAK;IACL,MAAM,IAAI;IACV,OAAO;IACP,WAAW,UAAU,cAAc,MAAM,cAAc,KAAK;IAC5D,aAAa,eAAe,IAAI,OAAO;IACvC,MAAK;IACL,cAAY,IAAI,OAAO;IACvB,iBAAe;IACf,yBAAuB;IACZ;IACX,2BAA0B;IAC1B,cACE,QACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,aAAD;KACE,MAAK;KACL,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KACT,cAAY,IAAI,OAAO;IACxB,CAAA,IACC,KAAA;IAEN,GAAI;GACL,CAAA;EACkB,CAAA;CAClB,CAAA;AAET"}

package/cjs/components/EmojiPicker/EmojiPickerSkinTone.cjs

@@ -0,0 +1,63 @@
+"use client";
+const require_EmojiPicker_context = require("./EmojiPicker.context.cjs");
+let react = require("react");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPickerSkinTone.tsx
+const SKIN_TONE_EMOJIS = [
+	"👋",
+	"👋🏻",
+	"👋🏼",
+	"👋🏽",
+	"👋🏾",
+	"👋🏿"
+];
+const SKIN_TONE_LABEL_KEYS = [
+	"skinToneDefault",
+	"skinToneLight",
+	"skinToneMediumLight",
+	"skinToneMedium",
+	"skinToneMediumDark",
+	"skinToneDark"
+];
+function EmojiPickerSkinTone({ skinTone, onSkinToneChange }) {
+	const ctx = require_EmojiPicker_context.useEmojiPickerContext();
+	const [opened, setOpened] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Popover, {
+		opened,
+		onChange: setOpened,
+		position: "top",
+		withArrow: true,
+		withinPortal: false,
+		trapFocus: true,
+		returnFocus: true,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+			...ctx.getStyles("skinToneButton"),
+			"aria-label": ctx.labels.skinTone,
+			title: ctx.labels.skinTone,
+			onClick: () => setOpened((o) => !o),
+			children: SKIN_TONE_EMOJIS[skinTone]
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Dropdown, {
+			...ctx.getStyles("skinToneDropdown"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...ctx.getStyles("skinToneSelector"),
+				children: SKIN_TONE_EMOJIS.map((emoji, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+					...ctx.getStyles("skinToneButton"),
+					"aria-label": ctx.labels[SKIN_TONE_LABEL_KEYS[index]],
+					title: ctx.labels[SKIN_TONE_LABEL_KEYS[index]],
+					"aria-pressed": skinTone === index,
+					"data-active": skinTone === index || void 0,
+					"data-autofocus": skinTone === index || void 0,
+					onClick: () => {
+						onSkinToneChange(index);
+						setOpened(false);
+					},
+					children: emoji
+				}, index))
+			})
+		})]
+	});
+}
+exports.EmojiPickerSkinTone = EmojiPickerSkinTone;
+
+//# sourceMappingURL=EmojiPickerSkinTone.cjs.map

package/cjs/components/EmojiPicker/EmojiPickerSkinTone.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerSkinTone.cjs","names":["useEmojiPickerContext","useState","Popover","UnstyledButton"],"sources":["../../../src/components/EmojiPicker/EmojiPickerSkinTone.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Popover, UnstyledButton } from '@mantine/core';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\ninterface EmojiPickerSkinToneProps {\n  skinTone: number;\n  onSkinToneChange: (skinTone: number) => void;\n}\n\nconst SKIN_TONE_EMOJIS = ['👋', '👋🏻', '👋🏼', '👋🏽', '👋🏾', '👋🏿'];\n\nconst SKIN_TONE_LABEL_KEYS = [\n  'skinToneDefault',\n  'skinToneLight',\n  'skinToneMediumLight',\n  'skinToneMedium',\n  'skinToneMediumDark',\n  'skinToneDark',\n] as const;\n\nexport function EmojiPickerSkinTone({ skinTone, onSkinToneChange }: EmojiPickerSkinToneProps) {\n  const ctx = useEmojiPickerContext();\n  const [opened, setOpened] = useState(false);\n\n  return (\n    <Popover\n      opened={opened}\n      onChange={setOpened}\n      position=\"top\"\n      withArrow\n      withinPortal={false}\n      trapFocus\n      returnFocus\n    >\n      <Popover.Target>\n        <UnstyledButton\n          {...ctx.getStyles('skinToneButton')}\n          aria-label={ctx.labels.skinTone}\n          title={ctx.labels.skinTone}\n          onClick={() => setOpened((o) => !o)}\n        >\n          {SKIN_TONE_EMOJIS[skinTone]}\n        </UnstyledButton>\n      </Popover.Target>\n      <Popover.Dropdown {...ctx.getStyles('skinToneDropdown')}>\n        <div {...ctx.getStyles('skinToneSelector')}>\n          {SKIN_TONE_EMOJIS.map((emoji, index) => (\n            <UnstyledButton\n              key={index}\n              {...ctx.getStyles('skinToneButton')}\n              aria-label={ctx.labels[SKIN_TONE_LABEL_KEYS[index]]}\n              title={ctx.labels[SKIN_TONE_LABEL_KEYS[index]]}\n              aria-pressed={skinTone === index}\n              data-active={skinTone === index || undefined}\n              data-autofocus={skinTone === index || undefined}\n              onClick={() => {\n                onSkinToneChange(index);\n                setOpened(false);\n              }}\n            >\n              {emoji}\n            </UnstyledButton>\n          ))}\n        </div>\n      </Popover.Dropdown>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;AASA,MAAM,mBAAmB;CAAC;CAAM;CAAQ;CAAQ;CAAQ;CAAQ;AAAM;AAEtE,MAAM,uBAAuB;CAC3B;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,oBAAoB,EAAE,UAAU,oBAA8C;CAC5F,MAAM,MAAMA,4BAAAA,sBAAsB;CAClC,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAS,KAAK;CAE1C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,cAAAA,SAAD;EACU;EACR,UAAU;EACV,UAAS;EACT,WAAA;EACA,cAAc;EACd,WAAA;EACA,aAAA;EAPF,UAAA,CASE,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,QAAQ,QAAT,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD;GACE,GAAI,IAAI,UAAU,gBAAgB;GAClC,cAAY,IAAI,OAAO;GACvB,OAAO,IAAI,OAAO;GAClB,eAAe,WAAW,MAAM,CAAC,CAAC;GAEjC,UAAA,iBAAiB;EACJ,CAAA,EACF,CAAA,GAChB,iBAAA,GAAA,kBAAA,IAAA,CAACD,cAAAA,QAAQ,UAAT;GAAkB,GAAI,IAAI,UAAU,kBAAkB;GACpD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,IAAI,UAAU,kBAAkB;IACtC,UAAA,iBAAiB,KAAK,OAAO,UAC5B,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD;KAEE,GAAI,IAAI,UAAU,gBAAgB;KAClC,cAAY,IAAI,OAAO,qBAAqB;KAC5C,OAAO,IAAI,OAAO,qBAAqB;KACvC,gBAAc,aAAa;KAC3B,eAAa,aAAa,SAAS,KAAA;KACnC,kBAAgB,aAAa,SAAS,KAAA;KACtC,eAAe;MACb,iBAAiB,KAAK;MACtB,UAAU,KAAK;KACjB;KAEC,UAAA;IACa,GAbT,KAaS,CACjB;GACE,CAAA;EACW,CAAA,CACX;;AAEb"}

package/cjs/components/EmojiPickerInput/EmojiPickerInput.cjs

@@ -0,0 +1,190 @@
+"use client";
+const require_EmojiPicker = require("../EmojiPicker/EmojiPicker.cjs");
+const require_EmojiPickerInput_module = require("./EmojiPickerInput.module.cjs");
+let react = require("react");
+let _mantine_core = require("@mantine/core");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+// packages/@mantine/emoji/src/components/EmojiPickerInput/EmojiPickerInput.tsx
+const defaultProps = {
+	closeOnSelect: true,
+	clearable: false,
+	size: "sm"
+};
+const varsResolver = (0, _mantine_core.createVarsResolver)(() => ({ root: {} }));
+const EmojiPickerInput = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("EmojiPickerInput", defaultProps, _props);
+	const { classNames, styles, unstyled, vars, value: valueProp, defaultValue, onChange, placeholder, clearable, clearButtonProps, popoverProps, opened: openedProp, defaultOpened, onOpenedChange, closeOnSelect, data, onEmojiSelect, pickerProps, readOnly, disabled, label, description, error, success, required, className, style, id, size, variant, errorProps, successProps, labelProps, descriptionProps, wrapperProps: _wrapperProps, inputContainer, inputWrapperOrder, withAsterisk, mod, attributes, rightSection, ref, ...others } = props;
+	const { styleProps, rest } = (0, _mantine_core.extractStyleProps)(others);
+	const inputRef = (0, react.useRef)(null);
+	const mergedRef = (0, _mantine_hooks.useMergedRef)(inputRef, ref);
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: "EmojiPickerInput",
+		props,
+		classes: require_EmojiPickerInput_module.default,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver
+	});
+	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
+		classNames,
+		styles,
+		props
+	});
+	const [value, setValue] = (0, _mantine_hooks.useUncontrolled)({
+		value: valueProp,
+		defaultValue: defaultValue ?? null,
+		onChange
+	});
+	const [opened, setOpened] = (0, _mantine_hooks.useUncontrolled)({
+		value: openedProp,
+		defaultValue: defaultOpened,
+		finalValue: false,
+		onChange: onOpenedChange
+	});
+	const [skinTone, setSkinTone] = (0, _mantine_hooks.useUncontrolled)({
+		value: pickerProps?.skinTone,
+		defaultValue: pickerProps?.defaultSkinTone,
+		finalValue: 0,
+		onChange: pickerProps?.onSkinToneChange
+	});
+	const selectedEmoji = value ? data.emojis[value] : null;
+	const [tonedEmoji, setTonedEmoji] = (0, react.useState)(null);
+	const [prevValue, setPrevValue] = (0, react.useState)(value);
+	if (prevValue !== value) {
+		setPrevValue(value);
+		if (tonedEmoji && tonedEmoji.id !== value) setTonedEmoji(null);
+	}
+	const displayedEmoji = tonedEmoji && tonedEmoji.id === value ? tonedEmoji.emoji : selectedEmoji?.emoji;
+	const handleEmojiSelect = (0, react.useCallback)((emoji) => {
+		setValue(emoji.id);
+		setTonedEmoji({
+			id: emoji.id,
+			emoji: emoji.emoji
+		});
+		onEmojiSelect?.(emoji);
+		if (closeOnSelect) setOpened(false);
+	}, [
+		setValue,
+		onEmojiSelect,
+		closeOnSelect,
+		setOpened
+	]);
+	const handleClear = () => {
+		setValue(null);
+		setTonedEmoji(null);
+		inputRef.current?.focus();
+	};
+	const handleInputClick = () => {
+		if (!readOnly && !disabled) setOpened(!opened);
+	};
+	const inputContent = selectedEmoji ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		...getStyles("inputValue"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			...getStyles("inputEmoji"),
+			children: displayedEmoji
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			...getStyles("inputEmojiName"),
+			children: selectedEmoji.name
+		})]
+	}) : null;
+	const clearButton = clearable && selectedEmoji && !readOnly && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.ClearButton, {
+		"aria-label": "Clear emoji",
+		...clearButtonProps,
+		"data-clear": true,
+		onClick: (event) => {
+			event.stopPropagation();
+			handleClear();
+			clearButtonProps?.onClick?.(event);
+		}
+	}) : void 0;
+	const _id = (0, _mantine_hooks.useId)(id);
+	const wrapperProps = {
+		label,
+		description,
+		error,
+		success,
+		required,
+		classNames: resolvedClassNames,
+		className,
+		__staticSelector: "EmojiPickerInput",
+		__stylesApiProps: props,
+		errorProps,
+		successProps,
+		labelProps,
+		descriptionProps,
+		unstyled,
+		styles: resolvedStyles,
+		size,
+		style,
+		inputContainer,
+		inputWrapperOrder,
+		withAsterisk,
+		variant,
+		mod,
+		attributes,
+		..._wrapperProps,
+		...styleProps,
+		id: _id
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.Wrapper, {
+		...wrapperProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Popover, {
+			__staticSelector: "EmojiPickerInput",
+			position: "bottom-start",
+			offset: 5,
+			trapFocus: true,
+			returnFocus: true,
+			...popoverProps,
+			id: _id,
+			opened,
+			onChange: setOpened,
+			classNames: resolvedClassNames,
+			styles: resolvedStyles,
+			unstyled,
+			disabled: readOnly || disabled,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input, {
+				component: "button",
+				type: "button",
+				pointer: true,
+				...rest,
+				ref: mergedRef,
+				classNames: resolvedClassNames,
+				styles: resolvedStyles,
+				__staticSelector: "EmojiPickerInput",
+				onClick: handleInputClick,
+				rightSection: rightSection || clearButton,
+				disabled,
+				error,
+				success,
+				size,
+				variant,
+				unstyled,
+				id: _id,
+				attributes,
+				"aria-expanded": opened,
+				children: inputContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.Placeholder, { children: placeholder })
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Dropdown, {
+				...getStyles("dropdown"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmojiPicker.EmojiPicker, {
+					...pickerProps,
+					skinTone,
+					onSkinToneChange: setSkinTone,
+					data,
+					onEmojiSelect: handleEmojiSelect,
+					autoFocus: true
+				})
+			})]
+		})
+	});
+});
+EmojiPickerInput.classes = {
+	..._mantine_core.InputBase.classes,
+	...require_EmojiPickerInput_module.default
+};
+EmojiPickerInput.displayName = "@mantine/emoji/EmojiPickerInput";
+exports.EmojiPickerInput = EmojiPickerInput;
+
+//# sourceMappingURL=EmojiPickerInput.cjs.map

package/cjs/components/EmojiPickerInput/EmojiPickerInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerInput.cjs","names":["createVarsResolver","factory","useProps","extractStyleProps","useRef","useMergedRef","useStyles","useResolvedStylesApi","useUncontrolled","useState","useCallback","Input","useId","Popover","EmojiPicker","InputBase","classes"],"sources":["../../../src/components/EmojiPickerInput/EmojiPickerInput.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  Input,\n  InputVariant,\n  Popover,\n  PopoverProps,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n  InputBase,\n  InputClearButtonProps,\n  __BaseInputProps,\n  __InputStylesNames,\n} from '@mantine/core';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport type { EmojiPickerEmoji } from '../../types';\nimport { EmojiPicker, EmojiPickerProps } from '../EmojiPicker';\nimport classes from './EmojiPickerInput.module.css';\n\nexport type EmojiPickerInputStylesNames =\n  | 'dropdown'\n  | 'inputEmoji'\n  | 'inputEmojiName'\n  | 'inputValue'\n  | __InputStylesNames;\n\nexport type EmojiPickerInputCssVariables = {\n  root: never;\n};\n\nexport interface EmojiPickerInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<EmojiPickerInputFactory>,\n    ElementProps<'button', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** Controlled emoji id value */\n  value?: string | null;\n\n  /** Default emoji id value for uncontrolled state */\n  defaultValue?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Input placeholder displayed when no emoji is selected */\n  placeholder?: string;\n\n  /** Determines whether the clear button is displayed @default false */\n  clearable?: boolean;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed to the `Popover` component, use `opened`, `defaultOpened` and `onOpenedChange` props to control opened state */\n  popoverProps?: Omit<PopoverProps, 'children' | 'opened' | 'defaultOpened' | 'onChange'>;\n\n  /** Controlled popover opened state */\n  opened?: boolean;\n\n  /** Default popover opened state for uncontrolled mode */\n  defaultOpened?: boolean;\n\n  /** Called when popover opened state changes */\n  onOpenedChange?: (opened: boolean) => void;\n\n  /** Determines whether the popover closes after emoji is selected @default true */\n  closeOnSelect?: boolean;\n\n  /** Emoji data object, use `emojiMartAdapter` or `emojibaseAdapter` to convert data */\n  data: EmojiPickerProps['data'];\n\n  /** Called when an emoji is selected */\n  onEmojiSelect?: EmojiPickerProps['onEmojiSelect'];\n\n  /** Props passed to the `EmojiPicker` component inside the dropdown */\n  pickerProps?: Omit<EmojiPickerProps, 'data' | 'onEmojiSelect'>;\n\n  /** Determines whether the input is in read-only mode */\n  readOnly?: boolean;\n\n  /** Determines whether the input is disabled */\n  disabled?: boolean;\n}\n\nexport type EmojiPickerInputFactory = Factory<{\n  props: EmojiPickerInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: EmojiPickerInputStylesNames;\n  vars: EmojiPickerInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  closeOnSelect: true,\n  clearable: false,\n  size: 'sm',\n} satisfies Partial<EmojiPickerInputProps>;\n\nconst varsResolver = createVarsResolver<EmojiPickerInputFactory>(() => ({\n  root: {},\n}));\n\nexport const EmojiPickerInput = factory<EmojiPickerInputFactory>((_props) => {\n  const props = useProps('EmojiPickerInput', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    placeholder,\n    clearable,\n    clearButtonProps,\n    popoverProps,\n    opened: openedProp,\n    defaultOpened,\n    onOpenedChange,\n    closeOnSelect,\n    data,\n    onEmojiSelect,\n    pickerProps,\n    readOnly,\n    disabled,\n    label,\n    description,\n    error,\n    success,\n    required,\n    className,\n    style,\n    id,\n    size,\n    variant,\n    errorProps,\n    successProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    mod,\n    attributes,\n    rightSection,\n    ref,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const inputRef = useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const getStyles = useStyles<EmojiPickerInputFactory>({\n    name: 'EmojiPickerInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<EmojiPickerInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [value, setValue] = useUncontrolled({\n    value: valueProp,\n    defaultValue: defaultValue ?? null,\n    onChange,\n  });\n\n  const [opened, setOpened] = useUncontrolled({\n    value: openedProp,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange: onOpenedChange,\n  });\n\n  const [skinTone, setSkinTone] = useUncontrolled({\n    value: pickerProps?.skinTone,\n    defaultValue: pickerProps?.defaultSkinTone,\n    finalValue: 0,\n    onChange: pickerProps?.onSkinToneChange,\n  });\n\n  const selectedEmoji = value ? data.emojis[value] : null;\n  const [tonedEmoji, setTonedEmoji] = useState<{ id: string; emoji: string } | null>(null);\n  const [prevValue, setPrevValue] = useState(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (tonedEmoji && tonedEmoji.id !== value) {\n      setTonedEmoji(null);\n    }\n  }\n  const displayedEmoji =\n    tonedEmoji && tonedEmoji.id === value ? tonedEmoji.emoji : selectedEmoji?.emoji;\n\n  const handleEmojiSelect = useCallback(\n    (emoji: EmojiPickerEmoji) => {\n      setValue(emoji.id);\n      setTonedEmoji({ id: emoji.id, emoji: emoji.emoji });\n      onEmojiSelect?.(emoji);\n      if (closeOnSelect) {\n        setOpened(false);\n      }\n    },\n    [setValue, onEmojiSelect, closeOnSelect, setOpened]\n  );\n\n  const handleClear = () => {\n    setValue(null);\n    setTonedEmoji(null);\n    inputRef.current?.focus();\n  };\n\n  const handleInputClick = () => {\n    if (!readOnly && !disabled) {\n      setOpened(!opened);\n    }\n  };\n\n  const inputContent = selectedEmoji ? (\n    <span {...getStyles('inputValue')}>\n      <span {...getStyles('inputEmoji')}>{displayedEmoji}</span>\n      <span {...getStyles('inputEmojiName')}>{selectedEmoji.name}</span>\n    </span>\n  ) : null;\n\n  const clearButton =\n    clearable && selectedEmoji && !readOnly && !disabled ? (\n      <Input.ClearButton\n        aria-label=\"Clear emoji\"\n        {...clearButtonProps}\n        data-clear\n        onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n          event.stopPropagation();\n          handleClear();\n          clearButtonProps?.onClick?.(event);\n        }}\n      />\n    ) : undefined;\n\n  const _id = useId(id);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    success,\n    required,\n    classNames: resolvedClassNames,\n    className,\n    __staticSelector: 'EmojiPickerInput',\n    __stylesApiProps: props,\n    errorProps,\n    successProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles: resolvedStyles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    mod,\n    attributes,\n    ..._wrapperProps,\n    ...styleProps,\n    id: _id,\n  };\n\n  return (\n    <Input.Wrapper {...wrapperProps}>\n      <Popover\n        __staticSelector=\"EmojiPickerInput\"\n        position=\"bottom-start\"\n        offset={5}\n        trapFocus\n        returnFocus\n        {...popoverProps}\n        id={_id}\n        opened={opened}\n        onChange={setOpened}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        disabled={readOnly || disabled}\n      >\n        <Popover.Target>\n          <Input\n            component=\"button\"\n            type=\"button\"\n            pointer\n            {...rest}\n            ref={mergedRef}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            __staticSelector=\"EmojiPickerInput\"\n            onClick={handleInputClick}\n            rightSection={rightSection || clearButton}\n            disabled={disabled}\n            error={error}\n            success={success}\n            size={size}\n            variant={variant}\n            unstyled={unstyled}\n            id={_id}\n            attributes={attributes}\n            aria-expanded={opened}\n          >\n            {inputContent || <Input.Placeholder>{placeholder}</Input.Placeholder>}\n          </Input>\n        </Popover.Target>\n\n        <Popover.Dropdown {...getStyles('dropdown')}>\n          <EmojiPicker\n            {...pickerProps}\n            skinTone={skinTone}\n            onSkinToneChange={setSkinTone}\n            data={data}\n            onEmojiSelect={handleEmojiSelect}\n            autoFocus\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nEmojiPickerInput.classes = { ...InputBase.classes, ...classes };\nEmojiPickerInput.displayName = '@mantine/emoji/EmojiPickerInput';\n"],"mappings":";;;;;;;;AAoGA,MAAM,eAAe;CACnB,eAAe;CACf,WAAW;CACX,MAAM;AACR;AAEA,MAAM,gBAAA,GAAeA,cAAAA,mBAAAA,QAAmD,EACtE,MAAM,CAAC,EACT,EAAE;AAEF,MAAa,oBAAA,GAAmBC,cAAAA,QAAAA,EAAkC,WAAW;CAC3E,MAAM,SAAA,GAAQC,cAAAA,SAAAA,CAAS,oBAAoB,cAAc,MAAM;CAC/D,MAAM,EACJ,YACA,QACA,UACA,MACA,OAAO,WACP,cACA,UACA,aACA,WACA,kBACA,cACA,QAAQ,YACR,eACA,gBACA,eACA,MACA,eACA,aACA,UACA,UACA,OACA,aACA,OACA,SACA,UACA,WACA,OACA,IACA,MACA,SACA,YACA,cACA,YACA,kBACA,cAAc,eACd,gBACA,mBACA,cACA,KACA,YACA,cACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,UAAA,GAASC,cAAAA,kBAAAA,CAAkB,MAAM;CACrD,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAA0B,IAAI;CAC/C,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAa,UAAU,GAAG;CAE5C,MAAM,aAAA,GAAYC,cAAAA,UAAAA,CAAmC;EACnD,MAAM;EACN;EACA,SAAA,gCAAA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,oBAAA,GAAmBC,cAAAA,qBAAAA,CAA8C;EAC3F;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,OAAO,aAAA,GAAYC,eAAAA,gBAAAA,CAAgB;EACxC,OAAO;EACP,cAAc,gBAAgB;EAC9B;CACF,CAAC;CAED,MAAM,CAAC,QAAQ,cAAA,GAAaA,eAAAA,gBAAAA,CAAgB;EAC1C,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,UAAU,gBAAA,GAAeA,eAAAA,gBAAAA,CAAgB;EAC9C,OAAO,aAAa;EACpB,cAAc,aAAa;EAC3B,YAAY;EACZ,UAAU,aAAa;CACzB,CAAC;CAED,MAAM,gBAAgB,QAAQ,KAAK,OAAO,SAAS;CACnD,MAAM,CAAC,YAAY,kBAAA,GAAiBC,MAAAA,SAAAA,CAA+C,IAAI;CACvF,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAAS,KAAK;CAChD,IAAI,cAAc,OAAO;EACvB,aAAa,KAAK;EAClB,IAAI,cAAc,WAAW,OAAO,OAClC,cAAc,IAAI;CAEtB;CACA,MAAM,iBACJ,cAAc,WAAW,OAAO,QAAQ,WAAW,QAAQ,eAAe;CAE5E,MAAM,qBAAA,GAAoBC,MAAAA,YAAAA,EACvB,UAA4B;EAC3B,SAAS,MAAM,EAAE;EACjB,cAAc;GAAE,IAAI,MAAM;GAAI,OAAO,MAAM;EAAM,CAAC;EAClD,gBAAgB,KAAK;EACrB,IAAI,eACF,UAAU,KAAK;CAEnB,GACA;EAAC;EAAU;EAAe;EAAe;CAAS,CACpD;CAEA,MAAM,oBAAoB;EACxB,SAAS,IAAI;EACb,cAAc,IAAI;EAClB,SAAS,SAAS,MAAM;CAC1B;CAEA,MAAM,yBAAyB;EAC7B,IAAI,CAAC,YAAY,CAAC,UAChB,UAAU,CAAC,MAAM;CAErB;CAEA,MAAM,eAAe,gBACnB,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,GAAI,UAAU,YAAY;EAAhC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,YAAY;GAAI,UAAA;EAAqB,CAAA,GACzD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,gBAAgB;GAAI,UAAA,cAAc;EAAW,CAAA,CAC7D;CACJ,CAAA,IAAA;CAEJ,MAAM,cACJ,aAAa,iBAAiB,CAAC,YAAY,CAAC,WAC1C,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,MAAM,aAAP;EACE,cAAW;EACX,GAAI;EACJ,cAAA;EACA,UAAU,UAA+C;GACvD,MAAM,gBAAgB;GACtB,YAAY;GACZ,kBAAkB,UAAU,KAAK;EACnC;CACD,CAAA,IACC,KAAA;CAEN,MAAM,OAAA,GAAMC,eAAAA,MAAAA,CAAM,EAAE;CAEpB,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA;EACA,YAAY;EACZ;EACA,kBAAkB;EAClB,kBAAkB;EAClB;EACA;EACA;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACH,GAAG;EACH,IAAI;CACN;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,cAAAA,MAAM,SAAP;EAAe,GAAI;EACjB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACE,cAAAA,SAAD;GACE,kBAAiB;GACjB,UAAS;GACT,QAAQ;GACR,WAAA;GACA,aAAA;GACA,GAAI;GACJ,IAAI;GACI;GACR,UAAU;GACV,YAAY;GACZ,QAAQ;GACE;GACV,UAAU,YAAY;GAbxB,UAAA,CAeE,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,QAAQ,QAAT,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,cAAAA,OAAD;IACE,WAAU;IACV,MAAK;IACL,SAAA;IACA,GAAI;IACJ,KAAK;IACL,YAAY;IACZ,QAAQ;IACR,kBAAiB;IACjB,SAAS;IACT,cAAc,gBAAgB;IACpB;IACH;IACE;IACH;IACG;IACC;IACV,IAAI;IACQ;IACZ,iBAAe;IAEd,UAAA,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA;GAC/D,CAAA,EACO,CAAA,GAEhB,iBAAA,GAAA,kBAAA,IAAA,CAACE,cAAAA,QAAQ,UAAT;IAAkB,GAAI,UAAU,UAAU;IACxC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;KACE,GAAI;KACM;KACV,kBAAkB;KACZ;KACN,eAAe;KACf,WAAA;IACD,CAAA;GACe,CAAA,CACX;;CACI,CAAA;AAEnB,CAAC;AAED,iBAAiB,UAAU;CAAE,GAAGC,cAAAA,UAAU;CAAS,GAAGC,gCAAAA;AAAQ;AAC9D,iBAAiB,cAAc"}

package/cjs/components/EmojiPickerInput/EmojiPickerInput.module.cjs

@@ -0,0 +1,11 @@
+"use client";
+// packages/@mantine/emoji/src/components/EmojiPickerInput/EmojiPickerInput.module.css
+var EmojiPickerInput_module_default = {
+	"inputEmoji": "m_c78924f3",
+	"inputEmojiName": "m_e3dc621e",
+	"dropdown": "m_e8c48c28",
+	"inputValue": "m_c873361e"
+};
+exports.default = EmojiPickerInput_module_default;
+
+//# sourceMappingURL=EmojiPickerInput.module.cjs.map

package/cjs/components/EmojiPickerInput/EmojiPickerInput.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerInput.module.cjs","names":[],"sources":["../../../src/components/EmojiPickerInput/EmojiPickerInput.module.css"],"sourcesContent":[".inputEmoji {\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.inputEmojiName {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.dropdown {\n  padding: 0;\n  border: none;\n  background: none;\n}\n\n.inputValue {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-xs);\n  overflow: hidden;\n}\n"],"mappings":""}