solid-suggest 1.1.0

package/LICENSE

@@ -0,0 +1,5 @@
+Copyright 2025 Antriksh Yadav
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# solid-suggest
+
+solid-suggest is a UI component for SolidJS developers that renders a text input with dropdown suggestions. It can be used in scenarios such as search suggestions or results triggered by text input.
+
+It's a *super* simple library without many batteries included. See following sections for what it can and can't do for you.
+
+**Because of its simplicity, I also expect it to be usable even without updates for years.**
+
+## Quickstart
+
+Install from the npm registry using `npm` or your favorite alternate package manager (yarn, pnpm).
+
+```
+npm install solid-suggest --save
+```
+
+Import into your SolidJS project.
+
+```
+import Suggest from "solid-suggest";
+
+const items = [
+  { name: "Scout", class: "Offense" },
+  { name: "Medic", class: "Support" },
+  { name: "Heavy", class: "Defense" }
+];
+
+<Suggest
+  renderSuggestion={item => `${item.name} (${item.class})`}
+  onQuery={query =>
+    items.filter(
+      item =>
+        item.name.toLowerCase().includes(query.toLowerCase()) ||
+        item.class.toLowerCase().includes(query.toLowerCase())
+    )
+  }
+  onSelect={item => setSelected(item.name)}
+/>
+```
+
+See more [in the docs](https://antrikshy.com/solid-suggest).
+
+## What it Does
+
+Exposes two main interfaces as functions that you implement:
+
+1. `onQuery` - solid-suggest runs it on initial render and on each user input change. For solid-suggest, your implementation answers the question "what suggestions should solid-suggest show in the current state?"
+2. `onSelect` - solid-suggest invokes this to emit the user's selection to your code.
+
+All this library does is provide JavaScript/TypeScript bones for a suggestions dropdown so that you don't have to clutter your application with the required internal states, keyboard and mouse handling, etc.
+
+- Supports objects as suggestions (not just strings), with support for custom rendering of each suggestion.
+- Supports optional debouncing of user input via the `debounceMs` prop (in milliseconds). If not set or zero, input is not debounced.
+- Styling is still supplied by you.
+
+Some more questions are answered [in the docs](https://antrikshy.com/solid-suggest).
+
+## What it Doesn't Do
+
+1. Come with *any* styling. solid-suggest is a **headless** library that completely relies on the you to style. This way, it fully integrates with any branding and design system.
+2. Provide built-in network fetch capabilities. You are free to make network calls this in their `onQuery` implementations. Consider supplying a `debounceMs` value to reduce network calls.
+3. Wash your car.
+
+Some more questions are answered [in the docs](https://antrikshy.com/solid-suggest).
+
+## Docs + Recommendations
+
+Find [documentation and tips here](https://antrikshy.com/solid-suggest).
+
+## Development
+
+```
+npm install
+```
+
+... before anything else.
+
+```
+npm run devOnly
+```
+
+... runs a continuous watcher for changes to *library code* that transpiles TypeScript to a dist/ dir at project top level.
+
+```
+npm run devDemo
+```
+
+... runs a local server that you can use to see and iterate on the demo page at http://localhost:8000/docs/index.htm. This is a basic HTML page that imports some libraries from CDNs. Hot reload/replacement is not enabled, so it needs manual refreshing.
+
+```
+npm run devWithDemo
+```
+
+... runs both of the above at the same time.

package/dist/basic.css

@@ -0,0 +1,3 @@
+input {
+  background-color: red;
+}

package/dist/index.cjs

@@ -0,0 +1,123 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+
+var _tmpl$ = /*#__PURE__*/web.template(`<div class=s-sug-container role=combobox aria-haspopup=listbox><input type=search class=s-sug-search aria-autocomplete=list>`),
+  _tmpl$2 = /*#__PURE__*/web.template(`<ul class=s-sug-suggestions role=listbox>`),
+  _tmpl$3 = /*#__PURE__*/web.template(`<li class=s-sug-suggestion role=option>`);
+function Suggest(props) {
+  // Basic signals for component state
+  const [query, setQuery] = solidJs.createSignal('');
+  const [staged, setStaged] = solidJs.createSignal(null);
+  // Internal signal for user input, separate from query to handle optional debounce
+  const [debouncedQuery, setDebouncedQuery] = solidJs.createSignal('');
+  // Just a variable to store debounce timeout, if applicable
+  let debounceTimeout = null;
+  const suggestions = solidJs.createMemo(() => props.onQuery(debouncedQuery()));
+  const numSuggestions = solidJs.createMemo(() => suggestions().length);
+  function handleInput(e) {
+    const value = e.currentTarget.value;
+    setQuery(value);
+    if (typeof props.debounceMs === 'number' && props.debounceMs > 0) {
+      if (debounceTimeout) clearTimeout(debounceTimeout);
+      debounceTimeout = setTimeout(() => {
+        setDebouncedQuery(value);
+      }, props.debounceMs);
+    } else {
+      setDebouncedQuery(value);
+    }
+  }
+  function stageSuggestion(index) {
+    setStaged(index);
+  }
+  function stageNextSuggestion() {
+    setStaged(s => {
+      if (suggestions().length === 0) return null;
+      const current = s ?? -1;
+      return (current + 1) % numSuggestions();
+    });
+  }
+  function stagePrevSuggestion() {
+    setStaged(s => {
+      if (numSuggestions() === 0) return null;
+      const current = s ?? 0;
+      return (current - 1 + numSuggestions()) % numSuggestions();
+    });
+  }
+  function selectStagedSuggestion() {
+    const index = staged();
+    if (index !== null) {
+      props.onSelect(suggestions()[index]);
+      reset();
+    }
+  }
+  function reset() {
+    setQuery('');
+    setDebouncedQuery('');
+    setStaged(null);
+    if (debounceTimeout) clearTimeout(debounceTimeout);
+  }
+  // Handles special input for suggestion behavior
+  function handleKeyDown(e) {
+    const keyInputReversed = props.reverseKeyInput ?? false;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (keyInputReversed) {
+        stagePrevSuggestion();
+      } else {
+        stageNextSuggestion();
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (keyInputReversed) {
+        stageNextSuggestion();
+      } else {
+        stagePrevSuggestion();
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      selectStagedSuggestion();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      reset();
+    }
+    // else -> propagates up to allow input
+  }
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    web.addEventListener(_el$2, "keydown", handleKeyDown);
+    web.addEventListener(_el$2, "input", handleInput);
+    web.insert(_el$, (() => {
+      var _c$ = web.memo(() => numSuggestions() > 0);
+      return () => _c$() && (() => {
+        var _el$3 = _tmpl$2();
+        web.insert(_el$3, () => suggestions().map((s, i) => (() => {
+          var _el$4 = _tmpl$3();
+          web.addEventListener(_el$4, "click", selectStagedSuggestion);
+          web.addEventListener(_el$4, "mouseenter", () => stageSuggestion(i));
+          web.insert(_el$4, () => props.renderSuggestion(s));
+          web.effect(_p$ => {
+            var _v$ = staged() === i,
+              _v$2 = staged() === i ? 'true' : 'false';
+            _v$ !== _p$.e && web.setAttribute(_el$4, "data-staged", _p$.e = _v$);
+            _v$2 !== _p$.t && web.setAttribute(_el$4, "aria-selected", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$4;
+        })()));
+        return _el$3;
+      })();
+    })(), null);
+    web.effect(() => web.setAttribute(_el$, "aria-expanded", numSuggestions() > 0));
+    web.effect(() => _el$2.value = query());
+    return _el$;
+  })();
+}
+
+module.exports = Suggest;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.tsx"],"sourcesContent":["import { createMemo, createSignal } from 'solid-js'\n\nexport interface SuggestProps<T = string> {\n  onQuery: (query: string) => T[],  // Suggestions assumed ordered by client\n  onSelect: (suggestion: T) => void,\n  renderSuggestion: (suggestion: T) => HTMLElement,\n  reverseKeyInput?: boolean,\n  debounceMs?: number, // Debounce period in milliseconds\n}\n\nexport default function Suggest(props: SuggestProps) {\n  // Basic signals for component state\n  const [query, setQuery] = createSignal('');\n  const [staged, setStaged] = createSignal<number | null>(null);\n  // Internal signal for user input, separate from query to handle optional debounce\n  const [debouncedQuery, setDebouncedQuery] = createSignal('');\n\n  // Just a variable to store debounce timeout, if applicable\n  let debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  const suggestions = createMemo(() => props.onQuery(debouncedQuery()));\n  const numSuggestions = createMemo(() => suggestions().length);\n\n  function handleInput(e: Event) {\n    const value = (e.currentTarget as HTMLInputElement).value;\n    setQuery(value);\n    if (typeof props.debounceMs === 'number' && props.debounceMs > 0) {\n      if (debounceTimeout) clearTimeout(debounceTimeout);\n      debounceTimeout = setTimeout(() => {\n        setDebouncedQuery(value);\n      }, props.debounceMs);\n    } else {\n      setDebouncedQuery(value);\n    }\n  }\n\n  function stageSuggestion(index: number) {\n    setStaged(index);\n  }\n\n  function stageNextSuggestion() {\n    setStaged(s => {\n      if (suggestions().length === 0) return null;\n      const current = s ?? -1;\n      return (current + 1) % numSuggestions();\n    });\n  };\n\n  function stagePrevSuggestion() {\n    setStaged(s => {\n      if (numSuggestions() === 0) return null;\n      const current = s ?? 0;\n      return (current - 1 + numSuggestions()) % numSuggestions();\n    });\n  };\n\n  function selectStagedSuggestion() {\n    const index = staged()\n    if (index !== null) {\n      props.onSelect(suggestions()[index]);\n      reset();\n    }\n  }\n\n  function reset() {\n    setQuery('');\n    setDebouncedQuery('');\n    setStaged(null);\n    if (debounceTimeout) clearTimeout(debounceTimeout);\n  }\n\n  // Handles special input for suggestion behavior\n  function handleKeyDown(e: KeyboardEvent) {\n    const keyInputReversed = props.reverseKeyInput ?? false;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (keyInputReversed) {\n        stagePrevSuggestion();\n      } else {\n        stageNextSuggestion();\n      }\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      if (keyInputReversed) {\n        stageNextSuggestion();\n      } else {\n        stagePrevSuggestion();\n      }\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      selectStagedSuggestion();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      reset();\n    }\n    // else -> propagates up to allow input\n  }\n\n  return <div\n    class='s-sug-container'\n    role='combobox'\n    aria-expanded={numSuggestions() > 0}\n    aria-haspopup='listbox'\n  >\n    <input\n      type='search'\n      class='s-sug-search'\n      value={query()}\n      on:input={handleInput}\n      on:keydown={handleKeyDown}\n      aria-autocomplete='list'\n    />\n    {numSuggestions() > 0 &&\n      <ul class='s-sug-suggestions' role='listbox'>\n        {suggestions().map((s, i) => (\n          <li\n            class='s-sug-suggestion'\n            data-staged={staged() === i}\n            role='option'\n            on:mouseenter={() => stageSuggestion(i)}\n            on:click={selectStagedSuggestion}\n            aria-selected={staged() === i ? 'true' : 'false'}\n          >\n            {props.renderSuggestion(s)}\n          </li>)\n        )}\n      </ul>\n    }\n  </div>\n}\n"],"names":["Suggest","props","query","setQuery","createSignal","staged","setStaged","debouncedQuery","setDebouncedQuery","debounceTimeout","suggestions","createMemo","onQuery","numSuggestions","length","handleInput","e","value","currentTarget","debounceMs","clearTimeout","setTimeout","stageSuggestion","index","stageNextSuggestion","s","current","stagePrevSuggestion","selectStagedSuggestion","onSelect","reset","handleKeyDown","keyInputReversed","reverseKeyInput","key","preventDefault","_el$","_tmpl$","_el$2","firstChild","_$addEventListener","_$insert","_c$","_$memo","_el$3","_tmpl$2","map","i","_el$4","_tmpl$3","renderSuggestion","_$effect","_p$","_v$","_v$2","_$setAttribute","t","undefined"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export interface SuggestProps<T = string> {
+    onQuery: (query: string) => T[];
+    onSelect: (suggestion: T) => void;
+    renderSuggestion: (suggestion: T) => HTMLElement;
+    reverseKeyInput?: boolean;
+    debounceMs?: number;
+}
+export default function Suggest(props: SuggestProps): import("solid-js").JSX.Element;

package/dist/index.js

@@ -0,0 +1,121 @@
+import { template, addEventListener, insert, memo, effect, setAttribute } from 'solid-js/web';
+import { createSignal, createMemo } from 'solid-js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class=s-sug-container role=combobox aria-haspopup=listbox><input type=search class=s-sug-search aria-autocomplete=list>`),
+  _tmpl$2 = /*#__PURE__*/template(`<ul class=s-sug-suggestions role=listbox>`),
+  _tmpl$3 = /*#__PURE__*/template(`<li class=s-sug-suggestion role=option>`);
+function Suggest(props) {
+  // Basic signals for component state
+  const [query, setQuery] = createSignal('');
+  const [staged, setStaged] = createSignal(null);
+  // Internal signal for user input, separate from query to handle optional debounce
+  const [debouncedQuery, setDebouncedQuery] = createSignal('');
+  // Just a variable to store debounce timeout, if applicable
+  let debounceTimeout = null;
+  const suggestions = createMemo(() => props.onQuery(debouncedQuery()));
+  const numSuggestions = createMemo(() => suggestions().length);
+  function handleInput(e) {
+    const value = e.currentTarget.value;
+    setQuery(value);
+    if (typeof props.debounceMs === 'number' && props.debounceMs > 0) {
+      if (debounceTimeout) clearTimeout(debounceTimeout);
+      debounceTimeout = setTimeout(() => {
+        setDebouncedQuery(value);
+      }, props.debounceMs);
+    } else {
+      setDebouncedQuery(value);
+    }
+  }
+  function stageSuggestion(index) {
+    setStaged(index);
+  }
+  function stageNextSuggestion() {
+    setStaged(s => {
+      if (suggestions().length === 0) return null;
+      const current = s ?? -1;
+      return (current + 1) % numSuggestions();
+    });
+  }
+  function stagePrevSuggestion() {
+    setStaged(s => {
+      if (numSuggestions() === 0) return null;
+      const current = s ?? 0;
+      return (current - 1 + numSuggestions()) % numSuggestions();
+    });
+  }
+  function selectStagedSuggestion() {
+    const index = staged();
+    if (index !== null) {
+      props.onSelect(suggestions()[index]);
+      reset();
+    }
+  }
+  function reset() {
+    setQuery('');
+    setDebouncedQuery('');
+    setStaged(null);
+    if (debounceTimeout) clearTimeout(debounceTimeout);
+  }
+  // Handles special input for suggestion behavior
+  function handleKeyDown(e) {
+    const keyInputReversed = props.reverseKeyInput ?? false;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (keyInputReversed) {
+        stagePrevSuggestion();
+      } else {
+        stageNextSuggestion();
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (keyInputReversed) {
+        stageNextSuggestion();
+      } else {
+        stagePrevSuggestion();
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      selectStagedSuggestion();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      reset();
+    }
+    // else -> propagates up to allow input
+  }
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    addEventListener(_el$2, "keydown", handleKeyDown);
+    addEventListener(_el$2, "input", handleInput);
+    insert(_el$, (() => {
+      var _c$ = memo(() => numSuggestions() > 0);
+      return () => _c$() && (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => suggestions().map((s, i) => (() => {
+          var _el$4 = _tmpl$3();
+          addEventListener(_el$4, "click", selectStagedSuggestion);
+          addEventListener(_el$4, "mouseenter", () => stageSuggestion(i));
+          insert(_el$4, () => props.renderSuggestion(s));
+          effect(_p$ => {
+            var _v$ = staged() === i,
+              _v$2 = staged() === i ? 'true' : 'false';
+            _v$ !== _p$.e && setAttribute(_el$4, "data-staged", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$4, "aria-selected", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$4;
+        })()));
+        return _el$3;
+      })();
+    })(), null);
+    effect(() => setAttribute(_el$, "aria-expanded", numSuggestions() > 0));
+    effect(() => _el$2.value = query());
+    return _el$;
+  })();
+}
+
+export { Suggest as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import { createMemo, createSignal } from 'solid-js'\n\nexport interface SuggestProps<T = string> {\n  onQuery: (query: string) => T[],  // Suggestions assumed ordered by client\n  onSelect: (suggestion: T) => void,\n  renderSuggestion: (suggestion: T) => HTMLElement,\n  reverseKeyInput?: boolean,\n  debounceMs?: number, // Debounce period in milliseconds\n}\n\nexport default function Suggest(props: SuggestProps) {\n  // Basic signals for component state\n  const [query, setQuery] = createSignal('');\n  const [staged, setStaged] = createSignal<number | null>(null);\n  // Internal signal for user input, separate from query to handle optional debounce\n  const [debouncedQuery, setDebouncedQuery] = createSignal('');\n\n  // Just a variable to store debounce timeout, if applicable\n  let debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  const suggestions = createMemo(() => props.onQuery(debouncedQuery()));\n  const numSuggestions = createMemo(() => suggestions().length);\n\n  function handleInput(e: Event) {\n    const value = (e.currentTarget as HTMLInputElement).value;\n    setQuery(value);\n    if (typeof props.debounceMs === 'number' && props.debounceMs > 0) {\n      if (debounceTimeout) clearTimeout(debounceTimeout);\n      debounceTimeout = setTimeout(() => {\n        setDebouncedQuery(value);\n      }, props.debounceMs);\n    } else {\n      setDebouncedQuery(value);\n    }\n  }\n\n  function stageSuggestion(index: number) {\n    setStaged(index);\n  }\n\n  function stageNextSuggestion() {\n    setStaged(s => {\n      if (suggestions().length === 0) return null;\n      const current = s ?? -1;\n      return (current + 1) % numSuggestions();\n    });\n  };\n\n  function stagePrevSuggestion() {\n    setStaged(s => {\n      if (numSuggestions() === 0) return null;\n      const current = s ?? 0;\n      return (current - 1 + numSuggestions()) % numSuggestions();\n    });\n  };\n\n  function selectStagedSuggestion() {\n    const index = staged()\n    if (index !== null) {\n      props.onSelect(suggestions()[index]);\n      reset();\n    }\n  }\n\n  function reset() {\n    setQuery('');\n    setDebouncedQuery('');\n    setStaged(null);\n    if (debounceTimeout) clearTimeout(debounceTimeout);\n  }\n\n  // Handles special input for suggestion behavior\n  function handleKeyDown(e: KeyboardEvent) {\n    const keyInputReversed = props.reverseKeyInput ?? false;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (keyInputReversed) {\n        stagePrevSuggestion();\n      } else {\n        stageNextSuggestion();\n      }\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      if (keyInputReversed) {\n        stageNextSuggestion();\n      } else {\n        stagePrevSuggestion();\n      }\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      selectStagedSuggestion();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      reset();\n    }\n    // else -> propagates up to allow input\n  }\n\n  return <div\n    class='s-sug-container'\n    role='combobox'\n    aria-expanded={numSuggestions() > 0}\n    aria-haspopup='listbox'\n  >\n    <input\n      type='search'\n      class='s-sug-search'\n      value={query()}\n      on:input={handleInput}\n      on:keydown={handleKeyDown}\n      aria-autocomplete='list'\n    />\n    {numSuggestions() > 0 &&\n      <ul class='s-sug-suggestions' role='listbox'>\n        {suggestions().map((s, i) => (\n          <li\n            class='s-sug-suggestion'\n            data-staged={staged() === i}\n            role='option'\n            on:mouseenter={() => stageSuggestion(i)}\n            on:click={selectStagedSuggestion}\n            aria-selected={staged() === i ? 'true' : 'false'}\n          >\n            {props.renderSuggestion(s)}\n          </li>)\n        )}\n      </ul>\n    }\n  </div>\n}\n"],"names":["Suggest","props","query","setQuery","createSignal","staged","setStaged","debouncedQuery","setDebouncedQuery","debounceTimeout","suggestions","createMemo","onQuery","numSuggestions","length","handleInput","e","value","currentTarget","debounceMs","clearTimeout","setTimeout","stageSuggestion","index","stageNextSuggestion","s","current","stagePrevSuggestion","selectStagedSuggestion","onSelect","reset","handleKeyDown","keyInputReversed","reverseKeyInput","key","preventDefault","_el$","_tmpl$","_el$2","firstChild","_$addEventListener","_$insert","_c$","_$memo","_el$3","_tmpl$2","map","i","_el$4","_tmpl$3","renderSuggestion","_$effect","_p$","_v$","_v$2","_$setAttribute","t","undefined"],"mappings":";;;;;;AAUwB,SAAAA,OAAOA,CAACC,KAAmB,EAAA;AACjD;EACA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,YAAY,CAAC,EAAE,CAAC;EAC1C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGF,YAAY,CAAgB,IAAI,CAAC;AAC7D;EACA,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAGJ,YAAY,CAAC,EAAE,CAAC;AAE5D;EACA,IAAIK,eAAe,GAAyC,IAAI;AAEhE,EAAA,MAAMC,WAAW,GAAGC,UAAU,CAAC,MAAMV,KAAK,CAACW,OAAO,CAACL,cAAc,EAAE,CAAC,CAAC;EACrE,MAAMM,cAAc,GAAGF,UAAU,CAAC,MAAMD,WAAW,EAAE,CAACI,MAAM,CAAC;EAE7D,SAASC,WAAWA,CAACC,CAAQ,EAAA;AAC3B,IAAA,MAAMC,KAAK,GAAID,CAAC,CAACE,aAAkC,CAACD,KAAK;IACzDd,QAAQ,CAACc,KAAK,CAAC;AACf,IAAA,IAAI,OAAOhB,KAAK,CAACkB,UAAU,KAAK,QAAQ,IAAIlB,KAAK,CAACkB,UAAU,GAAG,CAAC,EAAE;AAChE,MAAA,IAAIV,eAAe,EAAEW,YAAY,CAACX,eAAe,CAAC;MAClDA,eAAe,GAAGY,UAAU,CAAC,MAAK;QAChCb,iBAAiB,CAACS,KAAK,CAAC;AAC1B,OAAC,EAAEhB,KAAK,CAACkB,UAAU,CAAC;AACtB,KAAC,MAAM;MACLX,iBAAiB,CAACS,KAAK,CAAC;AAC1B;AACF;EAEA,SAASK,eAAeA,CAACC,KAAa,EAAA;IACpCjB,SAAS,CAACiB,KAAK,CAAC;AAClB;EAEA,SAASC,mBAAmBA,GAAA;IAC1BlB,SAAS,CAACmB,CAAC,IAAG;MACZ,IAAIf,WAAW,EAAE,CAACI,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;AAC3C,MAAA,MAAMY,OAAO,GAAGD,CAAC,IAAI,EAAE;AACvB,MAAA,OAAO,CAACC,OAAO,GAAG,CAAC,IAAIb,cAAc,EAAE;AACzC,KAAC,CAAC;AACJ;EAEA,SAASc,mBAAmBA,GAAA;IAC1BrB,SAAS,CAACmB,CAAC,IAAG;AACZ,MAAA,IAAIZ,cAAc,EAAE,KAAK,CAAC,EAAE,OAAO,IAAI;AACvC,MAAA,MAAMa,OAAO,GAAGD,CAAC,IAAI,CAAC;MACtB,OAAO,CAACC,OAAO,GAAG,CAAC,GAAGb,cAAc,EAAE,IAAIA,cAAc,EAAE;AAC5D,KAAC,CAAC;AACJ;EAEA,SAASe,sBAAsBA,GAAA;AAC7B,IAAA,MAAML,KAAK,GAAGlB,MAAM,EAAE;IACtB,IAAIkB,KAAK,KAAK,IAAI,EAAE;MAClBtB,KAAK,CAAC4B,QAAQ,CAACnB,WAAW,EAAE,CAACa,KAAK,CAAC,CAAC;AACpCO,MAAAA,KAAK,EAAE;AACT;AACF;EAEA,SAASA,KAAKA,GAAA;IACZ3B,QAAQ,CAAC,EAAE,CAAC;IACZK,iBAAiB,CAAC,EAAE,CAAC;IACrBF,SAAS,CAAC,IAAI,CAAC;AACf,IAAA,IAAIG,eAAe,EAAEW,YAAY,CAACX,eAAe,CAAC;AACpD;AAEA;EACA,SAASsB,aAAaA,CAACf,CAAgB,EAAA;AACrC,IAAA,MAAMgB,gBAAgB,GAAG/B,KAAK,CAACgC,eAAe,IAAI,KAAK;AACvD,IAAA,IAAIjB,CAAC,CAACkB,GAAG,KAAK,WAAW,EAAE;MACzBlB,CAAC,CAACmB,cAAc,EAAE;AAClB,MAAA,IAAIH,gBAAgB,EAAE;AACpBL,QAAAA,mBAAmB,EAAE;AACvB,OAAC,MAAM;AACLH,QAAAA,mBAAmB,EAAE;AACvB;AACF,KAAC,MAAM,IAAIR,CAAC,CAACkB,GAAG,KAAK,SAAS,EAAE;MAC9BlB,CAAC,CAACmB,cAAc,EAAE;AAClB,MAAA,IAAIH,gBAAgB,EAAE;AACpBR,QAAAA,mBAAmB,EAAE;AACvB,OAAC,MAAM;AACLG,QAAAA,mBAAmB,EAAE;AACvB;AACF,KAAC,MAAM,IAAIX,CAAC,CAACkB,GAAG,KAAK,OAAO,EAAE;MAC5BlB,CAAC,CAACmB,cAAc,EAAE;AAClBP,MAAAA,sBAAsB,EAAE;AAC1B,KAAC,MAAM,IAAIZ,CAAC,CAACkB,GAAG,KAAK,QAAQ,EAAE;MAC7BlB,CAAC,CAACmB,cAAc,EAAE;AAClBL,MAAAA,KAAK,EAAE;AACT;AACA;AACF;AAEA,EAAA,OAAA,CAAA,MAAA;IAAA,IAAAM,IAAA,GAAAC,MAAA,EAAA;MAAAC,KAAA,GAAAF,IAAA,CAAAG,UAAA;IAAAC,gBAAA,CAAAF,KAAA,EAAA,SAAA,EAWgBP,aAAa,CAAA;IAAAS,gBAAA,CAAAF,KAAA,EAAA,OAAA,EADfvB,WAAW,CAAA;AAAA0B,IAAAA,MAAA,CAAAL,IAAA,EAAA,CAAA,MAAA;MAAA,IAAAM,GAAA,GAAAC,IAAA,CAAA,MAItB9B,cAAc,EAAE,GAAG,CAAC,CAAA;AAAA,MAAA,OAAA,MAApB6B,GAAA,EAAA,IAAA,CAAA,MAAA;QAAA,IAAAE,KAAA,GAAAC,OAAA,EAAA;AAAAJ,QAAAA,MAAA,CAAAG,KAAA,EAEIlC,MAAAA,WAAW,EAAE,CAACoC,GAAG,CAAC,CAACrB,CAAC,EAAEsB,CAAC,KAAA,CAAA,MAAA;UAAA,IAAAC,KAAA,GAAAC,OAAA,EAAA;UAAAT,gBAAA,CAAAQ,KAAA,EAAA,OAAA,EAMVpB,sBAAsB,CAAA;AAAAY,UAAAA,gBAAA,CAAAQ,KAAA,EAAA,YAAA,EADjB,MAAM1B,eAAe,CAACyB,CAAC,CAAC,CAAA;UAAAN,MAAA,CAAAO,KAAA,EAItC/C,MAAAA,KAAK,CAACiD,gBAAgB,CAACzB,CAAC,CAAC,CAAA;AAAA0B,UAAAA,MAAA,CAAAC,GAAA,IAAA;AAAA,YAAA,IAAAC,GAAA,GANbhD,MAAM,EAAE,KAAK0C,CAAC;cAAAO,IAAA,GAIZjD,MAAM,EAAE,KAAK0C,CAAC,GAAG,MAAM,GAAG,OAAO;AAAAM,YAAAA,GAAA,KAAAD,GAAA,CAAApC,CAAA,IAAAuC,YAAA,CAAAP,KAAA,EAAAI,aAAAA,EAAAA,GAAA,CAAApC,CAAA,GAAAqC,GAAA,CAAA;AAAAC,YAAAA,IAAA,KAAAF,GAAA,CAAAI,CAAA,IAAAD,YAAA,CAAAP,KAAA,EAAAI,eAAAA,EAAAA,GAAA,CAAAI,CAAA,GAAAF,IAAA,CAAA;AAAA,YAAA,OAAAF,GAAA;AAAA,WAAA,EAAA;AAAApC,YAAAA,CAAA,EAAAyC,SAAA;AAAAD,YAAAA,CAAA,EAAAC;AAAA,WAAA,CAAA;AAAA,UAAA,OAAAT,KAAA;AAAA,SAAA,GAG5C,CACP,CAAA;AAAA,QAAA,OAAAJ,KAAA;OAEL,GAAA;AAAA,KAAA,GAAA,EAAA,IAAA,CAAA;IAAAO,MAAA,CAAA,MAAAI,YAAA,CAAAnB,IAAA,mBA1BevB,cAAc,EAAE,GAAG,CAAC,CAAA,CAAA;AAAAsC,IAAAA,MAAA,OAAAb,KAAA,CAAArB,KAAA,GAM1Bf,KAAK,EAAE,CAAA;AAAA,IAAA,OAAAkC,IAAA;AAAA,GAAA,GAAA;AAsBpB;;;;"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "solid-suggest",
+  "version": "1.1.0",
+  "description": "Headless search suggestion dropdown UI library for SolidJS",
+  "homepage": "https://antrikshy.com/solid-suggest",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Antrikshy/solid-suggest.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Antrikshy/solid-suggest/issues"
+  },
+  "keywords": [
+    "solidjs",
+    "search",
+    "suggestions",
+    "dropdown",
+    "autocomplete",
+    "ui"
+  ],
+  "author": "Antriksh Yadav",
+  "license": "ISC",
+  "type": "module",
+  "main": "./dist/main.cjs",
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs",
+      "types": "./dist/main.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "devOnly": "rollup -c -w",
+    "devDemo": "npx http-server -p 8000",
+    "devWithDemo": "concurrently \"npm:devOnly\" \"npm:devDemo\"",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.x"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.4",
+    "@babel/preset-typescript": "^7.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "babel-preset-solid": "^1.9.6",
+    "concurrently": "^9.2.0",
+    "rollup": "^4.42.0",
+    "solid-js": "^1.9.7",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
+  }
+}