@pro6pp/infer-react 0.0.2-beta.10 → 0.0.2-beta.12

package/dist/index.cjs

@@ -83,7 +83,6 @@ var InferCore = class {
     __publicField(this, "state");
     __publicField(this, "abortController", null);
     __publicField(this, "debouncedFetch");
-    __publicField(this, "isSelecting", false);
     this.country = config.country;
     this.authKey = config.authKey;
     this.explicitApiUrl = config.apiUrl;
@@ -107,10 +106,6 @@ var InferCore = class {
    * @param value The raw string from the input field.
    */
   handleInput(value) {
-    if (this.isSelecting) {
-      this.isSelecting = false;
-      return;
-    }
     this.currentLimit = this.baseLimit;
     const isEditingFinal = this.state.stage === "final" && value !== this.state.query;
     this.updateState({
@@ -139,7 +134,7 @@ var InferCore = class {
    * Supports:
    * - `ArrowUp`/`ArrowDown`: Navigate through the suggestion list.
    * - `Enter`: Select the currently highlighted suggestion.
-   * - `Space`: Automatically inserts a comma if a numeric house number is detected.
+   * - `Space`: Automatically inserts a comma if a numeric street number is detected.
    * @param event The keyboard event from the input element.
    */
   handleKeyDown(event) {
@@ -201,14 +196,13 @@ var InferCore = class {
     }
     const valueObj = typeof item !== "string" && typeof item.value === "object" ? item.value : void 0;
     const isFullResult = !!valueObj && Object.keys(valueObj).length > 0;
-    this.isSelecting = true;
     if (this.state.stage === "final" || isFullResult) {
       let finalQuery = label;
       if (valueObj && Object.keys(valueObj).length > 0) {
-        const { street, street_number, house_number, city } = valueObj;
-        const number = street_number || house_number;
-        if (street && number && city) {
-          finalQuery = `${street} ${number}, ${city}`;
+        const { street, street_number, city, addition } = valueObj;
+        if (street && street_number && city) {
+          const suffix = addition ? ` ${addition}` : "";
+          finalQuery = `${street} ${street_number}${suffix}, ${city}`;
         }
       }
       this.finishSelection(finalQuery, valueObj);
@@ -221,7 +215,7 @@ var InferCore = class {
   shouldAutoInsertComma(currentVal) {
     const isStartOfSegmentAndNumeric = !currentVal.includes(",") && PATTERNS.DIGITS_1_3.test(currentVal.trim());
     if (isStartOfSegmentAndNumeric) return true;
-    if (this.state.stage === "house_number") {
+    if (this.state.stage === "street_number") {
       const currentFragment = this.getCurrentFragment(currentVal);
       return PATTERNS.DIGITS_1_3.test(currentFragment);
     }
@@ -248,7 +242,12 @@ var InferCore = class {
         nextQuery = `${subtitle}, ${text}, `;
       } else {
         const prefix = this.getQueryPrefix(query);
-        nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+        const shouldAddSubtitle = !prefix || !prefix.includes(subtitle);
+        if (shouldAddSubtitle) {
+          nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+        } else {
+          nextQuery = prefix ? `${prefix} ${text}, ` : `${text}, `;
+        }
       }
       this.updateQueryAndFetch(nextQuery);
       return;
@@ -258,12 +257,12 @@ var InferCore = class {
       return;
     }
     const hasComma = query.includes(",");
-    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "street_number_first");
     if (isFirstSegment) {
       nextQuery = `${text}, `;
     } else {
       nextQuery = this.replaceLastSegment(query, text);
-      if (stage !== "house_number") {
+      if (stage !== "street_number") {
         nextQuery += ", ";
       }
     }
@@ -325,8 +324,6 @@ var InferCore = class {
       stage: data.stage,
       isLoading: false
     };
-    let autoSelect = false;
-    let autoSelectItem = null;
     const rawSuggestions = data.suggestions || [];
     const uniqueSuggestions = [];
     const seen = /* @__PURE__ */ new Set();
@@ -347,27 +344,11 @@ var InferCore = class {
       newState.suggestions = uniqueSuggestions;
       newState.cities = [];
       newState.streets = [];
-      const firstItem = uniqueSuggestions[0];
-      const hasFullValue = firstItem && typeof firstItem.value === "object" && firstItem.value !== null && Object.keys(firstItem.value).length > 0;
-      if ((data.stage === "final" || hasFullValue) && uniqueSuggestions.length === 1) {
-        autoSelect = true;
-        autoSelectItem = firstItem;
-      }
     }
     newState.isValid = data.stage === "final";
-    if (autoSelect && autoSelectItem) {
-      newState.query = autoSelectItem.label;
-      newState.suggestions = [];
-      newState.cities = [];
-      newState.streets = [];
-      newState.isValid = true;
-      newState.hasMore = false;
-      this.isSelecting = true;
-      this.updateState(newState);
-      const val = typeof autoSelectItem.value === "object" ? autoSelectItem.value : autoSelectItem.label;
-      this.onSelect(val);
-    } else {
-      this.updateState(newState);
+    this.updateState(newState);
+    if (newState.isValid && uniqueSuggestions.length === 1) {
+      this.selectItem(uniqueSuggestions[0]);
     }
   }
   updateQueryAndFetch(nextQuery) {
@@ -410,6 +391,36 @@ var InferCore = class {
   }
 };
 
+// ../core/src/highlight.ts
+function getHighlightSegments(text, query) {
+  if (!query || !text) return [{ text, match: false }];
+  const segments = [];
+  const normalizedText = text.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+  let queryCursor = 0;
+  let unmatchedCursor = 0;
+  for (let textCursor = 0; textCursor < text.length; textCursor++) {
+    const isMatch = queryCursor < query.length && normalizedText[textCursor] === normalizedQuery[queryCursor];
+    if (!isMatch) continue;
+    const hasPrecedingUnmatched = textCursor > unmatchedCursor;
+    if (hasPrecedingUnmatched) {
+      segments.push({ text: text.slice(unmatchedCursor, textCursor), match: false });
+    }
+    segments.push({ text: text[textCursor], match: true });
+    queryCursor++;
+    unmatchedCursor = textCursor + 1;
+  }
+  const hasRemainingText = unmatchedCursor < text.length;
+  if (hasRemainingText) {
+    segments.push({ text: text.slice(unmatchedCursor), match: false });
+  }
+  const isFullMatch = queryCursor === query.length;
+  if (!isFullMatch) {
+    return [{ text, match: false }];
+  }
+  return segments;
+}
+
 // ../core/src/default-styles.ts
 var DEFAULT_STYLES = `
   .pro6pp-wrapper {
@@ -417,18 +428,20 @@ var DEFAULT_STYLES = `
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     width: 100%;
+    -webkit-tap-highlight-color: transparent;
   }
   .pro6pp-wrapper * {
     box-sizing: border-box;
   }
   .pro6pp-input {
     width: 100%;
-    padding: 10px 12px;
+    padding: 12px 14px;
     padding-right: 48px;
     border: 1px solid #e0e0e0;
-    border-radius: 4px;
+    border-radius: 8px;
     font-size: 16px;
     line-height: 1.5;
+    appearance: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
   .pro6pp-input:focus {
@@ -439,12 +452,11 @@ var DEFAULT_STYLES = `
 
   .pro6pp-input-addons {
     position: absolute;
-    right: 6px;
+    right: 4px;
     top: 0;
     bottom: 0;
     display: flex;
     align-items: center;
-    gap: 2px;
     pointer-events: none;
   }
   .pro6pp-input-addons > * {
@@ -454,32 +466,33 @@ var DEFAULT_STYLES = `
   .pro6pp-clear-button {
     background: none;
     border: none;
-    width: 28px;
-    height: 28px;
+    width: 40px;
+    height: 40px;
     cursor: pointer;
     color: #a3a3a3;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    transition: color 0.2s, background-color 0.2s, transform 0.1s;
+    transition: color 0.2s, background-color 0.2s;
+    touch-action: manipulation;
   }
-  .pro6pp-clear-button:hover {
-    color: #1f2937;
-    background-color: #f3f4f6;
+
+  @media (hover: hover) {
+    .pro6pp-clear-button:hover {
+      color: #1f2937;
+      background-color: #f3f4f6;
+    }
   }
+
   .pro6pp-clear-button:active {
-    transform: scale(0.92);
-  }
-  .pro6pp-clear-button svg {
-    width: 18px;
-    height: 18px;
+    background-color: #f3f4f6;
   }
 
   .pro6pp-loader {
-    width: 18px;
-    height: 18px;
-    margin: 0 4px;
+    width: 20px;
+    height: 20px;
+    margin: 0 8px;
     border: 2px solid #e0e0e0;
     border-top-color: #6b7280;
     border-radius: 50%;
@@ -492,38 +505,58 @@ var DEFAULT_STYLES = `
     top: 100%;
     left: 0;
     right: 0;
-    z-index: 9999;
     margin-top: 4px;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    max-height: 300px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    z-index: 9999;
+    padding: 0;
+    max-height: 260px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
   }
+
+  @media (max-height: 500px) {
+    .pro6pp-dropdown {
+      max-height: 140px;
+    }
+  }
+
   .pro6pp-list {
-    list-style: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    flex-grow: 1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
   }
+
   .pro6pp-item {
-    padding: 12px 16px;
+    padding: 12px 14px;
     cursor: pointer;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    color: #111827;
     font-size: 14px;
-    line-height: 1.2;
-    white-space: nowrap;
-    overflow: hidden;
+    color: #374151;
+    border-bottom: 1px solid #f3f4f6;
+    transition: background-color 0.1s;
+    flex-shrink: 0;
+  }
+
+  .pro6pp-item:last-child {
+    border-bottom: none;
+  }
+
+  @media (hover: hover) {
+    .pro6pp-item:hover, .pro6pp-item--active {
+      background-color: #f9fafb;
+    }
   }
-  .pro6pp-item:hover, .pro6pp-item--active {
-    background-color: #f9fafb;
+
+  .pro6pp-item:active {
+    background-color: #f3f4f6;
   }
+
   .pro6pp-item__label {
     font-weight: 500;
     flex-shrink: 0;
@@ -531,37 +564,37 @@ var DEFAULT_STYLES = `
   .pro6pp-item__subtitle {
     font-size: 14px;
     color: #6b7280;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-shrink: 1;
+    flex-grow: 1;
   }
   .pro6pp-item__chevron {
-    margin-left: auto;
+    color: #d1d5db;
     display: flex;
     align-items: center;
-    color: #9ca3af;
-    padding-left: 8px;
+    margin-left: auto;
   }
+
   .pro6pp-no-results {
-    padding: 16px;
+    padding: 24px 16px;
     color: #6b7280;
-    font-size: 14px;
+    font-size: 15px;
     text-align: center;
   }
+
   .pro6pp-load-more {
     width: 100%;
-    padding: 10px;
+    padding: 14px;
     background: #f9fafb;
     border: none;
     border-top: 1px solid #e0e0e0;
     color: #3b82f6;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
-    transition: background-color 0.2s;
     flex-shrink: 0;
+    touch-action: manipulation;
   }
-  .pro6pp-load-more:hover {
+
+  .pro6pp-load-more:active {
     background-color: #f3f4f6;
   }
 
@@ -571,6 +604,12 @@ var DEFAULT_STYLES = `
 `;
 
 // src/index.tsx
+var HighlightedText = ({ text, query }) => {
+  const segments = (0, import_react.useMemo)(() => getHighlightSegments(text, query), [text, query]);
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pro6pp-item__label" }, segments.map(
+    (seg, i) => seg.match ? /* @__PURE__ */ import_react.default.createElement("strong", { key: i, className: "pro6pp-item__label--match" }, seg.text) : seg.text
+  ));
+};
 function useInfer(config) {
   const [state, setState] = (0, import_react.useState)(INITIAL_STATE);
   const callbacksRef = (0, import_react.useRef)({
@@ -688,6 +727,11 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
         className: "pro6pp-input",
         placeholder,
         autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "none",
+        spellCheck: "false",
+        inputMode: "search",
+        enterKeyHint: "search",
         ...inputProps,
         ...coreInputProps,
         onFocus: (e) => {
@@ -739,7 +783,7 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => handleSelect(item)
           },
-          renderItem ? renderItem(item, isActive) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("span", { className: "pro6pp-item__label" }, item.label), secondaryText && /* @__PURE__ */ import_react.default.createElement("span", { className: "pro6pp-item__subtitle" }, ", ", secondaryText), showChevron && /* @__PURE__ */ import_react.default.createElement("div", { className: "pro6pp-item__chevron" }, /* @__PURE__ */ import_react.default.createElement(
+          renderItem ? renderItem(item, isActive) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(HighlightedText, { text: item.label, query: state.query }), secondaryText && /* @__PURE__ */ import_react.default.createElement("span", { className: "pro6pp-item__subtitle" }, ", ", secondaryText), showChevron && /* @__PURE__ */ import_react.default.createElement("div", { className: "pro6pp-item__chevron" }, /* @__PURE__ */ import_react.default.createElement(
             "svg",
             {
               width: "16",

package/dist/index.js

@@ -57,7 +57,6 @@ var InferCore = class {
     __publicField(this, "state");
     __publicField(this, "abortController", null);
     __publicField(this, "debouncedFetch");
-    __publicField(this, "isSelecting", false);
     this.country = config.country;
     this.authKey = config.authKey;
     this.explicitApiUrl = config.apiUrl;
@@ -81,10 +80,6 @@ var InferCore = class {
    * @param value The raw string from the input field.
    */
   handleInput(value) {
-    if (this.isSelecting) {
-      this.isSelecting = false;
-      return;
-    }
     this.currentLimit = this.baseLimit;
     const isEditingFinal = this.state.stage === "final" && value !== this.state.query;
     this.updateState({
@@ -113,7 +108,7 @@ var InferCore = class {
    * Supports:
    * - `ArrowUp`/`ArrowDown`: Navigate through the suggestion list.
    * - `Enter`: Select the currently highlighted suggestion.
-   * - `Space`: Automatically inserts a comma if a numeric house number is detected.
+   * - `Space`: Automatically inserts a comma if a numeric street number is detected.
    * @param event The keyboard event from the input element.
    */
   handleKeyDown(event) {
@@ -175,14 +170,13 @@ var InferCore = class {
     }
     const valueObj = typeof item !== "string" && typeof item.value === "object" ? item.value : void 0;
     const isFullResult = !!valueObj && Object.keys(valueObj).length > 0;
-    this.isSelecting = true;
     if (this.state.stage === "final" || isFullResult) {
       let finalQuery = label;
       if (valueObj && Object.keys(valueObj).length > 0) {
-        const { street, street_number, house_number, city } = valueObj;
-        const number = street_number || house_number;
-        if (street && number && city) {
-          finalQuery = `${street} ${number}, ${city}`;
+        const { street, street_number, city, addition } = valueObj;
+        if (street && street_number && city) {
+          const suffix = addition ? ` ${addition}` : "";
+          finalQuery = `${street} ${street_number}${suffix}, ${city}`;
         }
       }
       this.finishSelection(finalQuery, valueObj);
@@ -195,7 +189,7 @@ var InferCore = class {
   shouldAutoInsertComma(currentVal) {
     const isStartOfSegmentAndNumeric = !currentVal.includes(",") && PATTERNS.DIGITS_1_3.test(currentVal.trim());
     if (isStartOfSegmentAndNumeric) return true;
-    if (this.state.stage === "house_number") {
+    if (this.state.stage === "street_number") {
       const currentFragment = this.getCurrentFragment(currentVal);
       return PATTERNS.DIGITS_1_3.test(currentFragment);
     }
@@ -222,7 +216,12 @@ var InferCore = class {
         nextQuery = `${subtitle}, ${text}, `;
       } else {
         const prefix = this.getQueryPrefix(query);
-        nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+        const shouldAddSubtitle = !prefix || !prefix.includes(subtitle);
+        if (shouldAddSubtitle) {
+          nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+        } else {
+          nextQuery = prefix ? `${prefix} ${text}, ` : `${text}, `;
+        }
       }
       this.updateQueryAndFetch(nextQuery);
       return;
@@ -232,12 +231,12 @@ var InferCore = class {
       return;
     }
     const hasComma = query.includes(",");
-    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "street_number_first");
     if (isFirstSegment) {
       nextQuery = `${text}, `;
     } else {
       nextQuery = this.replaceLastSegment(query, text);
-      if (stage !== "house_number") {
+      if (stage !== "street_number") {
         nextQuery += ", ";
       }
     }
@@ -299,8 +298,6 @@ var InferCore = class {
       stage: data.stage,
       isLoading: false
     };
-    let autoSelect = false;
-    let autoSelectItem = null;
     const rawSuggestions = data.suggestions || [];
     const uniqueSuggestions = [];
     const seen = /* @__PURE__ */ new Set();
@@ -321,27 +318,11 @@ var InferCore = class {
       newState.suggestions = uniqueSuggestions;
       newState.cities = [];
       newState.streets = [];
-      const firstItem = uniqueSuggestions[0];
-      const hasFullValue = firstItem && typeof firstItem.value === "object" && firstItem.value !== null && Object.keys(firstItem.value).length > 0;
-      if ((data.stage === "final" || hasFullValue) && uniqueSuggestions.length === 1) {
-        autoSelect = true;
-        autoSelectItem = firstItem;
-      }
     }
     newState.isValid = data.stage === "final";
-    if (autoSelect && autoSelectItem) {
-      newState.query = autoSelectItem.label;
-      newState.suggestions = [];
-      newState.cities = [];
-      newState.streets = [];
-      newState.isValid = true;
-      newState.hasMore = false;
-      this.isSelecting = true;
-      this.updateState(newState);
-      const val = typeof autoSelectItem.value === "object" ? autoSelectItem.value : autoSelectItem.label;
-      this.onSelect(val);
-    } else {
-      this.updateState(newState);
+    this.updateState(newState);
+    if (newState.isValid && uniqueSuggestions.length === 1) {
+      this.selectItem(uniqueSuggestions[0]);
     }
   }
   updateQueryAndFetch(nextQuery) {
@@ -384,6 +365,36 @@ var InferCore = class {
   }
 };
 
+// ../core/src/highlight.ts
+function getHighlightSegments(text, query) {
+  if (!query || !text) return [{ text, match: false }];
+  const segments = [];
+  const normalizedText = text.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+  let queryCursor = 0;
+  let unmatchedCursor = 0;
+  for (let textCursor = 0; textCursor < text.length; textCursor++) {
+    const isMatch = queryCursor < query.length && normalizedText[textCursor] === normalizedQuery[queryCursor];
+    if (!isMatch) continue;
+    const hasPrecedingUnmatched = textCursor > unmatchedCursor;
+    if (hasPrecedingUnmatched) {
+      segments.push({ text: text.slice(unmatchedCursor, textCursor), match: false });
+    }
+    segments.push({ text: text[textCursor], match: true });
+    queryCursor++;
+    unmatchedCursor = textCursor + 1;
+  }
+  const hasRemainingText = unmatchedCursor < text.length;
+  if (hasRemainingText) {
+    segments.push({ text: text.slice(unmatchedCursor), match: false });
+  }
+  const isFullMatch = queryCursor === query.length;
+  if (!isFullMatch) {
+    return [{ text, match: false }];
+  }
+  return segments;
+}
+
 // ../core/src/default-styles.ts
 var DEFAULT_STYLES = `
   .pro6pp-wrapper {
@@ -391,18 +402,20 @@ var DEFAULT_STYLES = `
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     width: 100%;
+    -webkit-tap-highlight-color: transparent;
   }
   .pro6pp-wrapper * {
     box-sizing: border-box;
   }
   .pro6pp-input {
     width: 100%;
-    padding: 10px 12px;
+    padding: 12px 14px;
     padding-right: 48px;
     border: 1px solid #e0e0e0;
-    border-radius: 4px;
+    border-radius: 8px;
     font-size: 16px;
     line-height: 1.5;
+    appearance: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
   .pro6pp-input:focus {
@@ -413,12 +426,11 @@ var DEFAULT_STYLES = `
 
   .pro6pp-input-addons {
     position: absolute;
-    right: 6px;
+    right: 4px;
     top: 0;
     bottom: 0;
     display: flex;
     align-items: center;
-    gap: 2px;
     pointer-events: none;
   }
   .pro6pp-input-addons > * {
@@ -428,32 +440,33 @@ var DEFAULT_STYLES = `
   .pro6pp-clear-button {
     background: none;
     border: none;
-    width: 28px;
-    height: 28px;
+    width: 40px;
+    height: 40px;
     cursor: pointer;
     color: #a3a3a3;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    transition: color 0.2s, background-color 0.2s, transform 0.1s;
+    transition: color 0.2s, background-color 0.2s;
+    touch-action: manipulation;
   }
-  .pro6pp-clear-button:hover {
-    color: #1f2937;
-    background-color: #f3f4f6;
+
+  @media (hover: hover) {
+    .pro6pp-clear-button:hover {
+      color: #1f2937;
+      background-color: #f3f4f6;
+    }
   }
+
   .pro6pp-clear-button:active {
-    transform: scale(0.92);
-  }
-  .pro6pp-clear-button svg {
-    width: 18px;
-    height: 18px;
+    background-color: #f3f4f6;
   }
 
   .pro6pp-loader {
-    width: 18px;
-    height: 18px;
-    margin: 0 4px;
+    width: 20px;
+    height: 20px;
+    margin: 0 8px;
     border: 2px solid #e0e0e0;
     border-top-color: #6b7280;
     border-radius: 50%;
@@ -466,38 +479,58 @@ var DEFAULT_STYLES = `
     top: 100%;
     left: 0;
     right: 0;
-    z-index: 9999;
     margin-top: 4px;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    max-height: 300px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    z-index: 9999;
+    padding: 0;
+    max-height: 260px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
   }
+
+  @media (max-height: 500px) {
+    .pro6pp-dropdown {
+      max-height: 140px;
+    }
+  }
+
   .pro6pp-list {
-    list-style: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    flex-grow: 1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
   }
+
   .pro6pp-item {
-    padding: 12px 16px;
+    padding: 12px 14px;
     cursor: pointer;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    color: #111827;
     font-size: 14px;
-    line-height: 1.2;
-    white-space: nowrap;
-    overflow: hidden;
+    color: #374151;
+    border-bottom: 1px solid #f3f4f6;
+    transition: background-color 0.1s;
+    flex-shrink: 0;
+  }
+
+  .pro6pp-item:last-child {
+    border-bottom: none;
+  }
+
+  @media (hover: hover) {
+    .pro6pp-item:hover, .pro6pp-item--active {
+      background-color: #f9fafb;
+    }
   }
-  .pro6pp-item:hover, .pro6pp-item--active {
-    background-color: #f9fafb;
+
+  .pro6pp-item:active {
+    background-color: #f3f4f6;
   }
+
   .pro6pp-item__label {
     font-weight: 500;
     flex-shrink: 0;
@@ -505,37 +538,37 @@ var DEFAULT_STYLES = `
   .pro6pp-item__subtitle {
     font-size: 14px;
     color: #6b7280;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-shrink: 1;
+    flex-grow: 1;
   }
   .pro6pp-item__chevron {
-    margin-left: auto;
+    color: #d1d5db;
     display: flex;
     align-items: center;
-    color: #9ca3af;
-    padding-left: 8px;
+    margin-left: auto;
   }
+
   .pro6pp-no-results {
-    padding: 16px;
+    padding: 24px 16px;
     color: #6b7280;
-    font-size: 14px;
+    font-size: 15px;
     text-align: center;
   }
+
   .pro6pp-load-more {
     width: 100%;
-    padding: 10px;
+    padding: 14px;
     background: #f9fafb;
     border: none;
     border-top: 1px solid #e0e0e0;
     color: #3b82f6;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
-    transition: background-color 0.2s;
     flex-shrink: 0;
+    touch-action: manipulation;
   }
-  .pro6pp-load-more:hover {
+
+  .pro6pp-load-more:active {
     background-color: #f3f4f6;
   }
 
@@ -545,6 +578,12 @@ var DEFAULT_STYLES = `
 `;
 
 // src/index.tsx
+var HighlightedText = ({ text, query }) => {
+  const segments = useMemo(() => getHighlightSegments(text, query), [text, query]);
+  return /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__label" }, segments.map(
+    (seg, i) => seg.match ? /* @__PURE__ */ React.createElement("strong", { key: i, className: "pro6pp-item__label--match" }, seg.text) : seg.text
+  ));
+};
 function useInfer(config) {
   const [state, setState] = useState(INITIAL_STATE);
   const callbacksRef = useRef({
@@ -662,6 +701,11 @@ var Pro6PPInfer = forwardRef(
         className: "pro6pp-input",
         placeholder,
         autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "none",
+        spellCheck: "false",
+        inputMode: "search",
+        enterKeyHint: "search",
         ...inputProps,
         ...coreInputProps,
         onFocus: (e) => {
@@ -713,7 +757,7 @@ var Pro6PPInfer = forwardRef(
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => handleSelect(item)
           },
-          renderItem ? renderItem(item, isActive) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__label" }, item.label), secondaryText && /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__subtitle" }, ", ", secondaryText), showChevron && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-item__chevron" }, /* @__PURE__ */ React.createElement(
+          renderItem ? renderItem(item, isActive) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HighlightedText, { text: item.label, query: state.query }), secondaryText && /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__subtitle" }, ", ", secondaryText), showChevron && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-item__chevron" }, /* @__PURE__ */ React.createElement(
             "svg",
             {
               width: "16",

package/package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/pro6pp/infer-sdk/issues"
   },
   "sideEffects": false,
-  "version": "0.0.2-beta.10",
+  "version": "0.0.2-beta.12",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@pro6pp/infer-core": "0.0.2-beta.8"
+    "@pro6pp/infer-core": "0.0.2-beta.10"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",