"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  EmojiPicker: () => EmojiPicker,
  convertSkinToneToComponent: () => convertSkinToneToComponent,
  getEmojiWithSkinTone: () => getEmojiWithSkinTone,
  loadEmojiComponents: () => loadEmojiComponents,
  loadEmojiData: () => loadEmojiData,
  loadEmojiGroupData: () => loadEmojiGroupData,
  setCDN: () => setCDN,
  setComponentsURL: () => setComponentsURL,
  setEmojiComponents: () => setEmojiComponents,
  setEmojiData: () => setEmojiData,
  setEmojiGroupURL: () => setEmojiGroupURL,
  setEmojiURL: () => setEmojiURL,
  useEmojiComponents: () => useEmojiComponents,
  useEmojiData: () => useEmojiData,
  useEmojiGroupData: () => useEmojiGroupData
});
module.exports = __toCommonJS(src_exports);

// src/EmojiPicker.tsx
var import_solid_js = require("solid-js");
var ORIGIN_GROUP_DATA_KEY = "data-by-group.json";
var ORIGIN_COMPONENTS_KEY = "data-emoji-components.json";
var ORIGIN_EMOJI_KEY = "data-by-emoji.json";
var CDN_URL = "https://unpkg.com/unicode-emoji-json@0.6.0/";
var GROUP_DATA_KEY = `${CDN_URL}${ORIGIN_GROUP_DATA_KEY}`;
var COMPONENTS_KEY = `${CDN_URL}${ORIGIN_COMPONENTS_KEY}`;
var EMOJI_KEY = `${CDN_URL}${ORIGIN_EMOJI_KEY}`;
function setCDN(url) {
  GROUP_DATA_KEY = `${url}${ORIGIN_GROUP_DATA_KEY}`;
  COMPONENTS_KEY = `${url}${ORIGIN_COMPONENTS_KEY}`;
  EMOJI_KEY = `${url}${ORIGIN_EMOJI_KEY}`;
}
function setComponentsURL(url) {
  COMPONENTS_KEY = url;
}
function setEmojiURL(url) {
  EMOJI_KEY = url;
}
function setEmojiGroupURL(url) {
  GROUP_DATA_KEY = url;
}
var EMOJI_DATA;
var EMOJI_COMPONENTS;
var EMOJI_GROUP_DATA;
async function loadEmojiData() {
  if (!EMOJI_DATA) {
    const response = await fetch(EMOJI_KEY);
    EMOJI_DATA = await response.json();
  }
  return EMOJI_DATA;
}
async function loadEmojiGroupData() {
  if (!EMOJI_GROUP_DATA) {
    const response = await fetch(GROUP_DATA_KEY);
    EMOJI_GROUP_DATA = await response.json();
  }
  return EMOJI_GROUP_DATA;
}
async function loadEmojiComponents() {
  if (!EMOJI_COMPONENTS) {
    const response = await fetch(COMPONENTS_KEY);
    EMOJI_COMPONENTS = await response.json();
  }
  return EMOJI_COMPONENTS;
}
function setEmojiData(data) {
  EMOJI_DATA = data;
}
function setEmojiComponents(data) {
  EMOJI_COMPONENTS = data;
}
function useEmojiData() {
  const [data] = (0, import_solid_js.createResource)(loadEmojiData);
  return data;
}
function useEmojiComponents() {
  const [data] = (0, import_solid_js.createResource)(loadEmojiComponents);
  return data;
}
function useEmojiGroupData() {
  const [data] = (0, import_solid_js.createResource)(loadEmojiGroupData);
  return data;
}
var SKIN_TONE_TO_COMPONENT = {
  light: "light_skin_tone",
  "medium-light": "medium_light_skin_tone",
  medium: "medium_skin_tone",
  "medium-dark": "medium_dark_skin_tone",
  dark: "dark_skin_tone"
};
function convertSkinToneToComponent(components, skinTone) {
  if (skinTone) {
    return components[SKIN_TONE_TO_COMPONENT[skinTone]];
  }
  return void 0;
}
var VARIATION = "️";
var ZWJ = "‍";
function getEmojiWithSkinTone(emojis, emoji, skinTone) {
  if (!(skinTone && emoji.skin_tone_support)) {
    return emoji.emoji;
  }
  const emojiWithSkinTone = emoji.emoji.split(ZWJ).map((chunk) => {
    if (chunk in emojis && emojis[chunk].skin_tone_support) {
      return `${chunk}${skinTone}`;
    }
    return chunk;
  }).join(ZWJ);
  const emojiWithoutVariation = emojiWithSkinTone.replaceAll(`${VARIATION}${skinTone}`, `${skinTone}`);
  return emojiWithoutVariation;
}
function DEFAULT_EMOJI_RENDER(emojis, emoji, components, skinTone) {
  return <span class="emoji">{getEmojiWithSkinTone(
    emojis,
    emoji,
    convertSkinToneToComponent(components, skinTone)
  )}</span>;
}
function EmojiPicker(props) {
  const emojiData = useEmojiData();
  const componentData = useEmojiComponents();
  const emojiGroupData = useEmojiGroupData();
  const renderEmoji = (0, import_solid_js.createMemo)(() => props.renderEmoji || DEFAULT_EMOJI_RENDER);
  return <div class="emoji-picker">{(0, import_solid_js.createMemo)(() => {
    const emoji = emojiData();
    const components = componentData();
    const emojiGroup = emojiGroupData();
    if (emoji && components && emojiGroup) {
      return <import_solid_js.For each={emojiGroup}>{(group) => <div class="emoji-section"><span class="emoji-section-title">{group.name}</span><div class="emoji-items"><import_solid_js.For each={group.emojis}>{(emojiItem) => <import_solid_js.Show when={props.filter ? props.filter(emojiItem) : true}><button
        type="button"
        class="emoji-button"
        onClick={props.onEmojiClick && [props.onEmojiClick, emojiItem]}
        onFocus={props.onEmojiFocus && [props.onEmojiFocus, emojiItem]}
        onMouseOver={props.onEmojiHover && [props.onEmojiHover, emojiItem]}
        title={emojiItem.name}
      >{renderEmoji()(emoji, emojiItem, components, props.skinTone)}</button></import_solid_js.Show>}</import_solid_js.For></div></div>}</import_solid_js.For>;
    }
    return null;
  })()}</div>;
}
//# sourceMappingURL=index.jsx.map