@placeslayer/sdk-react 1.0.0

package/dist/index.cjs

@@ -0,0 +1,337 @@
+"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 src_exports = {};
+__export(src_exports, {
+  CitiesDropdown: () => CitiesDropdown,
+  useAutocomplete: () => useAutocomplete,
+  useCities: () => useCities,
+  useCountries: () => useCountries,
+  usePlacesLayerClient: () => usePlacesLayerClient,
+  useProvinces: () => useProvinces
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/CitiesDropdown.tsx
+var import_react2 = require("react");
+var import_sdk = require("@placeslayer/sdk");
+
+// src/hooks/useAutocomplete.ts
+var import_react = require("react");
+var DEBOUNCE_MS = 300;
+function useAutocomplete(client, countryCode, query, opts) {
+  const [results, setResults] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const version = (0, import_react.useRef)(0);
+  const timerRef = (0, import_react.useRef)(void 0);
+  const delay = opts?.debounceMs ?? DEBOUNCE_MS;
+  const search = (0, import_react.useCallback)(() => {
+    const trimmed = query.trim();
+    if (!trimmed) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    const current = ++version.current;
+    setLoading(true);
+    client.autocomplete(countryCode, trimmed, { limit: opts?.limit }).then((data) => {
+      if (current === version.current) {
+        setResults(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (current === version.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    });
+  }, [client, countryCode, query, opts?.limit]);
+  (0, import_react.useEffect)(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(search, delay);
+    return () => clearTimeout(timerRef.current);
+  }, [search, delay]);
+  return { results, loading, error };
+}
+
+// src/CitiesDropdown.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CitiesDropdown({
+  apiKey,
+  country,
+  province,
+  onSelect,
+  limit = 10,
+  lang = "default",
+  placeholder = "Search cities...",
+  className,
+  baseUrl,
+  theme
+}) {
+  const clientRef = (0, import_react2.useRef)(null);
+  if (!clientRef.current || clientRef.current.apiKey !== apiKey) {
+    clientRef.current = new import_sdk.PlacesLayerClient({ apiKey, baseUrl });
+  }
+  const client = clientRef.current;
+  const [query, setQuery] = (0, import_react2.useState)("");
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react2.useState)(-1);
+  const containerRef = (0, import_react2.useRef)(null);
+  const prevCountry = (0, import_react2.useRef)(country);
+  const prevProvince = (0, import_react2.useRef)(province);
+  (0, import_react2.useEffect)(() => {
+    if (prevCountry.current !== country || prevProvince.current !== province) {
+      setQuery("");
+      setOpen(false);
+      prevCountry.current = country;
+      prevProvince.current = province;
+    }
+  }, [country, province]);
+  const { results, loading } = useAutocomplete(client, country, query, {
+    limit
+  });
+  const filtered = province ? results.filter(
+    (r) => r.type === "city" && r.province_code === province
+  ) : results;
+  (0, import_react2.useEffect)(() => {
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    setActiveIndex(-1);
+  }, [filtered.length]);
+  const handleSelect = (0, import_react2.useCallback)(
+    async (result) => {
+      setQuery(result.name);
+      setOpen(false);
+      const detail = await client.city(result.country_code, result.code);
+      onSelect(detail);
+    },
+    [client, onSelect]
+  );
+  const handleKeyDown = (e) => {
+    if (!open || filtered.length === 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex(
+          (prev) => prev < filtered.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex(
+          (prev) => prev > 0 ? prev - 1 : filtered.length - 1
+        );
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filtered.length) {
+          handleSelect(filtered[activeIndex]);
+        }
+        break;
+      case "Escape":
+        setOpen(false);
+        break;
+    }
+  };
+  const t = theme ?? {};
+  const borderColor = t.borderColor ?? "#d1d5db";
+  const borderRadius = t.borderRadius ?? "6px";
+  const background = t.background ?? "#fff";
+  const textColor = t.textColor ?? "inherit";
+  const secondaryTextColor = t.secondaryTextColor ?? "#6b7280";
+  const activeBackground = t.activeBackground ?? "#f3f4f6";
+  const fontSize = t.fontSize ?? "14px";
+  const s = {
+    container: { position: "relative", width: "100%" },
+    input: {
+      width: "100%",
+      padding: "8px 12px",
+      fontSize,
+      color: textColor,
+      background,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      outline: "none",
+      boxSizing: "border-box"
+    },
+    list: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      margin: "4px 0 0",
+      padding: 0,
+      listStyle: "none",
+      background,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      boxShadow: "0 4px 6px -1px rgba(0,0,0,.1)",
+      maxHeight: "240px",
+      overflowY: "auto",
+      zIndex: 50
+    },
+    item: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "8px 12px",
+      cursor: "pointer",
+      fontSize,
+      color: textColor
+    },
+    itemActive: { background: activeBackground },
+    name: { fontWeight: 500 },
+    province: { fontSize: "12px", color: secondaryTextColor },
+    status: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      margin: "4px 0 0",
+      padding: "8px 12px",
+      background,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      fontSize,
+      color: secondaryTextColor
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, style: s.container, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "text",
+        value: query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+        },
+        onFocus: () => query.trim() && setOpen(true),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        style: s.input,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeIndex >= 0 ? `pl-option-${activeIndex}` : void 0
+      }
+    ),
+    open && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { role: "listbox", style: s.list, children: filtered.map((result, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "li",
+      {
+        id: `pl-option-${i}`,
+        role: "option",
+        "aria-selected": i === activeIndex,
+        style: {
+          ...s.item,
+          ...i === activeIndex ? s.itemActive : {}
+        },
+        onMouseEnter: () => setActiveIndex(i),
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleSelect(result),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.name, children: result.name }),
+          result.province_name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.province, children: result.province_name })
+        ]
+      },
+      result.code
+    )) }),
+    open && loading && filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: s.status, children: "Loading..." })
+  ] });
+}
+
+// src/hooks/usePlacesLayer.ts
+var import_react3 = require("react");
+var import_sdk2 = require("@placeslayer/sdk");
+function usePlacesLayerClient(config) {
+  const ref = (0, import_react3.useRef)(null);
+  if (!ref.current || ref.current.apiKey !== config.apiKey) {
+    ref.current = new import_sdk2.PlacesLayerClient(config);
+  }
+  return ref.current;
+}
+
+// src/hooks/useAsync.ts
+var import_react4 = require("react");
+function useAsync(fn, deps) {
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [loading, setLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const version = (0, import_react4.useRef)(0);
+  const execute = (0, import_react4.useCallback)(() => {
+    const current = ++version.current;
+    setLoading(true);
+    setError(null);
+    fn().then((result) => {
+      if (current === version.current) {
+        setData(result);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (current === version.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    });
+  }, deps);
+  (0, import_react4.useEffect)(() => {
+    execute();
+  }, [execute]);
+  return { data, loading, error, refetch: execute };
+}
+
+// src/hooks/useCountries.ts
+function useCountries(client) {
+  return useAsync(() => client.countries(), [client]);
+}
+
+// src/hooks/useProvinces.ts
+function useProvinces(client, countryCode, opts) {
+  return useAsync(
+    () => client.provinces(countryCode, opts),
+    [client, countryCode, opts?.native]
+  );
+}
+
+// src/hooks/useCities.ts
+function useCities(client, countryCode, provinceCode, opts) {
+  return useAsync(
+    () => client.cities(countryCode, provinceCode, opts),
+    [client, countryCode, provinceCode, opts?.native]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CitiesDropdown,
+  useAutocomplete,
+  useCities,
+  useCountries,
+  usePlacesLayerClient,
+  useProvinces
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/CitiesDropdown.tsx","../src/hooks/useAutocomplete.ts","../src/hooks/usePlacesLayer.ts","../src/hooks/useAsync.ts","../src/hooks/useCountries.ts","../src/hooks/useProvinces.ts","../src/hooks/useCities.ts"],"sourcesContent":["export { CitiesDropdown, type CitiesDropdownProps, type CitiesDropdownTheme } from \"./CitiesDropdown\";\nexport { usePlacesLayerClient } from \"./hooks/usePlacesLayer\";\nexport { useCountries } from \"./hooks/useCountries\";\nexport { useProvinces } from \"./hooks/useProvinces\";\nexport { useCities } from \"./hooks/useCities\";\nexport { useAutocomplete, type AutocompleteState } from \"./hooks/useAutocomplete\";\nexport { type AsyncState } from \"./hooks/useAsync\";\n","import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n} from \"react\";\nimport {\n  PlacesLayerClient,\n  type AutocompleteResult,\n  type CityDetail,\n} from \"@placeslayer/sdk\";\nimport { useAutocomplete } from \"./hooks/useAutocomplete\";\n\nexport interface CitiesDropdownTheme {\n  /** Input border color (default: \"#d1d5db\") */\n  borderColor?: string;\n  /** Input border radius (default: \"6px\") */\n  borderRadius?: string;\n  /** Dropdown background color (default: \"#fff\") */\n  background?: string;\n  /** Main text color (default: \"inherit\") */\n  textColor?: string;\n  /** Secondary text color for province labels (default: \"#6b7280\") */\n  secondaryTextColor?: string;\n  /** Active/hovered item background (default: \"#f3f4f6\") */\n  activeBackground?: string;\n  /** Input font size (default: \"14px\") */\n  fontSize?: string;\n}\n\nexport interface CitiesDropdownProps {\n  apiKey: string;\n  country: string;\n  province?: string;\n  onSelect: (city: CityDetail) => void;\n  limit?: number;\n  lang?: \"default\" | \"native\";\n  placeholder?: string;\n  className?: string;\n  baseUrl?: string;\n  /** Customize dropdown colors and appearance */\n  theme?: CitiesDropdownTheme;\n}\n\nexport function CitiesDropdown({\n  apiKey,\n  country,\n  province,\n  onSelect,\n  limit = 10,\n  lang = \"default\",\n  placeholder = \"Search cities...\",\n  className,\n  baseUrl,\n  theme,\n}: CitiesDropdownProps) {\n  const clientRef = useRef<PlacesLayerClient | null>(null);\n  if (\n    !clientRef.current ||\n    (clientRef.current as unknown as { apiKey: string }).apiKey !== apiKey\n  ) {\n    clientRef.current = new PlacesLayerClient({ apiKey, baseUrl });\n  }\n  const client = clientRef.current;\n\n  const [query, setQuery] = useState(\"\");\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Reset input when country or province changes\n  const prevCountry = useRef(country);\n  const prevProvince = useRef(province);\n  useEffect(() => {\n    if (prevCountry.current !== country || prevProvince.current !== province) {\n      setQuery(\"\");\n      setOpen(false);\n      prevCountry.current = country;\n      prevProvince.current = province;\n    }\n  }, [country, province]);\n\n  const { results, loading } = useAutocomplete(client, country, query, {\n    limit,\n  });\n\n  const filtered = province\n    ? results.filter(\n        (r) => r.type === \"city\" && r.province_code === province\n      )\n    : results;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, []);\n\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, [filtered.length]);\n\n  const handleSelect = useCallback(\n    async (result: AutocompleteResult) => {\n      setQuery(result.name);\n      setOpen(false);\n\n      const detail = await client.city(result.country_code, result.code);\n      onSelect(detail);\n    },\n    [client, onSelect]\n  );\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!open || filtered.length === 0) return;\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setActiveIndex((prev) =>\n          prev < filtered.length - 1 ? prev + 1 : 0\n        );\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setActiveIndex((prev) =>\n          prev > 0 ? prev - 1 : filtered.length - 1\n        );\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (activeIndex >= 0 && activeIndex < filtered.length) {\n          handleSelect(filtered[activeIndex]);\n        }\n        break;\n      case \"Escape\":\n        setOpen(false);\n        break;\n    }\n  };\n\n  const t = theme ?? {};\n  const borderColor = t.borderColor ?? \"#d1d5db\";\n  const borderRadius = t.borderRadius ?? \"6px\";\n  const background = t.background ?? \"#fff\";\n  const textColor = t.textColor ?? \"inherit\";\n  const secondaryTextColor = t.secondaryTextColor ?? \"#6b7280\";\n  const activeBackground = t.activeBackground ?? \"#f3f4f6\";\n  const fontSize = t.fontSize ?? \"14px\";\n\n  const s: Record<string, CSSProperties> = {\n    container: { position: \"relative\", width: \"100%\" },\n    input: {\n      width: \"100%\",\n      padding: \"8px 12px\",\n      fontSize,\n      color: textColor,\n      background,\n      border: `1px solid ${borderColor}`,\n      borderRadius,\n      outline: \"none\",\n      boxSizing: \"border-box\",\n    },\n    list: {\n      position: \"absolute\",\n      top: \"100%\",\n      left: 0,\n      right: 0,\n      margin: \"4px 0 0\",\n      padding: 0,\n      listStyle: \"none\",\n      background,\n      border: `1px solid ${borderColor}`,\n      borderRadius,\n      boxShadow: \"0 4px 6px -1px rgba(0,0,0,.1)\",\n      maxHeight: \"240px\",\n      overflowY: \"auto\",\n      zIndex: 50,\n    },\n    item: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      padding: \"8px 12px\",\n      cursor: \"pointer\",\n      fontSize,\n      color: textColor,\n    },\n    itemActive: { background: activeBackground },\n    name: { fontWeight: 500 },\n    province: { fontSize: \"12px\", color: secondaryTextColor },\n    status: {\n      position: \"absolute\",\n      top: \"100%\",\n      left: 0,\n      right: 0,\n      margin: \"4px 0 0\",\n      padding: \"8px 12px\",\n      background,\n      border: `1px solid ${borderColor}`,\n      borderRadius,\n      fontSize,\n      color: secondaryTextColor,\n    },\n  };\n\n  return (\n    <div ref={containerRef} style={s.container} className={className}>\n      <input\n        type=\"text\"\n        value={query}\n        onChange={(e) => {\n          setQuery(e.target.value);\n          setOpen(true);\n        }}\n        onFocus={() => query.trim() && setOpen(true)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        style={s.input}\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={\n          activeIndex >= 0 ? `pl-option-${activeIndex}` : undefined\n        }\n      />\n      {open && filtered.length > 0 && (\n        <ul role=\"listbox\" style={s.list}>\n          {filtered.map((result, i) => (\n            <li\n              key={result.code}\n              id={`pl-option-${i}`}\n              role=\"option\"\n              aria-selected={i === activeIndex}\n              style={{\n                ...s.item,\n                ...(i === activeIndex ? s.itemActive : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={() => handleSelect(result)}\n            >\n              <span style={s.name}>{result.name}</span>\n              {result.province_name && (\n                <span style={s.province}>{result.province_name}</span>\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n      {open && loading && filtered.length === 0 && (\n        <div style={s.status}>Loading...</div>\n      )}\n    </div>\n  );\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { AutocompleteResult, PlacesLayerClient } from \"@placeslayer/sdk\";\n\nconst DEBOUNCE_MS = 300;\n\nexport interface AutocompleteState {\n  results: AutocompleteResult[];\n  loading: boolean;\n  error: Error | null;\n}\n\nexport function useAutocomplete(\n  client: PlacesLayerClient,\n  countryCode: string,\n  query: string,\n  opts?: { limit?: number; debounceMs?: number }\n): AutocompleteState {\n  const [results, setResults] = useState<AutocompleteResult[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n  const version = useRef(0);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const delay = opts?.debounceMs ?? DEBOUNCE_MS;\n\n  const search = useCallback(() => {\n    const trimmed = query.trim();\n    if (!trimmed) {\n      setResults([]);\n      setLoading(false);\n      return;\n    }\n\n    const current = ++version.current;\n    setLoading(true);\n\n    client\n      .autocomplete(countryCode, trimmed, { limit: opts?.limit })\n      .then((data) => {\n        if (current === version.current) {\n          setResults(data);\n          setLoading(false);\n        }\n      })\n      .catch((err) => {\n        if (current === version.current) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setLoading(false);\n        }\n      });\n  }, [client, countryCode, query, opts?.limit]);\n\n  useEffect(() => {\n    clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(search, delay);\n    return () => clearTimeout(timerRef.current);\n  }, [search, delay]);\n\n  return { results, loading, error };\n}\n","import { useRef } from \"react\";\nimport { PlacesLayerClient, type PlacesLayerConfig } from \"@placeslayer/sdk\";\n\nexport function usePlacesLayerClient(config: PlacesLayerConfig): PlacesLayerClient {\n  const ref = useRef<PlacesLayerClient | null>(null);\n\n  if (!ref.current || (ref.current as unknown as { apiKey: string }).apiKey !== config.apiKey) {\n    ref.current = new PlacesLayerClient(config);\n  }\n\n  return ref.current;\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport interface AsyncState<T> {\n  data: T | null;\n  loading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useAsync<T>(\n  fn: () => Promise<T>,\n  deps: unknown[]\n): AsyncState<T> {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const version = useRef(0);\n\n  const execute = useCallback(() => {\n    const current = ++version.current;\n    setLoading(true);\n    setError(null);\n\n    fn()\n      .then((result) => {\n        if (current === version.current) {\n          setData(result);\n          setLoading(false);\n        }\n      })\n      .catch((err) => {\n        if (current === version.current) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setLoading(false);\n        }\n      });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  useEffect(() => {\n    execute();\n  }, [execute]);\n\n  return { data, loading, error, refetch: execute };\n}\n","import type { Country, PlacesLayerClient } from \"@placeslayer/sdk\";\nimport { type AsyncState, useAsync } from \"./useAsync\";\n\nexport function useCountries(client: PlacesLayerClient): AsyncState<Country[]> {\n  return useAsync(() => client.countries(), [client]);\n}\n","import type { PlacesLayerClient, Province } from \"@placeslayer/sdk\";\nimport { type AsyncState, useAsync } from \"./useAsync\";\n\nexport function useProvinces(\n  client: PlacesLayerClient,\n  countryCode: string,\n  opts?: { native?: boolean }\n): AsyncState<Province[]> {\n  return useAsync(\n    () => client.provinces(countryCode, opts),\n    [client, countryCode, opts?.native]\n  );\n}\n","import type { City, PlacesLayerClient } from \"@placeslayer/sdk\";\nimport { type AsyncState, useAsync } from \"./useAsync\";\n\nexport function useCities(\n  client: PlacesLayerClient,\n  countryCode: string,\n  provinceCode: string,\n  opts?: { native?: boolean }\n): AsyncState<City[]> {\n  return useAsync(\n    () => client.cities(countryCode, provinceCode, opts),\n    [client, countryCode, provinceCode, opts?.native]\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAOO;AACP,iBAIO;;;ACZP,mBAAyD;AAGzD,IAAM,cAAc;AAQb,SAAS,gBACd,QACA,aACA,OACA,MACmB;AACnB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA+B,CAAC,CAAC;AAC/D,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAuB,IAAI;AACrD,QAAM,cAAU,qBAAO,CAAC;AACxB,QAAM,eAAW,qBAAkD,MAAS;AAE5E,QAAM,QAAQ,MAAM,cAAc;AAElC,QAAM,aAAS,0BAAY,MAAM;AAC/B,UAAM,UAAU,MAAM,KAAK;AAC3B,QAAI,CAAC,SAAS;AACZ,iBAAW,CAAC,CAAC;AACb,iBAAW,KAAK;AAChB;AAAA,IACF;AAEA,UAAM,UAAU,EAAE,QAAQ;AAC1B,eAAW,IAAI;AAEf,WACG,aAAa,aAAa,SAAS,EAAE,OAAO,MAAM,MAAM,CAAC,EACzD,KAAK,CAAC,SAAS;AACd,UAAI,YAAY,QAAQ,SAAS;AAC/B,mBAAW,IAAI;AACf,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,UAAI,YAAY,QAAQ,SAAS;AAC/B,iBAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,GAAG,CAAC,CAAC;AAC5D,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF,CAAC;AAAA,EACL,GAAG,CAAC,QAAQ,aAAa,OAAO,MAAM,KAAK,CAAC;AAE5C,8BAAU,MAAM;AACd,iBAAa,SAAS,OAAO;AAC7B,aAAS,UAAU,WAAW,QAAQ,KAAK;AAC3C,WAAO,MAAM,aAAa,SAAS,OAAO;AAAA,EAC5C,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO,EAAE,SAAS,SAAS,MAAM;AACnC;;;AD8JM;AA3KC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,gBAAY,sBAAiC,IAAI;AACvD,MACE,CAAC,UAAU,WACV,UAAU,QAA0C,WAAW,QAChE;AACA,cAAU,UAAU,IAAI,6BAAkB,EAAE,QAAQ,QAAQ,CAAC;AAAA,EAC/D;AACA,QAAM,SAAS,UAAU;AAEzB,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAS,EAAE;AACjD,QAAM,mBAAe,sBAAuB,IAAI;AAGhD,QAAM,kBAAc,sBAAO,OAAO;AAClC,QAAM,mBAAe,sBAAO,QAAQ;AACpC,+BAAU,MAAM;AACd,QAAI,YAAY,YAAY,WAAW,aAAa,YAAY,UAAU;AACxE,eAAS,EAAE;AACX,cAAQ,KAAK;AACb,kBAAY,UAAU;AACtB,mBAAa,UAAU;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,QAAM,EAAE,SAAS,QAAQ,IAAI,gBAAgB,QAAQ,SAAS,OAAO;AAAA,IACnE;AAAA,EACF,CAAC;AAED,QAAM,WAAW,WACb,QAAQ;AAAA,IACN,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,kBAAkB;AAAA,EAClD,IACA;AAEJ,+BAAU,MAAM;AACd,UAAM,UAAU,CAAC,MAAkB;AACjC,UACE,aAAa,WACb,CAAC,aAAa,QAAQ,SAAS,EAAE,MAAc,GAC/C;AACA,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,OAAO;AAC9C,WAAO,MAAM,SAAS,oBAAoB,aAAa,OAAO;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,mBAAe,EAAE;AAAA,EACnB,GAAG,CAAC,SAAS,MAAM,CAAC;AAEpB,QAAM,mBAAe;AAAA,IACnB,OAAO,WAA+B;AACpC,eAAS,OAAO,IAAI;AACpB,cAAQ,KAAK;AAEb,YAAM,SAAS,MAAM,OAAO,KAAK,OAAO,cAAc,OAAO,IAAI;AACjE,eAAS,MAAM;AAAA,IACjB;AAAA,IACA,CAAC,QAAQ,QAAQ;AAAA,EACnB;AAEA,QAAM,gBAAgB,CAAC,MAAuC;AAC5D,QAAI,CAAC,QAAQ,SAAS,WAAW,EAAG;AAEpC,YAAQ,EAAE,KAAK;AAAA,MACb,KAAK;AACH,UAAE,eAAe;AACjB;AAAA,UAAe,CAAC,SACd,OAAO,SAAS,SAAS,IAAI,OAAO,IAAI;AAAA,QAC1C;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAe;AACjB;AAAA,UAAe,CAAC,SACd,OAAO,IAAI,OAAO,IAAI,SAAS,SAAS;AAAA,QAC1C;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAe;AACjB,YAAI,eAAe,KAAK,cAAc,SAAS,QAAQ;AACrD,uBAAa,SAAS,WAAW,CAAC;AAAA,QACpC;AACA;AAAA,MACF,KAAK;AACH,gBAAQ,KAAK;AACb;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,IAAI,SAAS,CAAC;AACpB,QAAM,cAAc,EAAE,eAAe;AACrC,QAAM,eAAe,EAAE,gBAAgB;AACvC,QAAM,aAAa,EAAE,cAAc;AACnC,QAAM,YAAY,EAAE,aAAa;AACjC,QAAM,qBAAqB,EAAE,sBAAsB;AACnD,QAAM,mBAAmB,EAAE,oBAAoB;AAC/C,QAAM,WAAW,EAAE,YAAY;AAE/B,QAAM,IAAmC;AAAA,IACvC,WAAW,EAAE,UAAU,YAAY,OAAO,OAAO;AAAA,IACjD,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,QAAQ,aAAa,WAAW;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,QAAQ,aAAa,WAAW;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA,OAAO;AAAA,IACT;AAAA,IACA,YAAY,EAAE,YAAY,iBAAiB;AAAA,IAC3C,MAAM,EAAE,YAAY,IAAI;AAAA,IACxB,UAAU,EAAE,UAAU,QAAQ,OAAO,mBAAmB;AAAA,IACxD,QAAQ;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT;AAAA,MACA,QAAQ,aAAa,WAAW;AAAA,MAChC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SACE,6CAAC,SAAI,KAAK,cAAc,OAAO,EAAE,WAAW,WAC1C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,kBAAQ,IAAI;AAAA,QACd;AAAA,QACA,SAAS,MAAM,MAAM,KAAK,KAAK,QAAQ,IAAI;AAAA,QAC3C,WAAW;AAAA,QACX;AAAA,QACA,OAAO,EAAE;AAAA,QACT,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,qBAAkB;AAAA,QAClB,yBACE,eAAe,IAAI,aAAa,WAAW,KAAK;AAAA;AAAA,IAEpD;AAAA,IACC,QAAQ,SAAS,SAAS,KACzB,4CAAC,QAAG,MAAK,WAAU,OAAO,EAAE,MACzB,mBAAS,IAAI,CAAC,QAAQ,MACrB;AAAA,MAAC;AAAA;AAAA,QAEC,IAAI,aAAa,CAAC;AAAA,QAClB,MAAK;AAAA,QACL,iBAAe,MAAM;AAAA,QACrB,OAAO;AAAA,UACL,GAAG,EAAE;AAAA,UACL,GAAI,MAAM,cAAc,EAAE,aAAa,CAAC;AAAA,QAC1C;AAAA,QACA,cAAc,MAAM,eAAe,CAAC;AAAA,QACpC,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM,aAAa,MAAM;AAAA,QAElC;AAAA,sDAAC,UAAK,OAAO,EAAE,MAAO,iBAAO,MAAK;AAAA,UACjC,OAAO,iBACN,4CAAC,UAAK,OAAO,EAAE,UAAW,iBAAO,eAAc;AAAA;AAAA;AAAA,MAd5C,OAAO;AAAA,IAgBd,CACD,GACH;AAAA,IAED,QAAQ,WAAW,SAAS,WAAW,KACtC,4CAAC,SAAI,OAAO,EAAE,QAAQ,wBAAU;AAAA,KAEpC;AAEJ;;;AExQA,IAAAC,gBAAuB;AACvB,IAAAC,cAA0D;AAEnD,SAAS,qBAAqB,QAA8C;AACjF,QAAM,UAAM,sBAAiC,IAAI;AAEjD,MAAI,CAAC,IAAI,WAAY,IAAI,QAA0C,WAAW,OAAO,QAAQ;AAC3F,QAAI,UAAU,IAAI,8BAAkB,MAAM;AAAA,EAC5C;AAEA,SAAO,IAAI;AACb;;;ACXA,IAAAC,gBAAyD;AASlD,SAAS,SACd,IACA,MACe;AACf,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAmB,IAAI;AAC/C,QAAM,CAAC,SAAS,UAAU,QAAI,wBAAS,IAAI;AAC3C,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAuB,IAAI;AACrD,QAAM,cAAU,sBAAO,CAAC;AAExB,QAAM,cAAU,2BAAY,MAAM;AAChC,UAAM,UAAU,EAAE,QAAQ;AAC1B,eAAW,IAAI;AACf,aAAS,IAAI;AAEb,OAAG,EACA,KAAK,CAAC,WAAW;AAChB,UAAI,YAAY,QAAQ,SAAS;AAC/B,gBAAQ,MAAM;AACd,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,UAAI,YAAY,QAAQ,SAAS;AAC/B,iBAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,GAAG,CAAC,CAAC;AAC5D,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF,CAAC;AAAA,EAEL,GAAG,IAAI;AAEP,+BAAU,MAAM;AACd,YAAQ;AAAA,EACV,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,EAAE,MAAM,SAAS,OAAO,SAAS,QAAQ;AAClD;;;ACzCO,SAAS,aAAa,QAAkD;AAC7E,SAAO,SAAS,MAAM,OAAO,UAAU,GAAG,CAAC,MAAM,CAAC;AACpD;;;ACFO,SAAS,aACd,QACA,aACA,MACwB;AACxB,SAAO;AAAA,IACL,MAAM,OAAO,UAAU,aAAa,IAAI;AAAA,IACxC,CAAC,QAAQ,aAAa,MAAM,MAAM;AAAA,EACpC;AACF;;;ACTO,SAAS,UACd,QACA,aACA,cACA,MACoB;AACpB,SAAO;AAAA,IACL,MAAM,OAAO,OAAO,aAAa,cAAc,IAAI;AAAA,IACnD,CAAC,QAAQ,aAAa,cAAc,MAAM,MAAM;AAAA,EAClD;AACF;","names":["import_react","import_react","import_sdk","import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CityDetail, PlacesLayerConfig, PlacesLayerClient, Country, Province, City, AutocompleteResult } from '@placeslayer/sdk';
+
+interface CitiesDropdownTheme {
+    /** Input border color (default: "#d1d5db") */
+    borderColor?: string;
+    /** Input border radius (default: "6px") */
+    borderRadius?: string;
+    /** Dropdown background color (default: "#fff") */
+    background?: string;
+    /** Main text color (default: "inherit") */
+    textColor?: string;
+    /** Secondary text color for province labels (default: "#6b7280") */
+    secondaryTextColor?: string;
+    /** Active/hovered item background (default: "#f3f4f6") */
+    activeBackground?: string;
+    /** Input font size (default: "14px") */
+    fontSize?: string;
+}
+interface CitiesDropdownProps {
+    apiKey: string;
+    country: string;
+    province?: string;
+    onSelect: (city: CityDetail) => void;
+    limit?: number;
+    lang?: "default" | "native";
+    placeholder?: string;
+    className?: string;
+    baseUrl?: string;
+    /** Customize dropdown colors and appearance */
+    theme?: CitiesDropdownTheme;
+}
+declare function CitiesDropdown({ apiKey, country, province, onSelect, limit, lang, placeholder, className, baseUrl, theme, }: CitiesDropdownProps): react_jsx_runtime.JSX.Element;
+
+declare function usePlacesLayerClient(config: PlacesLayerConfig): PlacesLayerClient;
+
+interface AsyncState<T> {
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => void;
+}
+
+declare function useCountries(client: PlacesLayerClient): AsyncState<Country[]>;
+
+declare function useProvinces(client: PlacesLayerClient, countryCode: string, opts?: {
+    native?: boolean;
+}): AsyncState<Province[]>;
+
+declare function useCities(client: PlacesLayerClient, countryCode: string, provinceCode: string, opts?: {
+    native?: boolean;
+}): AsyncState<City[]>;
+
+interface AutocompleteState {
+    results: AutocompleteResult[];
+    loading: boolean;
+    error: Error | null;
+}
+declare function useAutocomplete(client: PlacesLayerClient, countryCode: string, query: string, opts?: {
+    limit?: number;
+    debounceMs?: number;
+}): AutocompleteState;
+
+export { type AsyncState, type AutocompleteState, CitiesDropdown, type CitiesDropdownProps, type CitiesDropdownTheme, useAutocomplete, useCities, useCountries, usePlacesLayerClient, useProvinces };

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CityDetail, PlacesLayerConfig, PlacesLayerClient, Country, Province, City, AutocompleteResult } from '@placeslayer/sdk';
+
+interface CitiesDropdownTheme {
+    /** Input border color (default: "#d1d5db") */
+    borderColor?: string;
+    /** Input border radius (default: "6px") */
+    borderRadius?: string;
+    /** Dropdown background color (default: "#fff") */
+    background?: string;
+    /** Main text color (default: "inherit") */
+    textColor?: string;
+    /** Secondary text color for province labels (default: "#6b7280") */
+    secondaryTextColor?: string;
+    /** Active/hovered item background (default: "#f3f4f6") */
+    activeBackground?: string;
+    /** Input font size (default: "14px") */
+    fontSize?: string;
+}
+interface CitiesDropdownProps {
+    apiKey: string;
+    country: string;
+    province?: string;
+    onSelect: (city: CityDetail) => void;
+    limit?: number;
+    lang?: "default" | "native";
+    placeholder?: string;
+    className?: string;
+    baseUrl?: string;
+    /** Customize dropdown colors and appearance */
+    theme?: CitiesDropdownTheme;
+}
+declare function CitiesDropdown({ apiKey, country, province, onSelect, limit, lang, placeholder, className, baseUrl, theme, }: CitiesDropdownProps): react_jsx_runtime.JSX.Element;
+
+declare function usePlacesLayerClient(config: PlacesLayerConfig): PlacesLayerClient;
+
+interface AsyncState<T> {
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => void;
+}
+
+declare function useCountries(client: PlacesLayerClient): AsyncState<Country[]>;
+
+declare function useProvinces(client: PlacesLayerClient, countryCode: string, opts?: {
+    native?: boolean;
+}): AsyncState<Province[]>;
+
+declare function useCities(client: PlacesLayerClient, countryCode: string, provinceCode: string, opts?: {
+    native?: boolean;
+}): AsyncState<City[]>;
+
+interface AutocompleteState {
+    results: AutocompleteResult[];
+    loading: boolean;
+    error: Error | null;
+}
+declare function useAutocomplete(client: PlacesLayerClient, countryCode: string, query: string, opts?: {
+    limit?: number;
+    debounceMs?: number;
+}): AutocompleteState;
+
+export { type AsyncState, type AutocompleteState, CitiesDropdown, type CitiesDropdownProps, type CitiesDropdownTheme, useAutocomplete, useCities, useCountries, usePlacesLayerClient, useProvinces };