@enigmax/primitives 0.16.0 → 0.18.0

package/dist/chunk-LKA2UG4P.js

@@ -0,0 +1,542 @@
+import { createSearch } from './chunk-UZFEEFMF.js';
+import { Slot } from './chunk-HS3X3XCW.js';
+import { createPortal } from 'react-dom';
+import { createContext, useContext, useState, useRef, useId, useMemo, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var PaletteContext = createContext(null);
+function usePaletteContext(part) {
+  const value = useContext(PaletteContext);
+  if (!value) throw new Error(`<${part}> must be rendered inside <SearchPalette.Root>.`);
+  return value;
+}
+
+// src/core/palette.ts
+function recentKey(entry) {
+  return `${entry.scope ?? ""}\0${entry.href ?? ""}\0${entry.href ? "" : entry.term.trim().toLowerCase()}`;
+}
+function createRecentStore(options = {}) {
+  const { key = "enigma:palette:recent", limit = 8, storage = "local" } = options;
+  function backing() {
+    if (typeof window === "undefined") return null;
+    try {
+      return storage === "session" ? window.sessionStorage : window.localStorage;
+    } catch {
+      return null;
+    }
+  }
+  function read() {
+    const store = backing();
+    if (!store) return [];
+    try {
+      const raw = store.getItem(key);
+      if (!raw) return [];
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return parsed.filter((entry) => Boolean(entry) && typeof entry.term === "string").sort((a, b) => b.at - a.at).slice(0, limit);
+    } catch {
+      return [];
+    }
+  }
+  function write(entries) {
+    const store = backing();
+    const kept = entries.slice(0, limit);
+    try {
+      store?.setItem(key, JSON.stringify(kept));
+    } catch {
+    }
+    return kept;
+  }
+  return {
+    list: read,
+    remember(entry) {
+      const next = { ...entry, at: entry.at ?? Date.now() };
+      if (!next.term.trim() && !next.href) return read();
+      const id = recentKey(next);
+      return write([next, ...read().filter((existing) => recentKey(existing) !== id)]);
+    },
+    forget(entry) {
+      const id = recentKey(entry);
+      return write(read().filter((existing) => recentKey(existing) !== id));
+    },
+    clear() {
+      const store = backing();
+      try {
+        store?.removeItem(key);
+      } catch {
+      }
+    }
+  };
+}
+function groupRows(rows, labelOf) {
+  const groups = [];
+  const index = /* @__PURE__ */ new Map();
+  rows.forEach((row, position) => {
+    const label = labelOf(row);
+    let group = index.get(label);
+    if (!group) {
+      group = { label, rows: [] };
+      index.set(label, group);
+      groups.push(group);
+    }
+    group.rows.push({ row, position });
+  });
+  return groups;
+}
+function moveActive(current, length, key, page = 5) {
+  if (length <= 0) return 0;
+  switch (key) {
+    case "ArrowDown":
+      return (current + 1) % length;
+    case "ArrowUp":
+      return (current - 1 + length) % length;
+    case "Home":
+      return 0;
+    case "End":
+      return length - 1;
+    case "PageDown":
+      return Math.min(length - 1, current + page);
+    case "PageUp":
+      return Math.max(0, current - page);
+  }
+}
+function shortcutLabel(key = "K") {
+  const mac = typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent || "");
+  return `${mac ? "\u2318" : "Ctrl"} ${key.toUpperCase()}`;
+}
+function isPaletteShortcut(event, key = "k") {
+  if (event.key.toLowerCase() !== key.toLowerCase()) return false;
+  return event.metaKey || event.ctrlKey;
+}
+var RECENTS_SHOWN = 5;
+function firstString(item) {
+  if (typeof item === "string") return item;
+  if (item && typeof item === "object") {
+    for (const value of Object.values(item)) {
+      if (typeof value === "string" && value.trim()) return value;
+    }
+  }
+  return "";
+}
+function PaletteRoot({
+  items,
+  keys,
+  fuse,
+  fuseOptions,
+  matcher,
+  delay = 120,
+  limit = 40,
+  groupBy,
+  labelOf = firstString,
+  descriptionOf,
+  sections = [],
+  onSelect,
+  recents = true,
+  recentsKey,
+  recentsLimit = 8,
+  shortcut = "k",
+  open: openProp,
+  onOpenChange,
+  defaultOpen = false,
+  resultsLabel = "Results",
+  recentsLabel = "Recent",
+  children
+}) {
+  const [ownOpen, setOwnOpen] = useState(defaultOpen);
+  const controlled = openProp !== void 0;
+  const open = controlled ? openProp : ownOpen;
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const [results, setResults] = useState([]);
+  const [remembered, setRemembered] = useState([]);
+  const [busy, setBusy] = useState(false);
+  const triggerRef = useRef(null);
+  const fieldRef = useRef(null);
+  const base = useId();
+  const ids = useMemo(() => ({ field: `${base}-field`, list: `${base}-list`, title: `${base}-title` }), [base]);
+  const store = useMemo(
+    () => createRecentStore({ key: recentsKey, limit: recentsLimit }),
+    [recentsKey, recentsLimit]
+  );
+  const setOpen = useCallback((next) => {
+    if (!controlled) setOwnOpen(next);
+    onOpenChange?.(next);
+  }, [controlled, onOpenChange]);
+  const engine = useMemo(() => createSearch({
+    items,
+    keys,
+    fuse,
+    fuseOptions,
+    matcher,
+    debounce: delay,
+    limit,
+    onResults: (next) => {
+      setResults(next);
+      setBusy(false);
+    }
+    // Built once: the engine indexes on construction, so rebuilding it per render would
+    // re-index the whole corpus on every keystroke.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+  useEffect(() => () => engine.destroy(), [engine]);
+  useEffect(() => {
+    engine.setItems(items ?? []);
+  }, [engine, items]);
+  useEffect(() => {
+    engine.update({ keys, fuse, fuseOptions, matcher, debounce: delay, limit });
+  }, [engine, keys, fuse, fuseOptions, matcher, delay, limit]);
+  useEffect(() => {
+    if (!open) return;
+    setRemembered(recents ? store.list() : []);
+    setQuery("");
+    engine.searchNow("");
+    setActive(0);
+  }, [open, recents, store, engine]);
+  useEffect(() => {
+    if (shortcut === null || typeof window === "undefined") return;
+    const onKeyDown = (event) => {
+      if (!isPaletteShortcut(event, shortcut)) return;
+      event.preventDefault();
+      setOpen(!open);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [shortcut, open, setOpen]);
+  const rows = useMemo(() => {
+    const trimmed = query.trim();
+    const out = [];
+    if (!trimmed && recents && remembered.length) {
+      remembered.slice(0, RECENTS_SHOWN).forEach((entry, index) => {
+        out.push({
+          id: `recent-${index}`,
+          kind: "recent",
+          group: recentsLabel,
+          recent: entry,
+          label: entry.label ?? entry.term
+        });
+      });
+    }
+    for (const section of sections) {
+      const pool = section.always || !trimmed ? section.items : section.items.filter((item) => labelOf(item).toLowerCase().includes(trimmed.toLowerCase()));
+      pool.forEach((item, index) => {
+        out.push({
+          id: `section-${section.label}-${index}`,
+          kind: "action",
+          group: section.label,
+          item,
+          label: labelOf(item),
+          description: descriptionOf?.(item)
+        });
+      });
+    }
+    results.forEach((match, index) => {
+      out.push({
+        id: `result-${index}`,
+        kind: "item",
+        group: groupBy?.(match.item) ?? resultsLabel,
+        item: match.item,
+        match,
+        label: labelOf(match.item),
+        description: descriptionOf?.(match.item)
+      });
+    });
+    return out;
+  }, [query, recents, remembered, recentsLabel, sections, results, groupBy, labelOf, descriptionOf, resultsLabel]);
+  useEffect(() => {
+    setActive((current) => current < rows.length ? current : 0);
+  }, [rows.length]);
+  const select = useCallback((row) => {
+    if (!row) return;
+    if (row.kind === "recent" && row.recent) {
+      if (!row.recent.href) {
+        setQuery(row.recent.term);
+        setBusy(true);
+        engine.search(row.recent.term);
+        fieldRef.current?.focus();
+        return;
+      }
+    }
+    const stay = row.onSelect ? row.onSelect() : row.item !== void 0 ? onSelect?.(row.item) : void 0;
+    if (recents) {
+      setRemembered(store.remember({
+        term: query.trim(),
+        label: row.label,
+        scope: row.group
+      }));
+    }
+    if (stay !== false) setOpen(false);
+  }, [engine, onSelect, query, recents, setOpen, store]);
+  const handleQuery = useCallback((next) => {
+    setQuery(next);
+    setActive(0);
+    setBusy(Boolean(next.trim()));
+    engine.search(next);
+  }, [engine]);
+  const value = useMemo(() => ({
+    open,
+    setOpen,
+    query,
+    setQuery: handleQuery,
+    rows,
+    active,
+    setActive,
+    select,
+    clearRecents: () => {
+      store.clear();
+      setRemembered([]);
+    },
+    forgetRecent: (entry) => setRemembered(store.forget(entry)),
+    busy,
+    ids,
+    shortcutLabel: shortcutLabel(shortcut ?? "k"),
+    triggerRef,
+    fieldRef,
+    rowId: (row) => `${ids.list}-${row.id}`
+  }), [open, setOpen, query, handleQuery, rows, active, select, busy, ids, shortcut, store]);
+  return /* @__PURE__ */ jsx(PaletteContext.Provider, { value, children });
+}
+function PaletteTrigger({ asChild = false, children, onClick, ...props }) {
+  const palette = usePaletteContext("SearchPalette.Trigger");
+  const Tag = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...asChild ? {} : { type: "button" },
+      ...props,
+      ref: palette.triggerRef,
+      "data-enigma-palette-trigger": "",
+      "aria-haspopup": "dialog",
+      "aria-expanded": palette.open,
+      "aria-keyshortcuts": "Control+K Meta+K",
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) palette.setOpen(true);
+      },
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "data-enigma-palette-trigger-label": "", children: "Search" }),
+        /* @__PURE__ */ jsx("kbd", { "data-enigma-palette-trigger-key": "", children: palette.shortcutLabel })
+      ] })
+    }
+  );
+}
+function PaletteContent({ title = "Search", portal = true, overlayProps, children, ...props }) {
+  const palette = usePaletteContext("SearchPalette.Content");
+  const panelRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (!palette.open || typeof document === "undefined") return;
+    const previous = document.activeElement;
+    const body = document.body;
+    const overflow = body.style.overflow;
+    const gap = window.innerWidth - document.documentElement.clientWidth;
+    const padding = body.style.paddingRight;
+    body.style.overflow = "hidden";
+    if (gap > 0) body.style.paddingRight = `${gap}px`;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        palette.setOpen(false);
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = panelRef.current?.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusable || focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      } else if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      body.style.overflow = overflow;
+      body.style.paddingRight = padding;
+      (palette.triggerRef.current ?? previous)?.focus?.();
+    };
+  }, [palette.open, palette.setOpen, palette.triggerRef]);
+  if (!palette.open) return null;
+  const panel = /* @__PURE__ */ jsxs("div", { "data-enigma-palette-portal": "", children: [
+    overlayProps !== null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...overlayProps,
+        "data-enigma-palette-overlay": "",
+        onClick: (event) => {
+          overlayProps?.onClick?.(event);
+          if (!event.defaultPrevented) palette.setOpen(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": palette.ids.title,
+        "data-enigma-palette-content": "",
+        children: [
+          /* @__PURE__ */ jsx("h2", { id: palette.ids.title, "data-enigma-palette-title": "", children: title }),
+          children
+        ]
+      }
+    )
+  ] });
+  if (!portal) return panel;
+  if (!mounted || typeof document === "undefined") return null;
+  return createPortal(panel, document.body);
+}
+function PaletteField({ asChild = false, onKeyDown, ...props }) {
+  const palette = usePaletteContext("SearchPalette.Field");
+  const Tag = asChild ? Slot : "input";
+  const activeRow = palette.rows[palette.active];
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...props,
+      ref: palette.fieldRef,
+      id: palette.ids.field,
+      type: "search",
+      value: palette.query,
+      autoFocus: true,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "none",
+      spellCheck: false,
+      enterKeyHint: "go",
+      role: "combobox",
+      "aria-expanded": true,
+      "aria-autocomplete": "list",
+      "aria-controls": palette.ids.list,
+      "aria-activedescendant": activeRow ? palette.rowId(activeRow) : void 0,
+      "data-enigma-palette-field": "",
+      onChange: (event) => palette.setQuery(event.target.value),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        const key = event.key;
+        if (key === "Enter") {
+          event.preventDefault();
+          palette.select(palette.rows[palette.active]);
+          return;
+        }
+        if (["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(key)) {
+          event.preventDefault();
+          palette.setActive(moveActive(palette.active, palette.rows.length, key));
+        }
+      }
+    }
+  );
+}
+function PaletteList({ children, empty, heading, ...props }) {
+  const palette = usePaletteContext("SearchPalette.List");
+  const listRef = useRef(null);
+  const groups = useMemo(() => groupRows(palette.rows, (row) => row.group), [palette.rows]);
+  useEffect(() => {
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [palette.active, palette.rows]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref: listRef,
+      id: palette.ids.list,
+      role: "listbox",
+      "aria-label": "Results",
+      "data-enigma-palette-list": "",
+      children: palette.rows.length === 0 ? empty ?? /* @__PURE__ */ jsx("p", { "data-enigma-palette-empty": "", children: palette.query.trim() ? `Nothing matches "${palette.query.trim()}".` : "Type to search." }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.label, "data-enigma-palette-group": "", children: [
+        heading !== null && (heading?.(group.label) ?? // The group carries the name already, so announcing the
+        // heading again would only repeat it.
+        /* @__PURE__ */ jsx("p", { "data-enigma-palette-group-label": "", "aria-hidden": "true", children: group.label })),
+        group.rows.map(({ row, position }) => /* @__PURE__ */ jsx(
+          PaletteItem,
+          {
+            row,
+            index: position,
+            children: children?.(row, { active: position === palette.active, index: position })
+          },
+          row.id
+        ))
+      ] }, group.label))
+    }
+  );
+}
+function PaletteItem({ row, index, children, ...props }) {
+  const palette = usePaletteContext("SearchPalette.Item");
+  const active = index === palette.active;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      id: palette.rowId(row),
+      role: "option",
+      "aria-selected": active,
+      "data-enigma-palette-item": "",
+      "data-kind": row.kind,
+      "data-active": active ? "true" : void 0,
+      onMouseMove: () => {
+        if (!active) palette.setActive(index);
+      },
+      onClick: () => palette.select(row),
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "data-enigma-palette-item-label": "", children: row.label }),
+        row.description && /* @__PURE__ */ jsx("span", { "data-enigma-palette-item-description": "", children: row.description })
+      ] })
+    }
+  );
+}
+function PaletteFooter({ hints, children, ...props }) {
+  usePaletteContext("SearchPalette.Footer");
+  return /* @__PURE__ */ jsx("div", { ...props, "data-enigma-palette-footer": "", children: children ?? hints ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { "data-enigma-palette-hint": "", children: [
+      /* @__PURE__ */ jsx("kbd", { children: "up" }),
+      /* @__PURE__ */ jsx("kbd", { children: "down" }),
+      " to move"
+    ] }),
+    /* @__PURE__ */ jsxs("span", { "data-enigma-palette-hint": "", children: [
+      /* @__PURE__ */ jsx("kbd", { children: "enter" }),
+      " to open"
+    ] }),
+    /* @__PURE__ */ jsxs("span", { "data-enigma-palette-hint": "", children: [
+      /* @__PURE__ */ jsx("kbd", { children: "esc" }),
+      " to close"
+    ] })
+  ] }) });
+}
+function SearchPalette({
+  placeholder = "Search",
+  trigger,
+  renderItem,
+  empty,
+  footer,
+  children,
+  ...root
+}) {
+  return /* @__PURE__ */ jsxs(PaletteRoot, { ...root, children: [
+    trigger !== null && /* @__PURE__ */ jsx(PaletteTrigger, { children: trigger }),
+    /* @__PURE__ */ jsxs(PaletteContent, { children: [
+      /* @__PURE__ */ jsx(PaletteField, { placeholder, "aria-label": placeholder }),
+      /* @__PURE__ */ jsx(PaletteList, { empty, children: renderItem }),
+      footer === null ? null : /* @__PURE__ */ jsx(PaletteFooter, { children: footer })
+    ] }),
+    children
+  ] });
+}
+SearchPalette.Root = PaletteRoot;
+SearchPalette.Trigger = PaletteTrigger;
+SearchPalette.Content = PaletteContent;
+SearchPalette.Field = PaletteField;
+SearchPalette.List = PaletteList;
+SearchPalette.Item = PaletteItem;
+SearchPalette.Footer = PaletteFooter;
+
+export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel, usePaletteContext };

