@headband/react 0.1.0

package/dist/index.js

@@ -0,0 +1,1124 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  HeadbandError: () => HeadbandError,
+  HeadbandProvider: () => HeadbandProvider,
+  Highlight: () => Highlight,
+  Hits: () => Hits,
+  Pagination: () => Pagination,
+  PoweredBy: () => PoweredBy,
+  RangeInput: () => RangeInput,
+  RefinementList: () => RefinementList,
+  SearchBox: () => SearchBox,
+  SortBy: () => SortBy,
+  Stats: () => Stats,
+  headband: () => headband,
+  useHeadbandContext: () => useHeadbandContext,
+  useHighlight: () => useHighlight,
+  useHits: () => useHits,
+  usePagination: () => usePagination,
+  useRange: () => useRange,
+  useRefinementList: () => useRefinementList,
+  useSearch: () => useSearch,
+  useSearchBox: () => useSearchBox,
+  useSortBy: () => useSortBy,
+  useStats: () => useStats
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/client.ts
+var HeadbandError = class extends Error {
+  constructor(message, status, code) {
+    super(message);
+    this.name = "HeadbandError";
+    this.status = status;
+    this.code = code;
+  }
+};
+function headband(host, apiKey) {
+  const baseUrl = host.replace(/\/+$/, "");
+  async function request(path, body) {
+    let response;
+    try {
+      response = await fetch(`${baseUrl}${path}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${apiKey}`
+        },
+        body: JSON.stringify(body)
+      });
+    } catch (err) {
+      throw new HeadbandError(
+        err instanceof Error ? err.message : "Network request failed",
+        0
+      );
+    }
+    if (!response.ok) {
+      let errorBody = {};
+      try {
+        errorBody = await response.json();
+      } catch {
+      }
+      throw new HeadbandError(
+        errorBody.error ?? `Request failed with status ${response.status}`,
+        response.status,
+        errorBody.code
+      );
+    }
+    return response.json();
+  }
+  return {
+    search(index, query, params) {
+      return request("/v1/search", {
+        index,
+        q: query,
+        ...params
+      });
+    },
+    multiSearch(queries) {
+      return request("/v1/multi-search", { queries });
+    }
+  };
+}
+
+// src/provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var HeadbandContext = (0, import_react.createContext)(null);
+function useHeadbandContext() {
+  const ctx = (0, import_react.useContext)(HeadbandContext);
+  if (!ctx) {
+    throw new Error(
+      "useHeadbandContext must be used within a <HeadbandProvider>."
+    );
+  }
+  return ctx;
+}
+function buildFilterString(refinements, ranges) {
+  const parts = [];
+  refinements.forEach((values, attribute) => {
+    if (values.size === 0) return;
+    if (values.size === 1) {
+      const [v] = values;
+      parts.push(`${attribute} = "${v}"`);
+    } else {
+      const list = Array.from(values).map((v) => `"${v}"`).join(", ");
+      parts.push(`${attribute} IN [${list}]`);
+    }
+  });
+  ranges.forEach((range, attribute) => {
+    if (range.min !== void 0) {
+      parts.push(`${attribute} >= ${range.min}`);
+    }
+    if (range.max !== void 0) {
+      parts.push(`${attribute} <= ${range.max}`);
+    }
+  });
+  return parts.length > 0 ? parts.join(" AND ") : void 0;
+}
+function HeadbandProvider({
+  client,
+  index,
+  initialQuery = "",
+  children
+}) {
+  const [query, setQueryRaw] = (0, import_react.useState)(initialQuery);
+  const [results, setResults] = (0, import_react.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [refinements, setRefinements] = (0, import_react.useState)(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [ranges, setRanges] = (0, import_react.useState)(() => /* @__PURE__ */ new Map());
+  const [sortBy, setSortBy] = (0, import_react.useState)(null);
+  const [page, setPage] = (0, import_react.useState)(0);
+  const [hitsPerPage, setHitsPerPage] = (0, import_react.useState)(20);
+  const [facets, setFacets] = (0, import_react.useState)(() => /* @__PURE__ */ new Set());
+  const timerRef = (0, import_react.useRef)(null);
+  const requestIdRef = (0, import_react.useRef)(0);
+  const executeSearch = (0, import_react.useCallback)(() => {
+    const id = ++requestIdRef.current;
+    setIsLoading(true);
+    setError(null);
+    const filter = buildFilterString(refinements, ranges);
+    const facetList = facets.size > 0 ? Array.from(facets) : void 0;
+    const sortList = sortBy ? [sortBy] : void 0;
+    const params = {
+      limit: hitsPerPage,
+      offset: page * hitsPerPage,
+      ...filter ? { filter } : {},
+      ...facetList ? { facets: facetList } : {},
+      ...sortList ? { sort: sortList } : {},
+      attributesToHighlight: ["*"]
+    };
+    client.search(index, query, params).then((res) => {
+      if (id === requestIdRef.current) {
+        setResults(res);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (id === requestIdRef.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      }
+    });
+  }, [client, index, query, refinements, ranges, sortBy, page, hitsPerPage, facets]);
+  (0, import_react.useEffect)(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(executeSearch, 200);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [executeSearch]);
+  const setQuery = (0, import_react.useCallback)((q) => {
+    setQueryRaw(q);
+    setPage(0);
+  }, []);
+  const toggleRefinement = (0, import_react.useCallback)(
+    (attribute, value2) => {
+      setRefinements((prev) => {
+        const next = new Map(prev);
+        const current = new Set(next.get(attribute) ?? []);
+        if (current.has(value2)) {
+          current.delete(value2);
+        } else {
+          current.add(value2);
+        }
+        next.set(attribute, current);
+        return next;
+      });
+      setPage(0);
+    },
+    []
+  );
+  const setRange = (0, import_react.useCallback)(
+    (attribute, range) => {
+      setRanges((prev) => {
+        const next = new Map(prev);
+        next.set(attribute, range);
+        return next;
+      });
+      setPage(0);
+    },
+    []
+  );
+  const clearRange = (0, import_react.useCallback)((attribute) => {
+    setRanges((prev) => {
+      const next = new Map(prev);
+      next.delete(attribute);
+      return next;
+    });
+    setPage(0);
+  }, []);
+  const registerFacet = (0, import_react.useCallback)((attribute) => {
+    setFacets((prev) => {
+      if (prev.has(attribute)) return prev;
+      const next = new Set(prev);
+      next.add(attribute);
+      return next;
+    });
+  }, []);
+  const unregisterFacet = (0, import_react.useCallback)((attribute) => {
+    setFacets((prev) => {
+      if (!prev.has(attribute)) return prev;
+      const next = new Set(prev);
+      next.delete(attribute);
+      return next;
+    });
+  }, []);
+  const refresh = (0, import_react.useCallback)(() => {
+    executeSearch();
+  }, [executeSearch]);
+  const state = (0, import_react.useMemo)(
+    () => ({
+      query,
+      results,
+      isLoading,
+      error,
+      refinements,
+      ranges,
+      sortBy,
+      page,
+      hitsPerPage,
+      facets
+    }),
+    [query, results, isLoading, error, refinements, ranges, sortBy, page, hitsPerPage, facets]
+  );
+  const actions = (0, import_react.useMemo)(
+    () => ({
+      setQuery,
+      setPage,
+      setSortBy,
+      setHitsPerPage,
+      toggleRefinement,
+      setRange,
+      clearRange,
+      registerFacet,
+      unregisterFacet,
+      refresh
+    }),
+    [setQuery, toggleRefinement, setRange, clearRange, registerFacet, unregisterFacet, refresh]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({ client, index, state, actions }),
+    [client, index, state, actions]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadbandContext.Provider, { value, children });
+}
+
+// src/hooks/useSearch.ts
+function useSearch() {
+  const { state, actions } = useHeadbandContext();
+  return { ...state, ...actions };
+}
+
+// src/hooks/useSearchBox.ts
+var import_react2 = require("react");
+function useSearchBox() {
+  const { state, actions } = useHeadbandContext();
+  const clear = (0, import_react2.useCallback)(() => {
+    actions.setQuery("");
+  }, [actions]);
+  return {
+    query: state.query,
+    setQuery: actions.setQuery,
+    clear
+  };
+}
+
+// src/hooks/useHits.ts
+var import_react3 = require("react");
+function useHits() {
+  const { state } = useHeadbandContext();
+  const hits = (0, import_react3.useMemo)(() => {
+    if (!state.results) return [];
+    return state.results.hits.map((raw) => {
+      const hit = { ...raw };
+      hit.__data = raw;
+      return hit;
+    });
+  }, [state.results]);
+  return {
+    hits,
+    isLoading: state.isLoading,
+    error: state.error
+  };
+}
+
+// src/hooks/useRefinementList.ts
+var import_react4 = require("react");
+function useRefinementList({
+  attribute,
+  limit = 20,
+  sortBy: sortOrder = "count"
+}) {
+  const { state, actions } = useHeadbandContext();
+  (0, import_react4.useEffect)(() => {
+    actions.registerFacet(attribute);
+    return () => {
+      actions.unregisterFacet(attribute);
+    };
+  }, [attribute, actions]);
+  const refined = state.refinements.get(attribute) ?? /* @__PURE__ */ new Set();
+  const items = (0, import_react4.useMemo)(() => {
+    const distribution = state.results?.facetDistribution?.[attribute] ?? {};
+    const allValues = /* @__PURE__ */ new Set([
+      ...Object.keys(distribution),
+      ...refined
+    ]);
+    let result = Array.from(allValues).map(
+      (value) => ({
+        value,
+        count: distribution[value] ?? 0,
+        isRefined: refined.has(value)
+      })
+    );
+    if (sortOrder === "alpha") {
+      result.sort((a, b) => a.value.localeCompare(b.value));
+    } else {
+      result.sort((a, b) => b.count - a.count || a.value.localeCompare(b.value));
+    }
+    if (result.length > limit) {
+      result = result.slice(0, limit);
+    }
+    return result;
+  }, [state.results, attribute, refined, sortOrder, limit]);
+  const refine = (0, import_react4.useCallback)(
+    (value) => {
+      actions.toggleRefinement(attribute, value);
+    },
+    [attribute, actions]
+  );
+  return {
+    items,
+    refine,
+    canToggle: items.length > 0,
+    isLoading: state.isLoading
+  };
+}
+
+// src/hooks/usePagination.ts
+var import_react5 = require("react");
+function usePagination() {
+  const { state, actions } = useHeadbandContext();
+  const totalHits = (0, import_react5.useMemo)(() => {
+    if (!state.results) return 0;
+    return state.results.estimatedTotalHits ?? state.results.totalHits ?? 0;
+  }, [state.results]);
+  const totalPages = (0, import_react5.useMemo)(() => {
+    if (totalHits === 0) return 0;
+    return Math.ceil(totalHits / state.hitsPerPage);
+  }, [totalHits, state.hitsPerPage]);
+  const canPrevious = state.page > 0;
+  const canNext = state.page < totalPages - 1;
+  const setPage = (0, import_react5.useCallback)(
+    (page) => {
+      const clamped = Math.max(0, Math.min(page, totalPages - 1));
+      actions.setPage(clamped);
+    },
+    [actions, totalPages]
+  );
+  const pages = (0, import_react5.useMemo)(() => {
+    if (totalPages === 0) return [];
+    const windowSize = 5;
+    const half = Math.floor(windowSize / 2);
+    let start = Math.max(0, state.page - half);
+    const end = Math.min(totalPages, start + windowSize);
+    if (end - start < windowSize) {
+      start = Math.max(0, end - windowSize);
+    }
+    const result = [];
+    for (let i = start; i < end; i++) {
+      result.push(i);
+    }
+    return result;
+  }, [state.page, totalPages]);
+  return {
+    currentPage: state.page,
+    totalPages,
+    totalHits,
+    setPage,
+    canPrevious,
+    canNext,
+    pages
+  };
+}
+
+// src/hooks/useStats.ts
+var import_react6 = require("react");
+function useStats() {
+  const { state } = useHeadbandContext();
+  return (0, import_react6.useMemo)(
+    () => ({
+      totalHits: state.results ? state.results.estimatedTotalHits ?? state.results.totalHits ?? 0 : 0,
+      processingTimeMs: state.results?.processingTimeMs ?? 0,
+      query: state.query,
+      isLoading: state.isLoading
+    }),
+    [state.results, state.query, state.isLoading]
+  );
+}
+
+// src/hooks/useSortBy.ts
+var import_react7 = require("react");
+function useSortBy({ items }) {
+  const { state, actions } = useHeadbandContext();
+  const setSort = (0, import_react7.useCallback)(
+    (value) => {
+      actions.setSortBy(value);
+    },
+    [actions]
+  );
+  const enrichedItems = (0, import_react7.useMemo)(
+    () => items.map((item) => ({
+      ...item,
+      isSelected: state.sortBy === item.value
+    })),
+    [items, state.sortBy]
+  );
+  return {
+    currentSort: state.sortBy,
+    setSort,
+    items: enrichedItems
+  };
+}
+
+// src/hooks/useRange.ts
+var import_react8 = require("react");
+function useRange({ attribute }) {
+  const { state, actions } = useHeadbandContext();
+  const current = state.ranges.get(attribute);
+  const stats = (0, import_react8.useMemo)(() => {
+    return state.results?.facetStats?.[attribute];
+  }, [state.results, attribute]);
+  const setRange = (0, import_react8.useCallback)(
+    (range) => {
+      actions.setRange(attribute, range);
+    },
+    [attribute, actions]
+  );
+  const clear = (0, import_react8.useCallback)(() => {
+    actions.clearRange(attribute);
+  }, [attribute, actions]);
+  return {
+    min: current?.min,
+    max: current?.max,
+    stats,
+    setRange,
+    clear,
+    isLoading: state.isLoading
+  };
+}
+
+// src/hooks/useHighlight.ts
+var import_react9 = require("react");
+function sanitizeHighlight(raw) {
+  const OPEN = "\0OPEN\0";
+  const CLOSE = "\0CLOSE\0";
+  let sanitized = raw.replace(/<em>/gi, OPEN).replace(/<\/em>/gi, CLOSE);
+  sanitized = sanitized.replace(/<[^>]*>/g, "");
+  sanitized = sanitized.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  sanitized = sanitized.replace(new RegExp(escapeRegex(OPEN), "g"), "<em>").replace(new RegExp(escapeRegex(CLOSE), "g"), "</em>");
+  return sanitized;
+}
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function getNestedValue(obj, path) {
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function useHighlight({
+  hit,
+  attribute
+}) {
+  return (0, import_react9.useMemo)(() => {
+    const formatted = hit._formatted;
+    const highlightedRaw = formatted ? getNestedValue(formatted, attribute) : void 0;
+    if (typeof highlightedRaw === "string") {
+      const sanitized = sanitizeHighlight(highlightedRaw);
+      const hasHighlight = sanitized.includes("<em>");
+      return { value: sanitized, highlighted: hasHighlight };
+    }
+    const rawValue = getNestedValue(hit, attribute);
+    const stringValue = rawValue !== null && rawValue !== void 0 ? String(rawValue) : "";
+    return { value: stringValue, highlighted: false };
+  }, [hit, attribute]);
+}
+
+// src/components/SearchBox.tsx
+var import_react10 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SearchBox({
+  placeholder = "Search...",
+  className,
+  autoFocus = false,
+  onQueryChange,
+  styled = true
+}) {
+  const { query, setQuery, clear } = useSearchBox();
+  const inputRef = (0, import_react10.useRef)(null);
+  const handleChange = (0, import_react10.useCallback)(
+    (e) => {
+      const value = e.target.value;
+      setQuery(value);
+      onQueryChange?.(value);
+    },
+    [setQuery, onQueryChange]
+  );
+  const handleClear = (0, import_react10.useCallback)(() => {
+    clear();
+    onQueryChange?.("");
+    inputRef.current?.focus();
+  }, [clear, onQueryChange]);
+  const handleSubmit = (0, import_react10.useCallback)((e) => {
+    e.preventDefault();
+  }, []);
+  const handleKeyDown = (0, import_react10.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        handleClear();
+      }
+    },
+    [handleClear]
+  );
+  const baseClass = styled ? "relative flex items-center w-full" : "";
+  const inputClass = styled ? "w-full rounded-lg border border-gray-200 bg-white py-2.5 pl-10 pr-10 text-sm outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500 dark:focus:border-indigo-400" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      role: "search",
+      className: `${baseClass} ${className ?? ""}`.trim(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            className: styled ? "pointer-events-none absolute left-3 h-4 w-4 text-gray-400 dark:text-gray-500" : "pointer-events-none absolute left-3 h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2,
+            stroke: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "search",
+            value: query,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            autoFocus,
+            autoComplete: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            "aria-label": "Search",
+            className: inputClass
+          }
+        ),
+        query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            "aria-label": "Clear search",
+            className: styled ? "absolute right-3 flex h-5 w-5 items-center justify-center rounded text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300" : "absolute right-3 flex h-5 w-5 items-center justify-center",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: 2,
+                stroke: "currentColor",
+                className: "h-3.5 w-3.5",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M6 18 18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Hits.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DefaultHit({ hit }) {
+  const { _formatted, __data, ...rest } = hit;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-lg border border-gray-200 bg-white p-4 text-sm dark:border-gray-700 dark:bg-gray-900", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "overflow-x-auto whitespace-pre-wrap text-xs text-gray-700 dark:text-gray-300", children: JSON.stringify(rest, null, 2) }) });
+}
+function DefaultEmpty() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "py-12 text-center text-sm text-gray-500 dark:text-gray-400", children: "No results found." });
+}
+function Hits({
+  hitComponent,
+  className,
+  emptyComponent,
+  styled = true
+}) {
+  const { hits, isLoading, error } = useHits();
+  const HitComponent = hitComponent ?? DefaultHit;
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        role: "alert",
+        className: styled ? "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300" : void 0,
+        children: [
+          "Search error: ",
+          error.message
+        ]
+      }
+    );
+  }
+  if (!isLoading && hits.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: emptyComponent ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultEmpty, {}) });
+  }
+  const listClass = styled ? `grid gap-3 ${className ?? ""}`.trim() : className ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: listClass, role: "list", "aria-label": "Search results", children: [
+    isLoading && hits.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: styled ? "py-8 text-center text-sm text-gray-400 dark:text-gray-500" : void 0,
+        "aria-live": "polite",
+        children: "Searching..."
+      }
+    ),
+    hits.map((hit, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HitComponent, { hit }) }, hit.id ?? i))
+  ] });
+}
+
+// src/components/RefinementList.tsx
+var import_react11 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function RefinementList({
+  attribute,
+  limit,
+  sortBy,
+  className,
+  styled = true,
+  header
+}) {
+  const { items, refine, isLoading } = useRefinementList({
+    attribute,
+    limit,
+    sortBy
+  });
+  const handleChange = (0, import_react11.useCallback)(
+    (value) => (_e) => {
+      refine(value);
+    },
+    [refine]
+  );
+  const containerClass = styled ? `space-y-1 ${className ?? ""}`.trim() : className ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { className: containerClass, "aria-label": `Filter by ${attribute}`, children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "legend",
+      {
+        className: styled ? "mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400" : void 0,
+        children: header
+      }
+    ),
+    isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: styled ? "py-2 text-xs text-gray-400 dark:text-gray-500" : void 0,
+        "aria-live": "polite",
+        children: "Loading..."
+      }
+    ),
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "label",
+      {
+        className: styled ? "flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-800" : "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: item.isRefined,
+              onChange: handleChange(item.value),
+              className: styled ? "h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600" : void 0,
+              "aria-label": `${item.value} (${item.count})`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: styled ? "flex-1 truncate text-gray-700 dark:text-gray-300" : "flex-1",
+              children: item.value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: styled ? "text-xs tabular-nums text-gray-400 dark:text-gray-500" : void 0,
+              children: item.count
+            }
+          )
+        ]
+      },
+      item.value
+    ))
+  ] });
+}
+
+// src/components/Pagination.tsx
+var import_react12 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Pagination({ className, styled = true }) {
+  const { currentPage, totalPages, setPage, canPrevious, canNext, pages } = usePagination();
+  const handlePrevious = (0, import_react12.useCallback)(() => {
+    setPage(currentPage - 1);
+  }, [setPage, currentPage]);
+  const handleNext = (0, import_react12.useCallback)(() => {
+    setPage(currentPage + 1);
+  }, [setPage, currentPage]);
+  if (totalPages <= 1) return null;
+  const navClass = styled ? `flex items-center gap-1 ${className ?? ""}`.trim() : className ?? "";
+  const buttonBase = styled ? "inline-flex h-8 min-w-[2rem] items-center justify-center rounded text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500" : "";
+  const activeClass = styled ? "bg-indigo-600 text-white" : "";
+  const inactiveClass = styled ? "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800" : "";
+  const disabledClass = styled ? "text-gray-300 cursor-not-allowed dark:text-gray-600" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("nav", { "aria-label": "Search results pagination", className: navClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handlePrevious,
+        disabled: !canPrevious,
+        "aria-label": "Previous page",
+        className: `${buttonBase} px-2 ${canPrevious ? inactiveClass : disabledClass}`.trim(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2,
+            stroke: "currentColor",
+            className: "h-4 w-4",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M15.75 19.5 8.25 12l7.5-7.5"
+              }
+            )
+          }
+        )
+      }
+    ),
+    pages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setPage(page),
+        "aria-label": `Page ${page + 1}`,
+        "aria-current": page === currentPage ? "page" : void 0,
+        className: `${buttonBase} ${page === currentPage ? activeClass : inactiveClass}`.trim(),
+        children: page + 1
+      },
+      page
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleNext,
+        disabled: !canNext,
+        "aria-label": "Next page",
+        className: `${buttonBase} px-2 ${canNext ? inactiveClass : disabledClass}`.trim(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2,
+            stroke: "currentColor",
+            className: "h-4 w-4",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "m8.25 4.5 7.5 7.5-7.5 7.5"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Stats.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Stats({ className, styled = true, render }) {
+  const { totalHits, processingTimeMs, query, isLoading } = useStats();
+  if (isLoading && totalHits === 0) return null;
+  const text = render ? render({ totalHits, processingTimeMs, query }) : `${totalHits.toLocaleString()} result${totalHits !== 1 ? "s" : ""} in ${processingTimeMs}ms`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "p",
+    {
+      className: styled ? `text-sm text-gray-500 dark:text-gray-400 ${className ?? ""}`.trim() : className ?? "",
+      "aria-live": "polite",
+      role: "status",
+      children: text
+    }
+  );
+}
+
+// src/components/SortBy.tsx
+var import_react13 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function SortBy({
+  items: itemsProp,
+  className,
+  styled = true,
+  label = "Sort by"
+}) {
+  const { currentSort, setSort, items } = useSortBy({ items: itemsProp });
+  const handleChange = (0, import_react13.useCallback)(
+    (e) => {
+      const value = e.target.value;
+      setSort(value === "" ? null : value);
+    },
+    [setSort]
+  );
+  const selectClass = styled ? "rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm outline-none transition-colors focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "sr-only", htmlFor: "headband-sort-by", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "select",
+      {
+        id: "headband-sort-by",
+        value: currentSort ?? "",
+        onChange: handleChange,
+        className: selectClass,
+        "aria-label": label,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Relevance" }),
+          items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: item.value, children: item.label }, item.value))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/Highlight.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Highlight({
+  hit,
+  attribute,
+  className,
+  styled = true,
+  tagName: Tag = "span"
+}) {
+  const { value, highlighted } = useHighlight({ hit, attribute });
+  const highlightClass = styled ? `[&_em]:bg-indigo-100 [&_em]:not-italic [&_em]:font-medium [&_em]:text-indigo-900 dark:[&_em]:bg-indigo-900/40 dark:[&_em]:text-indigo-200 ${className ?? ""}`.trim() : className ?? "";
+  if (highlighted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Tag,
+      {
+        className: highlightClass,
+        dangerouslySetInnerHTML: { __html: value }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tag, { className, children: value });
+}
+
+// src/components/RangeInput.tsx
+var import_react14 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function RangeInput({
+  attribute,
+  className,
+  styled = true,
+  header,
+  minPlaceholder = "Min",
+  maxPlaceholder = "Max"
+}) {
+  const { min, max, stats, setRange, clear } = useRange({ attribute });
+  const [localMin, setLocalMin] = (0, import_react14.useState)(min !== void 0 ? String(min) : "");
+  const [localMax, setLocalMax] = (0, import_react14.useState)(max !== void 0 ? String(max) : "");
+  (0, import_react14.useEffect)(() => {
+    setLocalMin(min !== void 0 ? String(min) : "");
+  }, [min]);
+  (0, import_react14.useEffect)(() => {
+    setLocalMax(max !== void 0 ? String(max) : "");
+  }, [max]);
+  const handleSubmit = (0, import_react14.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const parsedMin = localMin !== "" ? Number(localMin) : void 0;
+      const parsedMax = localMax !== "" ? Number(localMax) : void 0;
+      if (parsedMin === void 0 && parsedMax === void 0) {
+        clear();
+      } else {
+        setRange({
+          min: parsedMin !== void 0 && !Number.isNaN(parsedMin) ? parsedMin : void 0,
+          max: parsedMax !== void 0 && !Number.isNaN(parsedMax) ? parsedMax : void 0
+        });
+      }
+    },
+    [localMin, localMax, setRange, clear]
+  );
+  const handleMinChange = (0, import_react14.useCallback)(
+    (e) => setLocalMin(e.target.value),
+    []
+  );
+  const handleMaxChange = (0, import_react14.useCallback)(
+    (e) => setLocalMax(e.target.value),
+    []
+  );
+  const containerClass = styled ? `space-y-2 ${className ?? ""}`.trim() : className ?? "";
+  const inputClass = styled ? "w-full rounded border border-gray-200 bg-white px-2.5 py-1.5 text-sm outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" : "";
+  const buttonClass = styled ? "rounded bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: containerClass,
+      "aria-label": `Filter by ${attribute} range`,
+      children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: styled ? "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400" : void 0,
+            children: header
+          }
+        ),
+        stats && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: styled ? "text-xs text-gray-400 dark:text-gray-500" : void 0,
+            children: [
+              "Range: ",
+              stats.min,
+              " \u2013 ",
+              stats.max
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styled ? "flex items-center gap-2" : "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "input",
+            {
+              type: "number",
+              value: localMin,
+              onChange: handleMinChange,
+              placeholder: minPlaceholder,
+              "aria-label": `Minimum ${attribute}`,
+              className: inputClass
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "span",
+            {
+              className: styled ? "text-sm text-gray-400 dark:text-gray-500" : void 0,
+              "aria-hidden": "true",
+              children: "\u2013"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "input",
+            {
+              type: "number",
+              value: localMax,
+              onChange: handleMaxChange,
+              placeholder: maxPlaceholder,
+              "aria-label": `Maximum ${attribute}`,
+              className: inputClass
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "submit", className: buttonClass, children: "Go" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/PoweredBy.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function PoweredBy({
+  className,
+  styled = true,
+  href = "https://headband.dev"
+}) {
+  const linkClass = styled ? `inline-flex items-center gap-1.5 text-xs text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 ${className ?? ""}`.trim() : className ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: linkClass,
+      "aria-label": "Powered by Headband - Search as a Service",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "path",
+              {
+                d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        "Powered by ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { className: "font-semibold", children: "Headband" })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HeadbandError,
+  HeadbandProvider,
+  Highlight,
+  Hits,
+  Pagination,
+  PoweredBy,
+  RangeInput,
+  RefinementList,
+  SearchBox,
+  SortBy,
+  Stats,
+  headband,
+  useHeadbandContext,
+  useHighlight,
+  useHits,
+  usePagination,
+  useRange,
+  useRefinementList,
+  useSearch,
+  useSearchBox,
+  useSortBy,
+  useStats
+});