@pro6pp/infer-react 0.0.2-beta.5 → 0.0.2-beta.7

package/README.md

@@ -11,13 +11,48 @@ npm install @pro6pp/infer-react
 
 ## Usage
 
-This library handles all the logic (state, API calls, debouncing) but doesn't render anything. You are responsible for rendering the input and the dropdown list using your own styling.
+The `Pro6PPInfer` component provides a styled address autocomplete input.
 
 ```tsx
 import React from 'react';
-import { useInfer } from '@pro6pp/infer-react';
+import { Pro6PPInfer } from '@pro6pp/infer-react';
 
 const AddressForm = () => {
+  return (
+    <div className="form-group">
+      <label>Search Address</label>
+      <Pro6PPInfer
+        authKey="YOUR_AUTH_KEY"
+        country="NL"
+        onSelect={(selection) => console.log('Selected:', selection)}
+        placeholder="Type a Dutch address..."
+      />
+    </div>
+  );
+};
+```
+
+You can customize the appearance of the component via the following props:
+
+| Prop                   | Description                                                                               |
+| :--------------------- | :---------------------------------------------------------------------------------------- |
+| `className`            | Optional CSS class name for the wrapper `div`.                                            |
+| `disableDefaultStyles` | If `true`, prevents the automatic injection of the default CSS theme.                     |
+| `placeholder`          | Custom placeholder text for the input field.                                              |
+| `noResultsText`        | The text to display when no suggestions are found.                                        |
+| `renderItem`           | A custom render function for suggestion items, receiving the `item` and `isActive` state. |
+| `renderNoResults`      | A custom render function for the empty state, receiving the current `state`.              |
+
+---
+
+Alternatively, you can use the headless `useInfer` hook.
+This hook handles all the logic (state, API calls, debouncing, keyboard navigation), but allows you to build your own custom UI.
+
+```tsx
+import React from 'react';
+import { useInfer } from '@pro6pp/infer-react';
+
+const CustomAddressForm = () => {
   const { state, inputProps, selectItem } = useInfer({
     authKey: 'YOUR_AUTH_KEY',
     country: 'NL',
@@ -28,19 +63,22 @@ const AddressForm = () => {
     <div className="address-autocomplete">
       <label>Address</label>
 
-      <input {...inputProps} placeholder="Type a Dutch address..." className="my-input-class" />
+      {/* inputProps contains value, onChange, and onKeyDown */}
+      <input {...inputProps} placeholder="Type an address..." className="my-input-class" />
+
+      {state.isLoading && <div className="spinner">Loading...</div>}
 
       {/* render the dropdown */}
       {(state.suggestions.length > 0 || state.cities.length > 0) && (
         <ul className="my-dropdown-class">
-          {/* render cities, if any */}
+          {/* render cities */}
           {state.cities.map((city, i) => (
             <li key={`city-${i}`} onClick={() => selectItem(city)}>
               <strong>{city.label}</strong> (City)
             </li>
           ))}
 
-          {/* render streets, if any */}
+          {/* render streets */}
           {state.streets.map((street, i) => (
             <li key={`street-${i}`} onClick={() => selectItem(street)}>
               <strong>{street.label}</strong> (Street)
@@ -49,14 +87,14 @@ const AddressForm = () => {
 
           {/* render general suggestions */}
           {state.suggestions.map((item, i) => (
-            <li key={`sugg-${i}`} onClick={() => selectItem(item)}>
+            <li key={`suggestion-${i}`} onClick={() => selectItem(item)}>
               {item.label}
             </li>
           ))}
         </ul>
       )}
 
-      {state.isValid && <p>Valid address selected</p>}
+      {state.isValid && <p>Valid address selected.</p>}
     </div>
   );
 };

package/dist/index.cjs

@@ -1,8 +1,11 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,22 +18,442 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
-// src/index.ts
+// src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  Pro6PPInfer: () => Pro6PPInfer,
   useInfer: () => useInfer
 });
 module.exports = __toCommonJS(index_exports);
-var import_react = require("react");
-var import_infer_core = require("@pro6pp/infer-core");
+var import_react = __toESM(require("react"), 1);
+
+// ../core/src/core.ts
+var DEFAULTS = {
+  API_URL: "https://api.pro6pp.nl/v2",
+  LIMIT: 1e3,
+  DEBOUNCE_MS: 300
+};
+var PATTERNS = {
+  DIGITS_1_3: /^[0-9]{1,3}$/
+};
+var INITIAL_STATE = {
+  query: "",
+  stage: null,
+  cities: [],
+  streets: [],
+  suggestions: [],
+  isValid: false,
+  isError: false,
+  isLoading: false,
+  selectedSuggestionIndex: -1
+};
+var InferCore = class {
+  constructor(config) {
+    __publicField(this, "country");
+    __publicField(this, "authKey");
+    __publicField(this, "apiUrl");
+    __publicField(this, "limit");
+    __publicField(this, "fetcher");
+    __publicField(this, "onStateChange");
+    __publicField(this, "onSelect");
+    __publicField(this, "state");
+    __publicField(this, "abortController", null);
+    __publicField(this, "debouncedFetch");
+    __publicField(this, "isSelecting", false);
+    this.country = config.country;
+    this.authKey = config.authKey;
+    this.apiUrl = config.apiUrl || DEFAULTS.API_URL;
+    this.limit = config.limit || DEFAULTS.LIMIT;
+    this.fetcher = config.fetcher || ((url, init) => fetch(url, init));
+    this.onStateChange = config.onStateChange || (() => {
+    });
+    this.onSelect = config.onSelect || (() => {
+    });
+    this.state = { ...INITIAL_STATE };
+    this.debouncedFetch = this.debounce(
+      (val) => this.executeFetch(val),
+      DEFAULTS.DEBOUNCE_MS
+    );
+  }
+  handleInput(value) {
+    if (this.isSelecting) {
+      this.isSelecting = false;
+      return;
+    }
+    const isEditingFinal = this.state.stage === "final" && value !== this.state.query;
+    this.updateState({
+      query: value,
+      isValid: false,
+      isLoading: !!value.trim(),
+      selectedSuggestionIndex: -1
+    });
+    if (isEditingFinal) {
+      this.onSelect(null);
+    }
+    this.debouncedFetch(value);
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    if (!target) return;
+    const totalItems = this.state.cities.length + this.state.streets.length + this.state.suggestions.length;
+    if (totalItems > 0) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        let nextIndex = this.state.selectedSuggestionIndex + 1;
+        if (nextIndex >= totalItems) {
+          nextIndex = 0;
+        }
+        this.updateState({ selectedSuggestionIndex: nextIndex });
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        let nextIndex = this.state.selectedSuggestionIndex - 1;
+        if (nextIndex < 0) {
+          nextIndex = totalItems - 1;
+        }
+        this.updateState({ selectedSuggestionIndex: nextIndex });
+        return;
+      }
+      if (event.key === "Enter" && this.state.selectedSuggestionIndex >= 0) {
+        event.preventDefault();
+        const allItems = [...this.state.cities, ...this.state.streets, ...this.state.suggestions];
+        const item = allItems[this.state.selectedSuggestionIndex];
+        if (item) {
+          this.selectItem(item);
+          this.updateState({ selectedSuggestionIndex: -1 });
+        }
+        return;
+      }
+    }
+    const val = target.value;
+    if (event.key === " " && this.shouldAutoInsertComma(val)) {
+      event.preventDefault();
+      const next = `${val.trim()}, `;
+      this.updateQueryAndFetch(next);
+    }
+  }
+  selectItem(item) {
+    this.debouncedFetch.cancel();
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    const label = typeof item === "string" ? item : item.label;
+    let logicValue = label;
+    if (typeof item !== "string" && typeof item.value === "string") {
+      logicValue = item.value;
+    }
+    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}`;
+        }
+      }
+      this.finishSelection(finalQuery, valueObj);
+      return;
+    }
+    const subtitle = typeof item !== "string" ? item.subtitle : null;
+    this.processSelection(logicValue, subtitle);
+  }
+  shouldAutoInsertComma(currentVal) {
+    const isStartOfSegmentAndNumeric = !currentVal.includes(",") && PATTERNS.DIGITS_1_3.test(currentVal.trim());
+    if (isStartOfSegmentAndNumeric) return true;
+    if (this.state.stage === "house_number") {
+      const currentFragment = this.getCurrentFragment(currentVal);
+      return PATTERNS.DIGITS_1_3.test(currentFragment);
+    }
+    return false;
+  }
+  finishSelection(label, value) {
+    this.updateState({
+      query: label,
+      suggestions: [],
+      cities: [],
+      streets: [],
+      isValid: true,
+      stage: "final"
+    });
+    this.onSelect(value || label);
+    setTimeout(() => {
+      this.isSelecting = false;
+    }, 0);
+  }
+  processSelection(text, subtitle) {
+    const { stage, query } = this.state;
+    let nextQuery = query;
+    const isContextualSelection = subtitle && (stage === "city" || stage === "street" || stage === "mixed");
+    if (isContextualSelection) {
+      if (stage === "city") {
+        nextQuery = `${subtitle}, ${text}, `;
+      } else {
+        const prefix = this.getQueryPrefix(query);
+        nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+      }
+      this.updateQueryAndFetch(nextQuery);
+      return;
+    }
+    if (stage === "direct" || stage === "addition") {
+      this.finishSelection(text);
+      return;
+    }
+    const hasComma = query.includes(",");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    if (isFirstSegment) {
+      nextQuery = `${text}, `;
+    } else {
+      nextQuery = this.replaceLastSegment(query, text);
+      if (stage !== "house_number") {
+        nextQuery += ", ";
+      }
+    }
+    this.updateQueryAndFetch(nextQuery);
+  }
+  executeFetch(val) {
+    const text = (val || "").toString();
+    if (!text.trim()) {
+      this.abortController?.abort();
+      this.resetState();
+      return;
+    }
+    this.updateState({ isError: false });
+    if (this.abortController) this.abortController.abort();
+    this.abortController = new AbortController();
+    const url = new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`);
+    const params = {
+      authKey: this.authKey,
+      query: text,
+      limit: this.limit.toString()
+    };
+    url.search = new URLSearchParams(params).toString();
+    this.fetcher(url.toString(), { signal: this.abortController.signal }).then((res) => {
+      if (!res.ok) throw new Error("Network error");
+      return res.json();
+    }).then((data) => this.mapResponseToState(data)).catch((e) => {
+      if (e.name !== "AbortError") {
+        this.updateState({ isError: true, isLoading: false });
+      }
+    });
+  }
+  mapResponseToState(data) {
+    const newState = {
+      stage: data.stage,
+      isLoading: false
+    };
+    let autoSelect = false;
+    let autoSelectItem = null;
+    const rawSuggestions = data.suggestions || [];
+    const uniqueSuggestions = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const item of rawSuggestions) {
+      const key = `${item.label}|${item.subtitle || ""}|${JSON.stringify(item.value || {})}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        uniqueSuggestions.push(item);
+      }
+    }
+    if (data.stage === "mixed") {
+      newState.cities = data.cities || [];
+      newState.streets = data.streets || [];
+      newState.suggestions = [];
+    } else {
+      newState.suggestions = uniqueSuggestions;
+      newState.cities = [];
+      newState.streets = [];
+      if (data.stage === "final" && uniqueSuggestions.length === 1) {
+        autoSelect = true;
+        autoSelectItem = uniqueSuggestions[0];
+      }
+    }
+    newState.isValid = data.stage === "final";
+    if (autoSelect && autoSelectItem) {
+      newState.query = autoSelectItem.label;
+      newState.suggestions = [];
+      newState.cities = [];
+      newState.streets = [];
+      newState.isValid = true;
+      this.updateState(newState);
+      const val = typeof autoSelectItem.value === "object" ? autoSelectItem.value : autoSelectItem.label;
+      this.onSelect(val);
+    } else {
+      this.updateState(newState);
+    }
+  }
+  updateQueryAndFetch(nextQuery) {
+    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
+    this.updateState({ isLoading: true, isValid: false });
+    this.debouncedFetch(nextQuery);
+    setTimeout(() => {
+      this.isSelecting = false;
+    }, 0);
+  }
+  replaceLastSegment(fullText, newSegment) {
+    const lastCommaIndex = fullText.lastIndexOf(",");
+    if (lastCommaIndex === -1) return newSegment;
+    return `${fullText.slice(0, lastCommaIndex + 1)} ${newSegment}`.trim();
+  }
+  getQueryPrefix(q) {
+    const lastComma = q.lastIndexOf(",");
+    return lastComma === -1 ? "" : q.slice(0, lastComma + 1).trimEnd();
+  }
+  getCurrentFragment(q) {
+    return (q.split(",").slice(-1)[0] ?? "").trim();
+  }
+  resetState() {
+    this.updateState({ ...INITIAL_STATE, query: this.state.query });
+  }
+  updateState(updates) {
+    this.state = { ...this.state, ...updates };
+    this.onStateChange(this.state);
+  }
+  debounce(func, wait) {
+    let timeout;
+    const debounced = (...args) => {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+    debounced.cancel = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = void 0;
+      }
+    };
+    return debounced;
+  }
+};
+
+// ../core/src/default-styles.ts
+var DEFAULT_STYLES = `
+  .pro6pp-wrapper {
+    position: relative;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .pro6pp-wrapper * {
+    box-sizing: border-box;
+  }
+  .pro6pp-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    font-size: 16px;
+    line-height: 1.5;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .pro6pp-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+  .pro6pp-dropdown {
+    position: absolute;
+    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.08);
+    max-height: 300px;
+    overflow-y: auto;
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+  }
+  .pro6pp-item {
+    padding: 12px 12px 9px 12px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #000000;
+    font-size: 14px;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    border-radius: 0 !important;
+    margin: 0 !important;
+  }
+  .pro6pp-item:hover, .pro6pp-item--active {
+    background-color: #f5f5f5;
+  }
+  .pro6pp-item__label {
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+  .pro6pp-item__subtitle {
+    font-size: 14px;
+    color: #404040;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+  }
+  .pro6pp-item__chevron {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    color: #a3a3a3;
+    padding-left: 8px;
+  }
+  .pro6pp-no-results {
+    padding: 12px;
+    color: #555555;
+    font-size: 14px;
+    text-align: center;
+    user-select: none;
+    pointer-events: none;
+  }
+  .pro6pp-loader {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    border: 2px solid #e0e0e0;
+    border-top-color: #404040;
+    border-radius: 50%;
+    animation: pro6pp-spin 0.6s linear infinite;
+    pointer-events: none;
+  }
+  @keyframes pro6pp-spin {
+    to { transform: translateY(-50%) rotate(360deg); }
+  }
+`;
+
+// src/index.tsx
 function useInfer(config) {
-  const [state, setState] = (0, import_react.useState)(import_infer_core.INITIAL_STATE);
+  const [state, setState] = (0, import_react.useState)(INITIAL_STATE);
   const core = (0, import_react.useMemo)(() => {
-    return new import_infer_core.InferCore({
+    return new InferCore({
       ...config,
-      onStateChange: (newState) => setState({ ...newState })
+      onStateChange: (newState) => {
+        setState({ ...newState });
+        if (config.onStateChange) {
+          config.onStateChange(newState);
+        }
+      }
     });
   }, [config.country, config.authKey, config.limit]);
   return {
@@ -44,7 +467,89 @@ function useInfer(config) {
     selectItem: (item) => core.selectItem(item)
   };
 }
+var Pro6PPInfer = ({
+  className,
+  style,
+  inputProps,
+  placeholder = "Start typing an address...",
+  renderItem,
+  disableDefaultStyles = false,
+  noResultsText = "No results found",
+  renderNoResults,
+  ...config
+}) => {
+  const { state, selectItem, inputProps: coreInputProps } = useInfer(config);
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (disableDefaultStyles) return;
+    const styleId = "pro6pp-styles";
+    if (!document.getElementById(styleId)) {
+      const styleEl = document.createElement("style");
+      styleEl.id = styleId;
+      styleEl.textContent = DEFAULT_STYLES;
+      document.head.appendChild(styleEl);
+    }
+  }, [disableDefaultStyles]);
+  const items = (0, import_react.useMemo)(() => {
+    return [
+      ...state.cities.map((c) => ({ ...c, type: "city" })),
+      ...state.streets.map((s) => ({ ...s, type: "street" })),
+      ...state.suggestions.map((s) => ({ ...s, type: "suggestion" }))
+    ];
+  }, [state.cities, state.streets, state.suggestions]);
+  const handleSelect = (item) => {
+    selectItem(item);
+    if (!state.isValid && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const hasResults = items.length > 0;
+  const showNoResults = !state.isLoading && !state.isError && state.query.length > 0 && !hasResults && !state.isValid;
+  const showDropdown = hasResults || showNoResults;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pro6pp-wrapper ${className || ""}`, style }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      className: "pro6pp-input",
+      placeholder,
+      autoComplete: "off",
+      ...inputProps,
+      ...coreInputProps
+    }
+  ), state.isLoading && /* @__PURE__ */ import_react.default.createElement("div", { className: "pro6pp-loader" })), showDropdown && /* @__PURE__ */ import_react.default.createElement("ul", { className: "pro6pp-dropdown", role: "listbox" }, hasResults ? items.map((item, index) => {
+    const isActive = index === state.selectedSuggestionIndex;
+    const secondaryText = item.subtitle || item.count;
+    const showChevron = item.value === void 0 || item.value === null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "li",
+      {
+        key: `${item.label}-${index}`,
+        role: "option",
+        "aria-selected": isActive,
+        className: `pro6pp-item ${isActive ? "pro6pp-item--active" : ""}`,
+        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(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ import_react.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+      )))
+    );
+  }) : /* @__PURE__ */ import_react.default.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText)));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Pro6PPInfer,
   useInfer
 });

package/dist/index.d.cts

@@ -1,16 +1,7 @@
+import React from 'react';
 import { InferConfig, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
 export { AddressValue, CountryCode, Fetcher, InferConfig, InferResult, InferState, Stage } from '@pro6pp/infer-core';
 
-/**
- * Hook for the Pro6PP Infer API.
- * @param config - The API configuration.
- * @returns An object containing the current state, input helpers, and selection handler.
- * @example
- * const { state, inputProps, selectItem } = useInfer({
- *   authKey: 'YOUR_KEY',
- *   country: 'NL'
- * });
- */
 declare function useInfer(config: InferConfig): {
     state: InferState;
     core: InferCore;
@@ -21,5 +12,16 @@ declare function useInfer(config: InferConfig): {
     };
     selectItem: (item: InferResult | string) => void;
 };
+interface Pro6PPInferProps extends InferConfig {
+    className?: string;
+    style?: React.CSSProperties;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    placeholder?: string;
+    renderItem?: (item: InferResult, isActive: boolean) => React.ReactNode;
+    disableDefaultStyles?: boolean;
+    noResultsText?: string;
+    renderNoResults?: (state: InferState) => React.ReactNode;
+}
+declare const Pro6PPInfer: React.FC<Pro6PPInferProps>;
 
-export { useInfer };
+export { Pro6PPInfer, type Pro6PPInferProps, useInfer };

package/dist/index.d.ts

@@ -1,16 +1,7 @@
+import React from 'react';
 import { InferConfig, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
 export { AddressValue, CountryCode, Fetcher, InferConfig, InferResult, InferState, Stage } from '@pro6pp/infer-core';
 
-/**
- * Hook for the Pro6PP Infer API.
- * @param config - The API configuration.
- * @returns An object containing the current state, input helpers, and selection handler.
- * @example
- * const { state, inputProps, selectItem } = useInfer({
- *   authKey: 'YOUR_KEY',
- *   country: 'NL'
- * });
- */
 declare function useInfer(config: InferConfig): {
     state: InferState;
     core: InferCore;
@@ -21,5 +12,16 @@ declare function useInfer(config: InferConfig): {
     };
     selectItem: (item: InferResult | string) => void;
 };
+interface Pro6PPInferProps extends InferConfig {
+    className?: string;
+    style?: React.CSSProperties;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    placeholder?: string;
+    renderItem?: (item: InferResult, isActive: boolean) => React.ReactNode;
+    disableDefaultStyles?: boolean;
+    noResultsText?: string;
+    renderNoResults?: (state: InferState) => React.ReactNode;
+}
+declare const Pro6PPInfer: React.FC<Pro6PPInferProps>;
 
-export { useInfer };
+export { Pro6PPInfer, type Pro6PPInferProps, useInfer };

package/dist/index.js

@@ -1,12 +1,426 @@
-// src/index.ts
-import { useState, useMemo } from "react";
-import { InferCore, INITIAL_STATE } from "@pro6pp/infer-core";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.tsx
+import React, { useState, useMemo, useEffect, useRef } from "react";
+
+// ../core/src/core.ts
+var DEFAULTS = {
+  API_URL: "https://api.pro6pp.nl/v2",
+  LIMIT: 1e3,
+  DEBOUNCE_MS: 300
+};
+var PATTERNS = {
+  DIGITS_1_3: /^[0-9]{1,3}$/
+};
+var INITIAL_STATE = {
+  query: "",
+  stage: null,
+  cities: [],
+  streets: [],
+  suggestions: [],
+  isValid: false,
+  isError: false,
+  isLoading: false,
+  selectedSuggestionIndex: -1
+};
+var InferCore = class {
+  constructor(config) {
+    __publicField(this, "country");
+    __publicField(this, "authKey");
+    __publicField(this, "apiUrl");
+    __publicField(this, "limit");
+    __publicField(this, "fetcher");
+    __publicField(this, "onStateChange");
+    __publicField(this, "onSelect");
+    __publicField(this, "state");
+    __publicField(this, "abortController", null);
+    __publicField(this, "debouncedFetch");
+    __publicField(this, "isSelecting", false);
+    this.country = config.country;
+    this.authKey = config.authKey;
+    this.apiUrl = config.apiUrl || DEFAULTS.API_URL;
+    this.limit = config.limit || DEFAULTS.LIMIT;
+    this.fetcher = config.fetcher || ((url, init) => fetch(url, init));
+    this.onStateChange = config.onStateChange || (() => {
+    });
+    this.onSelect = config.onSelect || (() => {
+    });
+    this.state = { ...INITIAL_STATE };
+    this.debouncedFetch = this.debounce(
+      (val) => this.executeFetch(val),
+      DEFAULTS.DEBOUNCE_MS
+    );
+  }
+  handleInput(value) {
+    if (this.isSelecting) {
+      this.isSelecting = false;
+      return;
+    }
+    const isEditingFinal = this.state.stage === "final" && value !== this.state.query;
+    this.updateState({
+      query: value,
+      isValid: false,
+      isLoading: !!value.trim(),
+      selectedSuggestionIndex: -1
+    });
+    if (isEditingFinal) {
+      this.onSelect(null);
+    }
+    this.debouncedFetch(value);
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    if (!target) return;
+    const totalItems = this.state.cities.length + this.state.streets.length + this.state.suggestions.length;
+    if (totalItems > 0) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        let nextIndex = this.state.selectedSuggestionIndex + 1;
+        if (nextIndex >= totalItems) {
+          nextIndex = 0;
+        }
+        this.updateState({ selectedSuggestionIndex: nextIndex });
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        let nextIndex = this.state.selectedSuggestionIndex - 1;
+        if (nextIndex < 0) {
+          nextIndex = totalItems - 1;
+        }
+        this.updateState({ selectedSuggestionIndex: nextIndex });
+        return;
+      }
+      if (event.key === "Enter" && this.state.selectedSuggestionIndex >= 0) {
+        event.preventDefault();
+        const allItems = [...this.state.cities, ...this.state.streets, ...this.state.suggestions];
+        const item = allItems[this.state.selectedSuggestionIndex];
+        if (item) {
+          this.selectItem(item);
+          this.updateState({ selectedSuggestionIndex: -1 });
+        }
+        return;
+      }
+    }
+    const val = target.value;
+    if (event.key === " " && this.shouldAutoInsertComma(val)) {
+      event.preventDefault();
+      const next = `${val.trim()}, `;
+      this.updateQueryAndFetch(next);
+    }
+  }
+  selectItem(item) {
+    this.debouncedFetch.cancel();
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    const label = typeof item === "string" ? item : item.label;
+    let logicValue = label;
+    if (typeof item !== "string" && typeof item.value === "string") {
+      logicValue = item.value;
+    }
+    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}`;
+        }
+      }
+      this.finishSelection(finalQuery, valueObj);
+      return;
+    }
+    const subtitle = typeof item !== "string" ? item.subtitle : null;
+    this.processSelection(logicValue, subtitle);
+  }
+  shouldAutoInsertComma(currentVal) {
+    const isStartOfSegmentAndNumeric = !currentVal.includes(",") && PATTERNS.DIGITS_1_3.test(currentVal.trim());
+    if (isStartOfSegmentAndNumeric) return true;
+    if (this.state.stage === "house_number") {
+      const currentFragment = this.getCurrentFragment(currentVal);
+      return PATTERNS.DIGITS_1_3.test(currentFragment);
+    }
+    return false;
+  }
+  finishSelection(label, value) {
+    this.updateState({
+      query: label,
+      suggestions: [],
+      cities: [],
+      streets: [],
+      isValid: true,
+      stage: "final"
+    });
+    this.onSelect(value || label);
+    setTimeout(() => {
+      this.isSelecting = false;
+    }, 0);
+  }
+  processSelection(text, subtitle) {
+    const { stage, query } = this.state;
+    let nextQuery = query;
+    const isContextualSelection = subtitle && (stage === "city" || stage === "street" || stage === "mixed");
+    if (isContextualSelection) {
+      if (stage === "city") {
+        nextQuery = `${subtitle}, ${text}, `;
+      } else {
+        const prefix = this.getQueryPrefix(query);
+        nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+      }
+      this.updateQueryAndFetch(nextQuery);
+      return;
+    }
+    if (stage === "direct" || stage === "addition") {
+      this.finishSelection(text);
+      return;
+    }
+    const hasComma = query.includes(",");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    if (isFirstSegment) {
+      nextQuery = `${text}, `;
+    } else {
+      nextQuery = this.replaceLastSegment(query, text);
+      if (stage !== "house_number") {
+        nextQuery += ", ";
+      }
+    }
+    this.updateQueryAndFetch(nextQuery);
+  }
+  executeFetch(val) {
+    const text = (val || "").toString();
+    if (!text.trim()) {
+      this.abortController?.abort();
+      this.resetState();
+      return;
+    }
+    this.updateState({ isError: false });
+    if (this.abortController) this.abortController.abort();
+    this.abortController = new AbortController();
+    const url = new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`);
+    const params = {
+      authKey: this.authKey,
+      query: text,
+      limit: this.limit.toString()
+    };
+    url.search = new URLSearchParams(params).toString();
+    this.fetcher(url.toString(), { signal: this.abortController.signal }).then((res) => {
+      if (!res.ok) throw new Error("Network error");
+      return res.json();
+    }).then((data) => this.mapResponseToState(data)).catch((e) => {
+      if (e.name !== "AbortError") {
+        this.updateState({ isError: true, isLoading: false });
+      }
+    });
+  }
+  mapResponseToState(data) {
+    const newState = {
+      stage: data.stage,
+      isLoading: false
+    };
+    let autoSelect = false;
+    let autoSelectItem = null;
+    const rawSuggestions = data.suggestions || [];
+    const uniqueSuggestions = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const item of rawSuggestions) {
+      const key = `${item.label}|${item.subtitle || ""}|${JSON.stringify(item.value || {})}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        uniqueSuggestions.push(item);
+      }
+    }
+    if (data.stage === "mixed") {
+      newState.cities = data.cities || [];
+      newState.streets = data.streets || [];
+      newState.suggestions = [];
+    } else {
+      newState.suggestions = uniqueSuggestions;
+      newState.cities = [];
+      newState.streets = [];
+      if (data.stage === "final" && uniqueSuggestions.length === 1) {
+        autoSelect = true;
+        autoSelectItem = uniqueSuggestions[0];
+      }
+    }
+    newState.isValid = data.stage === "final";
+    if (autoSelect && autoSelectItem) {
+      newState.query = autoSelectItem.label;
+      newState.suggestions = [];
+      newState.cities = [];
+      newState.streets = [];
+      newState.isValid = true;
+      this.updateState(newState);
+      const val = typeof autoSelectItem.value === "object" ? autoSelectItem.value : autoSelectItem.label;
+      this.onSelect(val);
+    } else {
+      this.updateState(newState);
+    }
+  }
+  updateQueryAndFetch(nextQuery) {
+    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
+    this.updateState({ isLoading: true, isValid: false });
+    this.debouncedFetch(nextQuery);
+    setTimeout(() => {
+      this.isSelecting = false;
+    }, 0);
+  }
+  replaceLastSegment(fullText, newSegment) {
+    const lastCommaIndex = fullText.lastIndexOf(",");
+    if (lastCommaIndex === -1) return newSegment;
+    return `${fullText.slice(0, lastCommaIndex + 1)} ${newSegment}`.trim();
+  }
+  getQueryPrefix(q) {
+    const lastComma = q.lastIndexOf(",");
+    return lastComma === -1 ? "" : q.slice(0, lastComma + 1).trimEnd();
+  }
+  getCurrentFragment(q) {
+    return (q.split(",").slice(-1)[0] ?? "").trim();
+  }
+  resetState() {
+    this.updateState({ ...INITIAL_STATE, query: this.state.query });
+  }
+  updateState(updates) {
+    this.state = { ...this.state, ...updates };
+    this.onStateChange(this.state);
+  }
+  debounce(func, wait) {
+    let timeout;
+    const debounced = (...args) => {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+    debounced.cancel = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = void 0;
+      }
+    };
+    return debounced;
+  }
+};
+
+// ../core/src/default-styles.ts
+var DEFAULT_STYLES = `
+  .pro6pp-wrapper {
+    position: relative;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .pro6pp-wrapper * {
+    box-sizing: border-box;
+  }
+  .pro6pp-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    font-size: 16px;
+    line-height: 1.5;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .pro6pp-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+  .pro6pp-dropdown {
+    position: absolute;
+    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.08);
+    max-height: 300px;
+    overflow-y: auto;
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+  }
+  .pro6pp-item {
+    padding: 12px 12px 9px 12px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #000000;
+    font-size: 14px;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    border-radius: 0 !important;
+    margin: 0 !important;
+  }
+  .pro6pp-item:hover, .pro6pp-item--active {
+    background-color: #f5f5f5;
+  }
+  .pro6pp-item__label {
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+  .pro6pp-item__subtitle {
+    font-size: 14px;
+    color: #404040;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+  }
+  .pro6pp-item__chevron {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    color: #a3a3a3;
+    padding-left: 8px;
+  }
+  .pro6pp-no-results {
+    padding: 12px;
+    color: #555555;
+    font-size: 14px;
+    text-align: center;
+    user-select: none;
+    pointer-events: none;
+  }
+  .pro6pp-loader {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    border: 2px solid #e0e0e0;
+    border-top-color: #404040;
+    border-radius: 50%;
+    animation: pro6pp-spin 0.6s linear infinite;
+    pointer-events: none;
+  }
+  @keyframes pro6pp-spin {
+    to { transform: translateY(-50%) rotate(360deg); }
+  }
+`;
+
+// src/index.tsx
 function useInfer(config) {
   const [state, setState] = useState(INITIAL_STATE);
   const core = useMemo(() => {
     return new InferCore({
       ...config,
-      onStateChange: (newState) => setState({ ...newState })
+      onStateChange: (newState) => {
+        setState({ ...newState });
+        if (config.onStateChange) {
+          config.onStateChange(newState);
+        }
+      }
     });
   }, [config.country, config.authKey, config.limit]);
   return {
@@ -20,6 +434,88 @@ function useInfer(config) {
     selectItem: (item) => core.selectItem(item)
   };
 }
+var Pro6PPInfer = ({
+  className,
+  style,
+  inputProps,
+  placeholder = "Start typing an address...",
+  renderItem,
+  disableDefaultStyles = false,
+  noResultsText = "No results found",
+  renderNoResults,
+  ...config
+}) => {
+  const { state, selectItem, inputProps: coreInputProps } = useInfer(config);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (disableDefaultStyles) return;
+    const styleId = "pro6pp-styles";
+    if (!document.getElementById(styleId)) {
+      const styleEl = document.createElement("style");
+      styleEl.id = styleId;
+      styleEl.textContent = DEFAULT_STYLES;
+      document.head.appendChild(styleEl);
+    }
+  }, [disableDefaultStyles]);
+  const items = useMemo(() => {
+    return [
+      ...state.cities.map((c) => ({ ...c, type: "city" })),
+      ...state.streets.map((s) => ({ ...s, type: "street" })),
+      ...state.suggestions.map((s) => ({ ...s, type: "suggestion" }))
+    ];
+  }, [state.cities, state.streets, state.suggestions]);
+  const handleSelect = (item) => {
+    selectItem(item);
+    if (!state.isValid && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const hasResults = items.length > 0;
+  const showNoResults = !state.isLoading && !state.isError && state.query.length > 0 && !hasResults && !state.isValid;
+  const showDropdown = hasResults || showNoResults;
+  return /* @__PURE__ */ React.createElement("div", { className: `pro6pp-wrapper ${className || ""}`, style }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      className: "pro6pp-input",
+      placeholder,
+      autoComplete: "off",
+      ...inputProps,
+      ...coreInputProps
+    }
+  ), state.isLoading && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-loader" })), showDropdown && /* @__PURE__ */ React.createElement("ul", { className: "pro6pp-dropdown", role: "listbox" }, hasResults ? items.map((item, index) => {
+    const isActive = index === state.selectedSuggestionIndex;
+    const secondaryText = item.subtitle || item.count;
+    const showChevron = item.value === void 0 || item.value === null;
+    return /* @__PURE__ */ React.createElement(
+      "li",
+      {
+        key: `${item.label}-${index}`,
+        role: "option",
+        "aria-selected": isActive,
+        className: `pro6pp-item ${isActive ? "pro6pp-item--active" : ""}`,
+        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(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React.createElement("polyline", { points: "9 18 15 12 9 6" })
+      )))
+    );
+  }) : /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText)));
+};
 export {
+  Pro6PPInfer,
   useInfer
 };

package/package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/pro6pp/infer-sdk/issues"
   },
   "sideEffects": false,
-  "version": "0.0.2-beta.5",
+  "version": "0.0.2-beta.7",
   "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.3"
+    "@pro6pp/infer-core": "0.0.2-beta.5"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",