package/dist/chunk-MMQPZGSU.js

@@ -0,0 +1,161 @@
+// src/core/button.ts
+var TICK_MS = 100;
+function store(cooldown) {
+  if (!cooldown.key || typeof window === "undefined") return null;
+  try {
+    const target = cooldown.storage === "local" ? window.localStorage : window.sessionStorage;
+    const probe = "__enigma_probe__";
+    target.setItem(probe, "1");
+    target.removeItem(probe);
+    return target;
+  } catch {
+    return null;
+  }
+}
+function normalize(cooldown) {
+  if (cooldown == null) return null;
+  return typeof cooldown === "number" ? { ms: cooldown } : cooldown;
+}
+function isTyping(target) {
+  const element = target;
+  if (!element) return false;
+  const tag = element.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || element.isContentEditable === true;
+}
+function createButton(options = {}) {
+  let opts = { ...options };
+  let loading = Boolean(opts.loading);
+  let readyAt = 0;
+  let timer = null;
+  let destroyed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const storageKey = () => {
+    const cooldown = normalize(opts.cooldown);
+    return cooldown?.key ? `enigma:cooldown:${cooldown.key}` : null;
+  };
+  function restore() {
+    const cooldown = normalize(opts.cooldown);
+    if (!cooldown) return;
+    const target = store(cooldown);
+    const key = storageKey();
+    if (!target || !key) return;
+    const saved = Number(target.getItem(key));
+    if (Number.isFinite(saved) && saved > Date.now()) readyAt = saved;
+  }
+  function remaining() {
+    return Math.max(0, readyAt - Date.now());
+  }
+  function snapshot() {
+    const disabled = Boolean(opts.disabled);
+    const cooldown = remaining();
+    return {
+      element: opts.href ? "a" : "button",
+      available: !disabled && !loading && cooldown === 0,
+      loading,
+      disabled,
+      cooldown,
+      shortcut: opts.shortcut ?? null
+    };
+  }
+  function emit() {
+    const state = snapshot();
+    opts.onChange?.(state);
+    for (const listener of listeners) listener(state);
+  }
+  function stopTicking() {
+    if (timer === null) return;
+    clearInterval(timer);
+    timer = null;
+  }
+  function startTicking() {
+    if (timer !== null || remaining() === 0) return;
+    timer = setInterval(() => {
+      if (remaining() > 0) {
+        emit();
+        return;
+      }
+      stopTicking();
+      emit();
+    }, TICK_MS);
+  }
+  function beginCooldown() {
+    const cooldown = normalize(opts.cooldown);
+    if (!cooldown || cooldown.ms <= 0) return;
+    readyAt = Date.now() + cooldown.ms;
+    const target = store(cooldown);
+    const key = storageKey();
+    if (target && key) {
+      try {
+        target.setItem(key, String(readyAt));
+      } catch {
+      }
+    }
+    startTicking();
+  }
+  async function press(event) {
+    if (destroyed || !snapshot().available) return;
+    const result = opts.onPress?.(event);
+    if (result instanceof Promise) {
+      loading = true;
+      emit();
+      try {
+        await result;
+      } finally {
+        loading = false;
+        beginCooldown();
+        emit();
+      }
+      return;
+    }
+    beginCooldown();
+    emit();
+  }
+  function onKeyDown(event) {
+    if (!opts.shortcut || isTyping(event.target)) return;
+    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+    if (event.key.toLowerCase() !== opts.shortcut.toLowerCase()) return;
+    if (!snapshot().available) return;
+    event.preventDefault();
+    void press(event);
+  }
+  if (typeof window !== "undefined") {
+    restore();
+    startTicking();
+    window.addEventListener("keydown", onKeyDown);
+  }
+  return {
+    get state() {
+      return snapshot();
+    },
+    press,
+    update(next) {
+      const hadCooldown = JSON.stringify(normalize(opts.cooldown));
+      opts = { ...opts, ...next };
+      if (next.loading !== void 0) loading = Boolean(next.loading);
+      if (JSON.stringify(normalize(opts.cooldown)) !== hadCooldown) restore();
+      emit();
+    },
+    reset() {
+      readyAt = 0;
+      stopTicking();
+      const cooldown = normalize(opts.cooldown);
+      const key = storageKey();
+      if (cooldown && key) store(cooldown)?.removeItem(key);
+      emit();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    destroy() {
+      destroyed = true;
+      stopTicking();
+      listeners.clear();
+      if (typeof window !== "undefined") window.removeEventListener("keydown", onKeyDown);
+    }
+  };
+}
+
+export { createButton };